SyntaxBase – Blood Donation App

Full-stack application developed as part of the SyntaxBase Advanced Web Development Course.

This project represents the final, hands-on lab where learners design and implement a production-style web application simulating the complete blood donation process. The system enables donors to register, schedule appointments, track donation history, and monitor blood stock levels, while organizations manage incoming donations and inventory. Built with React, TypeScript, Spring Boot, and PostgreSQL, the application follows the MVC architecture and demonstrates real-world integration of authentication, data persistence, and client-server communication.

Features

Unregistered Users

• Account registration
• Browse available appointments by organization
• View donation locations

Registered Users

• Secure login and account management
• Access educational resources and FAQs
• Select an organization for blood donation
• Choose donation date, time, and blood type
• Submit and manage donation requests
• View and cancel reserved appointments
• Review donation history and reward points
• Monitor organization-specific blood stock levels

Organizations

• Organization account registration
• Review and process donation requests
• Accept or decline incoming donations
• Track and manage blood inventory

About Project Implementation

The project is implemented using React.
For more information, see: Create React App

npm start

Runs the application in development mode.
Open http://localhost:3000 to view it in the browser.
Hot reloading is supported, so any changes or errors will be reflected automatically.

npm test

Launches the test runner in interactive watch mode.
More information: Running Tests

npm run build

Builds the application for production into the build folder.
Correctly bundles React in production mode and optimizes the build for the best performance.

More information: Deployment

Key Technologies

Frontend

• CSS
• HTML5
• React
• Typescript

Backend

• Java
• Spring
• Tomcat
• Git

Database integration

PostgreSQL

Alati

Visual Studio Code

Intelij

# Local Testing Instructions

Development Environment

The recommended IDE for this project is IntelliJ IDEA.

1. Clone or download the project.
2. Open IntelliJ IDEA and select:
   File -> New -> Project from Version Control...
3. Choose the Load Maven build script option.

---

Running the Backend

1. Verify your Java version.
2. Navigate to:
   IzvorniKod/backend/src/main/java/opp
3. Locate the IzvorniKodApplication.java class and run it.

---

Running the Frontend

1. Open the terminal in IntelliJ IDEA (or use your system terminal).
2. Navigate to:
   /IzvorniKod/frontend/src
3. Run:

   npm install
   npm start
   

Functionality Showcase

Login

Main page

Personal information change

Donation History

Donation removal

Accepting donations

Current blood supply

Master-detail

Donor

Organization

Codebook

Organization type

Adding new type of organization

Blood group

Location