Skip to content

EDusik/bees-challenge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

76 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🐝 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