If this project has been useful to you and you want to help me to keep contributing to the open source with projects, examples, plugins,... collaborate and buy me a coffee.
Sample project that shows how to build a Movies Catalog APP with Angular 9, Ionic 5, Capacitor and NGXS (State Management).
This project was generated with Angular CLI version 1.7.4.
This project shows you how to:
* Use Capacitor in Ionic 4. * Use Capacitor Youtube Player (Works on web, android and ios). * Use NGXS for state management in Ionic 4. * Use NGXS plugins: * Devtools: Plugin with integration with the Redux Devtools extension. * Logger: A simple console log plugin to log actions as they are processed. * Forms: Plugin that helps to keep your forms and state in sync. * Show movies list. * Show skeleton when the movies list is being downloaded. * Show movie detail. * CRUD operations: * Add movie. * Update movie. * Delete movie. * Add movies to my favorites list. * Movies view mode in home: list view / card view. * Genre carousel for filtering movies. * Infinite scroll in movies list. * Use YouTube Data API to search movie trailer.
Technologies: Angular, Ionic, Capacitor, NGXS, TypeScript.
API used in this project
You can launch the movies API in two ways:
[NEW] Use the following project in Deno that I created to learn & practice my skills: Movies Rest API with Deno
Use the option I initially used when developing the project: JSON Server
Start movies rest API with Deno
Check out the instructions in the repository
Start fake json server
$ cd json-server $ json-server --watch db.json
ng serve for a dev server. Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files.
ng build to build the project. The build artifacts will be stored in the
dist/ directory. Use the
-prod flag for a production build.
Capacitor: Add Platforms
$ npx cap add ios $ npx cap add android
Capacitor: Syncing your app
Every time you perform a build (e.g. npm run build) that changes your web directory (default: www), you'll need to copy those changes down to your native projects:
$ npx cap copy
Capacitor: Open IDE to build
$ npx cap open ios $ npx cap open android
ng generate component component-name to generate a new component. You can also use
ng generate directive|pipe|service|class|guard|interface|enum|module.
Running unit tests
ng test to execute the unit tests via Karma.
Running end-to-end tests
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.