CS160 Group Project: GreenPath

Team 4:

• Anh Tran
• Alicia Shi
• Jonathan Wu
• Samson Xu

Project Overview

GreenPath is a comprehensive web application for tracking environmental impact and promoting sustainable practices. The platform helps users monitor their carbon footprint, set sustainable goals, and discover eco-friendly alternatives.

Tech Stack

Frontend

• React 19 - UI Framework with latest features
• TypeScript ~5.8.3 - Type safety and better DX

Backend

• FastAPI - Modern Python web framework
• MySQL 8.0 - Relational database

Prerequisites

• Docker & Docker Compose (recommended approach)
• OR if running locally:
  • Node.js >= 22.12.0
  • Python 3.11+
  • MySQL 8.0

Quick Start with Docker (Recommended)

Docker provides the fastest and most reliable way to get started. All services (frontend, backend, database) will run in containers.

0. Prerequisites Before Running Docker

Create Backend Environment File

Before running docker-compose up, you need to create a .env file in the backend directory:

cp backend/env.example backend/.env

The .env file should contain:

DATABASE_URL=mysql+pymysql://user:password@mysql:3306/greenpath
SECRET_KEY=your-secret-key-here-change-in-production
NEWS_API_KEY=your-news-api-key-here

Getting a News API Key For Professor(Needed for Education Page)

1. Visit NewsAPI.org
2. Sign up for a free account
3. Get your API key from the dashboard after signing up
4. Add it to .env file:

   NEWS_API_KEY=your-actual-api-key-here
   

• Replace your-news-api-key-here in the .env file with your actual API key

1. First-Time Setup (From Scratch)

# Clone the repository (if not already done)
git clone <repository-url>
cd cs160_project

# Build and start all services
docker-compose up --build

2. Accessing the Application

Once containers are running:

• Frontend: http://localhost:5173
• Backend API: http://localhost:8000
• Database: localhost:3306 (user: user, password: password, database: greenpath)

3. Database Setup

Test Credentials

Login with these default credentials:

• Email: test@gmail.com
• Password: test

Resetting the Database

If you need to reset the database to a clean state:

# Stop containers and remove the database volume
docker-compose down -v

# Restart - database will reinitialize automatically
docker-compose up

4. Stopping the Application

# Stop all containers (preserves data and dependencies)
docker-compose down

# Stop and remove all volumes (clean slate - use after adding new dependencies)
docker-compose down -v

Project Structure

cs160_project/
├── frontend/              # React + Vite frontend
│   ├── src/
│   │   ├── components/   # Reusable UI components
│   │   ├── pages/        # Page components (Dashboard, Auth, etc.)
│   │   ├── services/     # API service layer
│   │   ├── hooks/        # Custom React hooks
│   │   └── lib/          # Utilities
│   ├── Dockerfile        # Frontend container config
│   └── package.json      # Frontend dependencies
├── backend/              # FastAPI backend
│   ├── app/
│   │   ├── api/         # API routes
│   │   ├── core/        # Config, database, security
│   │   ├── models/      # Database models
│   │   └── schemas/     # Pydantic schemas
│   ├── Dockerfile       # Backend container config
│   └── requirements.txt # Python dependencies
├── docker-compose.yml   # Docker orchestration
└── README.md           # This file