A multi-player interactive game platform featuring multiple challenge-based mini-games with real-time synchronization. Players compete through various puzzle challenges, riddles, and brain teasers in an engaging, pressure-filled environment.
- 🎯 Multiple Game Modes: Five unique challenge games including riddles, puzzles, and interactive challenges
- 👥 Multi-player Support: Real-time player synchronization and admin controls
- 🎨 Modern UI: Beautiful interface built with shadcn-ui and Tailwind CSS
- 🎬 Smooth Animations: Engaging animations powered by Framer Motion
- 🔊 Background Music: Immersive audio experience
- 📱 Responsive Design: Works seamlessly across desktop and mobile devices
- ⚡ Real-time Updates: Live game state synchronization using Supabase
- 🎭 Admin Dashboard: Comprehensive game management and player monitoring
- 🏆 Winner Tracking: Automatic winner detection and celebration screens
- Game 1: HTML/CSS/JS based challenge
- Riddle Challenge: Brain-teasing riddles with multiple difficulty levels
- Game 3: Interactive puzzle game
- Game 4: Multi-level challenge progression
- Game 5: Story-based challenge experience
- Frontend Framework: React 18 + TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- UI Components: shadcn-ui (Radix UI)
- Backend & Database: Supabase
- Real-time: Supabase Real-time subscriptions
- State Management: React Context + Hooks
- Animations: Framer Motion
- Routing: React Router
- Form Handling: React Hook Form + Zod
- Data Fetching: TanStack Query (React Query)
- Testing: Vitest
- Node.js 18+ (recommended: use nvm)
- npm or bun package manager
- Supabase account (free tier available)
- Clone the repository
git clone https://github.com/yourusername/pressure-treasure.git
cd pressure-treasure- Install dependencies
npm install
# or
bun install- Set up environment variables
Create a .env.local file in the root directory:
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_keyNote: Get your Supabase credentials from your Supabase project dashboard under Settings > API
- Start the development server
npm run devThe application will be available at http://localhost:5173
This project uses Supabase as the backend. You'll need to set up the following tables in your Supabase project:
players- Player information and game staterooms- Game room management- Additional tables based on your specific game requirements
Refer to your Supabase dashboard to create these tables or use the Supabase CLI for migrations.
- Navigate to the player join page
- Enter your name and room code
- Wait for the admin to start the game
- Complete challenges and compete with other players
- Access the admin dashboard
- Create or manage game rooms
- Monitor player progress in real-time
- Control game flow and advance levels
Run the test suite:
npm run testWatch mode for development:
npm run test:watchCreate a production build:
npm run buildPreview the production build locally:
npm run preview- Push your code to GitHub
- Import the project in Vercel
- Add environment variables in Vercel project settings
- Deploy!
- Build the project:
npm run build - Deploy the
distfolder to Netlify - Configure environment variables in Netlify dashboard
The built application is a static site in the dist folder. You can deploy it to any static hosting service (GitHub Pages, Cloudflare Pages, etc.).
Important: Always configure your environment variables in your hosting platform's settings before deployment.
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For questions or support, please open an issue in the GitHub repository.
Made with ❤️ by the Pressure & Treasure Team