Fullstack Application with React, Spring Boot, PostgreSQL, and Docker

Overview

This project is a fullstack web application built using:

• Frontend: Vite with React and Typescript
• Backend: Spring Boot
• Database: PostgreSQL
• Deployment: Docker containers hosted on Render

The goal is to demonstrate how to build a full-featured web application, from development to deployment.

---

Table of Contents

1. Project Structure
2. Technologies
3. Prerequisites
4. Installation
5. Running the Project Locally
6. Running Project on Docker

---

Project Structure

.
├── frontend/               # React frontend
│   ├── public/
│   ├── src/                # React components and pages
│   ├── Dockerfile          # Dockerfile for React
│   └── package.json        # React dependencies
├── backend/                # Spring Boot backend
│   ├── src/                # Java code for APIs and services
│   ├── Dockerfile          # Dockerfile for Spring Boot
│   └── pom.xml             # Maven dependencies
├── docker-compose.yaml      # Docker Compose file to manage multi-container application
└── README.md               # Project documentation

---

Technologies

• Frontend: React, Typescript
• Backend: Spring Boot, Maven
• Database: PostgreSQL, Neon Database
• Containerization: Docker, Docker Compose
• Deployment: Render

---

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js, currently using v.20
• Java, currently using v.21
• Maven
• Docker
• Docker Compose

---

Installation

1. Clone the repository:

git clone https://github.com/MSpilari/fullstack-app-deploy-render.git
cd fullstack-app-deploy-render

2. Install frontend dependencies:

cd frontend
npm install

3. Install backend dependencies:

cd ../backend
mvn clean install

---

Running the Project Locally

1. Running the frontend:

cd frontend
npm run dev

The frontend will be accessible at http://localhost:5173.

2. Running the backend:

cd backend
./mvnw spring-boot:run

The backend will be accessible at http://localhost:8080.

---

Running the project on Docker

This project includes a docker-compose.yaml file to manage the frontend, backend and Postgres database.

1. Build and run the containers:

docker-compose up -d --build

2. Access the application:

• Frontend: http://localhost:9090
• Backend: http://localhost:8080
• PostgreSQL: localhost:5432 (default username: user, password: 1234)

3. Stopping the containers:

docker-compose down

---