https://github.com/shubham001official/grofers
An online grocery store built with Next.js 14, Tailwind CSS, Strapi, and PostgreSQL. Features a user-friendly UI/UX, categorized products, sound effects, and secure PayPal payments. Deployed on Vercel and Render. 🚀
https://github.com/shubham001official/grofers
ecommerce fullstack-development nextjs14 online-grocery-store paypal-integration postgresql reactjs render responsive-design shopping-cart strapi-cms tailwindcss vercel-deployment web-development
Last synced: about 1 year ago
JSON representation
An online grocery store built with Next.js 14, Tailwind CSS, Strapi, and PostgreSQL. Features a user-friendly UI/UX, categorized products, sound effects, and secure PayPal payments. Deployed on Vercel and Render. 🚀
- Host: GitHub
- URL: https://github.com/shubham001official/grofers
- Owner: shubham001official
- License: mit
- Created: 2024-05-31T15:19:26.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-11T15:50:05.000Z (about 2 years ago)
- Last Synced: 2025-03-30T00:16:04.958Z (about 1 year ago)
- Topics: ecommerce, fullstack-development, nextjs14, online-grocery-store, paypal-integration, postgresql, reactjs, render, responsive-design, shopping-cart, strapi-cms, tailwindcss, vercel-deployment, web-development
- Language: JavaScript
- Homepage: https://grofers.vercel.app
- Size: 874 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Grofers - Online Grocery Store 🛒
Welcome to **Grofers**, your go-to online grocery store for a seamless shopping experience. Purchase groceries and household essentials from the comfort of your home with just a few clicks. 🌟
## 🌟 Features
- **Login & Sign Up**: Secure and easy authentication for a personalized experience.
- **Product Categories**: Browse through a variety of categories like Vegetables, Fruits, Milk & Juice, Personal Health Care, Egg & Chicken, and more.
- **Sound Effects**: Enjoy delightful sound effects for adding items to the cart and successful checkouts.
- **User-Friendly UI/UX**: Clean, attractive, and responsive design for the best user experience.
- **Secure Payments**: Seamless transactions with PayPal integration.
- **Validation**: Robust form validation for smooth user interactions.
## 🚀 Purpose
Grofers aims to revolutionize the online grocery shopping experience by providing:
- **Convenience**: Shop for groceries from anywhere, anytime.
- **Wide Product Range**: Find all your household essentials in one place.
- **Engaging Features**: Enjoy unique features like sound effects and a responsive interface.
- **Security**: Trustworthy transactions with PayPal.
## 🛠️ Technologies
### Frontend
- **Next.js 14**: For a powerful and scalable React-based framework.
- **Tailwind CSS**: To style the application with utility-first CSS.
- **Stripe**: For secure and seamless payment integration.
### Backend
- **Strapi**: A headless CMS for managing content.
- **PostgreSQL**: A robust and scalable relational database.
## 🌐 Deployment
- **Frontend**: Deployed on [Vercel](https://grofers.vercel.app).
- **Backend**: Deployed on [Render](https://render.com).
## 📸 Screenshots
Homepage
Create Account Page
Sign-in Page
Popular Products
Shop by Category
My Cart
Checkout Process
Payment Gateway
Order Successful
My Orders
## 📥 Installation & Setup
### Prerequisites
- Node.js and npm installed
- PostgreSQL database (local or cloud instance)
### Environment Variables
Create a `.env.local` file in the root directory and add the following:
```env
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=your-stripe-public-key
DATABASE_URL=your-postgresql-database-url
```
### Steps
1. **Clone the repository**:
```sh
git clone https://github.com/shubham001official/grofers.git
```
2. **Install dependencies**:
```sh
cd grofers
npm install
```
3. **Run the development server**:
```sh
npm run dev
```
4. **Open your browser and visit**:
[http://localhost:3000](http://localhost:3000)
## 🤝 Contributing
Contributions are welcome! Feel free to open an issue or submit a pull request.
1. Follow consistent code style and adhere to linting rules.
2. Provide detailed descriptions for any new features or bug fixes.
## 📧 Contact
For support or feedback, reach out via email: [shubham001official@email.com](mailto:shubham001official@email.com)