Skip to content

Latest commit

 

History

History
111 lines (93 loc) · 4.82 KB

README.md

File metadata and controls

111 lines (93 loc) · 4.82 KB
Raw

Chat SPA

Goals and Requirements

Built a multi-user chat application built with webpack

  • that works as a SPA (only a single page load in the browser)
  • that requires a login (no password, but username "dog" is not allowed)
  • that has RESTful services and makes async calls to perform:
    • Login
    • Logout
    • getting the list of messages
    • getting the list of logged in users
    • sending a new message
  • The RESTful services will send and receive JSON-formatted data
  • that uses a cookie to store a uid (holding a uuid) to track if a user is logged in
  • that checks the cookie on every service call
  • that polls for new messages while user is logged in

Program Structure

  • Used a node express server for the RESTful services
  • Serve a single static HTML file for the index.html
  • Serve a static CSS file(s) for styling
  • Serve a single static client-side JS file that is built with webpack and babel
  • Client-side JS will be built from multiple files using ES6 import syntax
  • Service-side JS will be used without webpack/babel and will use node require() syntax
  • Both client-side and server-side JS will use separation of concerns with multiple files
  • We can download your repo, run npm install, npm run build, and npm run start to use your program
  • When your program starts it will console.log() a localhost url including port to see your SPA in the browser

Authentication

  • The user is unable to see messages unless they are authenticated (logged in)
  • When the user logs in, they must provide a username
  • A username of "dog" is denied access
  • On login a username is added to a list of current users
  • On login a uid cookie is set
  • The uid cookie will be set to a uuid using the uuidv4 npm module
  • On logout that uid is considered logged out
  • If the same username logs in from multiple browsers
    • The username is listed multiple times in the "current users" list
    • If one of those users logs out, the others of the same name are not
  • When a user provides a valid username, the page will show the list of messages and current users
  • Any service call without a valid uid cookie will return an appropriate error and the page will require the user to login
  • If the user logs out they return to the login screen

User list

  • The currently logged in list of users is displayed
  • This list will update periodically (see Polling)
  • This list will be scrollable if the list is too large for the window

Reading Messages

  • All messages will have a date/time stamp
  • ...That is not ugly
  • All messages will show the username that posted them
  • Messages will be in sequential order
  • This list will be scrollable if the list is too large for the window
  • This list will periodically update (see Polling)

Posting Messages

  • A user can send a message by sending the text to a RESTful service
  • The service will add the date/time data and the username to the message
  • The page will show the updated list of messages
  • The service will respond with appropriate errors if an empty message is sent to it
  • The page will display errors if the service rejects the message

Polling

  • Every few seconds (you pick the exact value) the SPA will request the list of messages and users from services
  • Yes, this isn't the most efficient ( long-polling or websockets are more efficient)
  • If these services return errors about authentication, see Authentication
  • If these services fail to connect or have other errors, an appropriate message will display to the user
  • If the user is not logged in (initial load or logout) this polling will not happen

Allowances

  • You are free to reuse CSS or code from previous work, but the requirements and expectations are now higher
  • You can structure your HTML and CSS as you like, so long as it
    • meets the display requirements
    • works for reasonable desktop browser sizes
    • is valid HTML/CSS (note "it works" is different than "is valid")
    • follows basic semantic principles

Limitations

  • used these packages only, otherwise no external JS
    • express
    • cookie-parser
    • the babel and webpack-related packages
      • @babel/core and @babel/preset-env
      • webpack and webpack-cli
      • babel-loader
    • uuid
  • Did not store your application state in your DOM, nor read it from the DOM
  • only made visual changes via:
    • Applying/removing a class
    • add/removing HTML
    • changing a disabled property
  • did not use HTTP redirects or JS-based page-load redirects
  • did not use localStorage/sessionStorage/IndexedDB
  • did not use cookies other than the uid
  • did not use Map() or Set()
  • did not use async/await
  • did not use var or alert()
  • Followed the best practices from class for JS, CSS, HTML
  • Did NOT interact with the browser url, including hash fragment
  • Did NOT include files in your PR that are outside the assignment (no IDE configs, node_modules/, etc)
  • Did not use external CSS libraries