/pern-stack-auth

:clipboard: Repair. PERN stack todo app with jwt user authentication

Primary LanguageJavaScript

⚡ 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