Graditude

Graditude is a project designed for new graduate software engineers to land their next job. Graditude's design is based on minimalism in order to provide a streamlined job hunting experience. Whether the focus is in software engineering or web dev, we've got you covered.

Repository Structure

This project contains directories for both sides of the stack and Traefik for production HTTP reverse proxy and load balancing.

Frontend

Getting started

Backend

Getting started

Getting Started for Local Development

Carefully follow the steps below for a smooth experience.

Prerequisites

Docker
docker-compose
Python >= 3.8 for Pre-commit (contributors)

1. Set up Pre-commit (contributors)

This repo has default integration with pre-commit, a tool for identifying simple issues before submission to code review. These checks are performed for all staged files using git commit before they are committed to a branch.

1.1 Integrated tools

Platform	Code Styling	Linting	Type Checking
Python	black	flake8	mypy
JavaScript/TypeScript	prettier	ESLint	N/A

1.2 Install

cd backend

# Create a python3 virtual environment using system-level Python
python3 -m venv venv

# Activate the virtual environment
source venv/bin/activate

# Install local requirements
pip install -r requirements/local.txt

# Install pre-commit hooks
pre-commit install

Note, any update to .pre-commit.config.yaml requires a re-installation of the hooks.

2. Set up Back-end

Open the project in a terminal and cd backend.

2.1 Build and Run the Stack

This can take a while, especially the first time you run this particular command on your development system but subsequent runs will occur quickly:

docker-compose -p graditude_backend_dev -f docker-compose.yml up --build

Remove the --build flag when you don't need to rebuild (e.g. no updates to Docker/docker-compose related files).

Useful Django Management Commands

2.3 Accessible Services

Django: localhost:8000

3. Set up Front-end

Open the project in a terminal and cd frontend.

3.1 Build and Run the Stack

This can take a while, especially the first time you run this particular command on your development system but subsequent runs will occur quickly:

docker-compose -p graditude_frontend_dev -f docker-compose.yml up --build

Remove the --build flag when you don't need to rebuild (e.g. no updates to Docker/docker-compose related files).

Useful React Scripts Commands

3.2 Accessible Services

React: localhost:3000

Getting Started for Production

Building the production environment involves the same steps as local. However, use _prod instead of _dev for the -p flag, and use docker-compose.prod.yml for the -f flag.

You also need to configure the production environment using the steps below.

1. Traefik

You will need to configure each router's rule, which is used to route a request to a service (e.g. django, react).

Enter directory ./backend/docker/production/traefik/
Open traefik.yml in your editor
Edit rules for routers
- Change example.com to the domain name (e.g. graditude.com)
- OPTIONAL: Change /prefix to the domain subdirectory for the service
  - For example, the PathPrefix for the rules of backend can be /graditude-api and frontend can be /graditude.
  - If you don't use a subdirectory, delete PathPrefix(`prefix`) for the service

Once configured, Traefik will get you a valid certificate from Lets Encrypt and update it automatically.

2. Back-end

Enter directory: ./backend/.envs/.production/
Copy env files .django.template and .postgres.template
Rename files as .django and .postgres

Service	Environment Variable	Description	Documentation	Type	Example
Django	`DJANGO_READ_DOT_ENV_FILE`	Read the .env file generated using `merge_production_dotenvs_in_dotenv.py` script		boolean	`DJANGO_READ_DOT_ENV=True`
Django	`DJANGO_SECRET_KEY`	A secret key for a particular Django installation. This is used to provide cryptographic signing, and should be set to a unique, unpredictable value.	Link	string	`DJANGO_SECRET_KEY=YAFKApvifkIFTw0DDNQQdHI34kyQdyWH89acWTogCfm4SGRz2x`
Django	`DJANGO_ADMIN_URL`	The url to access the Django Admin page. It should be set to a unique, unpredictable value (not `admin/`).		string	`DJANGO_ADMIN_URL=11hxhSu03aSBTOZWCysDvSvcDfa16kFh/`
Django	`DJANGO_ALLOWED_HOSTS`	A list of strings representing the host/domain names that this Django site can serve. This is a security measure to prevent HTTP Host header attacks, which are possible even under many seemingly-safe web server configurations.	Link	array of strings	`DJANGO_ALLOWED_HOSTS=graditude.com` Local environment: `DJANGO_ALLOWED_HOSTS=localhost`
Django	`DOMAIN_NAME`	The domain linked to the server hosting the Django site.		string	`DOMAIN_NAME=graditude.com` Local environment: `DOMAIN_NAME=localhost`
Django	`DOMAIN_SUBDIRECTORY`	OPTIONAL The domain subdirectory that is proxied to the Django site (e.g. graditude.com/graditude-api). Omit backslash and match backend rules' `PathPrefix` in `traefik.yml`.		string	`DOMAIN_SUBDIRECTORY=graditude-api`
Django	`CORS_ORIGIN_WHITELIST`	List of origins that are authorized to make HTTP requests. Make sure to add the URL of the front-end here.	Link	array of strings	`CORS_ORIGIN_WHITELIST=https://graditude.com` Local environment: `CORS_ORIGIN_WHITELIST=http://localhost:3000`
Django	`CELERY_FLOWER_USER`	The login username for the Celery Flower service. Recommended to make a secured username.		string	`CELERY_FLOWER_USER=IfVEHezeCxRGRiYSWjsxLfJylfVXuOaa`
Django	`CELERY_FLOWER_PASSWORD`	The login password for the Celery Flower service. Recommended to make a secure password.		string	`CELERY_FLOWER_PASSWORD=EwP2spXEEXcaXJkdqdvbWSDokkYW77SnEFItlkITmKuW0uROzXnX0rSwAgCEjl0P`
Postgres	`POSTGRES_HOST` `POSTGRES_PORT` `POSTGRES_DB` `POSTGRES_USER` `POSTGRES_PASSWORD`	The default Postgres environment variables are self-explanatory and can be updated if needed.		string	N/A

3. Front-end

Enter directory: ./frontend/.envs/.production/
Copy env file .react.template and rename as .react

Service	Environment Variable	Description	Documentation	Type	Example
React	`REACT_APP_API_URL`	The URL for the Graditude API.		string	`REACT_APP_API_URL=https://api.graditude.com/` Local environment: `REACT_APP_API_URL=http://localhost:8000`

tomvothecoder/graditude