Naples is a todo-list / note-taking application that allows user to organize and keep track of the things that are most important to them. It is a fullstack React App made with a Redux state manager and a backend using Javascript, Python, Flask, SQL-Alchemy, Heroku and PostgresSQL.
| Table of Contents |
|---|
| 1. Features |
| 2. Installation |
| 3. Technical Implementation Details |
| 4. Future Features |
| 5. Contact |
| 6. Special Thanks |
Display all available lists that you've created and allows you to make as many extra lists as you would like.
Allows you to Edit the names of your Pages, and delete any Pages you no longer have any use for.
Here you can Edit, Delete, and Create up to 4 different Lists per Page.
By having some "cost" associated with the value of space for the Lists you have, the intent is to force user to put more thought into the organizational framework of their notes instead of recklessly diluting their structure with uncapped list-making.
Here the user is able to create, edit, and remove items on their lists.
To build/run project locally, please follow these steps:
- Clone this repository
git clone https://github.com/Omstachu/naples.git- Install Pipfile dependencies and create the virtual environment
pipenv install- Install npm dependencies for the
/react-app
cd react-app
npm install-
In the
/root directory, create a.envbased on the.env.examplewith proper settings -
Setup your PostgreSQL user, password and database and ensure it matches your
.envfile -
Before running any flask commands, confirm you are in the pipenv virtual env. If not, run the command:
pipenv shell- In the root folder, you can apply the migration to the database
flask db upgradeEach time the database models change repeat the migrate and upgrade commands.
flask db migrate
flask db upgrade- In the root folder, seed the database by running in the terminal:
flask seed all- Start the flask backend in the
/root directory
flask run- Start the frontend in the
/react-appdirectory
npm startThis is one of my favorite moments in making this project.
Using a predefined array and string interpolation, each List received from the backend was assigned a class corresponding to the quadrant it should exist in on the user's screen.
Because the Lists are being dynamically iterated through, this also means that when the user deletes a List, the page will readjust the positions of each List by reassigning it's quadrant.
-
Back Button - Allowing the user to easily navigate through the site without having to resort to the default browser button. Additionally it would allow a better user experience on mobile devices.
-
Timestamps - Adding timestamps to when an item is create or edited should help with understanding the context of why you may have added a certain item.
Linked In
GitHub
Email: omstachu626@gmail.com