Welcome to my WeFit Challenge

Figma at 🎨

Since time is the most valuable thing in my life, see how much time I have spent on this.

Getting Started

Rename env-example to .env

You need to setup the api env so the project can run in any place. After this, run run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

---

Project Structuring Challenge: React + TypeScript + styled-components

The challenge consists of creating a simplified e-commerce website from scratch, where the candidate will have to create a flow with three modules/screens.

Modules/Screens:

1. Home: Where they will need to make a request to the API, thus bringing the list of movies that can be added to the cart.

2. Cart: Where they can see the items that have been added, totaling the total value based on each item added, being able to remove an item from the cart. By default, if the cart has no items added, the empty screen should appear with the option to return to the home screen.

3. Purchase Completed: After confirming the order on the previous screen, the user should be directed to the confirmed order screen. Here the user will also have the option to return to the home screen.

Note: assets can be exported from Figma itself.

About the API

For the challenge, we will simulate an API, where the candidate will have to perform a GET to https://wefit-movies.vercel.app/api/movies to obtain the list of movies.

Evaluation

• Weight: 8 out of 10
• Points Evaluated:
  • Fidelity of the Figma layout
  • Application functionality (absence of bugs)
  • Code quality:
    • Folder organization
    • TypeScript mastery
    • styled-components mastery
    • Good level of Componentization
    • Application of technologies (e.g., applying a specific library that speeds up development)
  • Application of best practices to isolate UI behavior from Integration logic
  • Readable and easily maintainable code (e.g., variables with clear names)
  • Clean code (e.g., avoiding console.log or unnecessary code)

As you can see, there are two challenges, the first one being JavaScript and the second one for structuring a React project. We kindly request that you deposit the result in a public Git repository exclusively for the React test. Host the application with a public URL, for example, on Vercel or Netlify. Please send the links within 24 hours from the sending of this email. If you need more time, please let us know. At this moment, it is very important for us that you manage to deliver the complete challenge.