1. Homepage
  2. Syllabus
    ❱
    1. Material & Resources
    2. Topics & Goals
    3. Assessment & Grading
    4. Expectations & Policies
  3. Logistics
    ❱
    1. Campuswire
    2. Gradescope
    3. Panopto
    4. Software
    5. Exams
    6. Office hours
    7. Regrade request
  4. Notes
  5. Preface
    ❱
    1. Instructional Approach
    2. JavaScript History
    3. Why Learn JavaScript?
  6. SleepTime App
    ❱
    1. Step 1: HTML
    2. Step 2: button
    3. Step 3: events
    4. Step 4: script tag
    5. Step 5: Styling
    6. Step 6: style tage
    7. Step 7: More styling
    8. Step 8: DOM
    9. Step 9: getElementById()
    10. Step 10: Date object
    11. Step 11: Calc sleep times
    12. Step 12: Style Guide
  7. JavaScript Basics
    ❱
    1. Variables
    2. Syntax
    3. Types
    4. Strings
    5. Numbers
    6. Arithmetics
    7. Math
    8. Objects
    9. Array
    10. Date
  8. RockPaperScissors
    ❱
    1. Step 1: HTML Boilerplate
    2. Step 2: Add Bootstrap
    3. Step 3: Add buttons
    4. Step 4: Container
    5. Step 5: Grid
    6. Step 6: Bootstrap button
    7. Step 7: Check responsiveness
    8. Step 8: Adjust responsiveness
    9. Step 9: Jumbotorn
    10. Step 10: Card
    11. Step 11: Link to script
    12. Step 12: Computer plays
    13. Step 13: Game logic
    14. Step 14: Display on HTML
  9. Control Flow
    ❱
    1. Equality Operators
    2. Comparison Operators
    3. Logical Operators
    4. Boolean-ish
    5. if statement
    6. switch statement
    7. Loops
    8. Enhanced Loops
  10. Git & GitHub
    ❱
    1. Step 0: Preamble
    2. Step 1: init & status
    3. Step 2: add & commit
    4. Step 3: log & diff
    5. Step 4: reset
    6. Step 5: add HTML
    7. Step 6: Staging multiple files
    8. Step 7: gitignore
    9. Step 8: createElement
    10. Step 9: Styling
    11. Step 10: eventListener
    12. Step 11: GitHub
    13. Step 12: GitHub Pages
    14. Step 13: clone
    15. Step 14: Summary
  11. TicTacToe
    ❱
    1. Step 1: Starter
    2. Step 2: HTML
    3. Step 3: Style
    4. Step 4: Script
    5. Step 5: Debug
    6. Step 6: Implement
    7. Step 7: Solution
  12. Payment App
    ❱
    1. Step 1: HTML Boilerplate
    2. Step 2: HTML Form
    3. Step 3: Submit
    4. Step 4: Script
    5. Step 5: Validate date
    6. Step 6: Validate CVV
    7. Step 7: Validate Card Number
    8. Step 8: Luhn Algorithm
    9. Step 9: Implement Luhn
    10. Step 10: Array.map
    11. Step 11: Arrow function
    12. Step 12: Array.reduce
    13. Step 13: Complete Luhn
    14. Step 14: Styling
  13. Functions
    ❱
    1. Defining Functions
    2. Function Expression
    3. Arrow Functions
    4. Hoisting
    5. Arguments
    6. Function Scoping
    7. Inner Functions
    8. Functional Encapsulation
    9. Closures
    10. Mimic OOP
    11. Functions are Objects
    12. Methods
    13. Function Context
  14. Brick Breaker
    ❱
    1. Step 1: Vite
    2. Step 2: Install Dependencies
    3. Step 3: Run
    4. Step 4: Canvas
    5. Step 5: Animation
    6. Step 6: Block Class
    7. Step 7: Block Object
    8. Step 8: Sprite Class
    9. Step 9: Sprite Object
    10. Step 10: Ball Class
    11. Step 11: Refactor Ball
    12. Step 12: Paddle Class
    13. Step 13: Restrict paddle
    14. Step 14: Collision Detection
    15. Step 15: Game over
    16. Step 16: Brick Class
    17. Step 17: Lay the Bricks
    18. Step 18: Scores
    19. Step 19: Winning the game
    20. Step 20: Build and Serve
    21. Step 20: Deploy to Netlify
  15. Classes
    ❱
    1. Class Syntax
    2. Instantiate Classes
    3. Dot operator
    4. The this keyword
    5. this keyword, again!
    6. Information Hiding
    7. Setters & Getters
    8. Static Fields & Methods
    9. Inheritance
    10. Polymorphism
    11. Class Expression
  16. Weather App
    ❱
    1. Step 1: AccuWeather Account
    2. Step 2: AccuWeather App
    3. Step 3: AccuWeather API
    4. Step 4: Postman
    5. Step 5: GET Request
    6. Step 6: Postman Collection
    7. Step 7: HTML
    8. Step 8: Background
    9. Step 9: Bootstrap
    10. Step 10: Script
    11. Step 11: Fetch
    12. Step 12: getLocationKey
    13. Step 13: getCurrentCondition
    14. Step 14: updateUI
    15. Step 15: Weather icons
  17. API
    ❱
    1. What is API?
    2. What is HTTP?
    3. What is CRUD?
    4. Client-Server Architecture
    5. What is REST?
    6. JHU Class Search
    7. Course Search API
  18. Asynchronous
    ❱
    1. Some Things Take Time!
    2. Not All Tasks Created Equal!
    3. Asynchronous Programming
    4. Understanding Async Operations
    5. Patterns for Dealing with Async Code
    6. Callback
    7. Callback Hell!
    8. Promises
    9. Replacing Callbacks with Promises
    10. Promises Exercise
    11. Chaining Promises
    12. Async & Await
  19. Modules
    ❱
    1. IFEE Revisited!
    2. An ES6 Module is just a file!
    3. Exporting
    4. Importing
    5. Module does not create a type!
    6. Default Export/Import
    7. Before ES6 Modules
  20. Dictionary App
    ❱
    1. Step 1: View the app
    2. Step 2: Layout and style
    3. Step 3: Vanilla JavaScript
    4. Step 4: The create-react-app
    5. Step 5: Boilerplate code
    6. Step 6: Simplify code
    7. Step 7: React Element
    8. Step 8: React Component
    9. Step 9: Think in Components
    10. Step 10: Header
    11. Step 11: Footer
    12. Step 12: Phonetics
    13. Step 13: JSX
    14. Step 14: Definitions
    15. Step 15: Search
    16. Step 16: Controlled Component
    17. Step 17: State
    18. Step 18: Set state
    19. Step 19: Fields
    20. Step 20: Binding
    21. Step 21: Fetch
    22. Step 22: Axios
    23. Step 23: Data flow
    24. Step 24: App's state
    25. Step 25: Props
    26. Step 26: Update UI
    27. Step 27: PropType
    28. Step 28: Build & Deploy
  21. React (Basic)
    ❱
    1. Create React App
    2. React Component
    3. Thinking in Components
    4. React Element
    5. JSX Rules
    6. Props
    7. State
  22. QuickNote App [I]
    ❱
    1. Step 1: Create React App
    2. Step 2: GitHub Repository
    3. Step 3: Continuous Delivery
    4. Step 4: Wireframing
    5. Step 5: Page vs. Component
    6. Step 6: Sample Data
    7. Step 7: Material UI
    8. Step 8: Note Component
    9. Step 9: Collapsible Note
    10. Step 10: Delete Note
    11. Step 11: Add button
    12. Step 12: React Dev Tool
    13. Step 13: To be continued!
  23. QuickNote App [II]
    ❱
    1. Step 1: DisplayNotes
    2. Step 2: AddNote
    3. Step 3: Change view
    4. Step 4: Routing
    5. Step 5: React Router
    6. Step 6: Navigation
    7. Step 7: Controled Component
    8. Step 8: Add Note
    9. Step 9: Refactor AddNote
    10. Step 10: Edit Note
    11. Step 11: Lifecycle Method
    12. Step 12: Improve styling
    13. Step 13: The _redirect file
    14. Step 14: To be continued
  24. QuickNote App [III]
    ❱
    1. Step 1: Rich Text Format
    2. Step 2: React Markdown
    3. Step 3: GitHub Flavored Markdown
    4. Step 4: Improve Styling
    5. Step 5: Easy Markdown Editor
    6. Step 6: Search Component
    7. Step 7: Clean slate!
    8. Step 8: Persistence
    9. Step 9: That's a wrap!
  25. React (Intermediate)
    ❱
    1. React Data Flow
    2. State Management
    3. React Router
    4. Lifecycle Methods
    5. Styling
  26. KeyCode App
    ❱
    1. Step 1: Clone
    2. Step 2: React Bootstrap
    3. Step 3: State
    4. Step 4: Lifecycle Method
    5. Step 5: Refactoring
    6. Step 6: useState
    7. Step 7: useEffect
  27. React Hook
    ❱
    1. useState
    2. useState Nuannces
    3. useEffect
  28. Quote App
    ❱
    1. Step 1: Clone
    2. Step 2: Chakra UI
    3. Step 3: State
    4. Step 4: Lifecycle Method
    5. Step 5: Refactoring
    6. Step 6: Hiding Secrets
    7. Step 7: Netlify Env Var
  29. Serving websites
    ❱
    1. Step 1: BMI App
    2. Step 2: Node
    3. Step 3: FS Module
    4. Step 4: CommonJS
    5. Step 5: readfile
    6. Step 6: HTTP Module
    7. Step 7: Web server
    8. Step 8: Heroku
    9. Step 9: Procfile
    10. Step 10: Express
    11. Step 11: Refactor
    12. Step 12: Static files
    13. Step 13: Serve React app
  30. Node & Express
    ❱
    1. Before Node
    2. Node Runtime
    3. CommonJS
    4. Module Wrapper
    5. Node Modules
    6. HTTP Module
    7. RESTful API
    8. NPM
    9. Express
    10. Refactoring
  31. QuickNote API [I]
    ❱
    1. Step 1: Express app
    2. Step 2: Note class
    3. Step 3: Data Access Object
    4. Step 4: CRUD Operations
    5. Step 5: ApiError class
    6. Step 6: Erro Handling
    7. Step 7: Fake data
    8. Step 8: HTTP GET
    9. Step 9: Query Parameter
    10. Step 10: Path Parameter
    11. Step 11: HTTP POST
    12. Step 12: HTTP DELETE
    13. Step 13: HTTP PUT
    14. Step 14: To be continued!
  32. QuickNote API [II]
    ❱
    1. Step 1: MongoDB
    2. Step 2: Atlas
    3. Step 3: Cluster
    4. Step 4: Database Access
    5. Step 5: Network Access
    6. Step 6: Connect
    7. Step 7: Mongoose
    8. Step 8: Schema
    9. Step 9: Model
    10. Step 10: Refactor Note
    11. Step 11: Refactor NoteDao
    12. Step 12: More Refactoring
    13. Step 13: Heroku
    14. Step 14: Dotenv
    15. Step 15: To be continued!
  33. QuickNote API [III]
    ❱
    1. Step 1: User Model
    2. Step 2: User DAO
    3. Step 3: Routing
    4. Step 4: Sample Users
    5. Step 5: Run & Test
    6. Step 6: Refactor
    7. Step 7: Auth Route
    8. Step 8: Run & Test
    9. Step 9: Bcrypt
    10. Step 10: Hash Passwords
    11. Step 11: Verify Password
    12. Step 12: JsonWebToken
    13. Step 13: Sign Token
    14. Step 14: Verify Token
    15. Step 15: To be continued!
  34. QuickNote API [IV]
    ❱
    1. Step 1: Sample users
    2. Step 2: Bearer token
    3. Step 3: Check token
    4. Step 4: Middleware
    5. Step 5: Link models
    6. Step 6: Notes with author
    7. Step 7: Sample data
    8. Step 8: Middleware again!
    9. Step 9: User from token
    10. Step 10: To be continued!
  35. QuickNote API [V]
    ❱
    1. Step 1: Jest & SuperTest
    2. Step 2: Refactor
    3. Step 3: Simple test
    4. Step 4: Jest syntax
    5. Step 5: Organize tests
    6. Step 6: Endpoint testing
    7. Step 7: Jest & MongoDB
    8. Step 8: Setup & Teardown
    9. Step 9: Test data
    10. Step 10: Test Authenticate
    11. Step 11: Focus or skip
    12. Step 12: Code coverage
    13. Step 13: More tests
    14. Step 14: Exercise
    15. Step 15: To be continued!
  36. QuickNote API [VI]
    ❱
    1. Step 1: auth.test.js
    2. Step 2: Refactor
    3. Step 3: users.test.js
    4. Step 4: Refactor
    5. Step 5: Lean objects
    6. Step 6: Global Error Handler
    7. Step 7: Update NoteDao
    8. Step 8: Update notes
    9. Step 9: notes.test.js
    10. Step 10: Run all tests
    11. Step 11: Refactor
    12. Step 12: CORS
    13. Step 13: helmet
  37. Appendix
  38. HTML
  39. CSS
  40. Heroku CLI
  41. Homework
  42. HW1
  43. HW2
  44. HW3
  45. HW4
  46. HW5
  47. HW6
  48. HW7
  49. HW8
  50. HW9

CS280 Homepage

Step 5

Let's run the server and test it in Postman to ensure routing works as expected.

npm run dev

GET /api/users

GET /api/users?role="role name"

GET /api/users?username="username"

GET /api/users/:id

POST /api/users

PUT /api/users/:id

DELETE /api/users/:id