Note Pile 🍃

Check out a live version of Note Pile here: Note Pile Live

Note Pile is a full-stack clone of the popular website Evernote, which is used for keeping text notes and other data. In Note Pile you can maintain notebooks, and write whatever you want inside!

Technologies used

Frontend

Backend

Landing page

Login page

Home Page

Viewing a notebook

Code snippet

Something I did that I found cool was create a "save" button that changes depending on whether the user is in the page, saving the page, or the page has been saved.

<button
  className={`green-button save ${
    save === "Saving" ? "loading" : save === "Saved" ? "disabled" : ""
  }`}
  onClick={handleBlur}
>
  {save}
  {save === "Saved" && (
    <i
      className="fa-solid fa-check in-save-icon"
      style={{ color: "rgb(214, 255, 225)" }}
    ></i>
  )}
</button>

I did this by using a ternary if/if else/else operator on the classname based on the local state. I also had a "Save" useState effect, and then change that state in my saving function at different points, that is called whenever the page's textarea becomes out of focus, or the save button is otherwise pressed.

How to run Note Pile locally:

• Clone this repository: https://github.com/kurikurichan/Note-Pile
• Create a database user
• Create a database with your user as its owner
• Run pipenv install in the project root directory
• Add a .env file to the root directory following the .env example file format
• cd into the react-app directory and run npm install
• create a .env file in this folder and add REACT_APP_BASE_URL=http://localhost:5000 to it
• run npm start
• run pipenv shell in the root directory
• run database with flask db migrate, flask db upgrade, flask seed all

Future Features

• AWS
• Notebook display page
• Drawing