Cineverse Dashboard

A responsive web application where users can browse popular movies and TV shows, search for content, and view detailed information. Built with Angular 16 and TypeScript, Cineverse Dashboard provides an engaging interface for discovering the latest in entertainment.

Live demo: cineverse-dashboard.vercel.app

---

Table of Contents

• Features
• Screenshots
• Getting Started
  • Installation
  • Development Server
  • Build
  • Testing
• Folder Structure
• Contributing
• License
• Contact

---

Features

• Browse Popular Movies: View a curated list of trending and popular movies.
• Search Functionality: Instantly search for movies by title.
• Movie Details Page: View detailed information including overview, genres, release date, runtime, user score, and more.
• Responsive Design: Optimized for all devices.
• Error Handling and Loader: User-friendly error messages and loading states.
• Modular Angular Architecture: Features reusable components, modules, and services.

---

Screenshots

Home Page

The Home Page displaying a list of popular movies.

Movie Details Page

The Movie Details Page displaying the details of the movie such as overview, runtime, user rating, etc.

Search Results

The page displaying the search results.

---

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• Angular CLI (npm install -g @angular/cli)

Installation

Clone the repository:

git clone https://github.com/Zafar7645/cineverse-dashboard.git
cd cineverse-dashboard/client/cineverse-dashboard
npm install

Development Server

Run the development server:

ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any source files.

Build

To build the project for production:

ng build

The build artifacts will be stored in the dist/ directory.

Testing

Unit Tests

Run unit tests via Karma:

ng test

End-to-End Tests

To run e2e tests, first add a package that implements end-to-end testing capabilities:

ng e2e

---

Folder Structure

client/cineverse-dashboard/
├── src/
│   ├── app/
│   │   ├── components/           # Reusable UI components (header, movie card, movie list)
│   │   ├── movie-details/        # Movie details module and component
│   │   ├── shared/               # Shared components (loader, error)
│   │   ├── app.module.ts         # Main Angular module
│   │   └── ...                   # Other core files
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   └── main.ts
└── ...

---

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature).
3. Make your changes.
4. Commit and push (git commit -am 'Add new feature' && git push origin feature/your-feature).
5. Open a pull request.

---

License

This repository currently does not specify a license.

---

Contact

• Author: Zafar7645
• Homepage: cineverse-dashboard.vercel.app

---

Further Help

For more help on the Angular CLI, use ng help or refer to the Angular CLI Overview and Command Reference.