Decider

Overview

Click here to check more details via github.

What’s for dinner tonight? What to review first for the upcoming exam? Who’s next to do the housework? Many of us are having a hard time making some decisions nowadays. There is no best option, and there is no worst option! Then let “decider” choose randomly for you! Coping with the difficulties of making choices, “decider” can help users make quick decisions to save time. No hesitation, let’s obey fate!

The decider is a web app that is mainly for users who have a hard time making choices or users who have many equally important tasks and feels hard to arrange the priority. Users can add their choices or tasks, which will be arranged equally into the table of “Selector”, the system will help users to chose items from the table randomly. Users can also use the Random Number Generator to choose the numbers in any interval they want.

What’s more, it’s multifunctional in any place, at any time – the “lucky one” is always easily and fairly chosen. During class, it helps the teachers to select students randomly to answer the questions. During parties, it helps to pick people randomly or play truth or dare games.

Data Model

An Example User:

{
  username: "decider",
  hash: // a password hash,
}

An Example List with Embedded Items:

{
  user: "username:// a reference to a User object"
  items: "ramen"
}

Wireframes

/ - the home page

list create

/register - page to register

list

/login - page to login

list

/random - page for random number generator

list list

/luckywheel - page to add items to selector list

/changepassword - page for changing password

list

Site map

list create

User Stories or Use Cases

  1. As non-registered user, I can register a new account with the site.
  2. As a user, I can log in to the homepage.
  3. As a user, I can add the new items to Selector table.
  4. As a user, I can select items randomly from the table in Selector.
  5. As a user, I can view all of the Selector lists I’ve created in a single list.
  6. As a user, I can use the ramdom number generator to generate numbers randomly.
  7. As a user, I can choose the interval for the random number generator.
  8. As a user, I can enter the number of numbers I want to generate.
  9. As a user, I can view the results that generated by the Random Number Generator.

Research Topics

  • (2 points) Use a CSS framework or UI toolkit, use a reasonable customization of the framework
    • I used bootstrap as the CSS framework to designe the responsive websites quickly.
    • Bootstrap is a feature-packed frontend toolkit. It includes HTML and CSS based design templates for typography, forms, etc., and provides a collection of syntax for template designs.
  • (3 points) Unit testing with JavaScript
    • I used mocha as the unit test to test some of my functions and show 4 test results. Please see the screenshot blow. Unit test: list
  • (5 points) Automated functional testing for all of my routes using Selenium
    • I used selenium to test my code automatically. The screenshot of four test processes and results are posted below. list list
  • (3 points) Configuration management
    • I used dotenv to automatically loads environment variables from a . env file.
  • (3 points) Use built tools / task runners such as vite, Webpack or even make (!) to automate any of the following … must be used in combination with one or more of the other requirements, such as:Use a CSS preprocesser Sass
    • I created a webpack.config.js file in webpack folder in order to automate the sass list list

13-16 points total out of 10 required points.

Annotations / References Used

  1. tutorial on React
  2. UI toolkit Documentation
  3. tutorial on bootstrap
  4. Mocha
  5. Selenium
  6. sass
  7. dotenv