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.
