KLEVERNOTE

About

Klevernote is a clone of the popular note-taking app, Evernote.

Live Link

Collaborators

• Bonnie Hardie
• Harrison Higgins
• Cynthia Spence
• Michael Shuff

Technologies Used

Frontend

• Material-UI
• React
• React-DOM
• Redux
• React-Quill

Backend

• Python
• Flask
• SQLAlchemy
• Alembic
• PostgreSQL
• Gunicorn
• Docker
• Heroku

Features

MVP Features

1. NOTES

Users can create, edit, and delete Notes.

2. NOTEBOOKS

Users can save Notes in collections called Notebooks. Users can create, edit, and delete Notebooks.

3. TAGS

Users can create and delete Tags as well as add or remove them from Notes.

4. RICH-TEXT EDITING

Rich-text editing allows users to view their Note's styling and formatting as it will appear in its final form.

5. AUTO SAVE

Any editing done to a note is saved automatically.

Potential Future Features

1. Search (Notes, Tags, Notebooks)
2. Sorting (Alphabetical, Recent)
3. Note Templates

---

Useful Links

• Database Diagram
• Feature List
• React Component Tree
• Redux Store

---

Dev Instructions

Getting started

1. Clone this repository (only this branch)

   git clone https://github.com/mjshuff23/evernote-clone.git

2. Install dependencies

   pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt

3. Create a .env file based on the example with proper settings for your development environment

4. Setup your PostgreSQL user, password and database and make sure it matches your .env file

5. Get into your pipenv, migrate your database, seed your database, and run your flask app

   pipenv shell

   flask db upgrade

   flask seed all

   flask run

6. To run the React App in development, checkout the README inside the react-app directory.

---

IMPORTANT! If you add any python dependencies to your pipfiles, you'll need to regenerate your requirements.txt before deployment. You can do this by running:

pipenv lock -r > requirements.txt

ALSO IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on apline-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.

---

Deploy to Heroku

1. Create a new project on Heroku

2. Under Resources click "Find more add-ons" and add the add on called "Heroku Postgres"

3. Install the Heroku CLI

4. Run

   heroku login

5. Login to the heroku container registry

   heroku container:login

6. Update the REACT_APP_BASE_URL variable in the Dockerfile. This should be the full URL of your Heroku app: i.e. "https://flask-react-aa.herokuapp.com"

7. Push your docker container to heroku from the root directory of your project. This will build the dockerfile and push the image to your heroku container registry

   heroku container:push web -a {NAME_OF_HEROKU_APP}

8. Release your docker container to heroku

   heroku container:release web -a {NAME_OF_HEROKU_APP}

9. set up your database:

   heroku run -a {NAME_OF_HEROKU_APP} python -m flask db upgrade
   heroku run -a {NAME_OF_HEROKU_APP} python -m flask seed all

10. Under Settings find "Config Vars" and add any additional/secret .env variables.

11. profit