A production-grade e-commerce platform and custom CMS built with Next.js and Express, featuring automated payment (Razorpay) and logistics (Shiprocket) pipelines.
- Overview
- Features
- Tech Stack
- Architecture
- Getting Started
- Project Structure
- API Documentation
- Deployment
- Contributing
- License
PetroShopIndia is a full-stack e-commerce platform specifically designed for petroleum products and energy solutions. The platform provides a seamless shopping experience with robust backend management, automated payment processing, and integrated logistics solutions.
Live Website: www.petroshopsindia.in
-
Product Browsing & Search
- Advanced product search with filters
- Category-based product organization
- Sort by price, date, popularity
- Best sellers section
- New arrivals showcase
- Today's deals and special offers
- Product wishlist functionality
-
Product Details
- Comprehensive product information
- High-quality product images
- Price display with discounts
- Stock availability status
- Product specifications
- Related products suggestions
-
Authentication & Authorization
- Secure user registration
- Email/password login
- Session management
- Password reset functionality
- Account verification
-
User Profile
- Profile information management
- Address book management
- Order history tracking
- Account deletion option
- Saved preferences
-
Shopping Cart
- Add/remove/update cart items
- Real-time cart updates
- Cart persistence across sessions
- Cart item quantity management
- Price calculation with taxes
-
Checkout Process
- Multi-step checkout flow
- Address selection/addition
- Payment method selection
- Order summary review
- Order confirmation
- Razorpay Payment Gateway
- Secure payment processing
- Multiple payment methods support
- Real-time payment verification
- Payment failure handling
- Transaction tracking
- Automated payment receipts
-
Order Tracking
- Real-time order status updates
- Order history view
- Order details page
- Invoice generation
- Return/refund initiation
-
Shipping Integration
- Shiprocket logistics integration
- Automated shipment creation
- Real-time tracking information
- Delivery status updates
- Shipping cost calculation
- Support System
- Support ticket creation
- Ticket status tracking
- Support center access
- Contact information
- FAQ section
- Product CRUD Operations
- Create new products
- Edit product information
- Delete products
- Bulk product operations
- Product image upload/management
- Inventory management
- SKU management
- Category assignment
- Tag management (Best Seller, New Arrival, Today's Deals)
- Order Processing
- View all orders dashboard
- Order status management
- Order details view
- Customer information access
- Payment verification
- Shipping label generation
- Bulk order processing
- Order analytics
- Customer Database
- User listing and search
- User details view
- User activity tracking
- Account management
- Permission controls
- Static Pages
- About Us page editor
- Contact Us page management
- Policy pages (Return, Shipping, Privacy, Terms)
- Custom page creation
- SEO metadata management
- Business Intelligence
- Sales analytics
- Revenue tracking
- Product performance metrics
- Customer insights
- Order statistics
- Conversion tracking
- Platform Settings
- Payment gateway configuration
- Shipping provider settings
- Tax configuration
- Email templates
- Notification settings
- Theme customization
-
Frontend Optimization
- Server-side rendering (SSR)
- Static site generation (SSG)
- Image optimization
- Code splitting
- Lazy loading
- Caching strategies
-
Backend Optimization
- Database query optimization
- API response caching
- Connection pooling
- Load balancing ready
- Data Protection
- HTTPS encryption
- Secure authentication
- Password hashing
- XSS protection
- CSRF protection
- SQL injection prevention
- Rate limiting
- Input validation
- Secure session management
- Search Engine Optimization
- Meta tags management
- Structured data markup
- Sitemap generation
- Canonical URLs
- Multi-Device Support
- Mobile-first design
- Tablet optimization
- Desktop layouts
- Touch-friendly interface
- Adaptive images
- Automated Emails
- Order confirmation emails
- Shipping notifications
- Payment receipts
- Password reset emails
- Account verification
- Promotional emails
- Third-Party Services
- Razorpay payment gateway
- Shiprocket shipping API
- Email service integration
- SMS notifications
- Analytics integration
- Framework: Next.js (React)
- Language: TypeScript
- Styling: CSS Modules / Tailwind CSS
- State Management: Zustand
- HTTP Client: Axios
- Forms: React Hook Form
- Validation: Zod
- Runtime: Node.js
- Framework: Express.js
- Language: TypeScript
- Database: MongoDB
- ORM: Prisma
- Authentication: JWT / Session-based
- File Upload: Multer
- Validation: Express Validator
- Payment: Razorpay
- Shipping: Shiprocket
- Email: NodeMailer
- Cloud Storage: Cloudinary
- CI/CD: GitHub Actions
- Hosting: Vercel
- Containerization: Docker
PetroShopIndia/
├── client/ # Next.js frontend application
│ ├── components/ # Reusable React components
│ ├── pages/ # Next.js pages and routes
│ ├── styles/ # CSS/styling files
│ ├── utils/ # Utility functions
│ ├── hooks/ # Custom React hooks
│ ├── context/ # React Context providers
│ ├── services/ # API service layer
│ └── public/ # Static assets
│
├── server/ # Express backend application
│ ├── controllers/ # Route controllers
│ ├── models/ # Database models
│ ├── routes/ # API routes
│ ├── middleware/ # Express middleware
│ ├── services/ # Business logic
│ ├── utils/ # Utility functions
│ ├── config/ # Configuration files
│ └── integrations/ # Third-party integrations
│
├── .github/workflows/ # CI/CD workflows
├── .gitignore
├── package.json
└── README.md
- Client Request → Next.js frontend
- API Call → Express backend
- Business Logic → Service layer
- Data Access → ORM
- External Services → Razorpay/Shiprocket APIs
- Response → Client
- Node.js (v16 or higher)
- npm or yarn
- MongoDB
- Razorpay account
- Shiprocket account
- Clone the repository
git clone https://github.com/awhvish/PetroShopIndia.git
cd PetroShopIndia- Install dependencies
# Install root dependencies
npm install
# Install client dependencies
cd client
npm install
# Install server dependencies
cd ../server
npm install- Environment Configuration
Create .env files in both client and server directories:
Server .env:
# Database
DATABASE_URL=your_database_url
# Server
PORT=5000
NODE_ENV=development
# JWT
JWT_SECRET=your_jwt_secret
JWT_EXPIRES_IN=7d
# Razorpay
RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_key_secret
# Shiprocket
SHIPROCKET_EMAIL=your_shiprocket_email
SHIPROCKET_PASSWORD=your_shiprocket_password
# Email
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email
EMAIL_PASSWORD=your_email_password
# Client URL
CLIENT_URL=http://localhost:3000Client .env:
# API
NEXT_PUBLIC_API_URL=http://localhost:5000/api
# Razorpay
NEXT_PUBLIC_RAZORPAY_KEY_ID=your_razorpay_key_id- Database Setup
cd server
npm run migrate # Run database migrations
npm run seed # Seed initial data (if available)- Run the application
Development mode:
# Terminal 1 - Run server
cd server
npm run dev
# Terminal 2 - Run client
cd client
npm run devProduction mode:
# Build client
cd client
npm run build
npm start
# Build server
cd server
npm run build
npm start- Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
client/
├── components/
│ ├── layout/ # Header, Footer, Navigation
│ ├── product/ # Product cards, lists
│ ├── cart/ # Cart components
│ ├── checkout/ # Checkout flow
│ ├── user/ # User profile, auth
│ └── common/ # Buttons, inputs, modals
├── pages/
│ ├── index.tsx # Homepage
│ ├── search.tsx # Product search
│ ├── auth.tsx # Authentication
│ ├── cart.tsx # Shopping cart
│ ├── orders.tsx # Order history
│ ├── profile.tsx # User profile
│ └── [slug].tsx # Dynamic routes
└── styles/
└── globals.css # Global styles
server/
├── controllers/
│ ├── auth.controller.ts
│ ├── product.controller.ts
│ ├── order.controller.ts
│ ├── user.controller.ts
│ └── payment.controller.ts
├── models/
│ ├── User.model.ts
│ ├── Product.model.ts
│ ├── Order.model.ts
│ └── Payment.model.ts
├── routes/
│ ├── auth.routes.ts
│ ├── product.routes.ts
│ ├── order.routes.ts
│ └── payment.routes.ts
├── middleware/
│ ├── auth.middleware.ts
│ ├── validation.middleware.ts
│ └── error.middleware.ts
└── services/
├── razorpay.service.ts
├── shiprocket.service.ts
└── email.service.ts
POST /api/auth/register # User registration
POST /api/auth/login # User login
POST /api/auth/logout # User logout
POST /api/auth/forgot-password # Password reset request
POST /api/auth/reset-password # Password reset
GET /api/auth/verify-email # Email verification
GET /api/products # Get all products (with filters)
GET /api/products/:id # Get product by ID
POST /api/products # Create product (Admin)
PUT /api/products/:id # Update product (Admin)
DELETE /api/products/:id # Delete product (Admin)
GET /api/products/search # Search products
GET /api/products/categories # Get categories
GET /api/cart # Get user cart
POST /api/cart/add # Add item to cart
PUT /api/cart/update/:id # Update cart item
DELETE /api/cart/remove/:id # Remove cart item
DELETE /api/cart/clear # Clear cart
GET /api/orders # Get user orders
GET /api/orders/:id # Get order details
POST /api/orders # Create order
PUT /api/orders/:id/cancel # Cancel order
GET /api/orders/:id/track # Track order
POST /api/payment/create-order # Create Razorpay order
POST /api/payment/verify # Verify payment
POST /api/payment/refund # Process refund (Admin)
GET /api/users/profile # Get user profile
PUT /api/users/profile # Update profile
GET /api/users/addresses # Get addresses
POST /api/users/addresses # Add address
DELETE /api/users/addresses/:id # Delete address
DELETE /api/users/account # Delete account
GET /api/tickets # Get user tickets
POST /api/tickets # Create ticket
GET /api/tickets/:id # Get ticket details
PUT /api/tickets/:id # Update ticket
- Connect GitHub repository to Vercel
- Configure environment variables
- Deploy automatically on push to main
Option 1: DigitalOcean/AWS
# Build the application
npm run build
# Use PM2 for process management
pm2 start dist/server.js --name petroshop-apiOption 2: Docker
# Dockerfile example
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
RUN npm run build
EXPOSE 5000
CMD ["npm", "start"]- Use managed database services (AWS RDS, MongoDB Atlas)
- Configure connection pooling
- Set up automated backups
The project uses GitHub Actions for automated testing and deployment:
- Automated testing on pull requests
- Deployment on merge to main branch
- Environment-specific deployments
Contributions are welcome! Please follow these guidelines:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow TypeScript best practices
- Use ESLint and Prettier
- Write meaningful commit messages
- Add tests for new features
This project is licensed under the MIT License - see the LICENSE file for details.
Awhvish
- GitHub: @awhvish
- Website: www.petroshopsindia.in
- Email: info@petroshopindia.com
- Phone: +91 8638321218
- Address: Narengi, Guwahati, Assam, India
- Next.js team for the amazing framework
- Razorpay for payment processing
- Shiprocket for logistics integration
- All contributors and users of the platform
Note: This is a production-grade application. Make sure to properly configure all environment variables and security settings before deployment.