Xghayor / front-end-tech-test

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Front-End Development Technical Test: Figma Design Integration

Task Overview

Your task is to perform a pixel-perfect integration of a provided Figma design, showcasing your skills in front-end development using NextJS.

Technologies

  • Framework: NextJS 14 App Directory
  • Language: TypeScript
  • Styling: Tailwind CSS

Evaluation Criteria

You will be evaluated on:

  • HTML Semantics: Use of appropriate HTML5 tags to structure the content meaningfully.
  • CSS Usage and Structure: Efficient and organized CSS, showcasing a clear understanding of styling principles.
  • React Component Structure: Effective organization and composition of React components.
  • Pixel Perfect Integration: The visual output should closely match the Figma design, with attention to detail in layout, spacing, fonts, and colors.
  • Responsiveness: The page should be fully responsive and adapt gracefully to different screen sizes.
  • Project Structure: Logical and clean structuring of the project files and directories.
  • Component Widgets Implementation: Incorporate functional UI elements like slideshows, dropdowns, etc., as indicated in the design.
  • Image Optimization: Efficient use of images, ensuring they are optimized for web performance without loss of quality.

Exclusions

  • No State or Data Management Required: Focus solely on the front-end design integration without worrying about managing any state or backend data.
  • Strict Adherence to Figma Design: There is no need to add any elements or functionalities beyond what is specified in the provided Figma design. Although the responsive design isn't provided in the Figma, you should ensure that the page is fully responsive.

Resources

  • Figma design: Available in ./design
  • Videos: Available in ./videos
  • Fonts: Available in ./fonts

Submission Instructions

  • GitHub Repository: Push your code to a public GitHub repository with all the necessary instructions for local setup.
  • Vercel Deployment: Deploy your project on Vercel. Use the public URL and not the deployment preview link.
  • Submission: Submit your code using the link you've received in the same email as the link to this technical test.

Disclaimer

This code will not be used commercially; the website is already fully developed. This test is solely for evaluation purposes.

Deadline

Please submit your work before Sunday, May 5th, 2024 at 23:59 CET.


Good luck with your task! We look forward to seeing your skillful execution and technical proficiency.

About