hannesdonel / MMM-client-Angular

Welcome to the Angular user client for my MORE MOVIE METADATA API. This fully responsive single page application will provide you graphically appealing with access to information about different movies, directors, and genres stored on a MongoDB database. The design is following the Material Design Guidelines from Google. It's possible to sign up to create a unique list of favorite movies.

Home Page:https://hannesdonel.github.io/MMM-client-Angular/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MORE MOVIE METADATA - Angular Client

Welcome to the Angular user client for my MORE MOVIE METADATA API. This fully responsive single page application will provide you graphically appealing with access to information about different movies, directors, and genres stored on a MongoDB database. The design is following the Material Design Guidelines from Google. It's possible to sign up to create a unique list of favorite movies.

Use the app.

Example Image 1

Example Image 2

Technologies

  • TypeScript, HTML, SCSS
  • Angular
    • light and dark mode using Angular's color palettes
    • template and reactive forms with comprehensive validation
  • RxJS

Functionality

Registration

  • Allows new users to register (username, password, email, birthday)

Login

  • Log in with a username and password

Main

  • Returns a list of all movies (each listed item with an image, title, genres, directors, actors and description)
  • Sorting and filtering
  • Ability to select a movie for more details

Single movie

  • Returns data (description, genres, directors, actors, image) about a single movie
  • Add or remove movie to list of favorites

Genres and directors

  • Returns data about a genre or director, with a name and description/bio
  • Displays example movies

Profile

  • Update user info (username, password, email, date of birth)
  • User deregistration
  • Display and alter list of favorite movies

Single movie and all movies

  • Allow users to see which actors star in which movies

Get started

I'm using npm throughout this tutorial, you can of course use another package manager.

Prerequisites

  • Node.js

      npm install node@lts
    

Development server

Run ng serve or npm startfor a dev server. Navigate to http://localhost:8080/. The app will automatically reload if you change any of the source files.

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory. The base-href is set to https://hannesdonel.github.io/MMM-client-Angular/.

Documentation

A detailed documentation of the codebase is located in /docs directory.

About

Welcome to the Angular user client for my MORE MOVIE METADATA API. This fully responsive single page application will provide you graphically appealing with access to information about different movies, directors, and genres stored on a MongoDB database. The design is following the Material Design Guidelines from Google. It's possible to sign up to create a unique list of favorite movies.

https://hannesdonel.github.io/MMM-client-Angular/


Languages

Language:TypeScript 59.6%Language:HTML 25.5%Language:SCSS 15.0%