Auto Udemy

A full-stack application with Flask backend and React frontend.

Project Structure

auto-udemy/
├── backend/          # Flask API server
│   ├── app.py       # Main application file
│   ├── requirements.txt
│   └── .env.example
└── frontend/         # React + Vite application
    ├── src/
    ├── package.json
    └── vite.config.ts

Prerequisites

• Python 3.8 or higher
• Node.js 16 or higher
• pnpm (or npm/yarn)

Backend Setup

1. Navigate to the backend directory

cd backend

2. Create and activate a virtual environment

Windows:

python -m venv .venv
.venv\Scripts\activate

Linux/Mac:

python -m venv .venv
source .venv/bin/activate

3. Install dependencies

pip install -r requirements.txt

4. Configure environment variables

# Copy the example environment file
cp .env.example .env

# Edit .env with your configuration
# Update SECRET_KEY, PORT, etc.

5. Run the backend server

python app.py

The backend server will start at http://localhost:5000

Frontend Setup

1. Navigate to the frontend directory

cd frontend

2. Install dependencies

pnpm install

3. Run the development server

pnpm dev

The frontend will start at http://localhost:5173 (default Vite port)

4. Build for production

pnpm build

Running Both Applications

Option 1: Using separate terminals

Terminal 1 - Backend:

cd backend
source .venv/Scripts/activate  # Windows
python app.py

Terminal 2 - Frontend:

cd frontend
pnpm dev

Option 2: Background processes (Linux/Mac)

# Start backend in background
cd backend && source .venv/bin/activate && python app.py &

# Start frontend
cd frontend && pnpm dev

API Endpoints

Health Check

• GET /api/health - Check if the API is running

Example Endpoints

• GET /api/example - Get example data
• POST /api/example - Post example data

Development

• Backend runs on port 5000 (configurable via .env)
• Frontend runs on port 5173 (default Vite)
• CORS is enabled for frontend-backend communication

Technologies

Backend:

• Flask 3.0.0
• Flask-CORS
• Python-dotenv

Frontend:

• React
• TypeScript
• Vite
• ESLint