View Demo
·
Report Bug
·
Request Feature
Simple Todo List web application using PERN stack, with RESTful API, stateful local rendering and asynchronous CRUD via connection pooling.
Todo List web application using the PERN stack (Postgres, Express, React, NodeJS), complete with stateful rendering and asynchronous CRUD via connection pooling.
This section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.
- This project has very little security features beyond what is already present in the node-postgres library and what is inherent in all RESTful APIs, and as such, I would not trust this program to run open on the internet without a full understanding of the security implications.
- I personally run applications like these on a reverse proxy (Apache or NGINX) for handling REST when publicly accessible, and I would suggest those who want to run it publically despite the above warning do so as well.
- Full CRUD (Create, read, update, delete) functionality, including a modal menu for updating list elements.
- Full RESTful API based web service.
- Asynchronous requests allow for multiple user interaction concurrently or even on the same machine.
- React client-side rendering in conjunction with asynchronous requests provides a seamless user experience (rather than waiting for the database response before updating the client rendering).
- Finish RESTful API
- React Wireframe
- Todo Input Component with React
- List Todos with React
- Delete button
- Modal Menu for Editing
- Allow for more use cases (priority)
- Provide increased security measures
- Add authentication
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
This is an example of how to list things you need to use the software and how to install them.
-
npm
npm install npm@latest -g
-
PostgreSQL
Go to https://www.postgresql.org/, or download via your favourite package manager Make sure to setup your default user (postgres)
-
Download the repository files (project) from the download section or clone this project to your desired directory by typing in the bash the following command:
git clone https://github.com/afreemanio/andrews-todo-list.git -
Install packages for both the server and client - navigate to the repository in your terminal of choice:
cd ./server/ npm install cd .. cd ./client/ npm install cd .. -
Next, you must create the database, table, and (optional) user in PostgreSQL that you will be using to host this application. The fields you enter for the database, password, and user are optional, but the table and it's properties must be the same. Alternatively, you can skip creating a new user entirely, and have the database and table hosted on the admin account. As follows: # Can be any admin/priviledged account psql -U postgres
# Once you are in: CREATE USER newuser WITH ENCRYPTED PASSWORD 'password'; CREATE DATABASE mydatabase; #all above fields are optional # Select the database you just created \c mydatabase; # NON-OPTIONAL, must enter this CREATE TABLE todo( todo_id SERIAL PRIMARY KEY, description VARCHAR(255) ); # Grant privileges to new user. If you are using your admin login, this is not necessary GRANT ALL PRIVILEGES ON DATABASE mydatabase TO newuser; GRANT ALL PRIVILEGES ON TABLE todo TO newuser; GRANT ALL PRIVILEGES ON SEQUENCE todo_todo_id_seq TO newuser; -
If you have changed any of the names/passwords, you must update the config.json file located in the /server/ folder. Edit it to include the custom username, password, and database name you have entered. (Otherwise skip this step)
-
In order to function as intended, both the server and client applications must be running at the same time. The best way to do this with the server is to run the express server with your daemon of choice. I chose to use nodemon.
npm install -g nodemon -
The clientside portion of the project was created with create-react-app, and as such, will function using the default create-react-app start. However, the application is flexible in how you host it. In order to have a more permanent server, you can instead build the application, and host it using something like express or npm-serve. This would require building the application (as below) and installing the server to run it.
#building the application npm run-script build #installing the server to run it npm install -g serve
The program will run locally on your own machine, with the /client/ folder representing the clientside/react portion of the application, and the /server/ folder representing the database server.
As stated above, this can be done in a number of ways, so one may pick 2 of the below options, or even use their own.
-
Server:
cd ./server/ #no installations node index.js #with installation nodemon index -
Client:
cd ./client/ #no installation npm run-script start #with installation, can change the port (3000) to whichever one you like, (80 for http, etc) serve -l 3000 -s build -
Once the server and client are running, on your browser, navigate to localhost:3000 (or whichever port you choose)
-
Enjoy!
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/SuperCoolFeature) - Commit your Changes (
git commit -m 'Add some SuperCoolFeature') - Push to the Branch (
git push origin feature/SuperCoolFeature) - Open a Pull Request
Andrew Freeman - @afreemanio - [email protected]
Project Link: https://github.com/afreemanio/andrews-todo-list
The Stoic Programmers on YouTube for such great content!
Copyright (c) 2021 Andrew Freeman
Distributed under and usage provided for under the GNU GPL-3.0 License. See LICENSE for the full details.