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.

Sample project that shows how to build a Movies Catalog APP with Angular (version 13), Ionic (version 6), Capacitor and NGXS (State Management).

IMPORTANT NOTE: The project has been updated with the latest versions of Angular (version 17) and Ionic (version 7).

This project was generated with Angular CLI version 1.7.4.

This project has been updated following the official Angular update guide.

This project shows you how to:

* Use Capacitor in Ionic.
* Use Capacitor Youtube Player (Works on web, android and ios).
* Use NGXS for state management in Ionic 6.
* 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.

App Example

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.