Giter Club home page Giter Club logo

andrewjbateman / pern-stack-todo Goto Github PK

View Code? Open in Web Editor NEW
12.0 12.0 8.0 1.06 MB

:clipboard: PERN full stack todo app using PostgreSQL as a backend database with Express middleware React as the frontend and Node.js as the backend server. deployed to Heroku. Tutorial code by The Stoic Programmers (see 'Inspiration' below)

HTML 14.85% CSS 8.93% JavaScript 76.22%
backend crud-operation database express-middleware frontend heroku-deployment nodejs pern pern-stack postgres postman react

pern-stack-todo's Introduction

โšก 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

๐Ÿ“„ Table of contents

๐Ÿ“š 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

Backend screenshot Frontend & backend screenshot Frontend screenshot

๐Ÿ“ถ Technologies - Backend

๐Ÿ“ถ Technologies - Frontend

๐Ÿ’พ 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

๐Ÿ“‹ 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

๐Ÿ“ License

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

โœ‰๏ธ Contact

pern-stack-todo's People

Contributors

andrewjbateman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.