web-dev-project

The Todo web application was built using PostgresQL - Express - React - Nodejs (PERN) tech stack

Design Architecture

Demo Interface

Features:

1/ Create account and Login for personal dashboard

2/ Create, edit, remove todo tasks

3/ Search for keywords

4/ Filter by Complete/Incomplete tasks

5/ Email todo list to your email

Database Schema:

Database Examples:

Table users:

Table todos:

-> How to set up the dev server on localhost:

1. Database:

I will update an SQL setup script later, currently database can be set up manually like this:

-> Open PosgresQl and run:

$psql --username postgres

-> enter your password

$CREATE DATABASE finalproject;

(enable uuid_generate_v4() extension to use)

$CREATE TABLE users( user_id UUID DEFAULT uuid_generate_v4(), user_name VARCHAR(255) NOT NULL, user_email VARCHAR(255) NOT NULL UNIQUE, user_password VARCHAR(255) NOT NULL, PRIMARY KEY (user_id) );

$CREATE TABLE todos( todo_id SERIAL, user_id UUID, description VARCHAR(255) NOT NULL, status BOOL DEFAULT FALSE, PRIMARY KEY (todo_id), FOREIGN KEY (user_id) REFERENCES users(user_id) );

2. Set up front-end and back-end:

Option 1 (Docker):

$touch back-end/.env

"""

jwtSecret = "yoursecretstring"

DBpassword = "yourDataBasePassword"

DatabaseURL = "yourDataBaseName"

"""

$docker-compose up --build

Option 2 (Manual):

A. Front-end:

-> cd into the front-end directory

$cd todo

$npm install

$npm start

B. Back-end:

-> cd into the back-end directory

-> create your env variables

$touch .env

"""

jwtSecret = "yoursecretstring"

DBpassword = "yourDataBasePassword"

DatabaseURL = "yourDataBaseName"

"""

$cd back-end

$npm install

$nodemon server.js

3. Web browser demo:

localhost:3000