Maestro Market🎶

Welcome to our eCommerce musical instrument selling application! This project is a simple e-commerce application powered by React on the frontend and CommerceTools platform for the backend. It's simply a demo demonstrating basic features which is only the tip of an iceberg because commerce is a complex business with a solid system architecture. Our application replicates real-world shopping experiences in a digital environment.

Visitors can do the following

1. Browse through a vast range of music instruments, view their detailed descriptions and select an item from the showcase and preview.
2. Search, categorization and sorting of the instruments.
3. User registration and login to the further implementation of the order.
4. Add their favorite instruments to the cart and proceed to checkout.

Key pages of the application

• Main
• Login
• Registration
• Catalog Product
• Detailed Product
• User Profile
• Cart
• About Us

Technologies Stack🔧

• React
• TypeScript
• Vite
• Redux Toolkit
• CommerceTools
• MaterialUI
• Husky
• ESLint
• Prettier
• Jest
• Swiper

Installation 💾

1. Clone the repository:

   git clone https://github.com/OKitel/eCommerceApp.git

2. Enter the project directory:

   cd eCommerceApp

3. Install the dependencies:

   npm install

4. Start the development server with:

   npm run dev

Available scripts

In the project directory, you can run:

Run Project

npm run dev

Runs the app in the development mode. Open http://localhost:5173 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Runs TypeScript and Vite build

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Runs ESLint

npm run lint

Runs the linter in all components and pages

Runs ESLint fix

npm run lint:fix

Runs the linter and makes fixes in all components and pages

Runs prettier to check files

npm run check

When you want to check if your files are formatted according to Prettier rules

Runs prettier to format

npm run format

To format files according to ESLint rules in-place

Runs Vite preview

npm run preview

Starts a local web server that serves the built solution from ./dist for previewing

Runs Jest

npm run test

Launches the test runner in the interactive watch mode.

Runs Jest Coverage

npm run coverage

Launches the test runner with coverage.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Olga Kitel 🚇 ⚠️ 📖 💻

Artem 🚇 🔣 ⚠️ 💻