https://github.com/yivgha/next-online-grocery
https://github.com/yivgha/next-online-grocery
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/yivgha/next-online-grocery
- Owner: Yivgha
- Created: 2024-05-22T15:35:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-27T16:06:47.000Z (about 1 year ago)
- Last Synced: 2024-05-27T22:41:34.671Z (about 1 year ago)
- Language: JavaScript
- Size: 3.74 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Online grocery store pet-project
       
## About
This is an example of React app created with Next.js and Strapi backend plus PostgreSQL database deployed on Render.com. For styling i used TailwindCSS, some Shadcn components and Lucide icons. The main idea is to create realistic online grocery store with basic functionality:
- See list of products by category or search.
- Create user who can add products to cart, delete and make an order.
- Pay for the order online.
- See additional information about company.
## Main page
When user first comes to the site, they can see header with clickable logo, categories of products dropdown, searchbar and login button, also - animated slider, clickable categories grid, first 10 popular products, section about delivery info with default testimonials and footer with clickable component and "Go to hero section" button.
If user clicks on login button, they can use existing credentials to log in into system or create new account. Authorized users can see cart button and clickable menu on the top right corner instead of login button.
## Usage
User can click on any product item on main page and see the modal popup, which gives the ability to add one or few similar items to cart quick. If item was added successfully, user will see small toast in the right bottom corner with information about it.
They can click on category item or select a category in header dropdown and open category page, where only items from one category are showing.
If they want to search something by the product's name, they can add this to input and click "search" button or press "Enter" and they'll be redirected to Search page, where only products by selected query are showing.
After adding items to cart, they can see number of items in cart in header. On this icon click, right sidebar opens, where user can see list of selected items and total price. They can delete item and list will change dynamically. On button "Checkout" click user can see checkout page.
## Checkout and order
On Checkout page user can add info for future delivery. They can fill info and after this PayPal button appears. Developers can test data sending by clicking on simple "Payment" button, which only creates order on backend without paying.
But with PayPal usage user will see their pop-up and must create a wallet and pay calculated sum in USD to finish order.
If they pay successfully, order will be created on backend and user will see new page with information about it.
They can click on Track button or open "My orders" page via menu in header. On this page user can see list of orders from latest to earliest.
Each item is clickable and contains order id, date, status and list of ordered items plus price. Default status is "Pending", but admin can change it manualy to "Fulfilled" or "Rejected".
Each authenticated user has its own jwt token stored in localStorage. So after reloading page or re-opening browser all info is stored successfully.