Full-Stack Intern Assignment

Objective
Your task is to build a full-stack application using a provided Figma design for the frontend and
specified technologies for both frontend and backend. The application will consist of a React-
based frontend with TypeScript and a [Link] backend with Prisma, adhering to modern
development practices.

Frontend Requirements
• Figma Design Conversion:
o Convert the provided Figma design link into a fully functional React application.
o Use TypeScript for all code to ensure type safety.
• Project Structure:
o Organize the project into three main areas:
§ UI Components: Reusable and modular components reflecting the Figma
design.
§ Business Logic: Separate logic from UI for reusability and maintainability
(e.g., using hooks or utility functions).
§ API Handling: Manage API interactions efficiently.
• Required Libraries:
o Zod: Implement schema validation for data integrity.
o React Hook Form: Use for form management and validation.
o React Query: Handle data fetching, caching, and state management.
• Type Safety:
o Ensure all API responses are typed using TypeScript interfaces or types for full
type safety.
• Error Handling:
o Implement proper error handling in the frontend to manage API errors and display
meaningful messages to the user.

Backend Requirements
• Technology Stack:
o Build a [Link] server using TypeScript.
o Use Prisma for database management (schema definition and querying).
• Prisma Schema:
o Create only a user schema in Prisma with the following fields:
§ email (string, unique)
 § password (string)
o Ensure the schema is properly defined and migrations are handled.
• Project Structure:
o Organize the backend into:
§ Controllers: Contain the business logic for each endpoint.
§ Routes: Define API endpoints (e.g., using [Link] or a similar router).
• Error Handling:
o Implement robust error handling (e.g., custom error classes or middleware) to
manage and respond to errors gracefully.

General Instructions
• README Files:
o Include a detailed README in both the frontend and backend projects.
o The README should cover:
§ Setup instructions (e.g., installing dependencies, configuring environment
variables).
§ How to run the project locally.
§ A brief overview of the tech stack and project structure.
• Video Demonstration:
o Record a video showing the working application (both frontend and backend in
action).
o The video must:
§ Demonstrate the full functionality of the application.
§ Show proper error handling from the frontend (e.g., invalid inputs,
API errors).
§ Confirm that the project is working as expected.
o Share the video via a Google Drive link.
o Ensure the video clearly demonstrates functionality; failure to show a working
project will result in immediate disqualification.
• GitHub Repository:
o Provide a single GitHub repository containing both frontend and backend
projects.
o Use separate folders (e.g., /frontend and /backend) for clarity.
o Ensure the repository is public or accessible to reviewers.
• Deployment:
o Deployment is not required; focus on local functionality.

Evaluation Criteria
Your submission will be assessed based on the following:
 • Accurate and complete implementation of the Figma design in the frontend.
• Proper use of TypeScript for type safety across both frontend and backend.
• Effective integration of Zod, React Hook Form, and React Query in the frontend.
• Correct implementation of the user schema in Prisma (with only email and password) and
its integration with the backend.
• Clean, organized, and modular code structure in both projects.
• Robust error handling in both frontend and backend.
• Quality and clarity of the README files and video demonstration.

Additional Notes
• The application must be fully functional with no critical bugs.
• Focus on code quality, readability, and adherence to best practices.
• This is an individual assignment; collaboration is not allowed.

Submission
• Submit the following by: 31, March, 2025
o The GitHub repository link containing both frontend and backend projects.
o The Google Drive link to your video demonstration.
• Ensure both links are accessible to the reviewer.