Scribd
Upload
48 views6 pages

? - ? Frontend Developer Assignment

The assignment requires building a commercial-grade frontend application using Next.js, TypeScript, and Tailwind CSS, with all functionalities implemented and no placeholders. Candidates can choose from six project prompts, each requiring specific features and a professional UI design. The final submission must be a single .tsx file, fully responsive, visually polished, and functional, with a deadline of May 6, 2025.

Uploaded by

nishreyasaruni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views6 pages

? - ? Frontend Developer Assignment

The assignment requires building a commercial-grade frontend application using Next.js, TypeScript, and Tailwind CSS, with all functionalities implemented and no placeholders. Candidates can choose from six project prompts, each requiring specific features and a professional UI design. The final submission must be a single .tsx file, fully responsive, visually polished, and functional, with a deadline of May 6, 2025.

Uploaded by

nishreyasaruni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

🧑‍💻 Frontend Developer Assignment

Build a Fortune 500–level frontend — elegant, interactive, and complete.

🚀 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​

●​ The app should be:​

○​ Fully responsive​

○​ Visually polished​

○​ Functional — every element should work.

📝 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.

📋 Choose ONE of the following assignments:


🔹 1. Personal Analytics & Habit Tracker
Prompt:​
I want an app that helps me keep track of my daily habits and personal stats like sleep,
water intake, and screen time. I’d like to see charts that show my weekly progress, a way to
set daily goals, and reminders if I miss something. It should also let me check in or log my
activity every day and see my current streak or performance trends.

Must have:

●​ 📊 Habit progress graphs​


●​ ✅ Daily check-in or goal sliders​
●​ 🔁 Streak tracker or "days completed" counter
●​ All the professional elements like landing page, navbar, footer, commercial UI related
things

🔹 2. Goal-Oriented Progress Tracker


Prompt:​
I’m looking to build a tool where users can set personal or team goals and track their
progress over time. It should have a dashboard to visualize goals, show how much has been
completed, and allow comments or feedback from others. I’d also like a way for users to
mark milestones and see their achievements as they move forward.

Must have:

●​ 🎯 Goal cards with progress bars​


●​ 📝 Comment/feedback system​
●​ ✅ Milestone markers or badges
●​ All the professional elements like landing page, navbar, footer, commercial UI related
things

🔹 3. Real-Time Monitoring Dashboard


Prompt:​
Can you help me build a dashboard that monitors data live and shows alerts when certain
thresholds are hit? I want to display real-time values like temperature, traffic, or website
visitors. It should have colored status indicators (green/yellow/red), a section for recent
alerts, and maybe some simple graphs showing changes over time.

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​

🔹 4. Messaging & Chat Interface


Prompt:​
I want to build a simple messaging app that lets users chat in real time. It should have a list
of online users, a chat window with messages, and show when someone is typing. I'd also
like a way to react to messages with emojis or send short status updates like "brb" or "busy."

Must have:

●​ 🧑‍🤝‍🧑 Online user list​


●​ 💬 Live chat with message bubbles​
●​ ✍️ Typing indicator & emoji reactions
●​ All the professional elements like landing page, navbar, footer, commercial UI related
things​
​

🔹 5. Community Hub & Membership Platform


Prompt:​
Can we make a platform where users can join different interest-based communities? Each
community should have a home feed, upcoming events, and a member list. Users should be
able to post updates, like or comment on others’ posts, and get notified when new content is
shared.

Must have:

●​ 🏡 Community posts feed​


●​ 💬 Comments and likes​
●​ 🗓️ Upcoming events section
●​ All the professional elements like landing page, navbar, footer, commercial UI related
things​

🔹 6. Group Event Planner


Prompt:​
I want an app that helps small groups plan events together. It should have a shared
calendar, a place to suggest event ideas, and an RSVP system so everyone can confirm if
they’re attending. I'd like it to send friendly reminders and show how many people are in for
each event.

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

●​ Use neutral backgrounds, good spacing, and professional fonts

●​ 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)

You might also like