Introducing a cutting-edge e-commerce platform built with Next.js, designed to support multiple stores effortlessly.
Live preview
Pria e-commerce platform leverages the following key technologies:
- Chosen for its server-side rendering capabilities, improving SEO and initial load times.
- Provides an excellent developer experience with features like API routes and file-based routing.
- The core library for building our user interface, offering a component-based architecture for maintainable and reusable code.
- Adds static typing to JavaScript, enhancing code quality and developer productivity through better tooling and error detection.
- Utilized for its utility-first approach, enabling rapid UI development and easy customization.
- Provides a consistent design system across the application.
- Open-source relational database management system known for reliability and performance.
- Provides ACID-compliant data storage and powerful SQL querying capabilities.
- Offers excellent scalability, suitable for both small applications and large enterprise systems.
- My ORM of choice, offering type-safe database access and easy migration management.
- Simplifies database operations and provides excellent TypeScript integration.
- Handles authentication, supporting various providers and offering a flexible, secure solution for user management.
- Utilizes JWT (JSON Web Tokens) for session management instead of database sessions, providing a stateless authentication mechanism that's scalable and efficient.
- Supports OAuth authentication, allowing users to log in with their Google and GitHub accounts:
- Google OAuth integration enables users to sign in using their Google credentials, leveraging the security and convenience of their existing Google account.
- GitHub OAuth support allows developers to log in with their GitHub accounts, which is particularly useful for developer-focused applications or open-source projects.
- Simplifies the implementation of social login features, enhancing user experience by providing multiple login options.
- Handles the complexities of OAuth flow, including token exchange and profile information retrieval, making it easier for developers to implement secure authentication.
- Integrated for secure and reliable payment processing, supporting multiple payment methods.
- Used for file storage.
- Provides unstyled, accessible UI components that i've customized to fit my design needs.
- Ensures a high level of accessibility compliance out of the box.
- Note: Shadcn UI components have been selectively implemented in specific areas of the application to enhance usability and maintain design standards.
- Used for runtime type checking and data validation. Increases the robustness of the application.
- The Context API was used to manage data sharing between components in a simple and effective way. This eliminated the problem of prop drilling, enhancing the application's performance.
This tech stack was carefully chosen to provide a balance of performance, developer experience, and feature richness. It allows us to build a scalable, maintainable, and user-friendly e-commerce platform that can easily adapt to changing business needs and technological advancements.
A user can browse products, manage their account, add items to their shopping basket, complete purchases and track orders.
| Feature | Description |
|---|---|
| Home |
|
| Product List |
|
| Product Show |
|
| Unlimited Nested Categories |
|
| Search |
|
| Login |
|
| Register |
|
| Checkout with Stripe integration |
|
| Cart |
|
| Favorites |
|
| Store Page |
|
| My Orders |
|
| My Reviews |
|
| Account Settings |
|
As a store owner, you can manage product additions, updates and deletions; track inventory; set pricing and promotions; manage orders; and view customer information.
| Feature | Description |
|---|---|
| Store Owner Dashboard |
|
| Products |
|
| Orders |
|
| Discounts |
|
| Carriers |
|
Admin can manage product categories, toggle store status (active/inactive), and oversee user accounts for store owners, staff, and other authorized personnel.
git clone https://github.com/papeiron/Next.js-Ecommerce-App.git
- Install project dependencies using npm or yarn:
npm i
or
yarn
- Create .env file (The following is a sample .env file)
DATABASE_URL=
AUTH_SECRET=
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
RESEND_API_KEY=
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
- Install Mysql and create a database
CREATE DATABASE 'databasename'
- Run Project
npm run dev