A single-page application (SPA) for an online game store. The project features user authentication, logging, convenient navigation between pages, a product catalog with filtering and sorting options, and much more.
"Game Store" is a modern single-page web application (SPA) that implements a full-featured online store for selling games. Users can browse detailed information about games, filter and sort the catalog by various parameters, and easily navigate between pages.
To purchase a game, users need to log in or register an account. Registered users have access to a shopping cart, where they can add or remove games just like in a real online store.
The application leverages CommerceTools as the backend service for product management, user authentication, and order processing, ensuring a reliable and scalable e-commerce solution.
- React — UI library;
- TypeScript — static typing;
- Material UI — UI component library;
- Vite — build tool;
- Vitest — testing framework;
- React Helmet — library for managing head elements;
- ESLint + Prettier — code linting and formatting;
- Stylelint — style linting;
- Husky + lint-staged + commitlint — automation for code and commit message checks.
- Product Catalog:
- Search Functionality: Quickly find specific games by title
- Advanced Filtering: Filter games by multiple criteria including price range, genre, platform, and other parameters
- Sorting Options: Sort results by price or alphabetically
- Pagination: Navigate through large collections with ease
- Quick Navigation: Click on any game card to view its detailed page
- User Authentication: Secure registration and login system to access personalized features
- User Profile: Registered users can access and edit their personal information on the dedicated profile page
- Shopping Cart: Full shopping cart functionality for registered users - add, remove, and manage items
- Product Details Page:
- Comprehensive game information with detailed descriptions
- Interactive media slider for screenshots
- Modal window for enlarged image viewing
- SEO Optimization: Implemented with React Helmet for better search engine visibility
- Team Information: Learn about our development team on the dedicated "About Us" page
To start working on the project, clone the repository to your local machine.
Repository: https://github.com/cherkasovaa/e-commerce-application.git
git clone https://github.com/cherkasovaa/e-commerce-application.gitAfter cloning, navigate to the project directory:
cd e-commerce-applicationTo start working on the project, install all dependencies:
npm installDuring development, use the development mode. To start the dev server, run:
npm run devThe local server will open at http://localhost:3000
To build the project, run: npm run build
The built files will be located in the public directory.
To preview the built project, use the built-in Vite server. Start it with: npm run preview
Run tests with the command: npm run test
- Check code with ESLint:
npm run lint - Auto-fix ESLint issues:
npm run lint:fix - Format code with Prettier:
npm run format - Check styles with Stylelint:
npm run stylelint - Auto-fix Stylelint issues:
npm run stylelint:fix
Husky is used to automate code and commit message checks.
After cloning the repository and installing dependencies, run: npm run prepare
Warning
If hooks do not work Make sure the files in .husky/ have execution permissions
chmod +x .husky/pre-commit
chmod +x .husky/commit-msg
The project uses Conventional Commits to standardize commit messages. The message format is:
<type>: <description>
[body]- feat: a new feature
- fix: a bug fix
- docs: documentation changes
- style: code formatting changes
- refactor: code refactoring
- test: adding or fixing tests
- chore: updates to build tasks, configs, etc