Skip to content

Latest commit

 

History

History
121 lines (80 loc) · 3.2 KB

README.md

File metadata and controls

121 lines (80 loc) · 3.2 KB
Raw

🐝 BEES Front-end Challenge

BEES front-end challenge made using React.

Vamos juntos nessa transformação!

🖵 Preview

Application

Application Preview

API Error

API Error

Cypress

Cypress Preview

🎨 Design

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

💻 Technologies

This project uses these technologies:

🔗 Endpoint [API]

⌨️ Commands

Install Dependencies

npm install

Run Project

npm start

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