This project was developed as part of the Hypermedia Application course at Politecnico di Milano. It involved both design and implementation phases of creating a web application using modern technologies and best practices. The project showcases a venture capital website, featuring various functionalities such as showcasing team members, funded projects, and thematic areas of investment.
Grade: 30
You can find the db schema in the deliverables folder of the project.
Make sure to be confident with the concepts of venv and pip before following the quick start section.
- Move to the
backendfolder of the project - Create or activate your venv:
python -m venv <name of your virtual environment>
.\<name of your virtual environment>\Scripts\activate
- Install the required packages:
pip install -r requirements.txt - Add the db credentials to the
.envfile (create it if missing). In particular, you need to define thehost,user,passwordanddatabaseenvironment variables. - Run the flask application:
flask --app server run - Go to the provided url to check that everything is working correctly
A virtual environment is an isolated environment where you can install packages without affecting the global Python environment.
To create a virtual environment, navigate to your project directory in your command prompt or terminal and run the command python -m venv <name of your virtual environment>.
To activate the virtual environment, run the command source <name of your virtual environment>/bin/activate on macOS/Linux or .\<name of your virtual environment>\Scripts\activate on Windows.
Once activated, any packages you install will be installed in the virtual environment instead of the global Python environment. You can confirm that you are in the virtual environment by checking the prefix in your command prompt or terminal.
To deactivate the virtual environment, simply run the command deactivate.
pip is the package installer for Python. You can use pip to install packages from the Python Package Index and other indexes.
To use pip, first make sure you have Python installed on your computer. You can check if Python is installed by running the command python --version in your command prompt or terminal.
| Command | Description |
|---|---|
pip install <package name> |
To install new packages |
pip install -r requirements.txt |
To install packages from a requirements.txt file |
pip list |
To list the installed packages |
pip uninstall <package name> |
To uninstall a package |
pip freeze > requirements.txt |
To generate the requirements.txt file |
Dotenv is a Python library that allows you to load environment variables from a .env file.
Create a new file in your project directory called .env. This file should contain key-value pairs, with each variable on a separate line. For example:
DATABASE_URL=postgres://user:password@localhost/mydatabase
SECRET_KEY=mysecretkey
In your Python code, import the dotenv library and call the load_dotenv function to load the environment variables from the .env file. For example:
import os
from dotenv import load_dotenv
load_dotenv()
db_url = os.getenv("DATABASE_URL")
secret_key = os.getenv("SECRET_KEY")
-
Move to the
frontendfolder of the project -
Run the
npm icommand. This command will read all the dependencies that were defined in thepackage.jsonfile and automatically installs them for you. -
Set the
VITE_APP_URLto the server's url on the.envfile of your frontend (create it if missing). Example:VITE_APP_URL=http://127.0.0.1:5000 -
Run the
npm run devcommand to start your application -
Go to the provided url to make sure that everything is working correctly
The idea is the same as described in the backend section, but with some changes. Refer to this link for a detailed guide.
Recommended: GitHub Desktop | Simple collaboration from your desktop
General pattern:
Pullbefore you start working to check what has been changed- Do your awesome stuff
Now, let's say you're ready to push your incredibly valuable work for everyone else to enjoy, you should do something like that:
Pullagain: someone else could've pushed something while you were working- Resolve possible conflicts. When in doubt, ask to your very friendly colleagues for lighting fast and reliable advice
Commityour changesPushyour changes
Also, there's a really cool guide on the useful resources below :D
We are called HyperMeow for a reason
TypeScript: The starting point for learning TypeScript