films-app.mp4
The Film Information Viewer is a web application built using Angular 17, TypeScript, and Angular Material (specifically mat-grid
). It provides a platform to explore information about various films along with their character lists. Users can click on a character in the list to open a new tab displaying specific character details.
- Film Information Display: Browse through a curated collection of films with relevant details such as title, release year, producer, etc.
- Character Lists: Each film includes a list of characters involved.
- Character Details: Clicking on a character opens a new tab displaying detailed information about that character.
- Responsive Design: The application is optimized for various screen sizes and devices.
- Angular 17: A powerful JavaScript framework for building single-page client applications.
- TypeScript: A statically typed superset of JavaScript that compiles to plain JavaScript.
- Angular Material: A UI component library for Angular applications, used here for its
mat-grid
.
To run the application locally, follow these steps:
- Clone this repository.
- Navigate to the project directory.
- Run
npm install
to install dependencies. - Run
ng serve
to start the development server. - Open your browser and navigate to
http://localhost:4200/
.
Upon launching the application, users will be greeted with a list of films. They can click on any film to view its details, including the characters involved. Clicking on a character name will open a new tab displaying detailed information about that character.
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
- Fork the repository.
- Create your feature branch (
git checkout -b feature/your-feature
). - Commit your changes (
git commit -am 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature
). - Create a new Pull Request.