In this assignment, you will build a role-based, secure, and responsive frontend system.
Your task is to design and implement a frontend that integrates with an API, supports multiple user roles, and ensures a smooth user experience.
This assignment focuses on:
- Clean project structure
- API integration with state management
- Role-based dashboards
- Production-ready UI/UX
| Category | Tools |
|---|---|
| ⚙️ Framework | React.js, React Router |
| 🧠 State Management | Redux Toolkit + RTK Query |
| 🧩 Language | TypeScript |
| 🎨 Styling | Tailwind CSS |
| 🛡️ Security | JWT (persisted login), bcrypt (via backend) |
| 📊 Extras | Toasts, Charts, Guided Tour (react-joyride/driver.js) |
- Codebase – Clean, modular, documented; include a README with overview, setup, tech stack, live URL, and notes.
- GitHub Repo – Separate frontend & backend repos with at least 20 commits.
- Live Deployment – Working URLs for both frontend and backend.
- Demo Video – 5–10 minutes showing login, dashboards, core operations, and role-based features.
- Test Credentials.
- Responsive Home Page with: navbar, hero section, call-to-action buttons, footer
- At least 4+ additional routes (About, Features, Contact, FAQ, etc.)
- Smooth transitions, skeleton loaders, working links & buttons
- Role-based Login & Registration
- Redirection to respective dashboards after login
- Persisted login state + Logout
- Personalized dashboard per role (overview, recent activities, summary)
- Ability to perform core operations (based on role)
- List/history of past activities with filtering & pagination
- Profile management
- Role-based navigation menus
- Form validation & error handling
- Toast notifications for actions
- Charts & tables for visualization
- Guided Tour (at least 5 steps for new users)
- Light/Dark mode toggle
- Responsive, accessible UI with clean theme & typography
| PH ID Last Digit | Assignment Variant |
|---|---|
0,1,2,3 |
Variant 1 |
4,5,6 |
Variant 2 |
7,8,9 |
Variant 3 |
🔍 To find your PH Student ID → Go to web.programming-hero.com → Profile → ID is below your name.
| Date | Marks |
|---|---|
| 📅 27 Aug 2025 - 11:59PM | 🟢 60 Marks |
| 📅 28 Aug 2025 - 11:59PM | 🟡 50 Marks |
| 📅 Late Submission | 🔴 30 Marks |
Post in your batch group or reach out to your Group Leader.
Let’s design a frontend that feels production-ready! 💪
Plagiarism of any kind will result in 0 marks.
Make sure your submission reflects your own original work.
You may use online references, but you must build and style your own project.
📌 This assignment is designed to test your ability to design, integrate, and secure a frontend system using React & Redux. It reflects real-world frontend engineering challenges, so focus on usability, responsiveness, and robustness.
🎨 "Design like real users will use it. Keep it clean, smooth, and reliable!"
