SportsLand — Angular Frontend E-Commerce Platform

SportsLand is a modern frontend e-commerce web application built with Angular, showcasing sports goods and interactive UI.
This project demonstrates professional frontend skills using Angular, reusable components, and responsive UI design.

View the repository: https://github.com/wejdanhaddad/SportsLandAngularProject :

---

Overview

SportsLand is a client-side Angular application that highlights:

• Browsing of sports categories
• Product listing UI
• Shopping cart functionality
• Fully responsive layout
• Modular and scalable Angular architecture

This project is built as a frontend portfolio piece to demonstrate Angular capabilities. :contentReference[oaicite:1]{index=1}

---

Tech Stack

Layer	Technologies
Frontend Framework	Angular
Language	TypeScript
Markup / Styles	HTML5 / CSS3
Reactive Patterns	RxJS
Tooling	Angular CLI

---

Features

✔ Browse products and sports categories
✔ Reusable components and services
✔ Client-side cart logic
✔ Modern, responsive UI
✔ Clean Angular project structure
✔ No backend (frontend-only) :contentReference[oaicite:2]{index=2}

---

Project Structure

src/ ├── app/ │ ├── components/ │ │ ├── cart/ │ │ ├── products/ │ │ ├── navbar/ │ ├── pages/ │ │ ├── home/ │ │ ├── shop/ │ │ └── product-details/ │ ├── services/ │ │ ├── product.service.ts │ │ └── cart.service.ts │ └── app.module.ts ├── assets/ ├── environments/ └── styles.css

yaml Copy code

This structure highlights modular design and clean separation of concerns.

---

Installation & Running Locally

Prerequisites

• Node.js (recommended v16+)
• Angular CLI

Commands

# Clone the repository
git clone https://github.com/wejdanhaddad/SportsLandAngularProject.git

# Navigate to project
cd SportsLandAngularProject

# Install dependencies
npm install

# Start the development server
ng serve
Open your browser and go to:
 http://localhost:4200/

 What This Project Demonstrates
This project highlights core frontend skills relevant to Angular development:

Angular component-based architecture

TypeScript and RxJS usage

Responsive UI design

Client-side state handling

Clean and scalable project setup

 Future Improvements (Optional)
✔ Backend API integration
✔ User authentication and profiles
✔ Persistent cart with localStorage or DB
✔ Checkout and payment UI
✔ Admin dashboard for products