This project is part of a coding challenge that tasked me with building a Product Catalog Dashboard using Angular 17+. Users can view, search, filter, create, edit, and delete products. It also includes a comparative bar chart feature for visualizing product sales.
- Project Overview
- Setup Instructions
- High-Level Design Decisions
- Potential Improvements
- How It Was Built
- Technology Stack
- View Products in a dynamic, responsive table.
- Search Products by Name dynamically.
- Filter Products by Unit Cost and Total Sales with clear UI feedback.
- Create New Products with full validation.
- Edit Existing Products with real-time updates.
- Delete Products with confirmation modal.
- Comparative Bar Chart to visualize a product's sales compared to others.
- Error Handling and Loading Indicators implemented throughout.
- Install Node.js v18+.
- Ensure the backend server (Node.js API) is installed and running locally (
http://localhost:8080).
- Clone the repository:
git clone https://github.com/devevangel/code-challenge-client.git- Install dependencies:
npm install- Start the Angular development server:
npm run start- Open your browser at:
http://localhost:4200The app is broken down into small, reusable components:
ProductsTableComponentProductRowComponentEditProductFormComponentCreateProductFormComponentDeletePopupModalComponentGraphModalComponentSearchFilterComponent
A dedicated ProductService handles all API requests, keeping components clean and focused purely on the UI.
Users receive immediate feedback through spinners and error messages during loading or when operations fail.
TailwindCSS was used to build a clean, responsive design while keeping the user interface minimal and uncluttered.
Basic unit tests were written for the SearchFilterComponent to demonstrate Angular testing skills and the ability to structure tests properly.
If given more time, I would:
- Implement Pagination and Column Sorting for better scalability.
- Write comprehensive unit and integration tests for all major components.
- Introduce Global State Management using NgRx for better state handling.
- Improve Error Boundary Handling across all parts of the app.
- Enhance UI responsiveness and accessibility (a11y improvements) for wider browser and device support.
Every feature was broken down into focused, standalone components to improve reusability, scalability, and flexibility.
- Followed Angular 17+ best practices
- Utilized standalone components
- Proper dependency injection
- Modular service-based architecture
- Reactive forms for better validation and control
Code was written to be organized, modular, and easy to extend. Clear separation of concerns between UI components, services, and models.
AI tools were used strategically to:
- Debug complex Angular and TypeScript errors faster
- Draft documentation and improve README structure
- Speed up repetitive coding and formatting tasks
- Frontend: Angular 17, TailwindCSS, ng2-charts (Chart.js wrapper)
- Backend: Node.js, Express.js, LowDB (Mock Database)
- Testing: Jasmine, Karma