🛠️ Weekend Project: JavaScript Web Frameworks

The Weekend Brief

You've spent this module learning the JavaScript web-framework stack in pieces: a React frontend, an Express backend, Axios for API calls, and the authentication flow that ties a user to their data. A weekend project is where those pieces stop being separate lessons and become one running application you can show someone.

Your deliverable is a Task Manager. A visitor can register, log in, and then create, edit, complete, filter, and delete their own tasks — and only their own. It's small enough to finish in a weekend and complete enough to prove you can run a feature end to end.

Here's the feature list you're committing to. Treat anything below the line as a stretch goal — ship the core first.

How to Attack a Weekend Build

The single biggest mistake in a weekend project is opening the editor and typing. You lose Saturday to a database connection bug and never reach the UI. A tiny bit of planning protects your weekend. We'll borrow a 90-year-old framework that still beats most modern advice: mathematician George Pólya's four steps from How to Solve It (1945).

💡 Vertical slices beat horizontal layers. It's tempting to build all the models, then all the routes, then all the UI. Resist it. Build one thin slice — "a logged-in user can create a task and see it" — all the way through the stack first. A working slice is worth ten half-finished layers.

Commit after every green milestone. A passing milestone is a save point. If Sunday's refactor goes sideways, git reset costs you minutes instead of the weekend.

The Milestone Map

Six milestones, roughly in dependency order. The time budget is a guide, not a rule — the point is to give each phase a ceiling so no single one eats the weekend.

Milestone 0 — Scaffold & Wire Up

Goal: a client and a server that both start, and a browser request that reaches Express. We use Vite for the React app (Create React App is deprecated) and a small Express server beside it.

Create a monorepo-style layout with a client and a server folder:

# Project root
mkdir task-manager && cd task-manager
git init
printf "node_modules\n.env\ndist\n.DS_Store\n" > .gitignore

# Frontend: Vite + React
npm create vite@latest client -- --template react
cd client && npm install
npm install axios react-router-dom
cd ..

# Backend: Express + tooling
mkdir server && cd server
npm init -y
npm install express mongoose bcryptjs jsonwebtoken cors dotenv express-validator
npm install --save-dev nodemon
cd ..

Give the server an entry point that connects to MongoDB and mounts routes you'll fill in next. Note the modern Mongoose call — useNewUrlParser / useUnifiedTopology are no longer needed (Mongoose 6+ ignores them):

// server/server.js
import express from 'express';
import cors from 'cors';
import mongoose from 'mongoose';
import 'dotenv/config';

await mongoose.connect(process.env.MONGO_URI);
console.log('MongoDB connected');

const app = express();
app.use(cors());
app.use(express.json());

app.get('/api/health', (req, res) => res.json({ ok: true }));
// app.use('/api/auth', authRoutes);   // ← Milestone 2
// app.use('/api/tasks', taskRoutes);  // ← Milestone 3

// Central error handler — every controller can just `throw`
app.use((err, req, res, next) => {
  console.error(err);
  res.status(err.status || 500).json({ message: err.message || 'Server error' });
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`API on http://localhost:${PORT}`));

Point Vite's dev server at Express so /api/* calls proxy across during development — no CORS headaches, and the frontend code just calls /api/tasks:

// client/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: { '/api': 'http://localhost:5000' }
  }
});

Create server/.env (and never commit it):

PORT=5000
MONGO_URI=mongodb://localhost:27017/task-manager
JWT_SECRET=replace_with_a_long_random_string
JWT_EXPIRE=15m
REFRESH_TOKEN_SECRET=replace_with_a_different_long_random_string
REFRESH_TOKEN_EXPIRE=7d

Milestone 1 — Data Models

Goal: Mongoose schemas that describe a user and a task, with the password-hashing logic baked into the model so no controller can forget it.

Two collections, one relationship: a user owns many tasks.

The user model hashes the password with a pre('save') hook and exposes a matchPassword helper. select: false keeps the hash out of every normal query result:

// server/models/User.js
import mongoose from 'mongoose';
import bcrypt from 'bcryptjs';

const userSchema = new mongoose.Schema({
  name:  { type: String, required: [true, 'Name is required'], trim: true, maxlength: 50 },
  email: {
    type: String, required: true, unique: true, lowercase: true, trim: true,
    match: [/^[^\s@]+@[^\s@]+\.[^\s@]+$/, 'Please provide a valid email']
  },
  password: { type: String, required: true, minlength: 6, select: false }
}, { timestamps: true });   // adds createdAt / updatedAt automatically

// Hash only when the password actually changed
userSchema.pre('save', async function () {
  if (!this.isModified('password')) return;
  this.password = await bcrypt.hash(this.password, 10);
});

userSchema.methods.matchPassword = function (candidate) {
  return bcrypt.compare(candidate, this.password);
};

export default mongoose.model('User', userSchema);

The task model enforces the allowed values and, crucially, indexes by owner so "all of my tasks" is a fast query:

// server/models/Task.js
import mongoose from 'mongoose';

const taskSchema = new mongoose.Schema({
  title:       { type: String, required: [true, 'Title is required'], trim: true, maxlength: 100 },
  description: { type: String, trim: true, maxlength: 500 },
  status:      { type: String, enum: ['pending', 'in-progress', 'completed'], default: 'pending' },
  priority:    { type: String, enum: ['low', 'medium', 'high'], default: 'medium' },
  dueDate:     { type: Date },
  user:        { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true, index: true }
}, { timestamps: true });

export default mongoose.model('Task', taskSchema);

Done when: you can open a Node REPL or a scratch route, create a User, and confirm the stored password is a bcrypt hash, not plain text.

Milestone 2 — Auth API

Goal: register, log in, refresh, and a middleware that guards private routes. This is the milestone people underestimate — budget two hours and test each endpoint before moving on.

Access tokens are short-lived (minutes); the refresh token is long-lived (days) and is used to mint new access tokens without asking the user to log in again.

A helper mints both tokens, and the controllers stay small because validation and errors are handled elsewhere:

// server/controllers/authController.js
import jwt from 'jsonwebtoken';
import User from '../models/User.js';

const signTokens = (userId) => ({
  accessToken: jwt.sign({ id: userId }, process.env.JWT_SECRET, { expiresIn: process.env.JWT_EXPIRE }),
  refreshToken: jwt.sign({ id: userId }, process.env.REFRESH_TOKEN_SECRET, { expiresIn: process.env.REFRESH_TOKEN_EXPIRE })
});

const publicUser = (u) => ({ id: u._id, name: u.name, email: u.email });

export const register = async (req, res) => {
  const { name, email, password } = req.body;
  if (await User.findOne({ email }))
    return res.status(409).json({ message: 'Email already registered' });

  const user = await User.create({ name, email, password });
  res.status(201).json({ ...signTokens(user._id), user: publicUser(user) });
};

export const login = async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findOne({ email }).select('+password');
  if (!user || !(await user.matchPassword(password)))
    return res.status(401).json({ message: 'Invalid credentials' });

  res.json({ ...signTokens(user._id), user: publicUser(user) });
};

export const refresh = async (req, res) => {
  const { refreshToken } = req.body;
  if (!refreshToken) return res.status(400).json({ message: 'No refresh token' });
  try {
    const { id } = jwt.verify(refreshToken, process.env.REFRESH_TOKEN_SECRET);
    res.json(signTokens(id));
  } catch {
    res.status(401).json({ message: 'Invalid refresh token' });
  }
};

The protect middleware reads the Bearer token, verifies it, and attaches the user id to the request. Every private route sits behind it:

// server/middleware/protect.js
import jwt from 'jsonwebtoken';

export const protect = (req, res, next) => {
  const header = req.headers.authorization || '';
  const token = header.startsWith('Bearer ') ? header.slice(7) : null;
  if (!token) return res.status(401).json({ message: 'Not authorized' });

  try {
    const { id } = jwt.verify(token, process.env.JWT_SECRET);
    req.userId = id;
    next();
  } catch {
    res.status(401).json({ message: 'Token invalid or expired' });
  }
};

Wire the routes, running validation before each controller:

// server/routes/auth.js
import { Router } from 'express';
import { body } from 'express-validator';
import { register, login, refresh } from '../controllers/authController.js';
import { runValidation } from '../middleware/runValidation.js';

const router = Router();

router.post('/register',
  body('name').notEmpty(),
  body('email').isEmail(),
  body('password').isLength({ min: 6 }),
  runValidation, register);

router.post('/login',
  body('email').isEmail(),
  body('password').notEmpty(),
  runValidation, login);

router.post('/refresh', refresh);

export default router;

Done when: using curl or a REST client, you can register, log in, hit a temporary protected route with the returned token (200), and hit it without one (401).

Milestone 3 — Task CRUD API

Goal: five endpoints, every one scoped to the logged-in user. The security rule of this milestone: a query must never trust an id from the URL alone. Always pin it to req.userId.

Because protect already set req.userId, ownership scoping is just part of the query filter — there's no separate "does this belong to them?" branch to forget:

// server/controllers/taskController.js
import Task from '../models/Task.js';

// GET /api/tasks?status=pending&priority=high&sort=-createdAt
export const getTasks = async (req, res) => {
  const { status, priority, sort = '-createdAt' } = req.query;
  const filter = { user: req.userId };
  if (status) filter.status = status;
  if (priority) filter.priority = priority;

  const tasks = await Task.find(filter).sort(sort);
  res.json({ count: tasks.length, data: tasks });
};

// POST /api/tasks
export const createTask = async (req, res) => {
  const task = await Task.create({ ...req.body, user: req.userId });
  res.status(201).json({ data: task });
};

// PUT /api/tasks/:id  — the filter itself enforces ownership
export const updateTask = async (req, res) => {
  const task = await Task.findOneAndUpdate(
    { _id: req.params.id, user: req.userId },
    req.body,
    { new: true, runValidators: true }
  );
  if (!task) return res.status(404).json({ message: 'Task not found' });
  res.json({ data: task });
};

// DELETE /api/tasks/:id
export const deleteTask = async (req, res) => {
  const task = await Task.findOneAndDelete({ _id: req.params.id, user: req.userId });
  if (!task) return res.status(404).json({ message: 'Task not found' });
  res.json({ message: 'Task deleted' });
};

The routes are a two-liner thanks to Express's route() chaining, all behind protect:

// server/routes/tasks.js
import { Router } from 'express';
import { protect } from '../middleware/protect.js';
import { getTasks, createTask, updateTask, deleteTask } from '../controllers/taskController.js';

const router = Router();
router.use(protect);                       // guard every task route
router.route('/').get(getTasks).post(createTask);
router.route('/:id').put(updateTask).delete(deleteTask);
export default router;

Uncomment the two app.use(...) lines in server.js. Done when: logged in as user A you can create and list tasks, and a task's _id from user A returns 404 (not 200) when user B tries to update it.

Milestone 4 — React Frontend

Goal: a React 18/19 app that logs a user in, keeps them in an auth context, auto-refreshes expired tokens, and shows their tasks. This is the biggest milestone — build the vertical slice (login → see tasks) before adding filters and edit forms.

The Axios instance that refreshes itself

One interceptor attaches the token to every request; another catches a 401, silently gets a new access token, and replays the failed request. Your components never think about tokens:

// client/src/api.js
import axios from 'axios';

const api = axios.create({ baseURL: '/api' });

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('accessToken');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

api.interceptors.response.use(
  (res) => res,
  async (error) => {
    const original = error.config;
    if (error.response?.status === 401 && !original._retry) {
      original._retry = true;
      try {
        const refreshToken = localStorage.getItem('refreshToken');
        const { data } = await axios.post('/api/auth/refresh', { refreshToken });
        localStorage.setItem('accessToken', data.accessToken);
        localStorage.setItem('refreshToken', data.refreshToken);
        original.headers.Authorization = `Bearer ${data.accessToken}`;
        return api(original);            // replay the original request
      } catch {
        localStorage.clear();
        window.location.href = '/login';
      }
    }
    return Promise.reject(error);
  }
);

export default api;

Auth context with hooks

A context holds the user and exposes login, register, and logout. A custom useAuth hook keeps components tidy:

// client/src/context/AuthContext.jsx
import { createContext, useContext, useState, useEffect } from 'react';
import api from '../api';

const AuthContext = createContext(null);
export const useAuth = () => useContext(AuthContext);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!localStorage.getItem('accessToken')) return setLoading(false);
    api.get('/auth/me')
      .then((res) => setUser(res.data.user))
      .catch(() => localStorage.clear())
      .finally(() => setLoading(false));
  }, []);

  const persist = ({ accessToken, refreshToken, user }) => {
    localStorage.setItem('accessToken', accessToken);
    localStorage.setItem('refreshToken', refreshToken);
    setUser(user);
  };

  const login    = async (creds) => persist((await api.post('/auth/login', creds)).data);
  const register = async (data)  => persist((await api.post('/auth/register', data)).data);
  const logout   = () => { localStorage.clear(); setUser(null); };

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

Protecting routes

A tiny wrapper redirects anyone without a session away from private pages:

// client/src/components/ProtectedRoute.jsx
import { Navigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export default function ProtectedRoute({ children }) {
  const { user, loading } = useAuth();
  if (loading) return <p>Loading…</p>;
  return user ? children : <Navigate to="/login" replace />;
}

// client/src/App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext';
import ProtectedRoute from './components/ProtectedRoute';
import Login from './pages/Login';
import Register from './pages/Register';
import Dashboard from './pages/Dashboard';

export default function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/" element={
            <ProtectedRoute><Dashboard /></ProtectedRoute>
          } />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

The dashboard: fetch, create, complete

A focused component that loads tasks on mount and lets the user add and toggle them. Filters and edit forms come after this works:

// client/src/pages/Dashboard.jsx
import { useState, useEffect } from 'react';
import api from '../api';
import { useAuth } from '../context/AuthContext';

export default function Dashboard() {
  const { user, logout } = useAuth();
  const [tasks, setTasks] = useState([]);
  const [title, setTitle] = useState('');

  const loadTasks = async () => {
    const { data } = await api.get('/tasks');
    setTasks(data.data);
  };
  useEffect(() => { loadTasks(); }, []);

  const addTask = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;
    await api.post('/tasks', { title });
    setTitle('');
    loadTasks();
  };

  const toggle = async (task) => {
    const status = task.status === 'completed' ? 'pending' : 'completed';
    await api.put(`/tasks/${task._id}`, { status });
    loadTasks();
  };

  return (
    <main>
      <header>
        <h1>Hi, {user?.name}</h1>
        <button onClick={logout}>Log out</button>
      </header>

      <form onSubmit={addTask}>
        <input value={title} onChange={(e) => setTitle(e.target.value)}
               placeholder="New task…" />
        <button type="submit">Add</button>
      </form>

      <ul>
        {tasks.map((task) => (
          <li key={task._id}>
            <input type="checkbox"
                   checked={task.status === 'completed'}
                   onChange={() => toggle(task)} />
            {task.title} <small>({task.priority})</small>
          </li>
        ))}
      </ul>
    </main>
  );
}

Done when: you can register in the browser, land on the dashboard, add a task, tick it complete, refresh the page, and everything persists.

Milestone 5 — Polish & Ship

Goal: turn a working prototype into something you'd hand to a stranger. Do these in priority order and stop when you run out of weekend — a shipped 80% beats a perfect 100% that never leaves your laptop.

1. Loading & empty states. Show a spinner while tasks load and a friendly "No tasks yet — add your first one" when the list is empty.
2. Error feedback. Surface failed logins and failed saves to the user (a toast or an inline message), not just console.log.
3. Filter & sort UI. Wire dropdowns to the query params your API already supports (?status=…&priority=…&sort=…).
4. Form validation. Disable the submit button while a request is in flight; trim and require the title.
5. Build & deploy (stretch). npm run build in client, serve the static dist from Express or a static host, and put the API behind a real MongoDB (e.g. Atlas). Move every secret into the host's env vars.

Build Checklist

Tick these off as you go. If you can honestly check every box, you've shipped the core project.

What Good Looks Like

Working isn't the same as good. Here's how a reviewer (or a future you) tells a rushed build from a solid one across the same feature.

💡 The look-back habit. When the build works, spend twenty minutes on Pólya's step 4: write down the one thing that fought you hardest and the one bit of code you're least proud of. That short note is where your next project gets easier.

Quiz

Summary & What's Next

📚 Further Reading

• Vite — Getting Started
• react.dev — Learn React (hooks & context)
• Mongoose — Schemas & Models
• JSON Web Tokens — Introduction
• OWASP Top 10 — Web Application Security Risks

🚀 What's Next?

You've now shipped a full JavaScript-stack application. Next module we cross the language line: we'll rebuild the same kind of backend in Python with Flask, so you can see how the exact concepts — routing, models, auth, JSON APIs — carry over to a completely different ecosystem.