Skip to content

mihocsaszilard/cinemApp-Angular-client

Repository files navigation

cinemApp-Angular Client

Objective

Using Angular, build the client-side for an application called cinemApp based on its existing server-side code (REST API and database), with supporting documentation.

cinamApp-Angular.mp4

Table of content

This project was generated with Angular CLI version 11.0.5.

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.

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.

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.

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 Overview and Command Reference page.

Context

As the modern workplace continues to transform, remote work has become more important than ever. Whether you end up working in an office or from home, it's crucial that you know how to communicate and collaborate effectively.

In this Achievement, I'll learn how to work with others by writing and sharing documentation with my peers, providing feedback, and making a contribution to the tech community. The ability to create detailed and straightforward handoffs for other developers is an indispensable skill that I'll need when applying for a job.

Opportunities to engage with these skills will be provided by my Achievement 6 project. For my project, I'll return to the myFlix app's server-side from Achievement 2 and build the client-side interface for a new single-page, responsive app, one that includes several interface views that will handle data through the previously-defined REST API endpoints.

This time I'll use Angular, instead of React. Angular is an extremely popular framework that can be used for a wide range of mobile and desktop applications. It's particularly well-suited to large projects, as well as projects requiring a complex user interface because it comes with a variety of built-in modules and services.

As I work on this project, I’ll use Agile project management techniques including user stories, story points, and a kanban board. These techniques are commonly used by companies in the tech industry. At the same time, I'll practice communicating the skills and knowledge that I'm acquiring with technical interview questions, before adding the project to, and finalizing, my online portfolio.

User Stories

  • As a user, I want to be able to receive information on movies, directors, and genres so that I can learn more about movies I’ve watched or am interested in
  • As a user, I want to be able to create a profile so I can save data about my favorite movies

Key Features

  • The app should display a welcome view where users will be able to either log in or register an account
  • Once authenticated, the user should now view all movies
  • Upon clicking on a particular movie, users will be taken to a single movie view, where additional movie details will be displayed. The single movie view will contain the following additional features:
    • A button that when clicked takes a user to the director view, where details about the director of that particular movie will be displayed
    • A button that when clicked takes a user to the genre view, where details about that particular genre of the movie will be displayed

The 5 W's

  1. Who —The users of the myFlix movie app and codebase, including other developers and designers
  2. What —A single-page, responsive movie app built with Angular, with routing and several interface views. The client-side developed in this Achievement will support the existing server-side from Achievement 2 by facilitating user requests and rendering the response from the server-side via a number of different interface views. The app will be accompanied by relevant documentation and handoff deliverables, including a kanban board containing user stories and story points
  3. When —Users will be able to use the app whenever they want to read information about different movies or update their user information
  4. Where —The app will be hosted online. It is responsive and can therefore be used anywhere and on any device, giving all users an equal experience
  5. Why —Movie enthusiasts like to be able to access information about different movies, directors, and genres whenever they want. The app will demonstrate your Angular skills and your ability to create straightforward documentation for other developers and employers

Technical Requirements

  • The application must be written in Angular (version 9 or later)
  • The application requires the latest version of Node.js and npm package
  • The application must contain user registration and login forms
  • The application must be designed using Angular Material
  • The application's codebase must contain comments using Typedoc
  • The project must contain technical documentation using JSDoc
  • The project must be hosted on GitHub Pages

API Info

Docs | Link to API | API's GitHub Repo | API Documentation

Contact

linkedin profile twitter profile portfolio website send me an email-> [email protected]