Skip to content

guranda26/ecommerce-website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

eCommerce Application 🛍️🌐

Welcome to our eCommerce application! This platform replicates real-world shopping experiences in a digital environment 🏪. It's a comprehensive online shopping portal that provides an interactive and seamless experience to users. From product discovery to checkout, the application ensures a smooth journey for the user, enhancing their engagement and boosting their purchasing confidence 🚀.

Key Features

  • Browse through a vast range of products 📚👗👟
  • View detailed product descriptions
  • Add favorite items to the basket 🛒
  • Proceed to checkout 💳
  • User registration and login 📝🔐
  • Product search 🔍
  • Product categorization and sorting
  • Responsive design for various devices 📲 (Minimum resolution: 390px)

Technology Stack 💻📚

  • React.js with TypeScript
  • CommerceTools API for backend
  • ESLint, Prettier, Husky for code quality
  • Vitest for testing

Sprint Overviews 🏁📅

Sprint 1 - Project Setup and CommerceTools Integration 🚀🔧

In the first sprint, we'll lay down the project's foundation. This includes setting up the repository, organizing the task board, integrating with CommerceTools to establish the API client, and configuring the development environment.

Sprint 2 - Login, Registration, and Main Pages Implementation 🔐🖥️

The second sprint will focus on building the application's main pages. This includes implementing the login and registration features, managing user authentication state, saving the authentication token, and setting up navigation between pages.

Sprint 3 - Catalog Product, Detailed Product, and User Profile Pages Implementation 📚🔍👥

The third sprint will focus on enhancing the user interface and experience. We'll work on implementing the Catalog Product, Detailed Product, and User Profile pages. Features like fetching and displaying products, filtering and sorting, designing product cards, and displaying user's personal information are the key tasks in this sprint.

Sprint 4 - Detailed Product Page Enhancement, Basket Page, Catalog Page Enhancement, and About Us Page Implementation 🛍️📊🙋‍♂️🙋‍♀️

The fourth sprint will focus on improving the Detailed Product page, building the Basket page, enhancing the Catalog page, and implementing the About Us page. This includes enhancing the product view, adding basket functionality, integrating the shopping cart with the product catalog, and providing a comprehensive introduction to the development team. This sprint also focuses on performance optimization to handle a large number of products efficiently.

Key Pages

  • Login Page: The user's entry point to the application. More details...
  • Registration Page: Allows new users to sign up for the application. More details...
  • Main Page: Provides links to all other essential pages. More details...
  • Catalog Product Page: Displays a list of products in a specific category. More details...
  • Detailed Product Page: View detailed information about a specific product. More details...
  • User Profile Page: Displays the personal information of the user. More details...
  • Basket Page: Allows users to view and manage the products in their basket. More details...
  • About Us Page: Gives a brief introduction to the development team. More details...

Getting Started with Create React App

Available Scripts

npm run dev

Runs the app in the development mode using webpack. Open http://localhost:3000 to view it in your browser. The page will reload if you make edits. You will also see any lint errors in the console.

npm run test

Launches test runner in the interactive watch mode using Jest.

Running Tests

  • To run tests, execute npm test.

  • To generate and view test coverage reports, execute npm run test:coverage. Coverage reports are saved in the coverage directory.

npm run build

Builds the app for production using Vite. 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.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

npm run lint

Runs ESLint on the src/ directory. This script checks for linting errors and attempts to automatically fix them.

npm run format

Runs Prettier on files in the src/ directory. This command will format source files to ensure code consistency and style adherence.

npm run preview

This command is intended for previewing the build locally and not meant as a production server.

About

Final group project implemented for the Rolling Scope School JavaScript/Front-End Development Course 2023.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors