Assignment: Build a Simple Blog Website with React.js & Next.
js
Objective:
This week, your task is to create a simple blog website using React and Next.js. The goal
is to help you practice component-based architecture, modular design, theming, and building
a responsive UI. You’ll focus on clean code, theming (light/dark mode), and reusable
components. Backend integration is optional unless you choose to use Firebase or IndexedDB.
What You Will Build
A multi-page blog application with the following key sections and features:
1. Home / Blog Listing Page:
Display a list of blog posts.
Each blog card should include:
o Blog Title
o Short Summary
o Thumbnail Image (mandatory)
2. Blog Post Detail Page:
Clicking a blog card should navigate to the full post view.
Display:
o Blog Title
o Full Content
o Featured Image
3. User Authentication UI (Frontend Only):
Create Login/Register UI (no backend unless using Firebase).
After “login” (mock logic allowed), show blog submission form.
Blog Post Form must include:
o Title (text input)
o Content (text area or rich text)
o Image Upload (mandatory)
Use FileReader to preview
If using Firebase, store image in Firebase Storage
4. Dark & Light Mode (Mandatory):
Implement a theme switcher (Dark/Light toggle).
Ensure the entire UI respects the selected theme (text, background, buttons, etc.).
5. Design & Styling Requirements:
Use Next.js routing (app/ or pages/ directory)
Follow a modular and scalable folder structure (e.g., components/, pages/, styles/)
Use Tailwind CSS or CSS Modules
Implement smooth transitions (page load, modals, buttons)
Make the layout fully responsive
6. Final Deliverables (Due by [Specify Deadline]):
Hosted project on a platform like Firebase or Vercel
Submit:
o Live link to deployed blog (e.g., yourname.vercel.app)
o GitHub repository with clean commits
o README file with:
Short project description
Technologies used
Steps to run locally
o (Optional) Short screen recording explaining your blog
Bonus (Optional but Encouraged):
Use Firebase or IndexedDB + Dexie.js to:
o Store blog posts and uploaded images
o Enable blog submission and retrieval
o Add Firebase Auth for real login/logout functionality
Communication & Support:
Share short daily progress updates in the group.
If you're stuck, ask for help in the intern group or tag your assigned mentor.
Submit all deliverables on or before the deadline for review.
