Next.
js Development Assignment -
Technical Specifications
Dear Developer,
Please find below the technical specifications for a Next.js development assignment that
focuses on frontend implementation with API integration.
Objective
Develop a complete single-page web application using Next.js, TypeScript, and TailwindCSS
that consumes a local API for data presentation and management.
Design Reference
Please refer to the Figma design file linked below, which contains two versions of the same
page:
● A card-based view
● A row-based view
Figma Design Link:
https://www.figma.com/design/yw77dkEsGWkxY1TzqbXY7O/Test_Design?node-id=0-1&t=yPdV
FkiSHXm08ZP7-1
You are required to implement at least one of the views. Implementing both views is optional
but will be considered for bonus points.
API Data & Endpoint Creation
You will be provided with a data.json file containing 1,000 objects. Your task is to create an API
endpoint within your Next.js application (using Route Handlers). This endpoint should read the
content from the JSON file and serve it. Your frontend will then call this local API endpoint to
fetch the data for rendering.
Requirements
1. Framework & Stack
● Next.js (App Router preferred)
● TypeScript
● TailwindCSS
● shadcn/ui (optional, can be used for UI components)
2. API Integration
● Create a local API endpoint within your Next.js application to serve the data from the
provided JSON file.
● Consume this local API endpoint in your frontend.
● Handle API responses and error scenarios appropriately.
● Implement proper data fetching patterns (e.g., Server Components, useEffect).
3. Frontend Data Handling
● Fetch data from the local API endpoint you create.
● Implement pagination or infinite scroll for data loading.
● Handle loading states and error scenarios appropriately.
● Support pagination parameters (limit, offset/page) in your local API.
● Implement search and filtering capabilities on the data served by your API.
4. Frontend Functionality
Note: Custom implementation required - no external libraries for core functionality (e.g., data
tables).
● Search interface implementation.
● Filter functionality (by at least two relevant fields).
● Sort functionality (by at least two relevant fields).
5. Display & User Experience
● Match the Figma design closely for the selected view.
● Clean, readable, and modular code is expected.
● Responsive design is not mandatory, but will earn bonus points.
Bonus Excellence Criteria
● Implementing both frontend views (row and card layouts).
● Responsive design implementation.
● Debounced search implementation for optimal performance.
● Comprehensive error handling and user feedback.
● Well-structured, maintainable code with clear separation of concerns.
● Proper TypeScript implementation with strict typing.
● Performance optimizations (memoization, efficient re-renders).
● Code documentation and inline comments.
● Professional Git workflow with meaningful commit messages and appropriate commit
frequency.
Deliverables
1. Complete Next.js project with frontend implementation and local API.
2. README.md file with setup instructions and architectural decisions.
Submission Requirements
Send your submission email to [email protected] with the following:
1. Live Deployment Link: Deploy your application on a platform of your choice (Vercel,
Netlify, etc.).
2. GitHub Repository Link: Provide access to your complete source code repository.
We look forward to reviewing your implementation.
Best regards,
Keshav Madhav
Frontend Lead
PrudentBit
