H5X - Interactive Content Builder

A modern, production-ready platform for building interactive educational content, built with React Router v7, Drizzle ORM, and SQLite.

Features & Screenshots

Project Management

• Create Project: Easily create new interactive content projects.

Content Types

1. Multiple Choice

• Create engaging multiple-choice questions with feedback.

2. True / False

• Simple true or false questions for quick checks.

3. Interactive Video

• Add timed interactions (Facts, Quizzes) to HLS videos using Vidstack.

4. Flash Card

• Flip cards for memorization and learning with 3D animations.

5. Fill the Blank

• Drag and drop words to complete sentences using @dnd-kit.

6. Image Hotspot

• Interactive images with clickable hotspots that reveal popover information.

Getting Started

Installation

Install the dependencies:

npm install

Development

Start the development server with HMR:

npm run dev

Your application will be available at http://localhost:5173.

Building for Production

Create a production build:

npm run build

Deployment

Docker Deployment

To build and run using Docker:

docker build -t h5x-app .

# Run the container
docker run -p 3000:3000 h5x-app

Tech Stack

• Framework: React Router v7
• Database: SQLite with Drizzle ORM
• Styling: TailwindCSS & Shadcn UI
• Video: Vidstack
• Drag & Drop: @dnd-kit
• Icons: Lucide React

---

Built with ❤️ using React Router & Antigravity.