Skip to content

Spring / React single page web application with JPA, Spring Security and H2 Database

Notifications You must be signed in to change notification settings

alexbraga/dsmeta

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Spring / React single page web application with JPA, Spring Security and H2 Database

GitHub last commit Netlify build status

Status: Finished

AboutFeaturesScreenshotsHow it worksTech StackHow to contributeAuthor

About

Sales listing Spring Boot API with a responsive React.ts layout. Features an H2 Database with Object-Relational Mapping made with Spring Data JPA (Hibernate), filtering by date and Twilio Messaging API integration for SMS sending. Deployed on Google Cloud Platform (back-end) and on Netlify (front-end), with CI/CD.

Live demo available at: https://mydsmeta.netlify.app


Features

  • Relational database (H2)
  • Object-Relational Mapping
  • JPA with Hibernate
  • Spring Security
  • CORS
  • Web service API
  • Layered structure divided into Entities, Repositories, Services and Controllers
  • Classes and objects
  • Encapsulation, getters and setters
  • React custom hooks, useState and useEffect
  • Axios requests
  • React Toastify
  • Pagination
  • Cloud deploy with CI/CD

Screenshots

Mobile

Class Diagram

Medium screen

Class Diagram

Large screen

Class Diagram


How it works

  1. Clone this repository
  2. Set the environment variables
  3. Run the back-end server
  4. Run the front-end server

Pre-requisites

Before getting started, you will need to have the following tools installed on your machine:

In addition, you'll need to register a [free] Twilio account and you might also want an IDE to work with the code, like IntelliJ IDEA and VS Code.

Clone this repository

git clone https://github.com/alexbraga/dsmeta.git

Set the environment variables

  • Set the environment variables in your IDE or replace the following placeholders after the = sign with their respective values directly at dsmeta/server/src/main/resources/application.properties:
spring.profiles.active=${PROFILE}
twilio.sid=${TWILIO_SID}
twilio.key=${TWILIO_KEY}
twilio.phone.from=${TWILIO_PHONE_FROM}
twilio.phone.to=${TWILIO_PHONE_TO}
  • Note: Get the Twilio ID, token (key) and phone number (the twilio.phone.from property above) from the Twilio account you've created. You'll find them in the dashboard.
  • Replace ${PROFILE} with prod if you want to use the properties set in dsmeta/server/src/main/resources/application-prod.properties. This file will take precedence over application.properties when the prod profile is active. You might also want to create an application-dev.properties for your development environment as well and set the profile to dev.

Running the Back-end

# Go to the server folder
$ cd dsmeta/server

# Install the dependencies and build the application
$ mvn install

# Run the application
$ mvn spring-boot:run
  • Alternatively, open dsmeta/server with your preferred IDE and run DsmetaApplication.java.

  • The server will start at localhost:8080 by default.

API Endpoints

  • List all sales in the database:

    • GET /sales
  • Send a SMS containing some information about a given seller:

    • GET /{id}/notification

Running the Front-end

# Go to the server folder
$ cd dsmeta/client

# Install the dependencies
$ npm install

# Run the application in development mode
$ npm run dev
  • The GUI will be available at localhost:5173

Tech Stack

The following tools were used in the construction of the project:

Back-end:

Language

Framework

Dependencies

  • Spring Web
  • Spring Data JPA
  • H2 Database

See the file pom.xml

Utilities


Front-end:

Language

Library

Dependencies

  • Axios
  • React Toastify
  • React DatePicker
  • React Pagination
  • React Loader Spinner

See the file package.json

Utilities


How to contribute

  1. Fork the project
  2. Create a new branch with your changes:
git checkout -b my-amazing-feature
  1. Save your changes and create a commit message (in present tense) telling what you did:
git commit -m "Add my amazing feature"
  1. Submit your changes:
git push origin my-amazing-feature
  1. Create a pull request

Author

Alexandre Braga

LinkedIn  E-Mail

About

Spring / React single page web application with JPA, Spring Security and H2 Database

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published