Todo App with Auth

This is the best first MERN project.

It is small, but it touches the full stack.

Features

• register,
• login,
• logout,
• create todo,
• list my todos,
• update todo,
• delete todo,
• mark complete,
• protected dashboard.

Backend routes

POST /api/auth/register
POST /api/auth/login
GET /api/auth/me
POST /api/todos
GET /api/todos
PATCH /api/todos/:id
DELETE /api/todos/:id

API contract examples

Create todo:

POST /api/todos

Request:

{
  "title": "Revise event loop"
}

Response:

{
  "data": {
    "id": "todo_1",
    "title": "Revise event loop",
    "completed": false
  }
}

List todos:

GET /api/todos

Response:

{
  "data": [
    {
      "id": "todo_1",
      "title": "Revise event loop",
      "completed": false
    }
  ]
}

MongoDB model

const todoSchema = new Schema({
  userId: { type: Schema.Types.ObjectId, ref: 'User', required: true },
  title: { type: String, required: true },
  completed: { type: Boolean, default: false },
}, { timestamps: true })

Important rule

Every todo query must include userId.

Bad:

Todo.findById(req.params.id)

Better:

Todo.findOne({ _id: req.params.id, userId: req.user.id })

Frontend screens

Build these screens:

• register,
• login,
• todo dashboard,
• create/edit form,
• empty state,
• loading state,
• error state.

Test scenarios

• logged-out user cannot see dashboard,
• logged-out user cannot call todo APIs,
• user can create a todo,
• user can update only their own todo,
• user can delete only their own todo,
• empty todo list shows a clean empty state.

What this project proves

• auth flow,
• protected APIs,
• protected React routes,
• CRUD,
• ownership checks,
• form handling,
• loading/error UI states.