Our E-Commerce application distributes of the latest movie releases from leading streaming platforms. Quick search, convenient registration panel, intuitive navigation and easy checkout, along with a concise design, make our app attractive to the user.
The application is powered by CommerceTools. It implements registration integration with the authentication service, managing the user's authentication state, storing the authentication token, providing buttons to navigate between the login and registration pages, and implementing routing for proper navigation. The catalog page displays a list of films with their brief descriptions, filtering, sorting and searching functions are implemented. By clicking on the card, you can go to the page with the film, which contains detailed information about the release date, plot, actors. There is a slider and a modal window were created for more convenient viewing of images on the same page, . Product cards are integrated with the shopping cart. The basket displays a list of films added to the purchase, the ability to remove items from the basket, the display of intermediate and total prices is implemented. The User Profile page contains complete user information that can be edited.
- React
- TypeScript
- API CommerceTools
- Vite
- ESLint
- Prettier
- Husky
- Jest
-
Clone this repo: $ git clone https://github.com/iisakjanova/eCommerce-Application.git
-
Go to downloaded folder: $ cd eCommerce-Application.
-
Install dependencies: $ npm install
-
Runs the app in the development mode $ npm run dev
-
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.
-
npm run build Script to build the app for production to the build folder. Your app is ready to be deployed!
-
npm run preview Script to start a local web server that serves the built solution for previewing
-
npm run test Script to launch the test runner in the interactive watch mode. See the section about running tests for more information.
-
npm run test:coverage Script to define what percentage of application code is tested and whether the test cases cover all the code.
-
npm run lint Script to launch the eslint runner in the interactive watch mode. You will see any lint errors in the console.
-
npm run format Script to format and make your code nice and readable using prettier
-
npm run lint-staged Script to run linters on staged changes only, making the process faster and more efficient
-
npm run prepare Script to launch husky installation, it's launched during the global installation.