Full Stack — Frontend and Backend Together

// frontend/src/lib/api.js

const BASE_URL = import.meta.env.VITE_API_URL

// helper to get auth token
const getToken = () => localStorage.getItem('token')

// base request function
async function request(method, path, body = null) {
    const headers = {
        'Content-Type': 'application/json'
    }

    const token = getToken()
    if (token) {
        headers['Authorization'] = `Bearer ${token}`
    }

    const config = {
        method,
        headers
    }

    if (body) {
        config.body = JSON.stringify(body)
    }

    const response = await fetch(`${BASE_URL}${path}`, config)

    // handle no content (DELETE)
    if (response.status === 204) return null

    const data = await response.json()

    // throw error with server message
    if (!response.ok) {
        throw new Error(data.detail || data.message || 'Something went wrong')
    }

    return data
}

// clean API interface
export const api = {
    get: (path) => request('GET', path),
    post: (path, body) => request('POST', path, body),
    patch: (path, body) => request('PATCH', path, body),
    delete: (path) => request('DELETE', path)
}

// feature-specific functions
export const goalsApi = {
    list: (date) => api.get(`/api/goals${date ? `?date=${date}` : ''}`),
    create: (goal) => api.post('/api/goals', goal),
    update: (id, updates) => api.patch(`/api/goals/${id}`, updates),
    delete: (id) => api.delete(`/api/goals/${id}`)
}

export const authApi = {
    login: (credentials) => api.post('/api/auth/login', credentials),
    signup: (userData) => api.post('/api/auth/signup', userData),
    logout: () => api.post('/api/auth/logout')
}

// hooks/useGoals.js — custom hook for goals
import { useState, useEffect, useCallback } from 'react'
import { goalsApi } from '../lib/api'

export function useGoals(date) {
    const [goals, setGoals] = useState([])
    const [loading, setLoading] = useState(true)
    const [error, setError] = useState(null)

    const fetchGoals = useCallback(async () => {
        setLoading(true)
        setError(null)
        try {
            const { data } = await goalsApi.list(date)
            setGoals(data)
        } catch (err) {
            setError(err.message)
        } finally {
            setLoading(false)
        }
    }, [date])

    useEffect(() => {
        fetchGoals()
    }, [fetchGoals])

    const createGoal = async (title) => {
        try {
            const { data } = await goalsApi.create({ title, date })
            setGoals(prev => [...prev, data])
        } catch (err) {
            setError(err.message)
        }
    }

    const toggleGoal = async (id) => {
        const goal = goals.find(g => g.id === id)
        try {
            setGoals(prev => prev.map(g =>
                g.id === id ? { ...g, completed: !g.completed } : g
            ))
            await goalsApi.update(id, { completed: !goal.completed })
        } catch (err) {
            // revert on failure
            setGoals(prev => prev.map(g =>
                g.id === id ? { ...g, completed: goal.completed } : g
            ))
            setError(err.message)
        }
    }

    const deleteGoal = async (id) => {
        try {
            setGoals(prev => prev.filter(g => g.id !== id))
            await goalsApi.delete(id)
        } catch (err) {
            fetchGoals()  // refetch on failure
            setError(err.message)
        }
    }

    return { goals, loading, error, createGoal, toggleGoal, deleteGoal }
}

// Dashboard.jsx — uses the hook
function Dashboard() {
    const today = new Date().toISOString().split('T')[0]
    const { goals, loading, error, createGoal, toggleGoal, deleteGoal } = useGoals(today)

    if (loading) return <LoadingSpinner />
    if (error) return <ErrorMessage message={error} />

    return (
        <div>
            <GoalForm onSubmit={createGoal} />
            <GoalList
                goals={goals}
                onToggle={toggleGoal}
                onDelete={deleteGoal}
            />
        </div>
    )
}

# backend/routers/goals.py

from fastapi import APIRouter, Depends, HTTPException
from typing import Optional
from datetime import date as DateType

from ..auth import get_current_user
from ..database import db
from ..models import GoalCreate, GoalUpdate, GoalResponse

router = APIRouter(prefix="/api/goals", tags=["goals"])

@router.get("", response_model=dict)
async def list_goals(
    date: Optional[DateType] = None,
    user_id: str = Depends(get_current_user)
):
    goals = await db.goals.find(user_id=user_id, date=date)
    return { "data": goals, "count": len(goals) }

@router.post("", response_model=dict, status_code=201)
async def create_goal(
    goal: GoalCreate,
    user_id: str = Depends(get_current_user)
):
    created = await db.goals.create({
        **goal.dict(),
        "user_id": user_id
    })
    return { "data": created }

@router.patch("/{goal_id}", response_model=dict)
async def update_goal(
    goal_id: str,
    updates: GoalUpdate,
    user_id: str = Depends(get_current_user)
):
    goal = await db.goals.find_one(id=goal_id)

    if not goal:
        raise HTTPException(404, "Goal not found")
    if goal.user_id != user_id:
        raise HTTPException(403, "Not your goal")

    updated = await db.goals.update(
        goal_id,
        updates.dict(exclude_none=True)
    )
    return { "data": updated }

@router.delete("/{goal_id}", status_code=204)
async def delete_goal(
    goal_id: str,
    user_id: str = Depends(get_current_user)
):
    goal = await db.goals.find_one(id=goal_id)

    if not goal:
        raise HTTPException(404, "Goal not found")
    if goal.user_id != user_id:
        raise HTTPException(403, "Not your goal")

    await db.goals.delete(goal_id)

# backend/main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from .routers import goals, logs, users, auth

app = FastAPI()

app.add_middleware(CORSMiddleware,
    allow_origins=["http://localhost:5173", "https://app.abhishekkumar.xyz"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)

app.include_router(auth.router)
app.include_router(goals.router)
app.include_router(logs.router)
app.include_router(users.router)

// frontend/src/context/AuthContext.jsx
export function AuthProvider({ children }) {
    const [user, setUser] = useState(null)
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        // check if already logged in
        const token = localStorage.getItem('token')
        const savedUser = localStorage.getItem('user')
        if (token && savedUser) {
            setUser(JSON.parse(savedUser))
        }
        setLoading(false)
    }, [])

    const login = async (email, password) => {
        const { token, user } = await authApi.login({ email, password })
        localStorage.setItem('token', token)
        localStorage.setItem('user', JSON.stringify(user))
        setUser(user)
    }

    const logout = () => {
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        setUser(null)
    }

    return (
        <AuthContext.Provider value={{ user, loading, login, logout }}>
            {!loading && children}
        </AuthContext.Provider>
    )
}

const toggleGoal = async (id) => {
    const goal = goals.find(g => g.id === id)
    const newCompleted = !goal.completed

    // 1. update UI immediately (optimistic)
    setGoals(prev => prev.map(g =>
        g.id === id ? { ...g, completed: newCompleted } : g
    ))

    try {
        // 2. sync with backend
        await goalsApi.update(id, { completed: newCompleted })
    } catch (err) {
        // 3. revert if backend fails
        setGoals(prev => prev.map(g =>
            g.id === id ? { ...g, completed: goal.completed } : g
        ))
        showError('Failed to update goal')
    }
}

# backend — always return clear error messages
@router.post("/api/goals")
async def create_goal(goal: GoalCreate):
    try:
        created = await db.goals.create(goal.dict())
        return { "data": created }
    except UniqueViolation:
        raise HTTPException(409, "Goal already exists for this date")
    except Exception as e:
        logger.error(f"Failed to create goal: {e}")
        raise HTTPException(500, "Failed to create goal")

// frontend — one place to handle API errors
async function request(method, path, body) {
    try {
        const response = await fetch(...)
        const data = await response.json()

        if (!response.ok) {
            // handle specific error codes
            if (response.status === 401) {
                logout()  // token expired, logout user
                throw new Error('Session expired')
            }
            throw new Error(data.detail || 'Request failed')
        }

        return data
    } catch (err) {
        if (err.name === 'TypeError') {
            // network error (no internet, server down)
            throw new Error('Connection failed. Check your internet.')
        }
        throw err
    }
}

# frontend/.env.development
VITE_API_URL=http://localhost:8000

# frontend/.env.production
VITE_API_URL=https://api.abhishekkumar.xyz

# backend/.env
DATABASE_URL=postgresql://...
JWT_SECRET=long-random-secret
CORS_ORIGINS=http://localhost:5173,https://app.abhishekkumar.xyz

# terminal 1 — backend
cd backend
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt
uvicorn main:app --reload --port 8000

# terminal 2 — frontend
cd frontend
npm install
npm run dev
# runs on localhost:5173
# calls backend at localhost:8000

function Page() {
    const { data, loading, error } = useFetch('/api/data')

    if (loading) return <Skeleton />    // show skeleton while loading
    if (error) return <Error />         // show error state
    if (!data?.length) return <Empty /> // show empty state
    return <DataList data={data} />     // show data
}

const [status, setStatus] = useState('idle') // idle loading success error

const handleSubmit = async (formData) => {
    setStatus('loading')
    try {
        await api.post('/api/resource', formData)
        setStatus('success')
    } catch (err) {
        setStatus('error')
        setError(err.message)
    }
}

return (
    <button disabled={status === 'loading'}>
        {status === 'loading' ? 'Saving...' : 'Save'}
    </button>
)