edusik/bees-challenge

🐝 Front-end challenge made for the BEES Company

🐝 BEES Front-end Challenge

BEES front-end challenge made using React.

Vamos juntos nessa transformação!

🖵 Preview

Application

API Error

Cypress

🎨 Design

The user interface of this project was based on this Figma.

💻 Technologies

This project uses these technologies:

• React
• Styled Components
• Axios
• Zustand
• React Testing Library
• Cypress
• Vercel

🔗 Endpoint [API]

• Open Brewery DB

⌨️ Commands

Install Dependencies

npm install

Run Project

npm start

• APP: http://localhost:3000/

Run Unit Tests

npm run test

with percentage covered

npm run test -- --coverage --watchAll=false

Run Cypress Tests

npx cypress open

👨‍💻 Solution

📁 Folder Structure

├── _src
│   ├── _components
│   │   ├── _Example
│   |       ├── Example.spec.tsx
│   |       ├── Example.tsx
│   |       ├── ExampleStyled.ts
│   |       ├── index.ts
│   └── models
...

General Decisions:

• I used semantic commits since the beginning of the project, something I've been doing for a while;
• I chose to use sass together with styled components (just personal preference);
• I chose to use the TypeScript as well as type all the props and states of my components;
• I used the svg icons provided in the Figma template;
• I decided to use zustand to save the full name due to the ease of the lib;
• Also, I added a minimum of 7 and limit of 32 characters in the full name field;
• I added a field called tag to the company object, as well as an icon when adding a new tag;
• I added a minimum limit of 14 characters in new tag;
• I added a loader with css animation and an error message if the API fails;

Critique

Improvements:

• Dynamic Loading of data showing more as you reach the bottom of the page;
• Implement an SVG image component to all icons;

Although they are not mentioned in the challenge, I believe these would be good improvements:

• Persist the modified data in some way, perhaps using localStorage;
• Don't let unnamed users see the companies page;
• Error message if the new tags are outside the stipulated limit;
• Make the delete company and add tag actually real using an API;

Notes:

• I hope you like the result 😅.

Developed by Eduardo Dusik