cudo-shop

eCommerce Application in Angular.

In the modern world of gadgets and information technology, there are a lot of people with phones than books. Nevertheless, the availability of internet and online stores makes life much easier for both ordinary users and book lovers. Among them, there are those who still prefer to read books in paper format. Many want to enjoy literature in the original language or in English. Therefore, we are creating a platform for searching and purchasing books in English so that our users can save time searching for their desired works in offline shops. In addition, buyers often face the issue that stores lack suitable cosmetics for their skin or hair type, and the assortment can be limited. We want to help our users save time, so our platform will include the ability to select the necessary cosmetics.

It is expected that the project will contain:

• ability to select the desired section (books or cosmetics)
• browsing categories by selected section
• browsing random items from the books section
• browsing random items from the cosmetics section
• viewing detailed information about the selected product
• the ability to add a favorite product to the basket/ cart
• user registration and login
• product search
• sorting products by choosen category in selected section

---

Technologies used in the project:

• Angular
• TypeScript
• ESLint
• Prettier
• Husky
• Jest
• SCSS

---

Configure Environment

To use Environment development mode you need:

1. Make sure you have environment.dev.ts and environment.prod.ts in /environments folder.
2. The next step is to fill in your CommerceTools client credentials in the appropriate fields in the environment.dev.ts file.
3. Keep files environment.dev.ts and environment.prod.ts in .gitignore file.
4. Your client credentials shouldn't be brought into GitHub history!

Start the project

npm start Runs application in the development mode. Page will reload when you will make a changes.

Use prettier

npm run format This command is used to bring the code to a unified style standard, which improves readability and simplifies project maintenance.

Use ESLint

npm run lint The script is used to test TypeScript code. Used to run a linter on your project's codebase, ensuring code quality and adherence to coding standards.

npm run lint:fix This command is usually a custom script designed to automatically fix code errors using a linter.

Create a build directory

npm run build It is a command to create an optimized version of your project, ready for publication or deployment. Compiles the source code by transforming source files into optimized and production-ready files. Reduces file size by removing unnecessary spaces, comments, and applying other optimization techniques to improve website loading speed. Creates the final build: places all prepared files into a separate folder (dist or build), ready for deployment on a server or hosting environment.

npm run build:prod Creates a build directory with a production build of your app.

npm run watch It will watch your files for changes. The watch command will compile the components then watch the files and recompile when one of them changes.

Run tests

npm run test Used to automatically execute a set of tests written with the Jest test framefork.

npm run test:coverage Test coverage helps ensure that all functional and usability aspects of the software are thoroughly tested.

Husky and lint-staged

npm run prepare Script will install a husky shell script in the root folder. Husky is a popular Git hook tool that helps developers enforce and automate certain actions and scripts before committing or pushing code to a Git repository.

npx lint-staged Runs linting and formatting tools on files that are staged in Git before committing them. It helps ensure code quality and consistency by automatically running linters like ESLint and formatters like Prettier on only the files that are about to be committed, making the pre-commit process faster and more efficient.