jhordyess / mini-pern

Simple React component using MUI-Datatables, with CRUD requests using PERN stack.

Mini PERN project

Simple React component using MUI-Datatables, with CRUD requests using PERN stack.

Description

This project is a simple CRUD application using the PERN stack (PostgreSQL, Express, React, Node.js).

The backend is a REST API built with Node.js and Express, using Prisma as ORM to connect to the PostgreSQL database.

The frontend is a React application built with Vite, using Material-UI and MUI-Datatables for the UI.

The project is containerized using Docker and Docker Compose, for frontend, backend and database, and interacts as follows:

For the database, the following model was used:

Technologies Used

Backend

• JS libraries: Express, Prisma
• Server environment: Node.js

Frontend

• JS libraries: React, Material-UI, MUI-Datatables, Axios
• Build tool: Vite
• Web Server: Nginx

Others

• Database: PostgreSQL
• Containerization: Docker
• Dev Environment: VSCode with dev containers in Zorin OS

Screenshots

How to use for development

You can use the VSCode dev containers to run the project in a containerized environment.

You need to have installed Docker and VSCode, and the Dev Containers extension.

1. Clone this repository

git clone [email protected]:jhordyess/mini-pern.git

2. Open the project in VSCode

code mini-pern

3. Create a .env file in the root folder by copying the example from the .env.example file.

4. Open the integrated terminal (Ctrl+Shift+`) and run the following command:

docker compose -f docker-compose.dev.yml up -d

5. Open the command palette (Ctrl+Shift+P) and select the option Dev Containers: Open folder in Container.

6. Select the folder backend and wait for the container to be built.

7. Open the integrated terminal (Ctrl+Shift+`) and run the following command:

yarn dev

8. Repeat the steps 5, 6 and 7 for the folder frontend.

9. Open the browser and visit http://localhost:5173/ and lets code!

How to use for production

To run the project in production mode, remember to create the .env file in the root folder by copying the example from the .env.example file.

Then, run the following command:

docker compose -f docker-compose.prod.yml up -d

To stop or remove the containers, use the following commands:

docker compose -f docker-compose.prod.yml down

Take note that this production configuration is just for testing purposes, and maybe need some changes to be used in a real production environment.

To-Do

• Add more to-do's 😅

Contribution

If you would like to contribute to the project, open an issue or make a pull request on the repository.

License

© 2022> Jhordyess. Under the MIT license. See the LICENSE file for more details.

---

Made with 💪 by Jhordyess