Nutshell: The Information Dashboard

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 using the React library to build out this application.

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": "me@me.com" }

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

{ "connectionId": 1, "userId": 1, "otherFriendId": 3 }

Tasks

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

How to Handle Authentication

Please create a component to handle authentication. 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")