Angular project setup - v0 by Vercel

Create a complete Angular website project compatible with v17+ and usable in v0.dev, based on the following academic assignment instructions. Use ONLY the Angular frontend (no backend code). The frontend is connected to a Spring Boot backend that exposes the following REST endpoints:

GET /movies – returns all movies

GET /movies/{mid} – returns a movie by its MID

POST /movies – adds a movie

DELETE /movies/{mid} – deletes a movie by MID

📁 Project Naming and Structure:

Name the Angular folder: latipov-boburkhuja-homework3

Do not include node_modules

File and folder names must use kebab-case

Components go in folders like movie-list, movie-detail, add-movie

Service goes in services/movie.service.ts

Model goes in models/movie.ts

Use only external CSS (no inline or internal styling)

🧱 Backend Model Reference (from Homework #1):

Each movie has the following fields:

mid: number (must be 4-digit and unique)

name: string (required)

genre: string (required, e.g., action, romance)

price: number (must be positive and > 0)

rating: string (required, e.g., G, PG, PG-13, R, NC-17)

Validation must match these rules using Angular Form validation.

🧩 Angular Application Features:

✅ Part I: Setup and Services

Create the Angular project named latipov-boburkhuja-homework3

Add a Movie model with fields listed above

Create a MovieService to communicate with backend:

getAllMovies()

getMovieByMid(mid)

addMovie(movie)

deleteMovie(mid)

✅ Part II: Components

Movie List Component:

Display a table of MID and name for all movies

Include a link to view each movie’s details

Apply external CSS from Homework #2

Movie Detail Component:

Show all fields for a single movie

Include a Delete button to remove the movie

Add Movie Component:

Use an Angular form to add a movie

Validate fields using Angular:

MID: required, must be 4 digits

Name, Genre, Rating: required and non-empty

Price: required and > 0

Show error labels under invalid fields

🔗 Navigation & Styling

Use Angular Router with three routes:

/movies → Movie list

/movies/:mid → Movie detail

/add-movie → Add movie form

Add navigation links on all pages:

Home (list), Add Movie

Apply a shared external CSS file for consistent styling

⭐ Extra Credit Features (optional)

If possible, include:

Sortable Columns on Movie List (locally or using backend)

Search Bar that filters across all movie fields

Side Navigation Menu for filtering by genre (calls backend using genre URL param)

⚠️ Important Constraints:

Must use Angular patterns learned in class (no third-party libs)

Project must be commented

Must match naming rules

No deprecated Angular versions or internal styles

Must be fully compatible with v0.dev

Show full message

Screenshot of v0.dev

76d ago

I can see you've provided a screenshot of the v0.dev interface. However, I need to let you know that v0.dev's Code Project blocks are specifically designed for React and Next.js applications, not Angular projects. Angular uses a completely different framework structure, build system, and tooling.

Instead, I'll provide you with all the Angular project files using code blocks that will give you proper syntax highlighting and organization. You'll need to set up this project locally using Angular CLI.

Here's your complete Angular project structure for latipov-boburkhuja-homework3:

Project Structure and Core Files

Latipov Boburkhuja Homework3

src/app/models/movie.ts

Latipov Boburkhuja Homework3

src/app/services/movie.service.ts

Components

Latipov Boburkhuja Homework3

src/app/components/movie-list/movie-list.component.ts

Latipov Boburkhuja Homework3

src/app/components/movie-list/movie-list.component.html

Latipov Boburkhuja Homework3

src/app/components/movie-detail/movie-detail.component.ts

Latipov Boburkhuja Homework3

src/app/components/movie-detail/movie-detail.component.html

Latipov Boburkhuja Homework3

src/app/components/add-movie/add-movie.component.ts

Latipov Boburkhuja Homework3

src/app/components/add-movie/add-movie.component.html

Routing and App Module

Latipov Boburkhuja Homework3

src/app/app-routing.module.ts

Latipov Boburkhuja Homework3

src/app/app.module.ts

Latipov Boburkhuja Homework3

src/app/app.component.ts

Latipov Boburkhuja Homework3

src/app/app.component.html

CSS Styles

Latipov Boburkhuja Homework3

src/styles.css

Latipov Boburkhuja Homework3

src/app/components/movie-list/movie-list.component.css

Latipov Boburkhuja Homework3

src/app/components/movie-detail/movie-detail.component.css

Latipov Boburkhuja Homework3

src/app/components/add-movie/add-movie.component.css

Latipov Boburkhuja Homework3

src/app/app.component.css

Configuration Files

Latipov Boburkhuja Homework3

angular.json

Latipov Boburkhuja Homework3

package.json

Latipov Boburkhuja Homework3

tsconfig.json

Latipov Boburkhuja Homework3

src/index.html

Latipov Boburkhuja Homework3

src/main.ts

Setup Instructions

To set up this Angular project locally:

Install Angular CLI (if not already installed):
npm install -g @angular/cli@17
Create the project directory:
mkdir latipov-boburkhuja-homework3 cd latipov-boburkhuja-homework3
Copy all the provided files into their respective directories following the structure shown above.
Install dependencies:
npm install
Start the development server:
ng serve
Access the application at http://localhost:4200

Features Implemented

✅ All Required Features:

Movie model with proper validation
MovieService with all CRUD operations
Three main components (list, detail, add)
Angular routing with specified routes
Form validation with error messages
External CSS styling
Kebab-case naming convention

✅ Extra Credit Features:

Sortable columns in movie list
Search functionality across all fields
Genre filtering sidebar
Responsive design
Loading and error states

The application is fully compatible with Angular 17+ and follows all the assignment requirements. The backend integration points are ready for your Spring Boot REST API.

76d ago

WorkingWorking...

Working...

GET /movies – returns all movies

GET /movies/{mid} – returns a movie by its MID

POST /movies – adds a movie

DELETE /movies/{mid} – deletes a movie by MID

📁 Project Naming and Structure:

Name the Angular folder: latipov-boburkhuja-homework3

Do not include node_modules

File and folder names must use kebab-case

Components go in folders like movie-list, movie-detail, add-movie

Service goes in services/movie.service.ts

Model goes in models/movie.ts

Use only external CSS (no inline or internal styling)

🧱 Backend Model Reference (from Homework #1):

Each movie has the following fields:

mid: number (must be 4-digit and unique)

name: string (required)

genre: string (required, e.g., action, romance)

price: number (must be positive and > 0)

rating: string (required, e.g., G, PG, PG-13, R, NC-17)

Validation must match these rules using Angular Form validation.

🧩 Angular Application Features:

✅ Part I: Setup and Services

Create the Angular project named latipov-boburkhuja-homework3

Add a Movie model with fields listed above

Create a MovieService to communicate with backend:

getAllMovies()

getMovieByMid(mid)

addMovie(movie)

deleteMovie(mid)

✅ Part II: Components

Movie List Component:

Display a table of MID and name for all movies

Include a link to view each movie’s details

Apply external CSS from Homework #2

Movie Detail Component:

Show all fields for a single movie

Include a Delete button to remove the movie

Add Movie Component:

Use an Angular form to add a movie

Validate fields using Angular:

MID: required, must be 4 digits

Name, Genre, Rating: required and non-empty

Price: required and > 0

Show error labels under invalid fields

🔗 Navigation & Styling

Use Angular Router with three routes:

/movies → Movie list

/movies/:mid → Movie detail

/add-movie → Add movie form

Add navigation links on all pages:

Home (list), Add Movie

Apply a shared external CSS file for consistent styling

⭐ Extra Credit Features (optional)

If possible, include:

Sortable Columns on Movie List (locally or using backend)

Search Bar that filters across all movie fields

Side Navigation Menu for filtering by genre (calls backend using genre URL param)

⚠️ Important Constraints:

Must use Angular patterns learned in class (no third-party libs)

Project must be commented

Must match naming rules

No deprecated Angular versions or internal styles

Must be fully compatible with v0.dev

Here's your complete Angular project structure for latipov-boburkhuja-homework3:

Project Structure and Core Files

Latipov Boburkhuja Homework3

src/app/models/movie.ts

Latipov Boburkhuja Homework3

src/app/services/movie.service.ts

Components

Latipov Boburkhuja Homework3

src/app/components/movie-list/movie-list.component.ts

Latipov Boburkhuja Homework3

src/app/components/movie-list/movie-list.component.html

Latipov Boburkhuja Homework3

src/app/components/movie-detail/movie-detail.component.ts

Latipov Boburkhuja Homework3

src/app/components/movie-detail/movie-detail.component.html

Latipov Boburkhuja Homework3

src/app/components/add-movie/add-movie.component.ts

Latipov Boburkhuja Homework3

src/app/components/add-movie/add-movie.component.html

Routing and App Module

Latipov Boburkhuja Homework3

src/app/app-routing.module.ts

Latipov Boburkhuja Homework3

src/app/app.module.ts

Latipov Boburkhuja Homework3

src/app/app.component.ts

Latipov Boburkhuja Homework3

src/app/app.component.html

CSS Styles

Latipov Boburkhuja Homework3

src/styles.css

Latipov Boburkhuja Homework3

src/app/components/movie-list/movie-list.component.css

Latipov Boburkhuja Homework3

src/app/components/movie-detail/movie-detail.component.css

Latipov Boburkhuja Homework3

src/app/components/add-movie/add-movie.component.css

Latipov Boburkhuja Homework3

src/app/app.component.css

Configuration Files

Latipov Boburkhuja Homework3

angular.json

Latipov Boburkhuja Homework3

package.json

Latipov Boburkhuja Homework3

tsconfig.json

Latipov Boburkhuja Homework3

src/index.html

Latipov Boburkhuja Homework3

src/main.ts

Setup Instructions

To set up this Angular project locally:

Install Angular CLI (if not already installed):
npm install -g @angular/cli@17
Create the project directory:
mkdir latipov-boburkhuja-homework3 cd latipov-boburkhuja-homework3
Copy all the provided files into their respective directories following the structure shown above.
Install dependencies:
npm install
Start the development server:
ng serve
Access the application at http://localhost:4200

Features Implemented

✅ All Required Features:

Movie model with proper validation
MovieService with all CRUD operations
Three main components (list, detail, add)
Angular routing with specified routes
Form validation with error messages
External CSS styling
Kebab-case naming convention

✅ Extra Credit Features:

Sortable columns in movie list
Search functionality across all fields
Genre filtering sidebar
Responsive design
Loading and error states

The application is fully compatible with Angular 17+ and follows all the assignment requirements. The backend integration points are ready for your Spring Boot REST API.

76d ago

WorkingWorking...

Working...