Get the freshest groceries at the best prices
Grocerly is an e-commerce shopping patform for groceries. A visiting user is able to do the following:
- arrive at the home page via https://grocerly-store.netlify.app
- search products 🔍
- view product page for more details
- sign up/sign in 👤
- add products to wishlist
♥️ - add products to cart 🛒
- checkout 🎉
- React.js
- Firebase for database
- React Router for routing
- Styled Components for styling
- Algolia for product search handling
- Fontsource for fonts
- React Icons for icons
- React Hot Toast for pop-up notificatoins
My goal was to simulate a professional work environment.
-
I built this app based on Figma designs:
-
I worked with tasks on a Kanban board:
-
I used feature branches and Pull Requests: Here is a PR example
- Somewhat complex stateful logic: Link to example code
- Responsive CSS using styled-components: Link to example code
- The application fetches data from Firebase: Example for the request data and transformation
- I didn't use a state management library like Redux on purpose. For this app simple
useStateanduseContextare sufficient. I realized that more and more projects don't use Redux anymore since GraphQL or react-query are often used for data management. - styled-components is a great library for styling. It includes an auto-prefixer, uses scoped classes, and allows a seamless integration with JS.
- My plan is to become a full-stack developer eventually. But for the beginning I focus on the frontend. That's why I decided to use an existing database provider like Firebase rather to create a custom database.
- Set up continuous integration to run the tests and ESLint on every Pull Request
- Refactor some of the code. Especially this part
- Add end-to-end tests with Cypress.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.