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 :-
1. Wishlist
2. Add to cart
3. Landing page with shop by category
4. More filter by methods (rating, category, )
5. Extend to all shop not limit for only bakery

18. THANK YOU