DUMMY SHOP
An Nx and Angular project
The product list page is the homepage and displays a list of products. Every product preview contains the thumbnail, the title, the description, and the price. Also, a button to toggle the product as favorite or not favorite.
The favorite products page displays a list of favorite products for the current user. Every product preview contains the thumbnail, the title, the description, and the price of the product. Also, a button to toggle it as favorite (or not favorite).
- Angular 17
- Nx monorepo
- SSR: Native Angular server side rendering for First Contentful Paint (FCP)
- Netlify deployment
- Pagination
- Ngrx Store for managing app state
- Use of signals for better performance
- Standalone components
- SCSS for styles
- Rxjs
- On-Push strategy
- Centralized service for app requests
- Unit testing with Jest
https://dummyshopping2.netlify.app
Client: Angular 17, Nx, SCSS, NGRX, Rxjs
Server: https://dummyjson.com
GET /products| header | Type | Description |
|---|---|---|
token |
string |
Required. Your token |
Limit and skip products:
ex: 'https://dummyjson.com/products?limit=10&skip=10&select=title,price'
Add Product → https://dummyjson.com/products/add ● Update Product → https://dummyjson.com/products/{id} ● Delete Product → https://dummyjson.com/products/{id}
To run tests, run the following command
npx nx run dummyshop:test![App Porducts] https://ibb.co/cxm6LYn
![App Porducts] https://ibb.co/6JSxHbR
✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨
To start the development server run nx serve dummyshop. Open your browser and navigate to http://localhost:4200/. Happy coding!
If you happen to use Nx plugins, you can leverage code generators that might come with it.
Run nx list to get a list of available plugins and whether they have generators. Then run nx list <plugin-name> to see what generators are available.
Learn more about Nx generators on the docs.
To execute tasks with Nx use the following syntax:
nx <target> <project> <...options>
You can also run multiple targets:
nx run-many -t <target1> <target2>
..or add -p to filter specific projects
nx run-many -t <target1> <target2> -p <proj1> <proj2>
Targets can be defined in the package.json or projects.json. Learn more in the docs.
Have a look at the Nx Console extensions. It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
Just run nx build demoapp to build the application. The build artifacts will be stored in the dist/ directory, ready to be deployed.
Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.
Run nx graph to show the graph of the workspace.
It will show tasks that you can run with Nx.