QuickCart

QuickCart is a full-stack e-commerce application built with the Next.js framework. It provides a complete online shopping experience, from browsing products to placing orders. The project includes features for both customers and sellers.

Features

• User Authentication: Secure user authentication using Clerk.
• Product Management: Sellers can add, view, and manage their products.
• Shopping Cart: Customers can add products to their cart and manage them.
• Order Management: Customers can view their order history, and sellers can manage incoming orders.
• Address Management: Users can save and manage multiple shipping addresses.
• Responsive Design: The application is designed to be fully responsive and accessible on all devices.

Technologies Used

• Frontend:
  • Next.js - React framework for building server-side rendered and static web applications.
  • React - JavaScript library for building user interfaces.
  • Tailwind CSS - A utility-first CSS framework for rapid UI development.
  • Clerk - For user authentication.
• Backend:
  • Next.js API Routes - For building the backend API.
  • MongoDB - NoSQL database for storing product, user, and order data.
  • Mongoose - Object Data Modeling (ODM) library for MongoDB and Node.js.
  • Inngest - For handling background tasks and events.
  • Cloudinary - For cloud-based image and video management.
• Testing:
  • Cypress - For integration Testing and E2E-Testing.
  • Playwright - For integration Testing and E2E-Testing.

Installation

1. Clone the repository:

   git clone https://github.com/CharliePeng516/QuickCartEcommerce.git

2. Navigate to the project directory:

   cd QuickCart

3. Install dependencies:

   npm install

4. Set up environment variables: Create a .env.local file in the root directory and add the following environment variables:

   NEXT_PUBLIC_CURRENCY=AUD$
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   
   MONGODB_URI=
   INNGEST_SIGNING_KEY=
   INNGEST_EVENT_KEY=
   
   CLOUDINARY_CLOUD_NAME =
   CLOUDINARY_API_KEY =
   CLOUDINARY_API_SECRET =
   

5. Run the development server:

   npm run dev

   The application will be available at http://localhost:3000.

Usage

Once the application is running, you can:

• Sign up for a new account or sign in with an existing account.
• Browse the list of available products.
• View the details of a specific product.
• Add products to your shopping cart.
• Place an order and view your order history.
• Sellers can log in to their dashboard to manage their products and orders.

Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.

---