CubeZoo - React Frontend Developer Test

Objective

The goal of this project was to accurately recreate the provided design using React along with Tailwind CSS for styling. Paid close attention to details like spacing, fonts, and colors, and aimed to deliver a pixel-perfect or near-perfect match of the Figma design across various screen sizes (mobile, tablet, desktop).

Assets & Design

• Figma Design: Web Design FE Test - 10 October 2024
• Asset Files (Images, Icons, etc.): Download Here

Task Overview

1. Set Up the Project:

   • Create a React project using any boilerplate of your choice.
   • Install and configure Tailwind CSS as your preferred styling framework.

2. Implement the Design:

   • Recreate the page layout and styles exactly as shown in the Figma design.
   • Ensure responsive behavior, adjusting layouts to fit various screen sizes (mobile, tablet, and desktop).
   • Use the provided assets from the asset files link (images, icons, etc.).
   • Implement hover effects and other interactive features where required.

3. Responsive Design:

   • Ensure that the layout looks good across different device sizes, matching the responsive guidelines in the Figma file.

4. Use Best Practices:

   • Write reusable and well-structured React components.
   • Ensure your code is clean, maintainable, and well-commented.

5. Optional:

   • If you are familiar with libraries like React Router or Redux for state management, feel free to integrate them, although they are not required for this test.

Design Details

Pay special attention to:

• Spacing: Match the spacing specified in the design system.
• Typography: Use the exact fonts and sizes as indicated in the Figma file.
• Color Palette: Follow the color palette provided in the design system section of the Figma file.
• Interactions: Apply hover states and interactions where appropriate, as shown in the design.

Submission Instructions

• Submit your completed project via a GitHub repository.
• Ensure all dependencies are listed in a package.json file.
• Include a README.md file with clear instructions on how to run the project locally.

How to Run the Project

Prerequisites

• Node.js (version >= 14)
• npm or yarn

Steps to Run

1. Clone the repository:

   git clone https://github.com/your-username/high-five-videos.git
   cd high-five-videos
   

2. Install dependencies:

npm install
# or
yarn install

3. Run the development server:

  npm start
  # or
  yarn start

4. Open your browser and navigate to http://localhost:3000 to view the app.