Store E-Commerce - Frontend

Welcome to the frontend repository for the Store E-Commerce ! This project is developed using the MERN stack (MongoDB, Express.js, React, Node.js) along with Tailwind CSS, DaisyUI, Redux, and RTK Query for state management and API interactions.

Also, you can check out the backend repository for this frontend at https://github.com/arentalb/store-back

And you can checkout the live version of it at https://store-front-3fxx.onrender.com/ You can use this credentials to test it out :

Admin:- [email protected] Password123$

User:- [email protected] Password123$

Table of Contents

• Introduction
• Setup Instructions
• Development
• Running the Project
• Admin Dashboard
• User Interface
• Final Result

Introduction

This repository contains the frontend code for the Store E-Commerce . The application provides a comprehensive solution for online shopping, including product listings, user authentication, shopping cart functionality, and an admin dashboard for managing products and orders.

Setup Instructions

Prerequisites

• Node.js (v14.x or higher)
• npm or Yarn
• Git

Installation

1. Clone the repository:

   git clone https://github.com/arentalb/store-front
   cd e-commerce-front

2. Install dependencies:

   npm install

Development

Tailwind CSS

Tailwind CSS is used for styling. Ensure Tailwind CSS is configured in the tailwind.config.js file and imported in your styles.

DaisyUI

DaisyUI is used for UI components. Ensure it is properly configured in the tailwind.config.js file.

Redux and RTK Query

Redux is used for state management, and RTK Query is used for data fetching. Ensure that the store is configured correctly in the store.js file and that the slices and services are properly set up.

Running the Project

To start the React development server:

npm start

Admin Dashboard

The admin dashboard allows for managing products, categories, orders, and users.

Accessing the Admin Dashboard

• Navigate to the admin dashboard URL (e.g., http://localhost:3000/admin).
• Log in with admin credentials.
• Manage products, categories, orders, and user accounts.

User Interface

The user interface allows the user to see products add to there cart and place them in order and pay it with online card .....

Accessing the User Interface

• Navigate to the home page URL (e.g., http://localhost:3000/).
• Log in with user credentials.

Final Result Here are some images of the final result:

User

Admin