- 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
- 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.
- 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.
- 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
- 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
- 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
npm i
to install dependenciescd client
to change to Client directorynpm 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 thebuild
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.
- tba
- tba
- Full CRUD capability with data stored in a Postgres database
- Status: Working
- To-Do: change to grid of cards, add eslint?, add date to project record, add about page, contact page to nav bar.
- 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
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com