bloolabb - AI Learning Platform

A Duolingo-style learning platform for kids aged 6-18 to learn AI and entrepreneurship through gamified experiences.

🚀 Quick Start

Prerequisites

• Node.js 18+
• Supabase account
• Vercel account (for deployment)

🏗️ Architecture

Tech Stack

• Frontend: Next.js 14 (App Router), React, TypeScript
• Styling: Tailwind CSS v4, shadcn/ui components
• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth with Row Level Security
• Deployment: Vercel

Project Structure

├── app/                    # Next.js app directory
│   ├── (auth)/            # Authentication pages
│   ├── admin/             # Admin dashboard
│   ├── dashboard/         # User dashboard
│   ├── learn/             # Learning content
│   └── api/               # API routes
├── components/            # Reusable components
│   ├── dashboard/         # Dashboard-specific components
│   ├── exercises/         # Exercise components
│   ├── learn/             # Learning components
│   └── ui/                # Base UI components
├── lib/                   # Utility libraries
│   ├── supabase/          # Supabase client configuration
│   └── utils.ts           # Helper functions
└── scripts/               # Database migration scripts

🎮 Features

For Students

• Gamified Learning: XP points, streaks, badges, leaderboards
• Interactive Exercises: Multiple choice, fill-in-blank, case studies
• Progress Tracking: Visual progress bars and completion tracking
• Multi-language Support: English, Arabic, French
• Responsive Design: Works on desktop, tablet, and mobile

For Administrators

• Content Management: Edit lessons, exercises, and learning tracks
• User Management: View and manage student accounts
• Analytics Dashboard: Track platform usage and student progress
• Admin Authentication: Secure role-based access control

🔧 Development Guide

Adding New Learning Content

1. Create a new lesson:

   INSERT INTO lessons (module_id, title, content, xp_reward, order_index)
   VALUES ('module-id', 'Lesson Title', 'Lesson content...', 50, 1);

2. Add exercises to the lesson:

   INSERT INTO exercises (lesson_id, type, question, options, correct_answer, explanation)
   VALUES ('lesson-id', 'multiple_choice', 'Question?', 
           ARRAY['Option 1', 'Option 2', 'Option 3', 'Option 4'],
           'Option 1', 'Explanation...');

Customizing the UI

1. Colors: Edit app/globals.css to modify the color scheme
2. Components: Modify components in components/ui/ for base styling
3. Layout: Update components/dashboard/ for dashboard-specific layouts

Adding New Exercise Types

1. Database: Add new exercise type to the exercise_type enum
2. Component: Create new exercise component in components/exercises/
3. Engine: Update components/exercises/exercise-engine.tsx to handle the new type

Access the admin dashboard at /admin/login

API Endpoints

• GET /api/tracks - Get all learning tracks
• GET /api/user/profile - Get user profile
• POST /api/exercises/submit - Submit exercise answers
• GET /api/user/progress - Get user progress
• POST /api/badges/check - Check for new badges

Database Setup

1. Create Supabase project
2. Run migration scripts in order
3. Enable Row Level Security on all tables
4. Configure authentication settings

🔒 Security

• Row Level Security (RLS): All database tables protected
• Admin Role Verification: Middleware checks admin permissions
• Input Validation: All user inputs validated and sanitized
• Rate Limiting: API endpoints protected against abuse

🐛 Troubleshooting

Common Issues

1. Authentication Loop: Check middleware configuration and Supabase setup
2. Database Errors: Ensure all migration scripts ran successfully
3. Admin Access: Verify admin user was created with correct permissions
4. Styling Issues: Check Tailwind CSS configuration and custom properties

Debug Mode

Add console logs with console.log("[v0] message") for debugging.

📝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Make changes and test thoroughly
4. Submit a pull request with detailed description

📄 License

This project is proprietary software owned by bloolabb. All rights reserved.

🆘 Support

For technical support or questions:

• Create an issue in the repository
• Contact the development team
• Check the troubleshooting section above

---

Made with ❤️ for amazing kids learning AI and entrepreneurship!