Martin Bullman Portfolio Application

https://martinbullman.xyz

A modern portfolio application built with Vue 3, Nuxt 3, Vuetify 3, and Django to showcase cutting-edge web development practices. 🚀

Prerequisites

Before running the application, ensure you have the following installed:

• Node.js (v20.10.0 or later)
• NPM (v10.2.3 or later)
• Python (v3.11.10 or later)
• PIP (v24.3.1 or later)
• Docker & Docker Compose

Installation

Set up the project using either Docker Compose for a seamless, containerized or manually to allow more control for debugging and testing.

1. Clone the Repository

git clone https://github.com/your-username/personal-web-app.git

2. Environment Variables

The application requires separate .env files for both the frontend and backend to ensure proper management of environment-specific configurations and sensitive data.

Frontend (frontend/.env):

1. Navigate to the frontend directory:

cd frontend

2. Create a file named .env:

touch .env

3. Add the required environment variables:

BASE_URL=http://localhost:3000
API_BASE_URL=http://localhost:8000/api/v1

GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
GOOGLE_RECAPTCHA_SITE_KEY=your_recaptcha_site_key_here

4. Navigate back to root directory:

cd .. 

Backend (backend/martinbullman/.env):

1. Navigate to the backend/martinbullman directory:

cd backend/martinbullman

2. Create a file named .env:

touch .env

3. Add the required environment variables:

APP_NAME=MartinBullmanApp
APP_ENV=local
APP_DEBUG=True
APP_URL=http://localhost:8000
API_URL=http://localhost:8000/api/v1

SECRET_KEY=your_django_secret_key_here

# Database Configuration (choose one)
# Localhost
#DB_CONNECTION=postgres
#DB_HOST=127.0.0.1
#DB_PORT=5432
#DB_DATABASE=your_database_name_here
#DB_USERNAME=your_database_user_here
#DB_PASSWORD=your_database_password_here

# Docker
DB_CONNECTION=postgres
DB_HOST=db
DB_PORT=5432
DB_DATABASE=your_docker_database_name_here
DB_USERNAME=postgres
DB_PASSWORD=postgres

# Email Configuration
EMAIL_HOST=your_email_host_here
EMAIL_PORT=2525
EMAIL_USERNAME=your_email_username_here
EMAIL_PASSWORD=your_email_password_here
[email protected]
EMAIL_FROM_NAME=Your Name or App Name

# MailJet API
MAILJET_API_KEY=your_mailjet_api_key_here
MAILJET_API_SECRET=your_mailjet_api_secret_here

# Spotify API
SPOTIFY_CLIENT_ID=your_spotify_client_id_here
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret_here
SPOTIFY_REFRESH_TOKEN=your_spotify_refresh_token_here

# Google reCAPTCHA
GOOGLE_RECAPTCHA_SCORE=0.5  # Recommended score threshold
GOOGLE_RECAPTCHA_SECRET_KEY=your_recaptcha_secret_key_here

# API Keys
WEATHER_API_KEY=your_weather_api_key_here
NASA_API_KEY=your_nasa_api_key_here
SLACK_REFRESH_TOKEN=your_slack_refresh_token_here
OPENAI_API_KEY=your_openai_api_key_here
PAGE_SPEED_API_KEY=your_google_page_speed_api_key_here

4. Navigate back to root directory:

cd ../../ 

3. Application Setup

Docker Compose

You can use the Docker Compose command to build and run the application seamlessly. The backend .env file should be passed as a parameter to ensure the services are correctly configured. The docker-compose.yml file orchestrates both the frontend and backend services, setting them up together for a fully integrated development environment.

1. Build Docker containers:

docker-compose --env-file ./backend/martinbullman/.env build

2. Start Docker containers:

docker-compose --env-file ./backend/martinbullman/.env up

3. Stop Docker containers:

docker-compose down

4. Access the Application:

Frontend: http://localhost:3000
Backend: http://localhost:8000

Manual Setup

Follow these instructions to manually set up and run the application without Docker. This approach allows you to configure and run the frontend and backend services independently for development and debugging purposes.

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Run development server:

npm run dev

4. Access App at:

http://localhost:3000

5. Run Nuxt build:

npm run build

6. Return to the project root directory:

cd ..

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Create virtual environment and activate:

python -m venv venv
source venv/bin/activate

3. Install dependencies:

pip install -r martinbullman/requirements.txt

4. Run database migrations for the Django backend:

python martinbullman/manage.py migrate

5. Run development server:

python martinbullman/manage.py runserver 

6. Access API at:

http://localhost:8000/api/v1

7. Return to the project root directory:

cd ..

Testing

Frontend

Run unit tests for the frontend using Vitest:

1. Navigate to the frontend directory:

cd frontend

2. Run tests:

npm run test

Backend

Run unit tests for the backend using Django:

1. Navigate to the backend/martinbullman directory:

cd backend/martinbullman

2. Run tests:

python manage.py test

Linting

Frontend

Run linting for the frontend using Eslint:

1. Navigate to the frontend directory:

cd frontend

2. Run lint:

npm run lint

Backend

Run linting for the backend using Pylint:

1. Navigate to the backend directory:

cd backend

2. Run lint:

pylint $(git ls-files '*.py') 

Contributing

Feel free to fork this repository, raise issues, or submit pull requests. Contributions are welcome and encouraged under the terms of the project's license.

Please ensure that your contributions follow the project's coding standards and guidelines. After forking, clone your copy of the repository, create a branch for your work, and submit a pull request for review.

Make sure to include tests, if applicable, and provide a clear description of the changes you've made.

License

This project is licensed under the Creative Commons Attribution 4.0 International License. See the LICENSE file for details.