Scribd
Upload
48 views3 pages

Full Stack Developer Assessment (1)

The Yoliday Full Stack Developer Assessment requires the creation of a responsive web dashboard based on a provided Figma design, utilizing React with TypeScript for the frontend and Node.js with MySQL for the backend. Key features include navigation tabs, real-time search, form handling with validation, and CRUD operations for projects. Bonus features and additional considerations focus on error handling, code organization, and deployment requirements.

Uploaded by

yadadsandeep944
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 views3 pages

Full Stack Developer Assessment (1)

The Yoliday Full Stack Developer Assessment requires the creation of a responsive web dashboard based on a provided Figma design, utilizing React with TypeScript for the frontend and Node.js with MySQL for the backend. Key features include navigation tabs, real-time search, form handling with validation, and CRUD operations for projects. Bonus features and additional considerations focus on error handling, code organization, and deployment requirements.

Uploaded by

yadadsandeep944
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/ 3

Yoliday Full Stack Developer Assessment​

Goal
Build a responsive and visually accurate web dashboard based on the provided Figma design: ​
​
Figma Design:
https://www.figma.com/design/IBCysHuen9Sa6sedhRLaCP/Yoliday-Assignment?node-id=0-1

Core Requirements
1. Frontend (React with Vite or Next.js + TypeScript)

●​ Use TypeScript throughout the project.


●​ Routing & Navigation:
○​ Implement Navbar Tabs: Project | Saved | Shared | Achievement
○​ Implement Sidebar Tabs: Dashboard | Portfolio | Inputs | Profile
●​ Design & Responsiveness:
○​ Match Figma design accurately for both mobile & desktop views.
○​ Use CSS Grid or Flexbox for layout.
○​ Make Sidebar Collapsible for smaller screens.
○​ Ensure smooth navigation across screens.
●​ Search & Filtering:
○​ Implement a search bar in the top navigation to filter projects in real-time.
●​ UI Features:
○​ Implement Add to Cart button to simulate saving a project.
○​ Display cart status dynamically (e.g., visual change when added).
●​ Form Handling:
○​ Implement forms with frontend validation using libraries like React Hook Form or
Tanstack Form.
○​ Include error messages and validation feedback.
2. Backend (Node.js + Express + MySQL)

●​ Use TypeScript in backend services as well.


●​ API Development:
○​ GET /projects - Fetch the list of projects with pagination support.
○​ POST /cart - Add a project to the cart.
○​ GET /cart - Fetch the saved projects list.
●​ Data Validation:
○​ Validate incoming data on API endpoints.
○​ Return structured error messages for invalid data.
●​ Database (MySQL):
○​ Create a schema to store projects with fields: id, title, description, category,
author, image_url
○​ Set up basic CRUD operations.

Project Scope Checklist


●​ Form with input validation (frontend & backend)
●​ Loading states
●​ Error handling
●​ Table/List display of projects
●​ Full CRUD operations for projects

Technologies to Use
●​ Backend (Node.js + Express + MySQL) with TypeScript
●​ UI Libraries: Shadcn / Material UI / Chakra UI
●​ Styling: Tailwind CSS or Vanilla CSS

Bonus Features (Extra Credit)


●​ React Query for data fetching and caching
●​ React Router DOM (for React.js) or Pages/App Router (for Next.js)
●​ React Hook Form or Tanstack Form for form management
●​ Pagination in UI and API
●​ Deploy the app on Vercel (frontend) & Render/Fly.io (backend)

Additional Considerations
Error Handling
●​ Implement proper error handling for failed API requests.
●​ Show loading states while fetching data.

Code Organization

●​ Use a clear folder structure with components, pages, and services.


●​ Follow React best practices (separate concerns, reusable components).

Submission Requirements
●​ GitHub repository with frontend and strapi/backend code and a well-documented
README.
●​ Host on platforms like Vercel (frontend) and Heroku (backend) and share the live link.

About Yoliday LLP


Website
Yoliday connects like-minded travelers for shared adventures, emphasizing collaboration and
community. It enables users to create or join travel experiences, fostering unique bonds and
friendships.

You might also like