This is a hackathon project aimed at building a fully functional Next.js E-Commerce website. The project leverages several cutting-edge technologies, including Next.js 13.5+, Tailwind CSS, Shadcn UI, Postgres SQL with Drizzle ORM, Clerk for user authentication, Sanity as a headless CMS, and Stripe for online payment processing.
The project is organized into different modules, each serving a specific purpose:
-
Next.js 13.5+: The foundation of the project, providing a powerful and efficient React framework for building web applications.
-
Shadcn UI: A user interface library that enhances the project's visual appeal and provides a seamless and responsive design.
-
Postgres SQL with Drizzle ORM: Implements the cart functionality, allowing users to add products to their cart and proceed to checkout. Drizzle ORM facilitates efficient database interactions.
-
Clerk: Manages user authentication, including user signup and signin functionality. Ensures secure and personalized user experiences.
-
Sanity: Used as a headless CMS for managing product data, supporting visual editing for ease of content management.
-
Stripe: Integrated for secure and convenient online payment processing, providing a seamless e-commerce experience for users.
-
React-hot-toast: Implements beautiful and user-friendly notifications to enhance the overall user experience.
-
Lucid Icons (default from Shadcn-UI): Utilized for incorporating a variety of icons throughout the application.
The project is based on a foundation template created by Khubaib from Peshawar. You can find the template here. This template serves as the starting point for development.
- Clone the repository.
- Install the required dependencies using
npm install. - Follow the steps in the foundation template's README to set up the development environment.
Once the basic functionality is implemented, the project aims to include advanced features such as:
-
User Signin and Signup: Implement a user management module allowing users to create accounts, sign in, and manage their profiles.
-
Admin Panel: Create an admin panel for order fulfillment, inventory management, and other administrative tasks.
To enhance your understanding of the technologies used in this project, refer to the following learning steps:
-
Shadcn UI Learning Steps: Learn the ins and outs of Shadcn UI to effectively use and customize UI components.
-
Sanity Learning Steps: Explore the features of Sanity and understand how to manage content through visual editing.
For testing the Stripe integration, use the provided test credit cards to simulate various payment scenarios.
Contributions are welcome! Feel free to fork the repository, make improvements, and submit pull requests.
This project is licensed under the MIT License. Feel free to use and modify the code for your own projects.