?_? Frontend Developer Assignment
?_? Frontend Developer Assignment
🚀 Objective
Create a fully working, commercial-grade frontend using Next.js + Tailwind CSS +
TypeScript.
All features must be functional — no dummy buttons or static links. The design should
feel modern, clean, and production-ready.
We are NOT looking for a DEMO like applications. We are looking for
visually appealing, COMMERCIAL ready, PROFESSIONAL UI with all
the FUNCTIONALITIES implemented, with Wow Factors.
🛠️ Tech Requirements
Item Requirement
Framework ✅ Next.js
Language ✅ TypeScript
Styling ✅ Tailwind CSS only (no other CSS frameworks)
UI Libraries ❌ Not allowed (no shadcn/ui, no daisyUI, etc.)
Components ✅ All code in ONE single .tsx file
Functionality ✅ Everything must work — no mock buttons
Data ✅ Use realistic mock data (no APIs needed)
Some libraries that can be used are framer
motion, recharts (if using charts), for user avatars
you can use randomuser api, for images you can
use unsplash or any other.
📦 Deliverables
● Submit ONE .tsx file per assignment
○ Fully responsive
○ Visually polished
📝 Mandatory requirement:
1.All the functionalities should work, Each and every
button/link should work. No placeholders.
2.The UI should be visually appealing, professional,
responsive.
3.UI must have landing page, navbar, footer, prompt
requirements and complete functionalities.
4. The UI should be a Single Page Application (SPA) that
means instead of using different pages use components
as your page. For example if i click on the settings then it
should either open the modal or change the screen to
settings
5.Use professional Font, animations, transitions. ( Bonus if
using framer motion )
6.If you are having something to do with charts then use
Recharts.
Must have:
Must have:
Must have:
● 🟢 Color-coded live status
● 🔔 Alert notification area
● 📈 Mini real-time line or bar chart
● All the professional elements like landing page, navbar, footer, commercial UI related
things
Must have:
Must have:
Must have:
● 📅 Interactive calendar
● 📌 Add/suggest events
● ✅ RSVP tracker with counts
● All the professional elements like landing page, navbar, footer, commercial UI related
things
🎨 Design Tips
● Keep it clean and modern — aim for a professional commercial SaaS-style,
Fortune 500–quality feel
● The UI should not feel empty or with very minimal content/functionalities, It should be
filled.
● The UI has to look professional, intuitive and visually appealing. (This is the core
requirement)
● Use hover states, animations, shadows thoughtfully
📝 Submission Format
File Name: your-name-assignment-title.tsx
Example: sachin-habit-tracker.tsx
📝 Advice
Use Claude AI to build the UI and then use chatgpt to fix any bugs or implement the
functionalities that Claude might have not built.
Why Claude ? Claude gives really good UI designs which are intuitive, unique,professional
and have a commercial look You can specify to Claude to have a great professional UI. (Use
Claude think model if you have it)
📝 What’s Next ?
If you do this assignment as said and it passes the quality we need from you, then there will
be a final interview which will be regarding this assignment itself and to know you better, and
Voila! You are hired .
🕒 Deadline
📅 6th May 2025 (Can be extended to 1 day more if by any chance not able to submit, case
by case)