agiledev0115 / pern-stack-display

⚡ PERN Stack Display

• PostgreSQL Express React Node (PERN) full-stack app, integrates React + Material UI frontend with Node-Express backend and PostgreSQL database.
• Create, Read, Update and Delete (CRUD) project data from SQL database
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ PERN Full Stack Display
  • 📄 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 14 dropdown option 'SQL shell (psql)'
• Postgresql shell commands: \l list all databases. \c database1 connect to database1. \dt inspect tables. \q to quit.

Frontend

• Project list displayed in grid of cards with project edit and delete buttons. Clicking on a project links to a project detail page where title and description can be changed
• Material UI sx prop shortcuts used to define a custom style that has access to the theme.

📷 Screenshots

📶 Technologies - Backend

• PostgreSQL v14
• PostgreSQL Installer for Windows
• pg PostgreSQL client for Node.js
• Express.js v4 middleware
• Node.js v12
• Nodemon v2 npm module so backend server will automatically restart after code changes

📶 Technologies - Frontend

• React v17 Javascript library
• React Router DOM v6 bindings for React Router
• React UI Library v5 component library
• UI React Material icons used to make buttons more interesting

💾 Setup - Backend

• Install PostgreSQL & run it (requires the password you created during installation)
• Add postgresql database credentials to .env file
• npm run dev to run backend with automatic restart if you change something

💾 Setup - Frontend

• npm i to install dependencies
• cd client to change to Client directory
• npm run dev runs the app in development mode. Open http://localhost:3000 to view it in the browser.
• npm run build Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

💻 Code Examples - Backend

• tba

💻 Code Examples - Frontend

• tba

🆒 Features

• Full CRUD capability with data stored in a Postgres database

📋 Status & To-Do List

• Status: Working
• To-Do: change to grid of cards, add eslint?, add date to project record, add about page, contact page to nav bar.

👏 Inspiration

• PostgreSQL Quick Command List
• GeekforGeeks: When to use next() and return next() in Node.js ?
• JavaScript in Visual Studio Code To enable auto imports, set "javascript.suggest.autoImports" in settings to true.
• Sentry: Warning: Each child in a list should have a unique "key" prop

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [e-mail]