Explore a dynamic Angular application showcasing a catalog of sports products crafted using artificial intelligence. This application incorporates Angular Material and Tailwind CSS for a visually appealing and responsive design. With a fake backend powered by JSON Server, it facilitates CRUD operations seamlessly. The implementation includes the use of Reactive Forms, route guards for route protection, and efficient management of environment variables.
Sportshopapp.mp4
- Angular Material: Enhancing UI components and design aesthetics.
- Tailwind CSS: Styling framework for a modern and responsive layout.
- JSON Server: A fake backend providing a simulated environment for CRUD operations.
- Reactive Forms: Enabling a reactive and dynamic form management system.
- Route Guards: Ensuring secure navigation through protected routes.
- Environment Variables: Efficient handling of environment-specific configurations.
To run the application and set up the fake backend:
-
Clone the repository:
git clone https://github.com/kevinShogun/angular-sport-shop.git
-
Navigate to the project directory:
cd angular-sport-shop
-
Install dependencies:
npm install
-
Run the JSON Server for the fake backend:
npm run backend
-
Start the Angular application:
ng serve
-
Access the application via your browser at
http://localhost:4200/
.
Ensure that the fake backend is running (npm run backend
) to enable CRUD operations on the sports catalog. The JSON file and its backup can be found in the data
folder.
Explore the sports catalog, test the CRUD functionalities, and experience the seamless integration of Angular features and AI-generated product listings.
For inquiries or collaboration opportunities, feel free to contact me at [email protected].
Dive into the world of sports with the Angular Sports Catalog App, where intelligent product listings meet robust Angular features. Thank you for exploring this project! ๐โฝ๐ดโโ๏ธ