logoCustordev

Gromuse Template

A modern, feature-rich grocery ecommerce template.

View the Deployed Live Version of the App:

This is the Live version here

Overview

Gromuse is a complete grocery ecommerce solution designed to provide seamless shopping experiences for fresh produce and groceries. Built with cutting-edge technologies like Next.js 14, TypeScript, and Tailwind CSS, along with MongoDB, Prisma, and Shadcn UI, it offers a robust platform for managing online grocery stores with ease.

Key Features

  • Customer Features:

    • Fresh produce browsing with quality tracking
    • Category & department-based navigation
    • Real-time stock availability
    • Delivery slot booking system
    • Shopping cart with real-time updates
    • Secure checkout process
    • Responsive and fast-loading design

  • Admin Dashboard:

    • Inventory management with fresh produce tracking
    • Sales and analytics monitoring
    • Order processing and delivery scheduling
    • Customer management
    • Promotions and special offers
    • Multi-role authentication (Admin and Staff)

  • Core Functionalities:

    • Authentication (NextAuth.js)
    • Payment processing (Stripe/Paystack)
    • Email notifications (Resend)
    • Real-time stock updates
    • Dynamic category filtering
    • Image optimization

Installation

Prerequisites

  • Node.js 18.x or higher
  • MongoDB database
  • Stripe account
  • Resend account
  • A code editor of your choice (e.g., Visual Studio Code, Sublime Text)

Installation Steps

1

Clone Repository

git clone https://github.com/yourusername/gromuse-template.git
cd gromuse-template
2

Install Dependencies

  npm install
  #You can use pnpm
3

Seed data

# Seed data
 npm run seed
4

4. Start Development Server

npm run dev

Configuration Guide

Environment Setup

Create a .env file in the root directory with the following variables:

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000

# Database
DATABASE_URL="your-mongodb-url"

# Authentication
NEXTAUTH_SECRET="your-secret"
NEXTAUTH_URL="http://localhost:3000"

# Stripe
STRIPE_SECRET_KEY="your-stripe-secret"
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="your-stripe-publishable"
STRIPE_WEBHOOK_SECRET="your-webhook-secret"

# Email (Resend)
RESEND_API_KEY="your-resend-key"

# GitHub (Auth)
GITHUB_CLIENT_ID="your-client-id"
GITHUB_SECRET="your-secret-id"

# Google (Auth)
GOOGLE_CLIENT_ID="your-client-id"
GOOGLE_CLIENT_SECRET="your-secret-id"

# Uploadthing (Image Upload)
Uploadthing-Token ="your token"

Access the Application

Open your web browser and navigate to http://localhost:3000 (or the port specified in your environment setup).

You should now see the login page of your Gromuse Grocery Store.

Default User Accounts

The seeding process creates two default user accounts for testing:

  1. Admin

  2. Client

You can use these credentials to log in and explore different user roles within the application.

Production Deployment

1

Build Application

bash npm run build
2

Migrate Database

bash npx prisma migrate

3

Start Production Server

bash npm start

Deployment Platforms

The application can be deployed to:

  • Vercel (Recommended)
  • Railway
  • AWS
  • Digital Ocean

Support & Customization

Getting Help

For support and customization requests:

  1. WhatsApp Support: Contact Us
  2. GitHub Issues: Report bugs

Customization Services

We offer customization services to adapt Gromuse to your specific needs:

  • Custom feature development
  • UI/UX modifications
  • Integration with existing systems
  • Database migration
  • Deployment assistance

Contact us through WhatsApp for customization inquiries.

Troubleshooting

Common Issues

  1. Payment Processing Errors

    # Verify Stripe webhook
stripe listen --forward-to localhost:3000/api/payments/webhook

  2. Database Connection Issues

    # Test database connection
npx prisma db pull

Need more help? Please Join Chat to talk with a real developer