Notabilis (Note Taker)

A Unit 11 Express.js assignment.

Having taken to heart a very helpful comment made by the grader who reviewed one of my recent bootcamp assignments -- to come up with a unique name to make my assignment/repository stand out -- I have delved into my literary and legal background to come up with a unique yet apt name for this homework. However, most of the names I have thought of, e.g., Scribe, Scribbler, Word-Monger, Noted, KeyNote, Noteworthy, and Nota Bene, have been taken and used by similar note-taking applications.

Except for Notabilis. It means noteworthy in Latin. While "bilis" also means fast in Filipino, my native language. What better way to call an application that allows a user to make a list or take down notes quickly and conveniently? Notabilis, because it is noteworthy and "Nota-bilis" because it allows the user to "note (it) fast". Not to mention that the application also uses Express-- literally, fast-- js.

---

Description

This is a note taker application that can be used to write, save, and delete notes. It uses an Express.js back end, and saves and retrieves note data from the JSON file.

In this assignment, the author is tasked to modify starter code to create the application. The application's front end has already been created, while the author is tasked to build the back end, connect the two, and then deploy the entire application to Heroku.

Appearance

The application has the following interface:

Landing page (index.html)

Note page (notes.html)

Deployed Site

To see how the application and its functionalities work, check out the deployed site on Heroku https://boiling-mountain-57904.herokuapp.com.

Features

The application has the following features and functionalities:

1. When the Note Taker is opened, the user is presented with a landing page with a link to the notes page.

2. When the Get Started button is clicked, the notes page is opened.

3. The notes page has existing notes listed in the left-hand column. There are empty fields to enter a new note title and the note’s text in the right-hand column.

4. When the user enters a new note title and the note’s text, a Save icon appears in the navigation at the top of the page.

5. When the Save icon is clicked, the new note the user entered is saved and appears in the left-hand column with the other existing notes.

6. When the user clicks on an existing note in the list in the left-hand column, the note will appear in the right-hand column.

7. When the user clicks on the Write or New Note (+) icon in the navigation at the top of the page, the user is presented with empty fields to enter a new note title and the note’s text in the right-hand column.

8. When the user clicks on the trash can icon, the note that corresponds to it is deleted.

Back End Requirements

1. The application includes a db.json file used to store and retrieve notes using the fs module.

2. The following HTML routes are created:

• GET /notes that returns the notes.html file.

• GET * that returns the index.html file.

3. The following API routes are created:

• GET /api/notes that reads the db.json file and returns all saved notes as JSON.

• POST /api/notes that receives a new note to save on the request body, add it to the db.json file, and then returns the new note to the client.

4. A DELETE route is added to the application using the following guideline:

• The DELETE /api/notes/:id receives a query parameter that contains the id of a note to delete. To delete a note, the user needs 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.

---

Table of Contents

1. Title
2. Description
3. Installation
4. Usage
5. License
6. Contributing
7. Tests
8. Credits
9. Author
10. Questions

---

Installation

Clone my GitHub repository.

  https://github.com/jbtiglao/notabilis

To install modules defined in the dependencies section of the package.json file, run:

npm install 

To automatically restart the node application when file changes in the directory are detected, nodemon was installed by running:

npm i nodemon

The application is invoked through the following command:

node server.js

The application will then listen on localhost:3001.

---

Usage

Please see the deployed application on Heroku here, as well as the discussion on the application's description and functionalities above.

---

License

License used for this project - MIT

For more information on the above license and other license types, please see the following websites:

• Open Source Initiative
• Choose a License

---

Contributing

To contribute to this application:

• Submit a pull request.
• Your new features will be merged after review and approval.

---

Tests

1. The application and its functionalities are tested locally by entering localhost:3001 in the browser.

(Note: For this assignment, the author used Chrome. To inspect the application, open Chrome DevTools, right-click on the landing page, then select Inspect. To access the Network panel, on the developer console window, select Network from the top menu. The Network inspection tool will show you data on the web application's performance as you click the application's Get Started button and test its functionalities by creating or saving a new note, or deleting a saved note.)

2. The application and its functionalities were also tested manually upon deployment on Heroku, by accessing the deployed website's URL in a browser.

3. For the application to listen on the given port, on the terminal run:

node server.js

---

Credits

The following people/resources were consulted and/or utilized in the development of this application:

• Unit 11 Express.js and Heroku install and deployment materials, UCI Bootcamp.
• Express.js
• npm
• path
• fs
• nodemon
• Bootstrap
• fontawesome
• cdnjs
• Heroku

Tears for Fears, for writing and performing one of the best songs ever written. Everybody Wants to Rule the World song lyrics from Genius.

My instructor Jackie Tseng, for patiently answering all my questions and walking me through testing my app (and backend code) locally.

And to the UCI Bootcamp grader who reviewed my readme generator and encouraged me to come up with a unique name for my assignments/repository to stand out -- and do something uncommon and get out of my comfort zone in the process-- it was a very valuable advice and one of the important things I learned in this journey. Thank you.

---

Author

Jane Tiglao

---

Questions

For questions or issues, please contact:

• Jane Tiglao
• Email: janeytiglao@gmail.com
• GitHub Username: jbtiglao
• GitHub Profile: https://github.com/jbtiglao