Capital Shop

Introduction

I have completed my major project the Ecommerce Capital shop .I have used the tech stack HTML5, Tailwind CSS , Javascript and ReactJs .I have completed better UI . In this project I have learned about so many features. So

Features includes 🚀

• toggle ⏺️
• Add to Wishlist 💗
• Remove from Wishlist 🤍
• Add to Cart
• Remove from Cart
• Item alerady in cart
• Increase and decrease Items with quantity 📈 📉
• Delete the item ❌
• Signup 🔑
• Login ✅
• Order
• Payment integration 💰
• Search the products 🔎
• Filter the products
• Sorting the price
• Reset

Prerequisites

To follow along with this repo, you will need to have the following installed on your machine:

• Node.js
• npm

You also need to have a basic understanding of React JS and Tailwind CSS.

Getting Started

To get started, we will create a new React application using vite. To do this, run the following command in your terminal:

npm create vite@latest

You will be prompted to enter the name of your project. Enter the name of your project and press enter. In this repo, we will be naming our project Capital shop. You will also be prompted to select a framework. Select React and press enter. You will also be prompted to select a variant. Select Javascript and press enter. This will create a new React application in a folder named Capital shop. To start the application, navigate to the react-cart folder cd capital shop and run the following command in your terminal:

npm run dev

This will start the application in development mode. You can now open the application in your browser by navigating to http://localhost:5173.

Installing Tailwind CSS

To install Tailwind CSS, run the following command in your terminal:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

This will create a tailwind.config.js file in the root of your project. Open the tailwind.config.js file and add the following code to it:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, let's clean up the index.css file in the src folder. Open the index.css file and remove all the code in it. Next, add the following code to the index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Resources

• React
• Tailwind CSS
• Context Thank you for reading this. If you have any questions, feel free to reach out to me on Email or LinkedIn.