Skip to content

itsarraj/circuitcrafter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Certainly, I've revised the README and package.json description for your CircuitCrafter project to make it more professional and concise. Here's the updated version:

CircuitCrafter - A Modern Fullstack E-commerce Platform

CircuitCrafter is a sophisticated full-stack e-commerce platform designed to provide a seamless shopping experience for users. Built using cutting-edge technologies such as React, Redux Toolkit, Express, Tailwind CSS, Heroicons, MongoDB, and a secure Paypal Payment Gateway, CircuitCrafter offers a feature-rich solution for your online store.

Key Features

  • User Authentication: Secure user registration and authentication using tokens.
  • Product Listings: A visually appealing home page with product listings and pagination.
  • Shopping Cart: Conveniently add items to your cart and proceed to checkout.
  • User Profile Management: Edit and manage your user profile details with ease.
  • Payment Processing: A modern payment gateway powered by PayPal's Client SDK ensures secure and reliable transactions.
  • Image Handling: Images are temporarily stored in memory before being uploaded to the cloud, allowing for efficient and flexible image management.
  • And Much More: Explore additional features designed to enhance your e-commerce experience.

Live Demo

🚀 Explore CircuitCrafter

Project Explanation (YouTube Video)

Project Explanation Video

In this video, I provide a detailed explanation of the CircuitCrafter project. I walk you through the key features. Watch to learn more about the project and the problem it aims to solve.

How to Run the Application

To run CircuitCrafter on your local environment, follow these simple steps:

  1. Clone the CircuitCrafter repository:

    git clone https://github.com/animeshbucket/circuitcrafter.git
  2. Navigate to the project's root directory.

  3. Set Up Environment Variables: You will need to create environment variables for both the backend and frontend. For the backend, include the following variables in your .env file:

    • MONGODB_URI: Your MongoDB database URI.
    • PORT: Port number for the backend server.
    • NODE_ENV: Node environment (e.g., "development" or "production").
    • PAYPAL_CLIENT_ID: PayPal client ID.
    • SECRET: Your application's secret key.
    • PRODUCTION_CLIENT_ORIGIN: Client origin for the production environment.
    • DEVELOPMENT_CLIENT_ORIGIN: Client origin for the development environment.
    • CLOUDINARY_CLOUD_NAME: Your Cloudinary cloud name.
    • CLOUDINARY_API_KEY: Your Cloudinary API key.
    • CLOUDINARY_API_SECRET: Your Cloudinary API secret.
    • CLOUDINARY_CLOUD_FOLDER_NAME: Your Cloudinary Media's Folder Name

    For the frontend, you can set these variables in the .env file in the frontend folder.

    • VITE_NODE_ENV: Vite Node environment (e.g., "development")
    • VITE_PRODUCTION_BASE_URL: Production base URL for the frontend
    • VITE_DEVELOPMENT_BASE_URL: Development base URL for the frontend
    • VITE_PRODUCTION_API: Production API URL for the frontend
    • VITE_DEVELOPMENT_API: Development API URL for the frontend
  4. Run CircuitCrafter:

    • Start the backend server:

      cd backend
      npm run dev
    • Start the frontend development server:

      cd frontend
      npm run dev

Login Details for Testing

You can use the following login details to test the application as different types of users:

Tech Stack

Frontend:

  • React: A powerful JavaScript library for building user interfaces.
  • Tanstack Query (React Query): A data-fetching library for React applications.
  • Tailwind CSS: A utility-first CSS framework for creating responsive and elegant designs.
  • React Paypal SDK: Integration with PayPal for secure payment processing.
  • Redux Toolkit: A state management solution for React applications.
  • React Router DOM: Navigation for React applications.

Backend:

  • Node: A JavaScript runtime for server-side applications.
  • Express: A minimalist web application framework for Node.js.
  • Mongoose: An elegant MongoDB object modeling tool.
  • MongoDB: A NoSQL database for scalable and flexible data storage.
  • Cloudinary: A cloud-based image and video management solution.

Languages Used:

  • Typescript
  • JavaScript

Developer

Show Your Support

If CircuitCrafter has been helpful to you, consider giving it a star ⭐ to show your support.

Contributing

Pull requests are welcome. Please open an issue to discuss significant changes before contributing. Make sure to update tests as needed.

License

MIT License