Grocerly

Get the freshest groceries at the best prices

Grocerly is a demo e-commerce shopping platform for groceries, designed to provide a seamless and enjoyable shopping experience for customers. With a user-friendly interface and a wide range of products, Grocerly aims to make grocery shopping easier and more convenient than ever.

Features

• Browse and purchase a wide range of groceries, including fresh produce, meat, dairy, and household essentials
• Create an account and log in to save your favorite products and track your orders
• Filter products by price and category
• Checkout securely with a variety of payment options

Features I would like to add

• Read reviews and ratings from other customers to help you make informed purchasing decisions
• Search for products by name, category, or keyword

How it Works

1. Browse the website and add products to your cart
2. Create an account or log in to proceed to checkout
3. Enter your shipping and payment information
4. Review and confirm your order
5. Go to the profile page at https://grocerly-store.netlify.app/profile, toggle admin status, and visit the admin pages at https://grocerly-store.netlify.app/admin to view detailed customer, products and order information.

Technology Stack

• Built with React and styled-components for a fast and responsive user interface
• Uses Firebase for authentication, authorization, and data storage
• The full stack comprises
  • React.js using Vite and TypeScript
  • Firebase for database
  • React Router for routing
  • Styled Components for styling
  • Fontsource for fonts
  • React Icons for icons
  • React Hot Toast for pop-up notifications
  • React Table Library for data presentation
  • SWR to keep the data fresh

Development Process

• Designs (home page & loaders) are from Ramzi, and inspiration for the admin pages are from Arafat
• Developed by me using a combination of Figma for design and Visual Studio Code for development
• Tested and debugged using Vitest
• Deployed to Netlify for hosting and deployment

Run Locally

1. Clone the repository
2. Install dependencies by running yarn
3. Run yarn dev to start the development server
4. Open http://localhost:5173 with your browser to see the result

Images

Home page

Admin