Assignment 3 – Angular Homes App

Due Date: March 18 (Wednesday), 11:59 PM
Total Points: 100
Milestones: 11 (Required commits at each stage)

---

📌 Overview

In this assignment, you will build a Housing Listings Angular application based on the official Angular tutorial.

You may reference the official tutorial for additional guidance:

https://angular.dev/tutorials/first-app

⚠️ Important: The official tutorial contains inconsistencies. The instructions provided in this assignment have been corrected to ensure compatibility with Angular 21.

You are encouraged to use the tutorial and supporting YouTube videos for learning, but follow the assignment instructions carefully.

---

🎯 Final Application Preview

Your completed application should closely resemble:

https://kotala-sudo.github.io/homes-app/

Application Features

• Display housing listings available for rent or purchase
• “Learn More” link navigates to a details page
• Search box filters listings by city
• Clicking the logo returns to the homepage

---

🚀 Getting Started

I. Fork the Starter Repository

1. Go to the following repository: https://github.com/kotala-sudo/assignment-3-homes-app
2. Click the Fork button (top right).
3. Fork the repository to your own GitHub account.
4. After forking, you should now have your own copy of the repository under your GitHub account.

---

II. Clone Your Forked Repository

1. Navigate to the folder where you want to clone your forked repo.
2. Open Command Prompt (Windows) or Terminal (Mac) and run:

git clone https://github.com/<your-username>/assignment-3-homes-app.git
cd assignment-3-homes-app

---

## III. Install Dependencies

Open the project in VS Code and run:

```bash
npm install
ng serve

Then open your browser:

http://localhost:4200

The app should build without errors (warnings may be ignored).

---

📚 Milestones (Required Commits)

You must commit and push after completing each milestone.

---

✅ Milestone 1

• Create HomeComponent
• Add search layout Commit message:

Completed Creating HomeComponent and added it to the Angular app

---

✅ Milestone 2

• Create HousingLocationComponent Commit message:

Completed Creating HousingLocationComponent and adding it to the Angular app

---

✅ Milestone 3

• Create HousingLocation interface
• Create a single test instance Commit message:

Added HousingLocation Interface and created a single instance of the new interface

---

✅ Milestone 4

• Add @Input() to HousingLocationComponent Commit message:

Added Inputs to the HousingLocationComponent

---

✅ Milestone 5

• Add property binding in HomeComponent Commit message:

Added property binding to HomeComponent’s template

---

✅ Milestone 6

• Add interpolation in template Commit message:

Add an interpolation to a component’s template

---

✅ Milestone 7

• Use @for directive to render housing list Commit message:

Update the HomeComponent template to use @for

---

✅ Milestone 8

• Create HousingService
• Inject service into HomeComponent Commit message:

Created HousingService and injected into HomeComponent

---

✅ Milestone 9

• Add routing
• Create DetailsComponent Commit message:

Added routing to the angular application

---

✅ Milestone 10

• Integrate Details page with route parameters
• Display selected housing information Commit message:

Integrated details page into the application

---

✅ Milestone 11

• Implement search functionality Commit message:

Added the search feature to the angular app

---

🌐 Deployment

After completing all milestones:

1. Build the Angular application.
2. Deploy the app using GitHub Pages.
3. Follow the separate document titled: “Instructions for Building and Deploying an Angular Application.”

---

📤 Submission Requirements (Blackboard)

Submit the following:

• Screenshot of the app running locally (http://localhost:4200)
• Link to deployed GitHub Pages application (A separate instruction file provided on Blackboard to deploy your Angular project using GitHub Pages.)
• Link to your GitHub assignment repository

---

⚠️ Important Notes

• Start early.
• Work in short, focused sessions.
• Commit frequently.
• Each milestone commit impacts your grade.
• Do not skip milestones.

---

Good luck, and build carefully! 🚀