Welcome to the Ecommerce Analytics Dashboard! This guide will walk you through the steps required to set up the project on your local machine, whether you're aiming for development or production environments. By following the instructions below, you'll have the dashboard up and running in no time.

Prerequisites :-

Before starting, ensure that you have the following tools and software installed on your computer:

1. Node.js (LTS version recommended)

Node.js is a JavaScript runtime that will allow you to run the project locally. The LTS (Long-Term Support) version is recommended to ensure stability and compatibility with most libraries.

Download Node.js

2. npm (comes with Node.js) or Yarn:

npm (Node Package Manager) comes bundled with Node.js, and you can use it to install project dependencies.

Alternatively, Yarn is a faster and more reliable package manager. You can choose either based on your preference.

Install Yarn

3. A modern code editor

A code editor helps you view, edit, and debug your project. Visual Studio Code (VS Code) is a popular and free choice

VS Code.

Installation Instructions

1. Extract the Project

Download the project ZIP file.

Extract the contents to a folder on your machine.

Open this folder in your preferred code editor (e.g., VS Code)

2. Navigate to the Project Directory

Open a terminal (command prompt or terminal in VS Code) and navigate to the folder where the project was extracted.

cd [project-name]

Replace [project-name] with the actual folder name where your project is located.

3. Install Dependencies

The project uses several libraries and packages to function properly. These dependencies need to be installed before you can run the application.

Using npm:

Run the following command to install the required dependencies:

npm install

or using Yarn:

If you're using Yarn, you can install the dependencies with:

yarn install

This will download all necessary packages, such as React, TailwindCSS, and others, and save them to the node_modules folder.

Running the Project

1. Start the Development Server

Once all dependencies are installed, you can run the application locally for development. This will start a development server that automatically reloads the application as you make changes to the code.

Using npm:
npm run dev

Or using Yarn:
yarn run dev

After executing this command, the development server should start, and you can view the project by navigating to http://localhost:5173 in your web browser.

2. Build for Production

If you want to prepare the application for production (optimized and minified), use the following build commands. This will bundle the app and prepare it for deployment.

Using npm:
npm run build

Or using Yarn:
yarn build

This will generate a build folder containing the production-ready version of your app. The build process will optimize the application for faster load times and better performance.

Additional Notes

Testing

The application includes a test suite to ensure everything is functioning as expected. To run the tests, use the following command:

npm run preview

This will start the testing environment and give you a preview of the app with the latest changes.

Libraries in Use

This project makes use of several powerful libraries to add various features and improve functionality:

@heroicons/react: A collection of beautifully designed, scalable, and customizable icons for React applications.

@material-tailwind/react:Material Design components styled with TailwindCSS for building modern UI elements in React.

apexcharts: A library for creating interactive, responsive, and beautiful charts and graphs.

emoji-picker-react:An emoji picker for React, allowing users to select emojis easily.

html2canvas: A library that captures screenshots of webpages and renders them as images.

moment: A library that simplifies date and time formatting, parsing, and manipulation.

prop-types:A runtime type-checking library that ensures the correct type of props are passed into React components.

react-apexcharts A React wrapper for ApexCharts, making it easy to integrate ApexCharts into your React applications.

react-big-calendar: CA powerful and customizable calendar component to manage events and appointments.

react-icons: A popular library that provides a wide variety of icons for React apps.

react-medium-image-zoom: Adds zoom-in functionality when users hover or click on images in your React app.

react-router-dom: A standard library for routing and navigation within React applications.

react-toastify:A customizable library to add toast notifications for better user feedback and alerts.

These libraries are integrated into the project to enhance user experience, UI design, and functionality.

Final Thoughts

By following the steps above, you should be able to successfully run the Ecommerce Analytics Dashboard on your local machine, whether for development, testing, or preparing the app for production.