Giter Club home page Giter Club logo

iamsomraj / mern-shopping-app Goto Github PK

View Code? Open in Web Editor NEW
5.0 2.0 3.0 1.48 MB

One Stop EShop - A Modern Fullstack E-commerce Website built with React, Redux Toolkit, Express, Tailwind CSS, Heroicons, Mongo DB and Payment Gateway.

Home Page: https://one-stop-eshop.vercel.app/

License: MIT License

JavaScript 23.19% HTML 0.68% CSS 0.15% TypeScript 75.97%
beginner-friendly cleancode ecommerce-application ecommerce-website mern-stack nodejs react reactjs reactrouter6 reactrouterdom

mern-shopping-app's Introduction

One Stop EShop (MERN-Shopping-App)

One Stop EShop - A Modern Fullstack E-commerce Website Built with the React, Redux Toolkit, Express, Tailwind CSS, Heroicons, Mongo DB and Payment Gateway.

Features

  • User Authentication and Registration using Tokens
  • Home Page for Product Listing
  • Product Listing with Pagination
  • Option to Add Item To Cart
  • Option to edit User Profile Details
  • Ability to pay for orders
  • Modern Payment Gateway using Paypal Client SDK
  • much more

Preview Link

โœ… [Live] [https://one-stop-eshop.vercel.app/] ๐Ÿ˜Š

Walkthrough of Payment

โœ… [Overview] [https://youtu.be/QjBAAmpt8oM]

Run This Application

Following steps are required to run the application:

  • Open Terminal

  • Clone One Stop EShop Repository

    git clone https://github.com/iamsomraj/MERN-Shopping-App.git
  • Go to Root Directory of MERN-Shopping-App

  • Setup Environment Variables

To run this project, you will need to add the following environment variables to your .env.example file for both the backend and frontend folders:

Backend:

  • MONGODB_URI: Your MongoDB URI
  • PORT: Port for the backend server
  • NODE_ENV: Node environment (e.g., "development" or "production")
  • PAYPAL_CLIENT_ID: PayPal client ID
  • SECRET: Your secret key
  • PRODUCTION_CLIENT_ORIGIN: Client origin for production
  • DEVELOPMENT_CLIENT_ORIGIN: Client origin for development

Frontend:

  • 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

Create these environment variables, save them in respective folders. File name can be .env.

  • Start One Stop Stop
  cd backend
  npm run dev

  cd frontend
  npm run dev

Tech Stack

Frontend:

  • React
  • Tanstack Query (React Query)
  • Tailwind
  • React Paypal SDK
  • Redux Toolkit
  • React Router DOM

Backend:

  • Node
  • Express
  • Mongoose
  • MongoDB

Language Used:

  • Typescript
  • Javascript

Developer

LinkedIn : iamsomraj ๐Ÿ˜Š

Portfolio: Somraj Mukherjee ๐Ÿ˜Š

Show Your Support

Give me a star โญ

if this project helped you ๐Ÿ‘ฆ ๐Ÿ‘ง

Contributing

Pull requests are welcome. ๐Ÿค For major changes, please open an issue first to discuss what you would like to change. ๐Ÿ™

Please make sure to update tests as appropriate. โœŒ

License

MIT ๐Ÿ“ฐ

mern-shopping-app's People

Contributors

dependabot[bot] avatar iamsomraj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

mern-shopping-app's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.