Learning Resource Dashboard

Screenshots

Dashboard View

Add Resource Dialog

Tech Stack

• Backend: FastAPI (Python)
• Frontend: React + TypeScript + Vite
• Authentication: Auth0
• Database: SQLite (development) / PostgreSQL (production)
• Deployment: Docker + Traefik

Prerequisites

• Python 3.11+
• Node.js 18+ and npm
• Docker and Docker Compose (for production deployment)

Local Development Setup

Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Create a virtual environment (recommended):

   python -m venv env
   source env/bin/activate  # On Windows: env\Scripts\activate

3. Install dependencies:

   pip install -r requirements.txt

4. Create a .env file in the backend directory:

   cp .env.sample .env

5. Edit the .env file and add your configuration:

6. Run the backend server:

   uvicorn main:app --reload --host 0.0.0.0 --port 8000

   The API will be available at http://localhost:8000 API documentation will be available at http://localhost:8000/docs

Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Create a .env file in the frontend directory with the following variables:

4. Run the development server:

   npm run dev

   The frontend will be available at http://localhost:8080

Production Deployment

Using Docker Compose

1. Set up environment variables:

   • Create a .env file in the root directory
   • Create a backend/.env file with all required variables including:

     TRAEFIK_HOST=your-domain.com
     TRAEFIK_ACME_EMAIL=your-email@example.com

2. Build and start the services:

   docker-compose -f docker-compose-prod.yml up -d --build

3. The application will be available at:

   • Frontend: https://your-domain.com
   • Backend API: https://your-domain.com/api

Environment Variables

Backend (.env)

Variable	Description	Required
AUTH0_DOMAIN	Your Auth0 domain	Yes
AUTH0_AUDIENCE	Your Auth0 API audience	Yes
ALLOWED_EMAIL_DOMAIN	Email domain allowed to access the app	Yes
FRONTEND_URL	Frontend URL for CORS configuration	Yes
TRAEFIK_HOST	Domain name for Traefik routing (production)	Production only
TRAEFIK_ACME_EMAIL	Email for Let's Encrypt certificates (production)	Production only

Frontend (.env)

Variable	Description	Required
VITE_AUTH0_DOMAIN	Your Auth0 domain	Yes
VITE_AUTH0_CLIENT_ID	Your Auth0 client ID	Yes
VITE_AUTH0_AUDIENCE	Your Auth0 API audience	Yes
VITE_AUTH0_REDIRECT_URI	Redirect URI after authentication	Yes
VITE_API_BASE_URL	Backend API URL	Yes

Project Structure

.
├── backend/              # FastAPI backend
│   ├── app/
│   │   ├── auth/        # Authentication logic
│   │   ├── db/          # Database configuration and helpers
│   │   ├── routers/     # API routes
│   │   └── models.py    # Database models
│   ├── main.py          # FastAPI application entry point
│   └── requirements.txt # Python dependencies
│
├── frontend/            # React frontend
│   ├── src/
│   │   ├── components/  # React components
│   │   ├── pages/       # Page components
│   │   ├── lib/         # API and utility functions
│   │   └── hooks/       # Custom React hooks
│   └── package.json     # Node dependencies
│
├── docker-compose-prod.yml  # Production Docker Compose configuration
└── README.md            # This file