Giter VIP home page Giter VIP logo

pern-stack-database's Introduction

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

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
  • 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

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

  // 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

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

๐Ÿ“ License

  • N/A

โœ‰๏ธ Contact

pern-stack-database's People

Contributors

andrewjbateman avatar

Stargazers

 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.