Skip to content

Yuliya-Karuk/eCommerce-Application

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

eCommerce Application - Sprout🛍️

Description 🌐

This educational project serves as a demo version of an online shop, aimed at providing experience in team development according to requirements. The e-commerce application was created by a team of three developers over four sprints, utilizing the Scrum methodology. It simulates a real-world online store, showcasing the typical features and functionalities. The application leverages CommerceTools 🌐, a leading commerce solution provider for both B2C and B2B enterprises. Please note that CommerceTools offers a 2-month free trial, and the key may have expired by the time you view this project. As a result, you might not see the products or be able to test the application's full functionality. Nonetheless, you are welcome to explore our code.

⭐️ Project goals: ⭐️
Gain an understanding of team development and Scrum methodologies.
Strengthen knowledge in TypeScript development and master the basics of React framework development.
Master the basics of writing unit tests.
Deepen experience in writing Single Page Application (SPA).

Pages and functionality 🎓

  • Login and Registration Pages 🖥️ (allow users to create an account or log in to access personalized features) 🖥️
  • Main Page (serves as the landing page with navigation, featured products, and category links) 🏠
  • Catalog Product Page (displays a list of products with filtering, sorting, and pagination options) 📋
  • Detailed Product Page (provides comprehensive details about a specific product) 🔎
  • User Profile Page (enables users to manage personal information and update settings.) 👤
  • Basket Page (shows items selected for purchase, with options to edit quantities) 🛒
  • About Us Page (Offers information about team and their contacts)🙋‍♂️🙋‍♀️

Technology Stack 💻

  • React
  • React libraries
    • react-router-dom
    • react-hook-form
    • react-image-gallery
    • react-loader-spinner
    • react-loading-skeleton
    • react-toastify
    • etc
  • TypeScript
  • Vite
  • Eslint, Prettier, Husky
  • Vitest, React Testing Library
  • SASS

How to run locally

Simply clone this project to user's machine, navigate to project's folder under a terminal of his/her choice and then run the following commands:

Install dependencies
npm install

Run local server
npm run dev

Run in production mode
npm run build

Scripts for linting

For running ESLint, Prettier, and Stylelint run the following commands:

Run Eslint check
npm run lint

Run Eslint check and fix errors
npm run lint:fix

Run Prettier check
npm run prettier

Run Prettier check and fix errors
npm run prettier:fix

Run Stylelint check
npm run stylelint

Run Stylelint check and fix errors
npm run stylelint:fix

Run Eslint, Prettier, Stylelint check and fix errors
npm run format

Scripts for testing

For running Vitest run the following command:

npm run test