The aim of this project is to build a modular and scalable application using Angular.
A live demo of movie-store is hosted on Github Pages.
This project was generated with Angular CLI version 9.0.1.
Technology Stack :
- Angular 9
- RxJS 6
- Angular Material
- Firebase
The goal of the architecture and structure used in this application is to ensure :
- Scalability
- Modularity
- Separation of concerns ( less logic in the UI )
- Framework agnostic ( The same architecture would be easy to implement in React or Vue)
- Maintainability
- Be Reactive => Everything should be a stream
This sample application includes the following features :
- Modular application
- Routing
- Lazy loading
- Reactive forms & validations
- Testing
- Material design
The application is splitted into several modules. The image below represents the modules implemented in this application.
- Core Module : Core of the application, it contains the core layout, menu and logo.
- Shared Module : Contains shared features such as Material mdoules and several utility classes.
- Catalog Movies Module : Browse a collection of movies and view the details of each movie
- Catalog Series Module : Browse a collection of series and view the details of each serie
- Cart Module : Add movies or series to cart.
- Auth Module : Authentication ( Not implemented yet )
Each module in the application can be illustrated by 2 big parts :
- UI : represented by components. This is the UI part that will be exported by each module.
- Services : side effects services like http services and local storage
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.
@author: 'Fahmi BEN SALAH < fahmii.bensalah@gmail.com >'
If you like the project, shoot a 🌟 and feel free to fork & send PR anytime.