MERN Stack Developer Assignment
Project:
Frontend & Backend Implementation of ATK UI Design
Deadline:
4 Days from Assignment Date
Figma File:
https://www.figma.com/design/j9TVpOirWp4u7enDZyJFxw/Atk?node-id=0-1&t=bPJKTUInDc9VoIOF-1
Objective:
Recreate both Frontend and Backend of the provided Figma design using the MERN stack (MongoDB,
Express.js, React, Node.js). The goal is to replicate the UI and ensure basic backend integration for core
components.
Scope of Work
Frontend (React.js):
- Pixel-perfect implementation of all screens from Figma.
- Responsive design.
- Use functional components and hooks.
- Suggested libraries: React Router, Axios, Tailwind/Bootstrap (your choice).
Backend (Node.js + Express.js):
- Set up basic REST APIs for:
- User Authentication (Signup/Login with JWT)
- Content/Data visible in the frontend (dummy/static data allowed if actual logic is unclear)
- Use MongoDB (local or MongoDB Atlas) for storing user data and dummy content.
- Ensure proper folder structure and modular code.
MERN Stack Developer Assignment
Deliverables:
1. GitHub Repository with:
- /frontend and /backend folders
- README.md with setup instructions and preview (if hosted)
2. Hosted demo link (optional but preferred - Vercel/Netlify for frontend, Render for backend)
Evaluation Criteria:
- UI Accuracy
- Code Quality & Structure
- Functional Backend
- API Integration
- Timely Submission
