Budget Overrun

A small full‑stack app for managing categories and risks. Backend exposes a GraphQL API; frontend is a React client using Apollo.

Features & Flow

• Sign-in with a simple username (stored locally). The username is sent to the API via the x-user header.
• Categories:
  • View paginated list
  • Create new category (name, description)
  • Inline edit name/description
  • Delete category
• Risks:
  • View paginated list with filters (status, search)
  • Create new risk (name, description, category)
  • Inline edit fields
  • Toggle status (e.g., Open/Closed)
  • Delete risk
• Responsive UI with clean tables and forms; no horizontal scrolling.

Tech Stack

• Backend: Node.js, TypeScript, Express, Apollo Server, Mongoose
• Frontend: React, Vite, TypeScript, Apollo Client, Tailwind CSS
• Database: MongoDB (local via Docker or Atlas)
• Deployment: Render (backend), Vercel (frontend)

Quick Start (Local)

1. Start MongoDB locally with Docker:

docker-compose up -d

2. Configure environment files:

• Backend: create backend/.env

MONGODB_URI=mongodb://localhost:27017/budget-overrun
PORT=4000
# Comma-separated list of allowed origins in production (optional)
# ALLOWED_ORIGINS=https://your-frontend.vercel.app

• Frontend: create frontend/.env

VITE_GRAPHQL_URL=http://localhost:4000/graphql

3. Install dependencies:

cd backend && npm install
cd ../frontend && npm install

4. Seed sample data (development only):

cd backend
npm run seed

5. Run dev servers in two terminals:

# Backend
cd backend
npm run dev

# Frontend
cd frontend
npm run dev

Open the app at http://localhost:5173 (Vite). Backend GraphQL endpoint is at http://localhost:4000/graphql (introspection disabled in production).

Production Deployment

Backend (Render)

1. Connect the GitHub repo and create a Web Service with Root Directory backend.
2. Build Command: npm install && npm run build
3. Start Command: npm start
4. Environment variables:
   • MONGODB_URI = Atlas connection string (include DB name, e.g. /budget-overrun)
   • PORT = 4000
   • ALLOWED_ORIGINS (optional) = https://your-frontend.vercel.app

Frontend (Vercel)

1. Import the repo and set Root Directory to frontend.
2. Environment variables:
   • VITE_GRAPHQL_URL = https://<your-render-service>.onrender.com/graphql

Project Structure

• backend/ – API, schema, models, seed
• frontend/ – React app, components, hooks
• docker-compose.yml – Local MongoDB

Useful Scripts

• Backend: npm run dev, npm run build, npm start, npm run seed
• Frontend: npm run dev, npm run build