This is a demo e-commerce store built using Angular 5 and TypeScript. The application can be directly viewed here. The application lists the items that can be bought from the store. Every item has its own page with more details. Any item can be added or removed from the shopping cart. The user can visit the shopping cart at any time. The user can also apply voucher codes to the shopping cart. Based on the voucher code, price will be discounted.
Following voucher codes are valid in the application:
- 5OFF - Gives £5 off from the total price
- 10OFF - Gives £10 off from the total price provided the total value of cart is above £50
- 15OFF - Gives £15 off from the total price provided the total value of the cart is above £75 and atleast one footwear is added in the shopping cart.
The application sends an actual HTTP requests while getting the list of items, item description, verifying voucher code and also buying. But since we don't have a real back-end all these HTTP requests' responses are not used. Instead mock data is used. The code is written such a way that, this HTTP URL can be easily replaced with an actual back-end URL in future. We just need to change one configuration file and no need to touch the actual logic.
- Run the following command to install the dependencies
npm install
- To start the app, run and go to http://localhost:4200 to view the app
npm start
- This project is enabled with TSLint. Any TypeScript file that you write must be linted using TSLint. To run the linting command type
npm run lint
- This project uses Karma for unit testing. To run tests, type
npm run test
- To build a production version of the application, run the command
npm run build
Following is the tech stack:
- Angular 5 - Angular 5 gives us an MVC framework to write our code in a more modular and scalable way
- TypeScript - A strict version of JavaScript with typings added.
- Babel - Used to transpile the advanced version of JavaScript
- SCSS - Used to write CSS in more scalable and modular way
- TSLint - Used to lint the typescript code
- Karma - Used for unit testing the application
- src/app - Contains the main application and all the logic
- src/assets - Contains static assets like images and theme files
- src/environments - Contains the environment file. We can configure the main API URL in this file.
- components - Contains the dumb components of the application. These dumb components just receive properties and render them. They have no idea about HTTP calls and other services
- containers - Contains smart components. These components work with services and get the data and pass it down to dumb components
- mock - Contains the mock data for the application. Can be removed safely once we have the real back-end
- models - Contains the model which is used to maintain the state and structure while passing around data
- modules - Contains external modules that the application depends upon. Currently we use material design and hence this folder includes the material module
- providers - Contains the services that raises the actual HTTP requests. This is a place to add business logic
- utils - Contains small utility function / files that are used throughout the application
TSLint
The project is enabled with TSLint. The reason for choosing TSLint is, it enforces a common rule across the team. Developers working on this project will be forced to have uniform code styling. This helps in maintaining the project in long run.
- TSLint configurations are maintained in the tslint.json file in the root directory
The repo uses Karma as its testing framework. The files ends with .spec.ts extension. Currently we test only the components. This can be extended to test providers in future that can improve code coverage.
- Improve the UI/UX - Though the application uses Material design, the UI/UX can be improved a lot
- Improve code coverage - Add tests for providers and other files
- Implement filter by category in the application
- Ability to add item directly to the cart from the list page
- Proper error / status messages to the user
- Support for internationalisation