Site Editor - User & Site Info Management Design

Overview

This application will:

  • Authenticate users using Google OAuth.
  • Store authenticated users in MySQL.
  • Store each user's site builder information in JSON format
  • Be implemented with Spring Boot, with MySQL running in Docker

Components

  • Frontend (React): Handles Google Sign-In and site building UI.
  • Backend (Spring Boot): Expose APIs to handle authentication, user management, and JSON storage.
  • Database (MySQL in Docker): Stores user and site data. (In production, use RDS)

Data Model

User Table

Column Type Description
id BIGINT (PK) Auto-generated user ID
google_id VARCHAR(255) Unique Google account ID
email VARCHAR(255) User email
name VARCHAR(255) Display name
picture_url TEXT Profile picture URL
created_at TIMESTAMP Creation timestamp

SiteData Table

Column Type Description
id BIGINT (PK) Auto-generated ID
user_id BIGINT (FK) Foreign key to User
site_json JSON JSON data of the user's site info
updated_at TIMESTAMP Last updated timestamp

Authentication Flow (Google OAuth)

Image description

API Design

POST /auth/Google

  • Authenticates using Google ID token
  • Returns user info of session token

GET /site-data

  • Retrieves the current user's site JSON

POST /site-data

  • Saves/Updates the current user's site JSON

Tech Stack

  • Backend: Spring Boot, Spring Security, Spring Data JPA, OAuth2 Client
  • Frontend: React with Google Sign-in
  • Database: MySQL in Docker