Loading repository data…
Loading repository data…
ClaudiaSouza1812 / repository
H&M Corporate Website Clone. A feature-rich e-commerce platform built with Angular 17, implementing modern web development practices and comprehensive shopping functionalities.
A feature-rich e-commerce platform built with Angular 17, implementing modern web development practices and comprehensive shopping functionalities.
This project is a sophisticated clone of the H&M corporate website, built using Angular 17 and incorporating advanced features for a complete e-commerce experience. The application demonstrates best practices in modern web development, robust state management, and secure user authentication.
npm installnpm starthttp://localhost:4200classDiagram
class AppComponent {
+title: String
+ngOnInit(): void
}
class HomeComponent {
-showCarousel: boolean
+ngOnInit(): void
+loadHighlights(): void
}
class ProductComponent {
-products: Product[]
+selectedProduct: Product
+getProducts(): void
+selectProduct(id: number): void
}
class ProductDetailComponent {
+productId: number
-product: Product
+loadProduct(): void
+addToCart(): void
+addToWishlist(): void
}
class CartComponent {
-items: CartItem[]
+total: number
+addItem(product: Product): void
+removeItem(id: number): void
+updateQuantity(id: number, qty: number): void
+getTotal(): number
}
class WishlistComponent {
-wishlistItems: Product[]
+addToWishlist(product: Product): void
+removeFromWishlist(id: number): void
+moveToCart(product: Product): void
}
class RegistrationComponent {
+registerForm: FormGroup
-users: User[]
+onSubmit(): void
+validateForm(): boolean
}
class ListUserComponent {
-userList: User[]
+loadUsers(): void
+deleteUser(id: number): void
+editUser(user: User): void
}
class TopmenuComponent {
-isLoggedIn: boolean
+cartItemCount: number
+wishlistCount: number
+toggleLogin(): void
+navigateTo(route: string): void
}
class LoginModalComponent {
+loginForm: FormGroup
+onSubmit(): void
+closeModal(): void
}
class LogoutModalComponent {
+confirm(): void
+cancel(): void
}
class FooterComponent {
+currentYear: number
+socialLinks: Link[]
}
AppComponent ..> TopmenuComponent : contains
AppComponent ..> FooterComponent : contains
AppComponent ..> LoginModalComponent : contains
AppComponent ..> LogoutModalComponent : contains
HomeComponent ..> CarouselComponent : contains
HomeComponent ..> HighlightComponent : contains
ProductComponent ..> ProductDetailComponent : navigates to
RegistrationComponent ..> ListUserComponent : manages
TopmenuComponent ..> CartComponent : links to
TopmenuComponent ..> WishlistComponent : links to
src/
├── app/
│ ├── features/
│ │ ├── home/
│ │ │ ├── carousel/
│ │ │ └── highlight/
│ │ ├── product/
│ │ │ └── productdetail/
│ │ └── notfound/
│ ├── shared/
│ │ └── components/
│ │ ├── cart/
│ │ ├── footer/
│ │ ├── loginmodal/
│ │ ├── logoutmodal/
│ │ ├── registration/
│ │ ├── topmenu/
│ │ └── wishlist/
│ ├── app.component.ts
│ ├── app.routes.ts
│ └── app.config.ts
├── assets/
└── styles.css
The application implements a comprehensive routing system:
/home - Main landing page with carousel and highlights/product - Product listing page/productdetail/:id - Individual product details/registration - User registration/wishlist - User's wishlist/cart - Shopping cart/listuser - User management (admin)npm start - Starts development servernpm run build - Builds the applicationnpm run watch - Builds in watch modenpm test - Runs unit testsnpm run serve:ssr - Serves server-side rendered applicationCopyright (c) 2024 Claudia Souza All rights reserved.