Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/devsoft112/movie-list-angular-dotnet

This application is a full-stack movie viewer developed with Angular 18 and .NET 8. It enables users to view, create, update, and delete movies, each with a title, description, genre, and cover image. The back-end API manages movie data stored in an SQL database.
https://github.com/devsoft112/movie-list-angular-dotnet

angular dotnet-core java javascript python3 typescript

Last synced: 19 days ago
JSON representation

Host: GitHub
URL: https://github.com/devsoft112/movie-list-angular-dotnet
Owner: devsoft112
Created: 2024-09-15T18:39:47.000Z (2 months ago)
Default Branch: master
Last Pushed: 2024-09-15T19:25:42.000Z (2 months ago)
Last Synced: 2024-10-21T01:39:29.993Z (27 days ago)
Topics: angular, dotnet-core, java, javascript, python3, typescript
Language: C#
Homepage:
Size: 886 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Movie List Application

## Features

### Front-End

- **Movie List**: Displays all movies in a paginated format.
- **Movie Detail View**: Shows detailed information about each movie.
- **CRUD Operations**: Allows users to create, update, and delete movies.
- **Drag-and-Drop Image Upload**: Users can set a movie's cover image by dragging and dropping an image file.
- **Responsive Design**: Optimized for a wide range of devices.
- **Loading Indicators**: Displayed while data is being fetched or submitted.
- **Error Messages**: Handles and displays error messages for validation failures and other issues.

### Back-End

- **RESTful API**: Manages movies with GET, POST, PUT, and DELETE operations.
- **Image Handling**: Supports uploading and managing movie cover images.
- **Sorting and Pagination**: Allows sorting of movies by Id and supports pagination.
- **Swagger Integration**: Provides interactive API documentation.
- **Data Seeding**: Seeds the database with initial movie data.
- **CORS Configuration**: Allows cross-origin requests from the front-end application.

## Project Structure

The project is divided into two main parts:

- **MovieAPI (Back-End)**
- Framework: C# .NET 8
- Functionality: RESTful API, Entity Framework Core 8 for database operations, Docker support, Swagger documentation, sorting and pagination support.
- **MovieAppUI (Front-End)**
- Framework: Angular 18
- Functionality: Displays list of movies, provides forms for movie creation and editing, uses Angular Material for UI components and styling, supports search and filtering.

## Technologies Used

- .NET 8.0
- Angular 18
- Entity Framework Core (PostgreSQL)
- Swashbuckle (Swagger)
- Docker
- PostgreSQL

## Setup Instructions

### Prerequisites

- .NET 8 SDK
- Node.js
- Docker (Optional)
- PostgreSQL (Optional)

### Option 1: Running with Docker for .NET Backend

1. Navigate to the root directory of .net backend: `cd sb-space-angular18-dotnet8\MovieAPI`
2. Build and run the Docker containers: `docker-compose up --build -d`
3. Access the API at http://localhost:5103 and Swagger UI at http://localhost:5103/index.html

### Option 2: Running Without Docker

#### Back-End (MovieAPI)

1. Set Up PostgreSQL: Ensure PostgreSQL is installed and running. Create a database named `movie_db`.
2. Update the Connection String in `appsettings.json`.
Modify the `ConnectionStrings.MovieDbConnection` in `appsettings.Development.json`:

```json
"ConnectionStrings": {
"MovieDbConnection": "Host=localhost;Database=movie_db;Username=[username];Password=[password]"
}
```
3. Run the Migrations: `dotnet ef database update`
4. Run the API: `dotnet run`
5. Access the API at http://localhost:5103 and Swagger UI at http://localhost:5103/index.html

#### Front-End (MovieAppUI)

1. Navigate to the MovieAppUI directory: `cd sb-space-angular18-dotnet8/MovieAppUI`
2. Install npm packages: `npm install`
3. Run the Angular application: `ng serve`
4. The application should be running on http://localhost:4200.

## API Endpoints

- GET /api/movies: Retrieves a paginated list of movies, sorted by Id.
- GET /api/movies/{id}: Retrieves a specific movie by ID.
- POST /api/movies: Creates a new movie.
- PUT /api/movies/{id}: Updates an existing movie.
- DELETE /api/movies/{id}: Deletes a movie by ID.

## Swagger Documentation

Swagger is integrated into this project for API documentation and testing. Access Swagger UI at http://localhost:5103/index.html.

## Database Seeding

The application seeds the database with initial data on startup if the database is empty. To modify the seed data, edit the `MovieSeedData.cs` file in the `Data/Seeding` folder.

## Assumptions and Design Decisions

- **Data Seeding**: The database is seeded with initial movies to simplify testing and validation.
- **Error Handling**: Basic error handling is implemented for both API and UI to manage common scenarios.
- **Validation**: Form validation is implemented on the front-end to ensure that all required fields are filled before submission.