/Jot

A streamlined note taking app for the scatterbrained, frequent note taker.

Primary LanguageJavaScript

Jot

Jot is a streamlined note taking app for the scatterbrained, frequent note taker built as my Back End Capstone for Nashville Software School.

  1. About
  2. Auto Organization
  3. Technologies Used
  4. How to Contribute
  5. Api Endpoints
    1. Users
      1. POST /login
      2. POST /register
      3. POST /logout
    2. Notes
      1. GET /notes
      2. GET /notes/:id
      3. DELETE /notes/:id
      4. PUT /notes/:id

1. About

The application is designed to remove the obstacles in modern note taking (having to input excess information when all you want to do is remember a tiny note) and organize your notes to help you find related notes. The user is not required to add a title, date, or tag to the note. Start typing and Jot (using IBM Watson) will highlight important words and phrases. Don't like them? No sweet. Double tap / click a word and it will override Watson's keywords. You may add as many as you want.


2. Auto Organization

Jot automatically organizes your note in three seperate ways. The first, by note, is your traditional organization method. The other two, by everey edit date, and by week, are more in depth to help you find related notes.

  1. Sort by Edit Date: Every time you edit a note, Jot remmembers when you edited it. You may sort notes by these edit dates, allowing you to see other notes created around the same time, which may be related.

Sort by Edit Date Screen Sort by Edit Date Screen Search Example

  1. Sort by Week: You may sort by week and see a list of keywords in that week with all notes pertaining to those keywords grouped together beneath them.

Sort by Week Screen Sort by Week Screen with other week Sort by Week Screen with other keyword

  1. Sort by Note: You may sort by note to see notes sorted by their last edit date which is the traditional way to look at your notes.

Sort by Note Screen Note Sort Screen


3. Sleek Design

When you load Jot after logging in, Jot defaults to the note taking page with your cursor already in the textbox to allow you to start typing without any hinderance. If you have logged in previously, it automatically will remember you giving you the quickest route to jotting down a thought.

Note Taking Screen Note Taking Screen


4. Easy on The Eyes

Jot is designed with an easy-going user interface and a desire to clutter the user's life as little as possible. With each user's visual needs varying slightly, on top of the default simple styling, the user can change the font style and size, and how Jot highlights keywords.

Option Screen Option Screen with Droopdown


5. Technologies Used

  1. React / Redux
  2. Material UI
  3. Sequelize
  4. PostgreSQL
  5. Axios
  6. Watson Natural Language Understanding
  7. Passport (with JSON Web Tokens)
  8. Bcrypt

6. How to Contribute

  1. Fork the project to your GitHub
  2. Clone the project
  3. Create server/config/watsonConfig.js
  4. Provide your own credentials in it in the below pattern
module.exports = {
  "username": "[your username]",
  "password": "[your password]",
  "version": '[your version]',
  "url": 'https://gateway.watsonplatform.net/natural-language-understanding/api/'
};
  1. Create a new PostgreSQL database.
  2. Create the file /sequelize/config/config.json.
  3. In that file, provide the credentials to the PostgreSQL database you made.
{
  "development": {
    "username": "Tim",
    "password": "postgres",
    "database": "jot",
    "host": "127.0.0.1",
    "dialect": "postgres"
  },
  "test": {
    "username": "Tim",
    "password": "postgres",
    "database": "jot",
    "host": "127.0.0.1",
    "dialect": "postgres"
  },
  "production": {
    "username": "Tim",
    "password": "postgres",
    "database": "jot",
    "host": "127.0.0.1",
    "dialect": "postgres"
  }
}
  1. Run npm run buildDb
  2. In another window, run nodemon server/server.js to start the node server.
  3. In the same window, run npm start to start the react development server.
  4. You're ready to start modifying the project! Running npm start should open up a browser window. If not, navigate to http://localhost:3000/.

7. API Endpoints

This api is consumed via the Jot front end and is only meant to be used with Jot.

  1. Authorization
  2. Users
    1. POST /login
    2. POST /register
    3. POST /logout
  3. Notes
    1. GET /notes
    2. GET /notes/:id
    3. DELETE /notes/:id
    4. PUT /notes/:id

1. Authorization

Endpoints denoted with '*' require you to be logged in require a JSON Web Token Authorization header with a body of Bearer {your_token}.

2. Users

POST /login

Example Request Body

If successful, returns the user information and a json web token that when attached to the header of other requests will allow the user to access the endpoints. See the Authorization section.

{
  "email": [your email],
  "password": [your password]
}
Example return if successful
{
    "user": {
        "id": 1,
        "display_name": "Tim",
        "password": "$2a$08$PUYDqcuQWeFO771NSuJHkOmzpjXrvzRW6XaOK9WvFtT9MNxOqmvNi",
        "email": "a@a.com",
        "creation_date": "1970-01-18T15:38:40.916Z",
        "Option": {
            "id": 1,
            "font_size": "small",
            "font_style": "sans-serif",
            "auto_keyword_style": "bold",
            "user_keyword_style": "italic",
            "user_id": 1
        }
    },
    "token": [your json web token]
}

POST /register

Registers a new user, and if successful, returns the new user's information and web token to be used as their future authentication.

Example Request Body
{
	"email": "a@dd.com",
	"password": "password123",
	"display_name": "Joe",
	"confirm": "password123"
}
Example Return Body
{
    "user": {
        "id": 3,
        "display_name": "Joe",
        "email": "a@dd.com",
        "creation_date": "2018-05-17T19:25:15.635Z",
        "Option": {
            "id": 3,
            "font_size": "small",
            "font_style": "sans-serif",
            "auto_keyword_style": "italic",
            "user_keyword_style": "bold",
            "user_id": 3
        }
    },
    "token": [your json web token]
}

POST /logout

Depricated.

* GET /currentUser

Returns the user's basic information and their options.

Example return if successful
{
    "id": 1,
    "display_name": "Tim",
    "email": "a@a.com",
    "creation_date": "1970-01-18T15:38:40.916Z",
    "Option": {
        "font_size": "small",
        "font_style": "sans-serif",
        "auto_keyword_style": "italic",
        "user_keyword_style": "bold"
    }
}

* PATCH /currentUser

Updates the user's settings. One or all four options may be sent in a patch.

Example Request Body
{
    "font_size": "small",
    "font_style": "sans-serif",
    "auto_keyword_style": "italic",
    "user_keyword_style": "bold"
}
Example return if successful
{
    "id": 1,
    "display_name": "Tim",
    "email": "a@a.com",
    "creation_date": "1970-01-18T15:38:40.916Z",
    "Option": {
       [ "font_size": "small",
        "font_style": "sans-serif",
        "auto_keyword_style": "bold",
        "user_keyword_style": "italic"]
    }
}

3. Notes

* GET /notes/

Returns all given user's notes with all keywords and each note's most recent edit date.

To group by keywords by week add ?weekView=true
To sort by all edit dates add ?dateView=true

Example return if successful
[
  {
    "id": 1,
    "text": "This is an example note.",
    "user_id": 1,
    "Keywords": [
      {
        "id": 1,
        "keyword": "example",
        "user_selected": true,
        "note_id": 1
      },
      {
        "id": 2,
        "keyword": "note",
        "user_selected": true,
        "note_id": 1
      }
    ],
    "Note_Dates": [
      {
        "id": 1,
        "edit_date": "2018-04-30T21:27:14.209Z",
        "note_id": 1
      }
    ]
  }
]

* GET /notes/:id

Returns given note with all keywords and its most recent edit date.

Example return if successful
[
  {
    "id": 1,
    "text": "This is an example note.",
    "user_id": 1,
    "Keywords": [
      {
        "id": 1,
        "keyword": "example",
        "user_selected": true,
        "note_id": 1
      },
      {
        "id": 2,
        "keyword": "note",
        "user_selected": true,
        "note_id": 1
      }
    ],
    "Note_Dates": [
      {
        "id": 1,
        "edit_date": "2018-04-30T21:27:14.209Z",
        "note_id": 1
      }
    ]
  }
]

* DELETE /notes/:id

Deletes the specified note. Returns the number of rows deleted. If none were deleted, 0 is returned.

Example return if successful
1

* PUT /notes/:id

Creates or edits the note at the given id, escaping single quotes in the note; creates the keywords from the keyword array, or if no keyword array is sent, it uses IBM Watson to generate them; and finally adds a new date_edit entry if it has not been edited within the last 24 hours.

Example Request Body
{
  "text": "This is a note",
  "keywords": ['this', 'note']
}

Returns 200 if successful.