Front-End Project Bake My Cake with Angular

Bake My Cake - Cake Ordering Web Application
Tech Stack - Angular integration of HTML5, CSS3, JavaScript, and Bootstrap to craft an engaging and
interactive interface.
Features: Created a seamless user experience through Angular and reactive forms, facilitating the
effortless ordering of cakes on the web platform.

1. Develop SPA using Angular Bake My Cake Presentation and Demonstration By Pavan R Raibagi Mentor: Sandhyasri Angara

2. Frontend Project Develop SPA using Angular Bake My Cake

3. Bake My Cake App This presentation will discuss developing a single-page application using Angular for an online cake-ordering page.

4. Display item details like image, name, price Request customer information like name, address Allow selection of delivery date Show confirmation prompt before navigating away Fetched from JSON-server Users select an item and view the individual Search items Filter cakes cookies and brownies Challenges or Tasks

5. Technologies Involved in this Project Angular 16.2.0 Angular Material 16.2.1 Route Guard Bootstrap HTML5 CSS3 TypeScript JSON

6. These principles establish practices that lend to developing software with considerations for maintaining and extending as the project grows. Adopting these practices can also contribute to avoiding code smells, refactoring code, and Agile or Adaptive software development. SOLID stands for: S - Single- responsiblity Principle O - Open-closed Principle L - Liskov Substitution Principle I - Interface Segregation Principle D - Dependency Inversion Principle Principles should Adapt When Designing Application Give a reading for more

7. Navigation Header Home Food-list App Component App-search App-Filter Food-card Food-cart Food-request Footer Login for Admin Hierarchy tree – Flow of Project Route-Guard Page-not-found

8. Task 1 - Design Landing View Objective: Create the landing view of the app. Display images of cakes, cookies, and brownies. Fetch data using Json-server. Set this view as the default view. Allow users to select items. Navigate to the order view upon selection. Implement search by item name and filtering by category.

9. Landing Page View

10. Task 2 – Design Order View Objective: Design the order view. Display selected item details. Provide a form for users to enter order and customer details. Implement confirmation to prevent accidental navigation away.

11. Order View

12. TASK 3. Design Login View Objective: Create the login view. Prompt users for a security code to access administrator privileges. Validate the entered security code. Redirect to the cake-requests view upon successful login.

13. Administrators access view.

14. Login View

15. Task 4 – Design Cake-Requests View Objective: Design the cake-requests view. Display cake order requests in a tabular format. Restrict access to site administrators only.

16. Food-Request View for admin access

17. Conclusion and Future enhancement Shopping SPA is built with this frontend technologies covered Further more enhancement we can implement Order window with :- Wishlist Add to cart Landing page with shop by category More filter by methods (rating, category, ) Extend to all shop not limit for only bakery

18. Thank you