Full-Stack Blog Page – CRUD + Auth
Problem Statement
Build a full-stack blog application that lets authenticated users create, read, update, and delete blog posts.
Data Model (Post)
● title (string, required, 5–120 chars)
● imageURL (string, optional, valid URL)
● content (string, required, min 50 chars)
● username (string, required; owner/author of the post)
Core Requirements
1. Authentication (Backend)
○ Implement user registration and login.
○ Use secure password hashing.
○ Issue and verify JWTs (or session-based auth).
○ Protect all write operations (Create/Update/Delete) so only the post’s owner can modify/delete their
posts.
2. CRUD for Posts
○ Create a post (auth required).
○ Read posts:
■ Get all posts (with pagination and search by title/username).
■ Get a single post by ID/slug.
○ Update a post (auth required; only owner).
○ Delete a post (auth required; only owner).
3. Frontend
○ Pages/Views:
■ Home/Feed: list posts with title, thumbnail (from imageURL), author, createdAt; supports
pagination & search.
■ Post Detail: show full content and larger image.
■ Create/Edit Post: form with validation; show errors inline.
■ Auth Pages: register & login; show auth errors.
■ Profile/My Posts: list posts by the logged-in user with edit/delete controls.
○ State management for auth token and user session.
○ Form and field validations mirrored on client.
4. API Design (suggested)
○ POST /api/auth/register → { username, email, password }
○ POST /api/auth/login → { email/username, password } → returns token
○ GET /api/posts?search=&page=&limit= → list
○ GET /api/posts/:id → one
○ POST /api/posts (auth) → create
○ PUT /api/posts/:id (auth, owner) → update
○ DELETE /api/posts/:id (auth, owner) → delete
5. Tech Stack (you may choose)
○ Backend: [Link] + Express (or Nest) with JWT auth
○ DB: MongoDB or PostgreSQL
○ Frontend: React (or [Link]) with fetch/Axios
○ Styling: Tailwind/Material UI (optional)
6. Validation & Errors
○ Server-side validation for all fields.
○ Return consistent error shapes (e.g., { message, details }).
○ Handle invalid/missing JWTs gracefully (401/403).
7. Security & Best Practices
○ Hash passwords (bcrypt/argon2).
○ Never return passwords.
○ Use CORS correctly.
○ Authorization check: only owner can update/delete their post.
8. Quality of Life
○ Loading and empty states on the UI.
○ Toasts/snackbars for success/failure.
○ Confirm dialog before delete.
○ Optimistic UI (bonus).
9. Deliverables
○ Link to repo with /client and /server folders.
○ .[Link] for both client and server.
○ README with:
■ Setup & run instructions (dev & prod)
■ API docs (routes, payloads, responses)
■ Screenshots or a short demo GIF
○ Seed script or sample requests (bonus: Postman collection).
10.Evaluation Criteria
● Correctness (CRUD & auth work as specified)
● Code quality & structure
● Validation, error handling, and security
● UI/UX polish and responsiveness
● Documentation and developer experience