🧠 MindMender

Daily brain games for memory and focus, with Supabase auth and procedurally generated daily content.

A modern, accessible brain training web application that helps users improve their cognitive abilities through engaging daily games. Built with Next.js, TypeScript, and Supabase for a seamless user experience.

✨ Features

🎮 Three Core Brain Training Games

• Memory Match - Flip and match pairs to improve visual memory
• Sequence Recall - Remember growing sequences to boost working memory
• Attention Grid - Spot the odd one out to enhance focus and attention

🏆 Gamification & Progress Tracking

• Daily streaks and progress tracking
• Achievement system with unlockable badges
• Personal statistics and best scores
• Scientifically designed scoring algorithms

🎨 Modern UI/UX

• Beautiful glassmorphism design with liquid glass background
• Fully responsive design for all devices
• High-contrast colors and large touch targets for accessibility
• Smooth animations and transitions

🔐 Authentication & Data

• Secure user authentication with Supabase
• Persistent user data and progress
• Server-side rendering for optimal performance

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Supabase account

Installation

1. Clone the repository

   git clone https://github.com/charaschoe/mindmender.git
   cd mindmender/mindmender-web

2. Install dependencies

   npm install

3. Set up Supabase

   • Create a new project at supabase.com
   • Copy your project URL and anon key
   • Create .env.local in the project root:

   NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

   Database Schema: The project includes automatic database setup with:

   • User profiles with XP and leveling system
   • Game scores with automatic XP calculation
   • Achievements system
   • Social features (friends, challenges)
   • Row Level Security (RLS) enabled for all tables

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

🎯 How to Play

1. Sign Up - Create your account to track progress
2. Choose a Game - Select from three brain training exercises
3. Play Daily - Each game generates new content daily
4. Track Progress - Monitor your streaks, scores, and achievements
5. Improve - Watch your cognitive abilities grow over time

🛠️ Tech Stack

Frontend

• Next.js 15.5.3 - React framework with App Router
• TypeScript 5.0 - Type-safe development
• Tailwind CSS 4.0 - Utility-first styling
• React 19.1.0 - Latest React features

Backend & Auth

• Supabase - Backend-as-a-Service
• Supabase Auth - User authentication
• Supabase SSR - Server-side rendering support

Development

• ESLint - Code linting
• Turbopack - Fast bundling (dev mode)

📁 Project Structure

mindmender-web/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/            # Authentication pages
│   │   ├── dashboard/         # Main dashboard
│   │   ├── games/             # Game pages
│   │   └── progress/          # Progress tracking
│   ├── components/            # Reusable UI components
│   │   ├── AchievementBadge.tsx
│   │   ├── GameCard.tsx
│   │   ├── GlassCard.tsx
│   │   ├── LiquidGlassBackground.tsx
│   │   └── Sidebar.tsx
│   └── lib/                   # Utility libraries
│       ├── prng.ts           # Pseudo-random number generator
│       ├── scoring.ts        # Game scoring algorithms
│       └── supabase/         # Supabase client configuration
├── public/                    # Static assets
└── package.json

🎮 Game Details

Memory Match

• Objective: Find matching pairs of cards
• Skills: Visual memory, pattern recognition
• Scoring: Based on time and number of moves

Sequence Recall

• Objective: Remember and repeat growing sequences
• Skills: Working memory, attention span
• Scoring: Based on sequence length achieved

Attention Grid

• Objective: Find the highlighted square in a grid
• Skills: Focus, visual attention, processing speed
• Scoring: Based on accuracy and response time

♿ Accessibility

MindMender is designed with accessibility in mind:

• High contrast colors for better visibility
• Large touch targets for easy interaction
• Simple instructions with minimal distractions
• Keyboard navigation support
• Screen reader compatible

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add your Supabase environment variables
4. Deploy!

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

🤝 Contributing

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.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Next.js
• Styled with Tailwind CSS
• Powered by Supabase
• Icons and emojis for visual appeal

📞 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Check the documentation
• Review the code examples

---

Happy Brain Training! 🧠✨

Made with ❤️ for cognitive enhancement and mental wellness.