LGBTMythOrFact 🏳️‍🌈

An interactive full-stack quiz game designed to educate and challenge players' knowledge about LGBTQ+ topics. Test your understanding, learn new facts, and compete with others on the leaderboard!

🎮 Features

Interactive Quiz Game: Answer true/false questions about LGBTQ+ topics
Multiple Difficulty Levels: Easy, Hard, or Expert
User Authentication: JWT-based secure authentication system and email confirmation
Leaderboard: Compete with other players globally
Responsive Design: Play on desktop, tablet, or mobile
Real-time Scoring: Track your score and streaks
Progress Tracking: See your highest scores and improvement

🛠️ Tech Stack

Frontend

Framework: React 18 + TypeScript
Styling: Tailwind CSS with custom design system
UI Components: Radix UI + shadcn/ui
Build Tool: Vite
State Management: React Context API
Icons: Lucide React
Routing: React Router DOM

Backend

Framework: Spring Boot 3.x
Language: Java 17
Security: JWT Authentication
Database: MySQL (development) / PostgreSQL (production)
Documentation: OpenAPI 3 / Swagger UI
Build Tool: Maven

🗄️ Database Schema

Environment Configuration

Environment	Database	Version
Development	MySQL	8.x
Production	PostgreSQL	Supabase
Testing	H2	2.3.x

Schema Overview

Users Table

Manages user accounts and authentication data.

Column	Type	Constraints	Description
`id`	int8	PRIMARY KEY, AUTO INCREMENT	Unique user identifier
`username`	varchar	UNIQUE, NOT NULL	Login username
`email`	varchar	UNIQUE, NOT NULL	User email address
`password`	varchar	NOT NULL	Encrypted password hash
`created_at`	timestamp	DEFAULT NOW()	Account creation date
`highest_score`	int4	DEFAULT 0	User's best game score
`role`	varchar	DEFAULT 'USER'	User role (USER, ADMIN)
`email_verified`	bool	DEFAULT false	Email verification status
`confirmation_token`	varchar	NULLABLE	Email verification token
`token_creation_date`	timestamp	NULLABLE	Token creation timestamp
`reset_password_token`	varchar	NULLABLE	Password reset token
`reset_password_token_expires`	timestamp	NULLABLE	Token expiration time

Statements Table

Contains quiz questions with educational content.

Column	Type	Constraints	Description
`id`	int8	PRIMARY KEY, AUTO INCREMENT	Unique statement identifier
`statement`	text	NOT NULL	Quiz question content
`is_fact`	bool	NOT NULL	True for facts, false for myths
`explanation`	text	NOT NULL	Educational explanation
`difficulty`	int4	CHECK (1-3)	Difficulty level (1=Easy, 2=Hard, 3=Expert)
`category`	varchar	NOT NULL	Topic category

Game History Table

Records individual game sessions and performance metrics.

Column	Type	Constraints	Description
`id`	int8	PRIMARY KEY, AUTO INCREMENT	Unique game session identifier
`user_id`	int8	FOREIGN KEY, NOT NULL	References users.id
`score`	int4	NOT NULL	Final game score
`played_at`	timestamp	DEFAULT NOW()	Game session timestamp

Flyway Schema History Table

Migration tracking managed by Flyway framework.

Column	Type	Description
`installed_rank`	int4	Migration execution sequence
`version`	varchar	Migration version identifier
`description`	varchar	Migration description
`type`	varchar	Migration type (SQL, JAVA)
`script`	varchar	Migration script filename
`checksum`	int4	Script integrity checksum
`installed_by`	varchar	Migration executor
`installed_on`	timestamp	Migration execution time
`execution_time`	int4	Execution duration (milliseconds)
`success`	bool	Migration success status

Relationships

users (1) ----< game_history (N)
  |
  └── One user can have multiple game sessions

Database Setup

Local Development

CREATE DATABASE lgbt-game 
CHARACTER SET utf8mb4 
COLLATE utf8mb4_unicode_ci;

Production

Production database runs on Supabase with:

Automatic backups
Real-time synchronization
Built-in authentication
Row-level security

Migration Management

Database migrations are handled by Flyway with database-specific versioned scripts:

MySQL Migrations (`/Backend/src/main/resources/db/migration/mysql/`)

V1__Initial_schema.sql - Base schema creation
V2__Add_role_to_user_table.sql - User role implementation
V3__Make_role_not_null.sql - Role field constraints
V4__Add_email_verified_to_user_table.sql - Email verification field
V5__Add_confirmation_fields_to_user_table.sql - Confirmation token system
V6__Add_password_reset_fields_to_user_table.sql - Password reset functionality
V7__insert_initial_data.sql - Initial data seeding

PostgreSQL Migrations (`/Backend/src/main/resources/db/migration/postgresql/`)

V1__Initial_schema.sql - Base schema creation
V2__Add_role_to_user_table.sql - User role implementation
V3__Make_role_not_null.sql - Role field constraints
V4__Add_email_verified_to_user_table.sql - Email verification field
V5__Add_confirmation_fields_to_user_table.sql - Confirmation token system
V6__Add_password_reset_fields_to_user_table.sql - Password reset functionality

🚀 Getting Started

Prerequisites

Java 17 or higher
Node.js (v16 or higher)
Maven (3.6.x or newer)
MySQL Server (for local development)
Git

Installation

Clone the repository:

git clone git@github.com:Veras-D/MythOrFactLGBTQIA.git
cd MythOrFactLGBTQIA

Backend Setup:

cd Backend

# Create MySQL database
mysql -u root -p
CREATE DATABASE lgbt-game CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

# Configure database connection
# Edit src/main/resources/application-dev.properties
# Update spring.datasource.username and spring.datasource.password

# Install dependencies and run
mvn clean install
mvn spring-boot:run

Frontend Setup:

cd Frontend

# Install dependencies
npm install

# Start development server
npm run dev

Access the application:
- Frontend: http://localhost:5173
- Backend API: http://localhost:8080
- API Documentation: http://localhost:8080/swagger-ui/index.html

Run with docker

For simple test you can use:

npm run nginx:dev

This comand will build a docker compose without any previous setup, please have sure to configure your .env appropriately. You can access the application in http://localhost. Look at docker-compose.dev.yml and packaje.json for more details.

📁 Project Structure

.
├── Backend/                    # Spring Boot API
│   ├── src/main/java/com/veras/mythOrFactLGBT/
│   │   ├── config/            # Security, OpenAPI & Environment configuration
│   │   ├── controller/        # REST API endpoints
│   │   ├── dto/              # Data Transfer Objects
│   │   ├── model/            # JPA Entity models
│   │   ├── repository/       # Data access layer
│   │   ├── security/         # JWT authentication & filters
│   │   └── service/          # Business logic implementation
│   ├── src/main/resources/   # Configuration files & database migrations
│   │   ├── db/migration/     # Flyway database migrations
│   │   │   ├── mysql/        # MySQL-specific migrations
│   │   │   └── postgresql/   # PostgreSQL-specific migrations
│   │   └── application*.properties
│   ├── src/test/             # Unit & integration tests
│   ├── Dockerfile            # Production container configuration
│   ├── Dockerfile.dev        # Development container configuration
│   └── pom.xml              # Maven dependencies
├── Frontend/                  # React TypeScript application
│   ├── src/
│   │   ├── components/       # Reusable UI components
│   │   ├── contexts/         # React contexts (Auth, etc.)
│   │   ├── hooks/           # Custom React hooks
│   │   ├── lib/             # Utility functions & API client
│   │   └── pages/           # Page components & routing
│   ├── public/              # Static assets
│   ├── Dockerfile.dev       # Development container configuration
│   └── package.json         # NPM dependencies
├── .github/workflows/        # CI/CD pipeline configuration
├── nginx/                    # Reverse proxy configuration
├── docker-compose.dev.yml    # Development environment setup
├── turbo.json               # Monorepo build configuration
└── README.md

🎯 How to Play

Sign Up/Login: Create an account to track your progress
Answer Questions: Read statements and decide if they're Myth or Fact
Track Your Score: Monitor your current score and streak
Check Leaderboard: Compare your performance with other players

🔗 Pages

Home

The main game interface where users can play the LGBT+ myth or fact quiz.

Route: /

Interface	Screenshot
Game Page
Profile Modal
Leaderboard Modal
Login Modal
Sign Up Modal

Email Confirmation

Page for users to confirm their email address after registration.

Route: /confirm-email

Interface	Screenshot
Website
Email Template
Failure State
Success State

Forgot Password

Password recovery page where users can request a password reset link.

Route: /forgot-password

Interface	Screenshot
Website
Email Template

Reset Password

Page where users can set a new password using the reset token from email.

Route: /reset-password

Interface	Screenshot
Website
Invalid Token State
Sucess State

Statement Management

Administrative interface for managing quiz statements (ADMIN role only).

Route: /admin/statements

Interface	Screenshot
Admin Panel

Not Found

404 error page displayed when users navigate to non-existent routes.

Route: * (catch-all route)

Interface	Screenshot
404 Page

🔌 API Endpoints

Authentication

POST /api/auth/register - User registration (public)
POST /api/auth/login - User login and JWT token generation (public)
GET /api/auth/confirm - Email confirmation via token (public)
POST /api/auth/forgot-password - Request password reset link (public)
POST /api/auth/reset-password - Reset password using token (public)

Users & Leaderboard

GET /api/users/me - Get current user profile (authenticated)
DELETE /api/users/me - Delete authenticated user's account (authenticated)
GET /api/users/{id} - Get user by ID (authenticated)
DELETE /api/users/{id} - Delete user by ID (ADMIN only)
GET /api/users/leaderboard - Get global top 10 leaderboard (public)

Statements

GET /api/statements - Get all quiz statements with optional filters (public)
- Query params: category, difficulty
GET /api/statements/{id} - Get specific statement by ID (public)
POST /api/statements - Create new statement (ADMIN only)
PUT /api/statements/{id} - Update existing statement (ADMIN only)
DELETE /api/statements/{id} - Delete statement (ADMIN only)

Game History

POST /api/gamehistory - Record new game session (authenticated)
GET /api/gamehistory/user/me - Get current user's game history (authenticated)
GET /api/gamehistory/user/{userId} - Get game history for specific user (authenticated)
GET /api/gamehistory/leaderboard/user/{userId} - Get score-ordered personal bests (authenticated)

API Documentation

Swagger UI: https://mythorfactlgbtqia.onrender.com/swagger-ui/index.html
OpenAPI Spec: https://mythorfactlgbtqia.onrender.com/

Access Control

Public: Authentication endpoints, statement reading, global leaderboard
Authenticated: User profile, game history, user-specific data
ADMIN only: User management, statement CRUD operations

🧪 Testing

Backend Tests

cd Backend
mvn test

Frontend Tests

cd Frontend
npm run lint

🔐 Environment Variables

Backend (.env)

SPRING_PROFILES_ACTIVE: Default=dev
DB_DEV_USERNAME
DB_DEV_PASSWORD
DB_PROD_USERNAME
DB_PROD_PASSWORD
DB_STRING
DB_DEV_STRING
DB_DEV_DRIVER
JWT_SECRET: Default=testing
BACKEND_BASE_URL: Default=http://localhost:8080
FRONTEND_BASE_URL: Default=http://localhost:5173
EMAIL_SENDER
APP_PASSWORD

Frontend (.env)

VITE_API_URL: Default=http://localhost:8080/api

🎨 Design System

The application features a comprehensive design system with:

Semantic color tokens: Defined in index.css and tailwind.config.ts
Pride theme: Rainbow gradients and LGBTQ+ inspired colors
Glassmorphism: Modern glass-like UI elements
Responsive design: Mobile-first approach
Accessibility: Proper contrast and keyboard navigation

🔧 Development

Backend Development

IDE: Spring Tools Suite (STS) recommended
Profiles:
- dev: Local development with MySQL
- prod: Production with PostgreSQL
Documentation: Swagger UI available at /swagger-ui/index.html

Frontend Development

Available Scripts:
- npm run dev - Start development server
- npm run build - Build for production
- npm run preview - Preview production build
- npm run lint - Run ESLint

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/new-feature
Make your changes
Commit: git commit -am 'Add new feature'
Push: git push origin feature/new-feature
Create a Pull Request

📄 License

This project is open source and available under the MIT License.

🏳️‍🌈 About

This game was created to promote LGBTQ+ education and awareness through interactive learning. It aims to dispel myths and provide accurate information about LGBTQ+ topics in an engaging, game-like format.

The project combines a robust Spring Boot backend with a modern React frontend to deliver a seamless, educational gaming experience that helps build understanding and acceptance of LGBTQ+ communities.

⚙️ Deploy

Tip

Frontend: https://myth-or-fact-lgbtqia.vercel.app/
Backend: https://mythorfactlgbtqia.onrender.com/v3/api-docs

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
Backend		Backend
Frontend		Frontend
nginx		nginx
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
docker-compose.dev.yml		docker-compose.dev.yml
package-lock.json		package-lock.json
package.json		package.json
turbo.json		turbo.json

Latest commit

History

Folders and files

Repository files navigation