⚡ PERN Full Stack Database

• PostgreSQL Express React Node (PERN) full-stack app, integrates React frontend with Node.js backend.
• Currently shows weather data from OpenWeather API. Tutorial code (see 'Inspiration' below)
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ PERN Full Stack Database
  • 📄 Table of contents
  • 📚 General Info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 📋 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
• Postgresql shell commands: \l list all databases. \c database1 connect to database1. \dt inspect tables. \q to quit.

Frontend

• React frontend includes a city selection user input field and a dropdown list of cities. Select a city to see the weather there.
• JavaScript XML (JSX) used to write HTML elements in Javascript

📷 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
• OpenWeather API for weather data

📶 Technologies - Frontend

• React framework v17
• Create React App used to bootstrap frontend React app
• Bootstrap v4 component library

💾 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 postgresql database & weather API access credentials to .env file
• Run nodemon server for a dev server on port 5000

💾 Setup - Frontend

• Change to /client directory
• Install dependencies using npm i. (I have not tried this method and cannot be sure it will work)
• Alternatively - and better - bootstrap a new React project using npx create-react-app my-app
• Run npm start. Frontend will open at http://localhost:3000/

💾 Setup - Full stack

• From top level \pern-stack-database run npm run dev for a dev server on port 5000 and a React fontend at http://localhost:3000/

💻 Code Examples - Backend

• Static method used to add city to database list of cities.

  // callback function - if error return it to callback. If no error then return rows (empty set)
  static insert (city, callback) {
    db.query('INSERT INTO cities (city_name) VALUES ($1)', [city], (err, res) => {
      if (err.error)
        return callback(err);
      callback(res);
    });
  }

💻 Code Examples - Frontend

• method to add a city

// fetch an object that has a city property
  // after getting city list clear input field
  handleAddCity = () => {
    fetch('/api/cities', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ city: this.state.newCityName })
    })
    .then(res => res.json())
    .then(res => {
      this.getCityList();
      this.setState({ newCityName: '' });
    });
  };

🆒 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 front and back ends. App works and stores city names in PostgreSQL database. Deploy to Heroku not working - could be npm dependency issues or missing API access credentials in Heroku.
• To-Do: Change backend so it checks if city already in database before adding it. Add commenting. Add functionality
• Solve deploy issues: retry video 4 from 9.10 to create the correctly named database

👏 Inspiration/General Tools

• Full Stack React App Tutorial (Beginners) | Part #1 – Introduction
• Full Stack React App Tutorial (Beginners) | Part #2 – Back End
• Full Stack React App Tutorial (Beginners) | Part #3 – Front End
• Full Stack React App Tutorial (Beginners) | Part #4 – Deployment
• Full Stack React App Tutorial (Beginners) | Part #5 – Best Practices (Bonus)
• React documentation
• PostgreSQL Quick Command List
• Enable Emmet support for JSX in Visual Studio Code | React
• js-beautify for VS Code

📁 License

• N/A

✉️ Contact

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