Skip to content

Commit a0c62b1

Browse files
author
Lucas95s
committed
infra: Update read me file
1 parent 9a750f4 commit a0c62b1

File tree

1 file changed

+82
-0
lines changed

1 file changed

+82
-0
lines changed

README.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
Demo Angular Store
2+
===================
3+
This is a demo e-commerce store built using Angular 5 and TypeScript. 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.
4+
5+
Following voucher codes are valid in the application:
6+
7+
- 5OFF - Gives £5 off from the total price
8+
- 10OFF - Gives £10 off from the total price provided the total value of cart is above £50
9+
- 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.
10+
11+
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.
12+
13+
Setup
14+
-----
15+
16+
1) Run the following command to install the dependencies
17+
18+
`npm install`
19+
20+
2) To start the app, run and go to http://localhost:4200 to view the app
21+
22+
`npm start`
23+
24+
3) This project is enabled with **TSLint**. Any TypeScript file that you write must be linted using TSLint. To run the linting command type
25+
26+
`npm run lint`
27+
28+
4) This project uses Karma for unit testing. To run tests, type
29+
30+
`npm run test`
31+
32+
5) To build a production version of the application, run the command
33+
34+
`npm run build`
35+
36+
37+
Tech Stack
38+
----------
39+
Following is the tech stack:
40+
41+
- **Angular 5** - Angular 5 gives us an MVC framework to write our code in a more modular and scalable way
42+
- **TypeScript** - A strict version of JavaScript with typings added.
43+
- **Babel** - Used to transpile the advanced version of JavaScript
44+
- **SCSS** - Used to write CSS in more scalable and modular way
45+
- **TSLint** - Used to lint the typescript code
46+
- **Karma** - Used for unit testing the application
47+
48+
Directory Structure
49+
-------------------
50+
- **src/app** - Contains the main application and all the logic
51+
- **src/assets** - Contains static assets like images and theme files
52+
- **src/environments** - Contains the environment file. We can configure the main API URL in this file.
53+
54+
App Directory Structure
55+
-------------------
56+
- **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
57+
- **containers** - Contains smart components. These components work with services and get the data and pass it down to dumb components
58+
- **mock** - Contains the mock data for the application. Can be removed safely once we have the real back-end
59+
- **models** - Contains the model which is used to maintain the state and structure while passing around data
60+
- **modules** - Contains external modules that the application depends upon. Currently we use material design and hence this folder includes the material module
61+
- **providers** - Contains the services that raises the actual HTTP requests. This is a place to add business logic
62+
- **utils** - Contains small utility function / files that are used throughout the application
63+
64+
**TSLint**
65+
66+
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.
67+
68+
- TSLint configurations are maintained in the tslint.json file in the root directory
69+
70+
Unit Tests
71+
----------
72+
The repo uses [Karma](https://karma-runner.github.io/2.0/index.html) 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.
73+
74+
Future Improvements
75+
----------
76+
77+
- Improve the UI/UX - Though the application uses Material design, the UI/UX can be improved a lot
78+
- Improve code coverage - Add tests for providers and other files
79+
- Implement filter by category in the application
80+
- Ability to add item directly to the cart from the list page
81+
- Proper error / status messages to the user
82+
- Support for internationalisation

0 commit comments

Comments
 (0)