Skip to content

Latest commit

 

History

History
114 lines (84 loc) · 3.46 KB

INSTRUCTIONS.md

File metadata and controls

114 lines (84 loc) · 3.46 KB
Raw

Nutshell: The Information Dashboard

Setup: Follow these steps exactly

  1. Clone this repository
  2. cd into the directory it creates
  3. Make a database.json file in the api directory
  4. cd into the src directory
  5. Run hs -o . to verify everything works

Instructions

Nutshell is a new product offering that you have been tasked with building. It's a dashboard for people to use to organize their daily tasks, events, news article, friends, and chat messages.

You will be utilizing all of the skills and concepts that you've learned up to this point in the course.

  1. Functions
  2. Databases/API (JSON Server Documentation)
  3. Github
  4. Objects
  5. CSS/Flexbox
  6. Array methods
  7. Handling user events
  8. Factory functions
  9. Implementing CRUD operations
  10. Modular code with Webpack
  11. Relational data

To start you off, here's an example of what the resources in your API should look like once it's populated with some data from your application.

Users

{ "id": 1, "username": "Steve", "email": "[email protected]" }

Messages

{ "id": 1, "userId": 1, "message": "What's up?" }

News

{
    "id": 1,
    "userId": 2,
    "url": "https://www.quantamagazine.org/newfound-wormhole-allows-information-to-escape-black-holes-20171023/",
    "title": "Wormholes Allow Information to Escape Black Holes",
    "synopsis": "Check out this recent discovery about workholes"
}

Friends

{ "id": 1, "userId": 1, "loggedInUserId": 3 }

Tasks

{ "id": 1, "userId": 3, "task": "Take out garbage" }

Professional Requirements

  1. All teammates must be using Webpack to compile their code.
  2. Each module should have a comment at the top with the following info: author(s) and purpose of module
  3. The README for your project should include instructions on how another person can download and run the application
  4. An ERD showing the database relationships. A screenshot/image should be included on your README.

How to Handle Authentication

Be very clear that what you will be implemting is not real authentication. It is a simulation of it using very simplistic tools.

You will be using session storage to keep track of which user has logged into Nutshell. When the user fills out the registration form, you will POST their username and password to the users collection in your API. You will then immediately take the id of the object in the response and save it to session storage.

sessionStorage.setItem("activeUser", user.id)

If you want to add a Logout feature, all you need to do it remove the session storage item.

sessionStorage.removeItem("activeUser")

Visual Feature List

To help you along, here is a visualization of a few features, as envisioned by one of your predecessors.

nutshell features

Keep in mind some tips for a good usable app

  1. Use acceptable conventions
    • Logo positioned at top left
    • Navigation across the top or down the left side
  2. Visual hierarchy
    • Most important information is the most prominent
  3. Break pages up into defined sections
    • Logically related content should be related visually
  4. That which is clickable should be obviously clickable.
  5. Eliminate distractions
    • Use only two typefaces
    • Limit color pallet (3 colors with black and white)
    • Use a grid
  6. Support scanning (users don't read)
    • Use plenty of headings
    • Short paragraphs
    • Bulleted lists
  7. Strive for consistency.