Overview

Flux Fashion is an E-Commerce fashion website for mens' clothing made using Vite-React and Firebase using the Firestore Database for storage of product details, user information, payment details and their retrieval. Firebase Authentication is implemented for user Sign-In and new user registrations. The Frontend Design is developed using Tailwind CSS and Chakra-UI. Redux and Redux-Toolkit is used for the Shopping Cart. Razorpay is integrated as the Payment Gateway for transactions through a backend server implemented with NodeJS and Express.

Tech Stack

• Client- Vite-React, Tailwind CSS, Chakra UI, Redux
• Server- Node, Express, Firebase

Installing Dependencies

For the client side, install Vite with React as template-

npm create vite@latest flux-fashion --template react

Now install the following required React dependencies-

npm i react-router-dom react-redux @reduxjs/toolkit axios
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

To install Tailwind CSS, intall the following dependencies-

npm install -D tailwindcss
npx tailwindcss init

For the complete Tailwind CSS documentation, visit here
Since we are using Firebase Firestore as database, you must create a Firebase account to use Firebase features. The steps involved to install Firebase are

• Create a Firebase project and register your app
• Install the SDK and initialize Firebase

npm install firebase

• Initialize Firebase in your app and create a Firebase App object

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
 //...
};

const app = initializeApp(firebaseConfig);

For the complete Firebase documentation, visit here
We are using Razorpay Payment Gateway through server. For server side create a separate folder and install the following dependencies-

npm init
npm i express dotenv nodemon cors razorpay firebase

For the complete Razorpay documentation, visit here

Home Page

All the recent offers and discounts are listed along with a choice for users to subscribe to weekly content.

Shop Page

All the available items are listed in this page.

Sign-Up Page

New users can sign-up using their email and password.

Sign-In Page

Existing users can sign-in by their registered email. If they forget their password, email verification is enabled using Firebase through which users can sign in.

Preview Page

Products are displayed specifying the different sizes, colours available and any discount applicable or not. Users can also write reviews if they wish.

Cart Page

We can set the quantity of the selected products or remove them. Price is calculated after after applying discount Promo Code.





Users can enter the delivery information and proceed to checkout

Payment Page

Razorpay Payments Page is opened on checkout. Users can select any preferred mode of payment.

Success Page

On successful payment, the order id along with payment id is displayed with the expected delivery date.

Account Page

Complete history of ordered products is shown in the My Accounts Page.