A modern, full-featured e-commerce platform built with Next.js for selling premium t-shirts. ASHMARK provides a seamless shopping experience with comprehensive features for both customers and administrators.
🌐 Live Demo: https://ashmark.vercel.app/
💡 Test Admin Access: Email:
testadmin@gmail.com| Password:testadmin1234
- 🛍️ Product Catalog - Browse products with filtering, search, and category navigation
- 🛒 Shopping Cart - Add items with size and color selection
- ❤️ Wishlist - Save favorite products for later
- 💳 Secure Payments - Integrated Razorpay payment gateway
- 📦 Order Management - Track orders with real-time status updates
- ⭐ Product Reviews - Rate and review products
- 🎟️ Promo Codes - Apply discount codes at checkout
- 📍 Address Management - Save multiple shipping addresses
- 👤 User Profile - Manage account settings and preferences
- 📱 Responsive Design - Optimized for all devices
- 📊 Dashboard - View sales statistics and analytics
- 📦 Product Management - Add, edit, and manage products with images
- 📋 Order Management - Process and track customer orders
- 👥 User Management - Manage user roles and permissions
- 📈 Sales Reports - Export order data and view statistics
- Framework: Next.js 15.5.5 with App Router
- Language: TypeScript
- Database: MySQL with Prisma ORM
- Authentication: NextAuth.js with Google OAuth
- Payment: Razorpay
- Styling: Tailwind CSS
- UI Components: Radix UI
- File Upload: UploadThing
- Form Handling: React Hook Form with Zod
- Icons: Lucide React
Before you begin, ensure you have the following installed:
-
Clone the repository
git clone https://github.com/harshsrivastava05/ashmark.git cd ashmark -
Install dependencies
npm install
-
Set up environment variables
Create a
.envfile in the root directory and add the following variables:# Database (MySQL) DATABASE_URL="mysql://user:password@host:port/database" # NextAuth NEXTAUTH_URL="http://localhost:3000" NEXTAUTH_SECRET="your-nextauth-secret-key" # Google OAuth GOOGLE_CLIENT_ID="your-google-client-id" GOOGLE_CLIENT_SECRET="your-google-client-secret" # Razorpay RAZORPAY_KEY_ID="your-razorpay-key-id" RAZORPAY_KEY_SECRET="your-razorpay-key-secret" # UploadThing UPLOADTHING_SECRET="your-uploadthing-secret" UPLOADTHING_APP_ID="your-uploadthing-app-id"
-
Set up the database
# Generate Prisma Client npm run prisma:generate # Push schema to database npm run prisma:push
-
Seed the database (optional)
# Seed categories node scripts/seed-categories.js # Seed sample products node scripts/seed-sample-products.js
-
Run the development server
npm run dev
-
Open your browser
Navigate to http://localhost:3000
For testing the admin features, you can use the following test admin account:
Admin Account:
- Email:
testadmin@gmail.com - Password:
testadmin1234
⚠️ Note: These are test credentials for development/demo purposes. Make sure to change or disable these credentials in production environments.
ashmark/
├── prisma/
│ └── schema.prisma # Database schema
├── public/ # Static assets
├── scripts/ # Database seeding scripts
├── src/
│ ├── app/ # Next.js app router pages
│ │ ├── (auth)/ # Authentication pages
│ │ ├── admin/ # Admin dashboard pages
│ │ ├── api/ # API routes
│ │ └── ... # Other pages
│ ├── components/ # React components
│ │ ├── admin/ # Admin components
│ │ ├── cart/ # Cart components
│ │ ├── checkout/ # Checkout components
│ │ ├── layout/ # Layout components
│ │ ├── product/ # Product components
│ │ ├── profile/ # Profile components
│ │ └── ui/ # UI components
│ ├── contexts/ # React contexts
│ ├── lib/ # Utility functions
│ └── types/ # TypeScript types
├── components.json # shadcn/ui configuration
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── package.json # Dependencies
The application uses Prisma ORM with MySQL. Key models include:
- User - User accounts and authentication
- Product - Product catalog with images, sizes, and colors
- Category - Product categories
- Order - Customer orders with status tracking
- CartItem - Shopping cart items
- WishlistItem - User wishlist
- Review - Product reviews and ratings
- Address - User shipping addresses
- PromoCodeUsage - Promo code tracking
The application uses NextAuth.js for authentication with:
- Email/Password authentication
- Google OAuth - Sign in with Google account
- Session management
- Role-based access control (USER, ADMIN)
Payment processing is handled through Razorpay:
- Secure payment gateway
- Order creation and verification
- Payment status tracking
- Support for multiple payment methods
Built with Radix UI and styled with Tailwind CSS:
- Accessible components
- Dark mode support (via next-themes)
- Responsive design
- Custom animations
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run prisma:generate- Generate Prisma Clientnpm run prisma:push- Push schema changes to database
- Push your code to GitHub
- Import your repository on Vercel
- Add environment variables
- Deploy
The application can be deployed on any platform that supports Next.js:
- AWS
- Google Cloud Platform
- DigitalOcean
- Railway
- Render
Make sure to:
- Set up a MySQL database
- Configure all environment variables
- Run database migrations
- Set up UploadThing account for file uploads
- Configure Google OAuth credentials
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create your 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
This project is licensed under the MIT License - see the LICENSE file for details.
Harsh Srivastava
- GitHub: @harshsrivastava05
- Live Demo: https://ashmark.vercel.app/
- Next.js for the amazing framework
- Prisma for the excellent ORM
- Radix UI for accessible components
- Tailwind CSS for the utility-first CSS framework
For support, email support@ashmark.com or open an issue in the repository.
Made with ❤️ by ASHMARK Team