BEES front-end challenge made using React.
Vamos juntos nessa transformação!
The user interface of this project was based on this Figma.
This project uses these technologies:
npm install
npm start
npm run test
with percentage covered
npm run test -- --coverage --watchAll=false
npx cypress open
βββ _src
β βββ _components
β β βββ _Example
β | βββ Example.spec.tsx
β | βββ Example.tsx
β | βββ ExampleStyled.ts
β | βββ index.ts
β βββ models
...
- 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;
- 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;
- I hope you like the result π .
Developed by Eduardo Dusik