This is a technical test for frontend developer position at PREPTEST. You are expected to create a simple web application that is similar to below FIGMA DESIGN:

You can add more features or alter the design a little bit as you see fit. The design is just a reference. But core features must be the same.

• REQUIREMENTS
• Getting Started
  • Prerequisites
    • VSCode Extensions
  • Installing
  • Running
• Built With
• Testing
  • How to write test
    • Unit Test
    • E2E (End to End) Test - RECOMMENDED

• Use this repository as a template to start your project.
• Design with Tailwind v3 CSS Utility Library.
• Responsive, mobile-first and accessible design.
• ReactJS with hooks. (No class component)
• Use React Composition Pattern to create reusable components.
• It is extra to create unit test and e2e test. (You can use Jest, React Testing Library, and Cypress) E2E test is recommended but not required. You can ask for support and more information about this if you need.
• After completion, you should send the link to your repository to us via email.

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Before you start, make sure you have installed the following software on your computer:

• NodeJS
• NPM
• Git
• Visual Studio Code

• ESLint
• Prettier

1. First, Fork this repository into your GitHub account.

2. Then, clone this repository into your computer:

git clone https://github.com/[GITHUB_USER_NAME]/preptest-frontend-technical-test

3. Then, install yarn v1.22.10 globally (if you don't have it already):

npm install --global [email protected]

4. Then, install all dependencies:

yarn

To run this project, run the following command:

yarn dev

• NextJS - The React Framework for Production

• Jest - JavaScript Testing Framework
• React Testing Library - Simple and complete React DOM testing utilities that encourage good testing practices
• Cypress - Fast, easy and reliable testing for anything that runs in a browser

Unit test is written using Jest and React Testing Library. To write unit test, create a file with the same name as the file you want to test, but with .test.ts or .test.tsx extension. For example, if you want to test src/components/HelloWorld.tsx, create a file named src/components/HelloWorld.test.tsx.

E2E test is written using Cypress. To write E2E test, create the files with the same folder structure in cypress folder at the root of the project. For example, if you want to test src/pages/index.tsx, create a file named cypress/e2e/pages/index.cy.ts.