Awesome Open Source
Awesome Open Source

AngularIonicNGXSMovies

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.

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.

Technologies

App Example

App

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

Development server

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.

Build

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.

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

Code scaffolding

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.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (262,755
Angular (12,820
Ionic (1,663
Ngx (288
Angular9 (275
Ionic4 (271
Capacitor (259
Angular10 (142
Ionic5 (126
Angular10 Sample (8
Related Projects