Coffee-Delivery

This is a study project made to develop ReactJS and learn it's concepts.

In this project I've build a ReactJS we build a Coffee e-commerce in this challenge to study ContextAPI, fom validations and listing products that come from a fake API. In this project I've made the Front-end Development from ground up using a Figma design as reference, for styling I've used Styled-Components. A plus in this project was to make the filtering system work, so the user can filter each type of coffee by the labels even more than one at time.

The whole project keeps in mind accessibility too, you can navigato through the app with the keyboard with no problem at all.

For UI/UX design we use Figma with the design build to guide.

Stacks

Front-end: ReactJS, CSS3, styled-components, React Hook Form, Zod resolver, TypeScript

Back-end: Axios, json-server

Acquired Knowledge

• Use of Vite
• Use of Axios with fake API
• Use of useContext for adding products to cart and checkout
• Basic knowledge of the React framework
• Knowledge in React Hook Form lib
• Knowledge in Styled-Components
• Knowledge in json-server for front-end server preparation
• Modularization and SOLID concepts
• Usage of Figma for UI/UX concept, exporting SVG objects and inspect CSS aspects of the UI
• Accessibility functions, like keyboard navigation and good practices

Run project

• Clone Repository
• Install dependencies with npm i
• Run json-server npm run server
• Run project with npm run dev

Reference

• Rocketseat - Ignite Trail
• Vite
• React - useContext
• React Hook Form
• Axios
• json-server
• Styled-components

Contact