tauimonen / library-app-project

React - TypeScript - Spring Boot - MySQL

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

library-app-project

Java - Spring Boot - TypeScript/JavaScript - React - MySQL - Docker

Application development plan

Responsive React front end

  • React + TypeScript (npx create-react-app library-app –template typescript)
  • Bootstrap + CSS
  • Navigation bar
  • Explore top books
  • Book carousel
  • Hero's component
  • Library services
  • Footer
  • In the 1st stage of development only ”logged out” version

Spring Boot REST API backend

Spring Data REST API for basic read endpoints:

  • GET /books - Read a list of books
  • GET /books{id} - Read a single book
  • Disable POST, PUT, DELETE, PATCH with config file (implement RepositoryRestConfigurer)

Spring Boot 3.1.4 starter project with:

  • Java 17
  • Maven
  • Data JPA
  • Data REST Repositories
  • MySQL Driver
  • Lombok

MySQL database

SQL scripts in starter files to create a database scema and tables and add books to the database database_tables

Authentication

  • Create a developer account at okta.com Add OpenID Connect client app in Okta: Create a new application in the Developer Account. Select option for OIDC: Open ID connect > Single-Page Application
  • Set up app configurarion for OpenID Connect (clientId & issuer)
  • Install Okta SDK dependecies: Sign-In Widged, Okta React SDK, Okta JavaScript SDK
  • Integrate Okta Sign-In Widged
  • Add Configurarions to our application
  • Create new Security Routes & Navigation Login/Logout (OAuth 2.0 API)

Security

  • Create localhost.conf
  • Generate key and self-signed certificate with OpenSSL
  • Place the .env file
  • Change HTTP -> HTTPS and add "set HTTPS=true" to the start script
  • When deploying the application change the certificate to the one provided by the hosting service

Payment Implementation - Backend

  • Create Stripe Developer Account
  • Add Stripe Maven Dependency
  • Configure Stripe API Key
  • Create custom PaymentInfo DTO
  • Create PaymentService to create a PaymentIntent
  • Create PaymentController to expose ”/payment-intent” endpoint

Payment Implementation - Frontend

  • Install stripe API
  • Add Sripe script to index.html
  • Add Stripe published key
  • Create PaymentInfo
  • Create PaymentPage
  • Update book checkout page

Containerization

Create Dockerfiles and Docker-compose file for containerization.

About

React - TypeScript - Spring Boot - MySQL


Languages

Language:Java 100.0%