Simple React component using MUI-Datatables, with CRUD requests using PERN stack.
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:
- JS libraries: React, Material-UI, MUI-Datatables, Axios
- Build tool: Vite
- Web Server: Nginx
- Database: PostgreSQL
- Containerization: Docker
- Dev Environment: VSCode with dev containers in Zorin OS
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.
- Clone this repository
git clone [email protected]:jhordyess/mini-pern.git
- Open the project in VSCode
code mini-pern
-
Create a
.env
file in the root folder by copying the example from the.env.example
file. -
Open the integrated terminal (Ctrl+Shift+`) and run the following command:
docker compose -f docker-compose.dev.yml up -d
-
Open the command palette (Ctrl+Shift+P) and select the option
Dev Containers: Open folder in Container
. -
Select the folder
backend
and wait for the container to be built. -
Open the integrated terminal (Ctrl+Shift+`) and run the following command:
yarn dev
-
Repeat the steps 5, 6 and 7 for the folder
frontend
. -
Open the browser and visit http://localhost:5173/ and lets code!
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.
- Add more to-do's ๐
If you would like to contribute to the project, open an issue or make a pull request on the repository.
ยฉ 2022> Jhordyess. Under the MIT license. See the LICENSE file for more details.
Made with ๐ช by Jhordyess