About • Features • Screenshots • How it works • Tech Stack • How to contribute • Author
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
- 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
- Clone this repository
- Set the environment variables
- Run the back-end server
- Run the front-end server
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.
git clone https://github.com/alexbraga/dsmeta.git
- Set the environment variables in your IDE or replace the following placeholders after the
=
sign with their respective values directly atdsmeta/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 (thetwilio.phone.from
property above) from the Twilio account you've created. You'll find them in the dashboard.- Replace
${PROFILE}
withprod
if you want to use the properties set indsmeta/server/src/main/resources/application-prod.properties
. This file will take precedence overapplication.properties
when theprod
profile is active. You might also want to create anapplication-dev.properties
for your development environment as well and set the profile todev
.
# 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 runDsmetaApplication.java
. -
The server will start at
localhost:8080
by default.
-
List all sales in the database:
GET
/sales
-
Send a SMS containing some information about a given seller:
GET
/{id}/notification
# 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
The following tools were used in the construction of the project:
- Spring Web
- Spring Data JPA
- H2 Database
See the file pom.xml
- Dependency Manager: Maven
- IDE: IntelliJ IDEA
- External API: Twilio Programmable SMS
- API Testing: Postman
- Axios
- React Toastify
- React DatePicker
- React Pagination
- React Loader Spinner
See the file package.json
- Editor: VS Code
- Fork the project
- Create a new branch with your changes:
git checkout -b my-amazing-feature
- Save your changes and create a commit message (in present tense) telling what you did:
git commit -m "Add my amazing feature"
- Submit your changes:
git push origin my-amazing-feature
- Create a pull request