Project Description:-This project is a collaborative effort to create a visually appealing simplified clone of the ‘Reliance Digital’ website utilizing HTML5, CSS3, JavaScript (ES6) and React.js. The goal is to replicate the main features and design elements of the current site to gain practical hand-on experience and showcase our skills in web development.
Reliance Digital is an ECommerce Website. It is used for buying electrical products, home appliances & other miscellaneous items in day to day uses. Reliance Digital Stores are bigger in size than any other format Reliance Digital Mini Stores. It is one of the largest retailers of electronics in India with over 5,000 products in its inventory.
Increased website performance by optimizing front-end and back-end code for faster loading times. Applied responsive design principles to ensure consistent display and functionality across a wide range of devices, including mobile phones, tablets, and desktop computers, utilizing the below mentioned tech stacks :-
- ◉ JavaScript : 94.0%
- ◉ HTML : 0.6%
- ◉ CSS : 5.4%
- 1. Cart Functionality (like adding an item and removing)
- 2. Admin Page
- 3. Admin can add a product product Will be shown on the latest page
- 4. Login and Sign Up
- User Authentication (Login/Logout)
- Product Listing
- Product Details
- Add to Cart
- Sort and Filter Products
- Responsive Design for optimal viewing on different devices
To get started with the project, follow these steps:
-
Clone the repository:
git clone - https://github.com/uttammane1/Reliance-Digital.git
-
Navigate to the project directory:
cd Reliance-Digital -
Install dependencies:
npm install
-
Install additional libraries:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion axios react-router-dom
-
Start the development server:
npm start
-
React: Front-end library for building user interfaces
-
React Router: For routing and navigation
-
Chakra UI: For UI components and styling
-
Axios: For API requests
-
Context API: For state management
-
Home Page: Browse the homepage for a selection of featured products.
-
Product Listing: View a list of all available products, with options to sort and filter.
-
Product Details: Click on a product to see detailed information.
-
Add to Cart: Add products to your cart and view your cart.
-
Login/Logout: Authenticate to gain access to personalized features.
The navbar provides easy navigation throughout the site, including links to the Home, Products, Cart, and Checkout pages.
The home page showcases featured products and promotions, providing users with an overview of what is available.
The product page displays a list of products, complete with sorting and filtering options to help users find exactly what they need.
The cart page allows users to view products they have added to their cart, adjust quantities, and proceed to checkout.
The checkout page enables users to finalize their purchases by entering their shipping information and payment details.
