Meta Platform

SPRING REACT WEEK - DEVSUPERIOR

The Project • Target • Technologies • Route

📓 The Project

Meta Platform, made at Spring React Week from DevSuperior (Teacher Nelio Alves)

💡 Target

Development of a platform for sales management, send SMS messages - Meta Platform

🛠 Technologies

The following tools were used in building the project:

Type	Tools	References
IDE - Front end	VS CODE	https://code.visualstudio.com/
IDE - Back end	SPRING TOOL SUITE	https://code.visualstudio.com/
Design Interface Tool	FIGMA (Prototype - UX/UI)	https://www.figma.com/
Programming Language (Front end)	REACT	https://reactjs.org/
Programming Language (Front end)	TYPESCRIPT	https://www.typescriptlang.org/
Programming Language (Back end)	JAVA	https://dev.java/learn/getting-started-with-java/
Java Framework (Back end)	SPRING BOOT	https://spring.io/projects/spring-boot
Promise based HTTP client - browser & Node.js	AXIOS	https://axios-http.com/
Database	SQL	https://graphcms.com/
In-memory (Java SQL) Database	H2 DATABASE	https://www.h2database.com/html/main.html
Communication API	TWILIO	https://www.twilio.com/
Tool to build frontend faster	VITE.JS	https://vitejs.dev/
API platform for building and using APIs	POSTMAN	https://www.postman.com/
Deploy Project	HEROKU CLI	https://www.heroku.com/

Backend | API

Database

IDE

UX/UI

Frontend

Deploy

🔎 Route

1. Part 1 - Installing tools
   • Build the project prototype: https://www.figma.com/file/R7jageEKLtZ2fhA7HvEP8Z/DSMeta?node-id=0%3A1
   • Install VS Code (IDE), Spring Tool Suite (IDE)
   • Install VS Code extensions: IntelliCode, ESLint, JSX HTML
   • Create a Github repository


2. Part 2 - Static Front End
   • Create a new React project: yarn create vite frontend --template react-ts
   • Static layout
   • React components
   • DatePicker: yarn add react-datepicker@4.8.0 @types/react-datepicker@4.4.2
   • React Hook useState
   
   
3. Part 3 - Back End
• Create a new Spring Boot project at Spring Initializr:
  • Spring Web
  • Spring Data JPA
  • H2 Database
  • Spring Security
• Open project at Spring Toll Suite 4 (STS)
• Modify pom.xml:
  org.apache.maven.plugins maven-resources-plugin 3.1.0
• Update project: Project (right button) > Maven > Update Project (force update)
• Security settings for Cross-Origin Resource Sharing (CORS) and activation (initaially disabled by default)
• Database
  • Modeling: entities and relationships
  • Create Sale entity
  • Map relational-object (JPA)
  • Set conection data with H2 database
  • Seed at database
• REST API
  • Create repository
  • Create service
  • Create controller
  • API REST first test
• Data listing
• SMS integration
  • Twilio - Maven Dependencies
    com.twilio.sdk twilio 8.31.1
  • Twilio - Environmental variables
    twilio.sid=${TWILIO_SID}
    twilio.key=${TWILIO_KEY}
    twilio.phone.from=${TWILIO_PHONE_FROM}
    twilio.phone.to=${TWILIO_PHONE_TO}
    
• Heroku implementation
  • Create app
  • Set environmental variables
    1. TWILIO_SID
    2. TWILIO_KEY
    3. TWILIO_PHONE_FROM
    4. TWILIO_PHONE_TO
  • Keyboard:
    heroku -v
    heroku login
    heroku git:remote -a "app-name"
    git remote -v
    git subtree push --prefix backend heroku main
    


4. Part 4 - Integration and Deployment
   • Integrate Front end and Back end
   • Requests with axios: yarn add axios@0.27.2
   • React Hook useEffect
   • Query parameters
   • Toast message for confirmation: yarn add react-toastify@9.0.5
   • Cloud deployment - Netlify
     • Basic deploy
       1. Base directory: frontend
       2. Build command: yarn build
       3. Publish directory: frontend/dist
       4. Environmental variable: VITE_BACKEND_URL
     • Aditional settings
       1. Site settings -> Domain Management
       2. Deploys -> Trigger deploy