This is a portfolio website built using Django 4, Django REST Framework 3, Next.js 12, and Material UI 5 that uses a PostgreSQL database to store data.
- Prerequisites
- Installation
- Running the application
- Adding data to the application
- Customizing the application
- Copyright and License
Install the following prerequisites:
From the root directory run:
cd backend
python -m venv venv
From the backend directory run:
On macOS:
source venv/bin/activate
On Windows:
venv\scripts\activate
From the backend directory run:
pip install -r requirements.txt
With PostgreSQL up and running, in a new Terminal window run:
dropdb --if-exists portfolio
Start psql, which is a terminal-based front-end to PostgreSQL, by running the command:
psql postgres
Create a new PostgreSQL database:
CREATE DATABASE portfolio;
Create a new database admin user:
CREATE USER yourusername WITH SUPERUSER PASSWORD 'yourpassword';
To quit psql, run:
\q
From the backend directory run:
touch config/.env
The touch command will create the .env file in the backend/config directory. This command works on Mac and Linux but not on Windows. If you are a Windows user, instead of using the command line, you can create the .env file manually by navigating in Visual Studio Code to the Explorer, clicking on the config directory (inside the backend directory), and selecting the option New File.
Next, declare environment variables in the .env file. Make sure you don't use quotation marks around the strings.
SECRET_KEY=yoursecretkey
DEBUG=TRUE
DATABASE_NAME=portfolio
DATABASE_USER=yourusername
DATABASE_PASS=yourpassword
DATABASE_HOST=localhost
FRONTEND_URL=http://localhost:3000
From the backend directory run:
python manage.py makemigrations
python manage.py migrate
From the backend directory run:
python manage.py createsuperuser
When prompted, enter a username, email, and password.
From the root directory run:
cd frontend
npm install
From the frontend directory run:
touch .env
The touch command will create the .env file in the frontend directory. This command works on Mac and Linux but not on Windows. If you are a Windows user, instead of using the command line, you can create the .env file manually by navigating in Visual Studio Code to the Explorer, clicking on the frontend directory, and selecting the option New File.
Next, declare environment variables in the .env file. Make sure you don't use quotation marks around the strings.
BACKEND_HOST=127.0.0.1
BACKEND_URL=http://127.0.0.1:8000
To run the application, you need to have both the backend and the frontend up and running.
From the backend directory run:
python manage.py runserver
From the frontend directory run:
npm run dev
Go to http://localhost:3000/ to view the application.
Add data through Django Admin.
Go to http://127.0.0.1:8000/admin to access the Django Admin interface and sign in using the admin credentials.
This section describes how to customize the application.
To modify the title and subtitle of the About section, make changes in the frontend/src/components/About.js
file.
To modify the title and subtitle of the Projects section, make changes in the frontend/src/components/Projects.js
file.
To modify the title and subtitle of the Technologies section, make changes in the frontend/src/components/Technologies.js
file.
To modify the title and subtitle of the Testimonials section, make changes in the frontend/src/components/Testimonials.js
file.
To modify the title and subtitle of the Contact section, make changes in the frontend/src/components/Contact.js
file.
To modify the colors in the application, make changes in the frontend/src/theme/theme.js
file.
To modify the fonts in the application, first, add a new font to the frontend/src/pages/_document.js
file, and then make changes in the frontend/src/theme/typography.js
file.
To modify the logo in the application, make changes in the frontend/src/layout/Header.js
and frontend/src/layout/Sidebar.js
files.
To modify the two buttons in the Hero section, make changes in the frontend/src/components/HeroButtons.js
file.
Copyright © 2022 Bob's Programming Academy. Code released under the MIT license.