Giter VIP home page Giter VIP logo

pern-stack-auth's Introduction

โšก PERN Full Stack Todo

  • PostgreSQL Express React Node (PERN) full-stack app, integrates React frontend with Node.js backend. Tutorial code from 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 DOM

๐Ÿ“ท Screenshots

Backend screenshot Frontend & backend screenshot Frontend screenshot

๐Ÿ“ถ Technologies - Backend

๐Ÿ“ถ Technologies - Frontend

๐Ÿ’พ Setup - Backend

  • Change to /server directory
  • 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.
  • 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

๐Ÿ’พ Setup - Frontend

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

๐Ÿ’ป 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: Error in registration
  • To-Do: Fix errors and complete testing

๐Ÿ‘ ๐Ÿ”ง Inspiration/General Tools

๐Ÿ“ License

  • N/A

โœ‰๏ธ Contact

pern-stack-auth's People

Contributors

andrewjbateman avatar dependabot[bot] avatar

Stargazers

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

Watchers

 avatar  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.