erikplachta / node-express-notes-app

This is a Note Taking concept web APP built on Node with Express to manage API calls to a JSON database. Demonstrate how Express.js can be used as an API gateway to a JSON database. Using Heroku to host node.js server.

Erik Plachta

Checkout my Website

ErikPlachta.com

Get in Touch

node-express-notes-app's Issues

Build: Express Routing for HTML and API

The following HTML routes should be created:

• • GET /notes should return the notes.html file.
• • GET * should return the index.html file.

The following API routes should be created:

• • GET /api/notes should read the db.json file and return all saved notes as JSON.
• • POST /api/notes should receive a new note to save on the request body, add it to the db.json file, and then return the new note to the client. You'll need to find a way to give each note a unique id when it's saved (look into npm packages that could do this for you).

Publish: Heroku

Your challenge is to create an application called Note Taker that can be used to write and save notes. This application will use an Express.js back end and will save and retrieve note data from a JSON file.

It's your job to build the back end, connect the two, and then deploy the entire application to Heroku.

Feature: db/system

Add a system logging database for admin purposes.

• Database exists
• Database adds value

---

Having a database that is used to log overall things the EU can not control gives me the ability to track usage and overall things I care about.

Feature: Notes can be deleted

DELETE route to the application using the following guideline:

• • DELETE /api/notes/:id should receive a query parameter containing the id of a note to delete.

---

In order to delete a note, you'll need to read all notes from the db.json file, remove the note with the given id property, and then rewrite the notes to the db.json file.

Feature: Notes can be Opened

WHEN I click on an existing note in the list in the left-hand column
THEN that note appears in the right-hand column

Feature: Saved Notes Appear in Database and in List

WHEN I click on the Save icon
THEN the new note I have entered is saved and appears in the left-hand column with the other existing notes

• Appears in database
• Appears in list

Feature: Database integrity Check

When loading, if Database does not exist creates a new one.

Feature: Jest

Add Jest testing into APP

Build: Landing Page

WHEN I open the Note Taker
THEN I am presented with a landing page with a link to a notes page

Feature: Edit Notes

User is able to make edit to notes.

Cleanup Code

• Quality review comments
• Remove unused code
• Verify content is explicit
• Verify modularity

Feature: Edit existing Note

When a user selects an existing note and it's rendered with function renderActiveNote(), able to edit note and then update.

• Able to edit note
• Edit Creates a new note
• Edit updates existing note

---

The current function: 👇🏼

const renderActiveNote = () => {
  hide(saveNoteBtn);

  if (activeNote.id) {
    //-- TODO:: 01/23/2022 #EP || Ability to edit a note.
    //noteTitle.setAttribute('readonly', true);
    //noteText.setAttribute('readonly', true);
    noteTitle.value = activeNote.title;
    noteText.value = activeNote.text;
  } else {
    noteTitle.removeAttribute('readonly');
    noteText.removeAttribute('readonly');
    noteTitle.value = '';
    noteText.value = '';
  }
};

Build: Readme

• Link to APP https://fast-peak-76189.herokuapp.com/notes
• All the normal things, too

Feature: Write Icon to Create new Note

• WHEN I click on the Write icon in the navigation at the top of the page
  THEN I am presented with empty fields to enter a new note title and the note’s text in the right-hand column

Features: Saving Notes

WHEN I enter a new note title and the note’s text
THEN a Save icon appears in the navigation at the top of the page

Personalize HTML

Taking time to personalize source-content from Xander Rapstine

• Add fav-icon
• Add My Name
• Add Link to Github
• Personalize APP Name
• Update description and call to action button

Build a Note-Taking Application

AS A small business owner
I WANT to be able to write and save notes
SO THAT I can organize my thoughts and keep track of tasks I need to complete

---

Build the API backend for Note-Taking Applicatoin and publish on Heroku

• #3
• #4
• #5
• #6
• #7
• #8
• #9
• #10
• #12

Feature: Modularize Routes

Removing routing from server.js for API and HTML

• HTML routing is modular
• API routing is modular

---

Right now, they're all built into server.js. Now that I've verified it works, I need to modularize it.

Build: Notes Page

WHEN I click on the link to the notes page
THEN I am presented with a page with existing notes listed in the left-hand column, plus empty fields to enter a new note title and the note’s text in the right-hand column

Feature: Mobile Friendly Design

Update CSS so it's mobile-friendly.

Content is overflowing and can not be read.