Skip to content

palowenstein/note-taker-express-json

Repository files navigation

#11-note-taker-express-json

Project license

Note taker application that can be used to write, save, and delete notes. Employs an express backend, saves and retrieves data from a JSON file.

Github Repository Page: https://github.com/palowenstein/note-taker-express-json

Heroku Deployment Page: https://note-taker-express-json.herokuapp.com/

Table of Contents

GIF

Express Note Taker Application Demo (GIF)

Overview

  • The Express Note taker application allows for the creation, saving and deletion of notes.
  • Based on an Express backend running in Node.js, the application ensures the long term storage of saved notes via a json file (acting de facto as a database).
  • The .json file, storing all the notes, is accessed via the express path module and is overwritten via the express fs module.
  • HTML routes for information on-screen display:
    • GET /notes - Returns the notes.html file.
    • GET * - Returns the index.html file.
  • API routes for information retrieval, storage, modification:
    • GET /api/notes - Reads the db.json file and return all saved notes as JSON.
    • POST /api/notes - Receives 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.
    • DELETE /api/notes/:id - Receives a query parameter containing the id of a note to delete.
  • As a node.js application, the express note taker program must be ignited in terminal (node app.js command) before being executed in the browser (http://localhost:4000/).

Details

  • A .gitignore file is present at the root level to prevent the upload of node_modules, .DS_Store.
  • A Procfile is present at the root level to indicate to Heroku how to start the application.
  • A manifest.webmanifest file is also present as the application is executed in Heroku as a PWA (Progressive Web Application).
  • The included package.json includes an install link to all the required dependencies (Express) needed for the program to run. All the user needs to do is run 'npm install' in Terminal while in the root folder (see Instructions).

Instructions

  • In Terminal, locate the application folder and enter into it via the 'cd' command: cd note-taker-express-json
  • Run the 'npm install' command to install the express module from the package.json (screenshot #1).
  • Run the 'node app.js' command to start the application in Terminal (GIF/MP4).
  • Open a Browser window at the following location: http://localhost:4000/
  • Click on "Get Started".
  • In the left column, five (5) Notes are already present, you can keep or delete those.
  • In the right column (main section), type a note title (header) and, in the section below, type the note content.
    • Click on the Disk Drive icon to save the note.
    • Click on the pencil to discard the current note and start a new one.
  • To retrieve a specific note, click on its title in the left column.
  • To delete any of the previously stored notes, click on the trash icon next to its title in the left column.
  • As the notes are stored in an independent json file, you can safely quit your navigator and retrieve your notes at a later time.

Refer to app.js (javascript file) for code dissection.

Screenshots

Express Note Taker Application (Screenshot #1: npm install/package.json)

Express Note Taker Application (Screenshot #1: npm install/package.json)

Express Note Taker Application (Screenshot #2: Application start in Terminal)

Express Note Taker Application (Screenshot #2: Application start in Terminal)

Express Note Taker Application (Screenshot #3: Main HTML Notes Page)

Express Note Taker Application (Screenshot #3: Main HTML Notes Page)

Video

Express Note Taker Application Demo (MP4)

Express Note Taker Application Demo (MP4)

References

  • Node.js
  • Package.JSON / NPM for installing dependencies
  • Express, Express Body Parser
  • fs_module, path_module
  • Javascript
  • API/HTML Routes
  • GET/POST/DELETE Requests
  • JSON Property/Value Pair file format for notes storage (db.json)
  • Environmental / Port Listener for App execution in Browser
  • Boostrap CSS, Font Awesome

License

MIT License | Copyright © [2020] Pierre André Lowenstein

Contributions

  • Pull/Fork from master.
  • Create your own branch.
  • Add your own code (must be tested).
  • Push your branch.
  • Request a pull.

Please use the [Contributor Covenant Code of Conduct](https://www.contributor-covenant.org/version/2/0/code_of_conduct/code_of_conduct.md)

For major changes, please open an issue beforehand to discuss the changes.

Contact

[www] pierreandrelowenstein.com  |  Send me a 'courriel'

About

Note taker application that can be used to write, save, and delete notes. Employs an express backend, saves and retrieves data from a JSON file.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published