This exercise is designed to evaluate your abilities as a frontend developer. Our aim is to gain insight into your technical skills, problem-solving abilities, and attention to detail.
The task involves implementing a given design, linked below, which will serve as the basis for your work during this exercise.
Figma Design: Design Link
Your assignment as a frontend developer is to reproduce the provided design as accurately as possible. Our current tech stack includes Vue3 with Pinia and TailwindCSS, underpinned by TypeScript. We use Vite for our development environment.
Follow these steps to complete the task:
-
Fork the Repository: Start by forking the current repository to your own GitHub account.
-
Clone the Repository: Once you've forked it, clone the repository to your local machine.
-
Set Up the Environment: Set up your development environment by creating a new project with Vue3, Pinia, TailwindCSS, and TypeScript. We recommend using Vite as your development environment. If you're unfamiliar with this setup, there are numerous online resources that can assist you.
-
Implement the Design: Based on the Figma design provided, recreate the layout in your local environment. If the Figma design doesn't specify certain CSS properties, we encourage you to use your creativity to match the design as closely as possible.
-
Create a JSON Object: Generate a JSON object containing an array of projects. This object should be passed into your Vue component, with the projects being displayed in your user interface.
-
Implement "New Project" Feature: Implement a feature such that when the "New Project" button is clicked, a new item is added to the JSON array and is automatically displayed at the top of the list of projects.
In addition to the accuracy of your implementation and your use of our tech stack, we're particularly interested in your organizational skills. Specifically, we'll be looking at:
-
Folder Structure: How well-organized is your project? Is the folder structure clear, declarative and logical?
-
Code Quality: Is your code clean, efficient, and easy to read? Do you follow best practices for the technologies you're using?
After completing the task, commit your changes and push them to your GitHub account. Then, provide us with the link to your forked repository as part of your submission. We look forward to reviewing your work!
Don't hesitate to reach out to us if you have any questions or need clarification on any part of the exercise.
Good luck!