PSU Masters Sample UI Integrated with API

• Objective - Implement a sample UI with CRUD backend

For Backend Reference

• https://github.com/Christopher-Allen-21/psu-backend

To Run

• Backend
  • npm start - navigate to server directory and run this
• Frontend
  • ng serve - navigate to client directory and run this

Packages to install

• In Client Directory
  • npm install -g @angular/cli - install angular cli
  • ng new "name of angular project" - setup new angular project
  • ng add @angular/material - adds Angular Materials functionality
• In Server Directory
  • npm install --save cors - installs cors

Code Walkthrough

• Chose Angular 19 for front end
• Reused most of the backend from previuos week's assignment. Added localhost to allowed origins for CORS
  • 
• Defined routes and associated components
  • 
  • 
  • 
• Defined User model to match model in backend
  • 
• Created table for displaying all users in db
  • 
• Created tables for Creating and Updating Users
  • 
  • 
• CRUD Methods
  • GET
    • 
  • POST
    • 
  • PUT
    • 
  • DELETE
    • 
• Social Media Login Integration
  • Added script for Google authentication
    • 
  • Added client id from Google API
    • 
  • Added html for Google log in
    • 

Functionality Demo

• Routing
  • 
  • 
  • 
• Get Users
  • 
  • 
• Create User
  • 
  • 
  • 
• Update User
  • 
  • 
  • 
• Delete User
  • 
  • 
• Social Media Login Integration
  • 
  • 
  • 
  •