⚡ PERN Full Stack Todo

• PostgreSQL Express React Node (PERN) full-stack app, integrates React frontend with Node.js backend that is deployed to Heroku. Tutorial code by The Stoic Programmers (see 'Inspiration' below)
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ PERN Stack Todo
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

Backend

• PostgreSQL needs to be installed and running - I started it from my Windows 10 PostgreSQL 12 dropdown option 'SQL shell (psql)'
• Postman used to test the backend before frontend was available

Frontend

• React frontend includes a simple todo list with a user input field and a table of todos below. User can edit and delete todos
• JavaScript XML (JSX) used to write HTML elements in Javascript
• React Fragments used to show table of todos as a row with columns in the DDM

📷 Screenshots

📶 Technologies - Backend

• PostgreSQL v12
• PostgreSQL Installer for Windows
• Express.js middleware v4
• Node.js v12
• Nodemon npm module so backend server will automatically restart after code changes
• Postman API to simulate a frontend

📶 Technologies - Frontend

• React framework v16
• Bootstrap v4 component library

💾 Dev Setup - Backend

• Install dependencies using npm i
• Install nodemon globally if you don't already have it
• Install PostgreSQL & run it (requires the password you created during installation)
• Add database access credentials to db.js - recommend installing npm dotenv & using .env to hide credentials if commiting to Github
• Postgresql shell commands: \l list all databases. \c database1 connect to database1. \dt inspect tables. \d+ inspect table & show relation information. \q to quit
• From root run nodemon server for a dev server
• http://localhost:5000/ can be accessed for CRUD operations such as POST, GET, PUT, DELETE etc. using Postman

💾 Dev Setup - Frontend

• Change to client directory
• Install dependencies using npm i.
• run npm start. Frontend will open at http://localhost:3000/

💾 To Deploy to Heroku

• Assumes you have Heroku installed
• Server folder contents moved to root directory. Heroku must see package.json in root
• db.js includes ternery expression to choose connection config
• package.json (server) heroku-postbuild script added
• Heroku scripts order: heroku pre-build, npm install, heroku-postbuild, run start script
• client files edited: change to use proxy for dev address
• Once package.json scripts added and you are logged into Heroku:
• Create project: heroku create pern-stack-todoapp
• Add Heroku database addon: heroku addons:create heroku-postgresql:hobby-dev -a pern-stack-todoapp
• To access Heroku database: pg:psql -a pern-stack-todoapp
• Run git add . then git commit -m "code added for Heroku deployment" to add all changes
• Run heroku git:remote -a pern-stack-todoapp - this is my example
• Run git push heroku master to send app to Heroku
• Run heroku open to open app in a browser window

💻 Code Examples - Backend

• backend index.js: express post method used to add new todo [description] to postgreSQL database using SQL INSERT INTO statement

// create a todo
app.post('/todos', async (req, res) => {
  try {
    const { description } = req.body;
    const newTodo = await pool.query(
      "INSERT INTO todo (description) VALUES($1) RETURNING *",
      [description]
    );

    res.json(newTodo.rows[0]);
  } catch (err) {
    console.error(err.message);
  }
})

💻 Code Examples - Frontend

• function that runs when user presses 'Add' button: the input body (description) is converted from a JavaScript object to a JSON string & POSTed to the todo database

  const onSubmitForm = async e => {
    e.preventDefault();
    try {
      const body = { description };
      const response = await fetch("http://localhost:5000/todos", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body)
      });

      console.log("Successfully added todo: ", response);
      window.location = "/";
    } catch (err) {
      console.error(err.message);
    }
  };

🆒 Features - Backend

• All data stored in PostgreSQL database that can also be viewed and changed from the PostgreSQL shell (psql)

🆒 Features - Frontend

• React app created from the command prompt using Create React App
• Uses the Bootstrap basic table to list todos
• Bootstrap 4 Modal dialog box

📋 Status & To-Do List

• Status: Working & deployed to Heroku.
• To-Do: Add commenting. Add npm concurrently to run front & back ends with 1 command. Add functionality. Order todos so recent one is top.

👏 Inspiration/General Tools

• The Stoic Programmers, PERN Stack Course - PostgreSQL, Express, React, and Node
• The Stoic Programmers, How to Deploy a PERN application on Heroku
• React documentation
• Enable Emmet support for JSX in Visual Studio Code | React
• js-beautify for VS Code

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com