Sello is a modern e-commerce web application built with Angular and styled with Tailwind CSS. It delivers a smooth shopping experience where users can browse products, explore brands and categories, save favorites to a wishlist, manage their cart, and complete orders through an integrated checkout flow.
Secure Authentication: Fully integrated register and login system connected to the API using token-based authentication.
Protected Shopping Actions: Authenticated users can access private routes such as cart, wishlist, checkout, and orders.
Account Access Flow: Includes login, registration, and forgot password screens for a complete user entry experience.
Product Discovery: Browse products from the shop page with interactive product cards and quick actions.
Dedicated Product Page: Open any product in a full product details page with gallery thumbnails, pricing, ratings, stock information, and direct cart or wishlist actions.
Category and Brand Browsing: Explore the catalog through dedicated categories and brands views.
Responsive Storefront: Built to provide a polished experience across desktop and mobile layouts.
Cart Management: Add products to cart, update item quantities, remove specific items, and clear the cart.
Wishlist Support: Save products to a personal wishlist, remove them later, or move them into the cart.
Checkout Flow: Place orders through a dedicated checkout page with support for cash and card payment flows.
Orders Page: View submitted orders from a protected account area.
Live Cart Feedback: Cart count is reflected in the navigation for a smoother shopping flow.
Toast Notifications: User actions and API responses are surfaced clearly with toast messages.
Loading States: The app uses loading feedback to improve perceived responsiveness during async operations.
Modern Product Cards: Cards include wishlist and product view actions, pricing, ratings, and direct add-to-cart access.
Framework: Angular 21 with modern standalone components and Angular SSR support.
Language: TypeScript.
Styling: Tailwind CSS 4 for responsive and utility-first UI styling.
Routing: Angular Router with guarded authenticated routes and route resolvers.
Forms: Reactive Forms for robust validation and form handling.
State Handling: Angular Signals for lightweight local reactive state such as authentication, cart count, and wishlist count.
HTTP and Async: Angular HttpClient with RxJS for API integration and reactive flows.
Icons: Font Awesome.
UI Libraries: Flowbite, ngx-toastr, ngx-spinner, ngx-pagination, and Swiper.
Server Runtime: Express for SSR serving.
Architecture: TypeScript path aliases such as @core/, @shared/, and @env/ for cleaner imports.
Backend API: Route E-Commerce API for authentication, products, brands, categories, cart, wishlist, checkout, and orders.
Make sure you have Node.js and npm installed on your machine.
Clone the repository and navigate to the project root.
git clone <repository-url>
cd selloInstall the application dependencies:
npm installTo start the local development server, run:
npm start
# OR
ng serveOnce the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
To build the project for production, run:
npm run buildThis will compile the application and store the optimized build artifacts in the dist/ directory.