This lesson in this project is designed to provide a step-by-step guide to mastering key concepts and building practical skills.
Execute the command, open a new terminal and follow these instructions:
npm create vite@latest ✔ Project name: … client ✔ Select a framework: › React ✔ Select a variant: › JavaScript
This will create the frontend directory in your root application folder. Run the following commands after it.
cd application npm install npm run dev
This will install the initial dependencies and start the development server of Vite running on localhost:5173. Open your browser and write the localhost URL to see the development server.
Execute the given commands by following these instructions:
npm initnpm init package name: (user) server
Before starting with the code we will setup our file directory as per the below diagram. The client will contain all our logic and server directory will contain the Stripe API request.
application/ ├── client/ │ ├── node_modules/ │ ├── public/ │ └── src/ │ ├── api/ │ ├── assets/ │ ├── components │ │ ├── Banner.jsx │ │ ├── Cartitem.jsx │ │ ├── Footer.jsx │ │ ├── Header.jsx │ │ ├── Product.jsx │ │ ├── ProductCard.jsx │ │ └── Products.jsx │ ├── pages │ │ ├── Cart.jsx │ │ ├── Home.jsx │ │ └── Login.jsx │ ├── redux │ │ ├── bazarSlice.jsx │ │ ├── store.jsx │ ├── App.css │ ├── App.jsx │ ├── firebase.config.js │ ├── index.css │ ├── index.html │ └── main.jsx │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── README.md │ ├── tailwind.config.js │ └── vite.config.js ├── server/ │ ├── node_modules/ │ ├── package-lock.json │ ├── package.json │ └── server.js └── .gitignore

SDE @ Google
New PROJECTS added in MERN & Next.js to boost your portfolio
10+ Comprehensive GUIDES added across all courses
100+ new videos on Full Stack, DSA, AI development
Fresh DSA revision series to strengthen your basics
Interview preparation material added