- 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**
- 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
- 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 DDM
- 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
- Postman API to simulate a frontend
- React framework v16
- Bootstrap v4 component library
- Change to
/server
directory - Install dependencies using
npm i
- Install nodemon v2.0.2 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
- Change to
/client
directory - Install dependencies using
npm i
. - run
npm start
. Frontend will open athttp://localhost:3000/
- 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);
}
})
- 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);
}
};
- All data stored in PostgreSQL database that can also be viewed and changed from the PostgreSQL shell (psql)
- 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: error in registration
- To-Do: Fix errors and complete testing
- PERN Stack Course - PostgreSQL, Express, React and Node
- Youtube video: Learn Database Design by combining our JWT and PERN stack Todo List app together Part 1
- Youtube video: Learn Database Design by combining our JWT and PERN stack Todo List app together, part 2
- Youtube video: How to Deploy a PERN application on Heroku
- React documentation
- Enable Emmet support for JSX in Visual Studio Code | React
- js-beautify for VS Code
- Repo created by ABateman - you are welcome to send me a message