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.
- Client- Vite-React, Tailwind CSS, Chakra UI, Redux
- Server- Node, Express, Firebase
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
All the recent offers and discounts are listed along with a choice for users to subscribe to weekly content.
All the available items are listed in this page.
New users can sign-up using their email and password.
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.
Products are displayed specifying the different sizes, colours available and any discount applicable or not. Users can also write reviews if they wish.
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
Razorpay Payments Page is opened on checkout. Users can select any preferred mode of payment.
On successful payment, the order id along with payment id is displayed with the expected delivery date.
Complete history of ordered products is shown in the My Accounts Page.