Q10. Design a Dynamic Website Demonstrating Web Technologies (Angular + Bootstrap + JSON)

Question 10:
Design a dynamic website using HTML, JavaScript, Bootstrap, Angular (standalone components).

Below is a compact Angular SPA demonstrating:

• Angular standalone components & routing
• Bootstrap 5 forms and layout
• DummyJSON /users API integration for login & signup
• Auth token stored in localStorage
• Navbar showing dynamic links (Login/Signup vs Profile/Logout)
• Auto redirect after login & logout
• Angular Guard setup for future protected routes

Folder Structure

• README.md
• angular.json
• firebase.json
• package-lock.json
• package.json
• public
• src
  • app
• tsconfig.app.json
• tsconfig.json
• tsconfig.spec.json

Key Files

auth.service.ts

Handles:

• Login (DummyJSON /auth/login)
• Signup (DummyJSON /users/add)
• Token management (localStorage)

login.ts & signup.ts

• Angular forms with Bootstrap
• Calls auth.service methods
• Redirects on success

navbar.ts

• Shows Login/Signup if no token
• Shows Profile/Logout if token exists

Demo / Output

• Login & Signup pages
• Navbar links change dynamically
• Token saved in localStorage
• Redirects after login/logout

How to Run / Integrate

git clone https://github.com/ansari-in/angulat-cook-book
cd angulat-cook-book
npm install
ng serve

• Navigate to ➜Local: http://localhost:4200/
• Test login, signup, navbar updates

Notes (for grading / write-up)

• Why this demonstrates web technologies:

  • Angular standalone components
  • Bootstrap forms & responsive design
  • API integration & async HTTP calls
  • Client-side auth token management
  • Dynamic DOM updates based on login state

• Limitations:

  • DummyJSON is a fake API; real authentication not persistent
  • Auth guard prepared but not fully implemented yet