Skip to content

Latest commit

 

History

History
40 lines (27 loc) · 2.92 KB

DESIGN.md

File metadata and controls

40 lines (27 loc) · 2.92 KB

System Design

High Level Architecture

image

Overview

  • The user interacts with a ReactJS front end Webapp. The ReactJS front end interacts with Auth0 and an Express server (hosted on localhost or heroku) to authenticate and fetch users. The server interacts with a Firebase database to get and update information about polls and users.

Details

  • The front end is built on ReactJS. It sends and receives HTTP requests following a RESTful API to the Express Server.
  • The Express Server uses Firebase's Cloud Firestore API to get and update database information.
  • The Firebase Database (Cloud Firestore) stores our users and polls. User documents contain information such as name, email, and past voting history. Poll documents contain all the necessary information about the question, number of votes, date created, etc.
  • On the side, we use Auth0 to authenticate our users. Only users with an @ucsb.edu are currently allowed. Auth0 interacts with the React front end to ensure that users must be logged in to access poll creation and voting functionalities. Additionally, auth0 runs an action on every login to add the user to our user database in Firebase if the user has not been added yet.

Design Process Documentation

We decided to use React stack early on during on first spring planning.

Most major decisions occured in our spring 2 planning meeting.

  • Deciding to use Node.js instead of Springboot
  • Deciding to use Firebase instead of MongoDB
  • Deciding on using Auth0 instead of Firebase authentication
  • Deciding on having Admin/Member

Design document created during lab.

UX Consideration

Most UX decision occured as they came up (people working on features would suggest and confirm with the group).

  • We decided to make polls only votable by UCSB students
  • We decided that the public could see our vote
  • We decided that you could only vote once, but you can see the results before voting if you want to.

Additionally, we decided to improve upon and make major UI choices as a result of our retro 2. We later had discussions on slack relating to poll UIs.

We created the following user flow diagram:

image These paths indicate how the user can interact with our webapp. Some features require you to be logged in and are therefore locked behind authentication. Unauthenticated users still have access to browsing polls and viewing their results.