Complete setup guide for the Cosmic Learning App. Follow these steps to get your space academy up and running!

Before you begin, ensure you have the following installed:

This project requires a Supabase database to handle:

• User authentication
• Store learning progress
• Track XP points
• Manage task completion

Supabase provides a powerful PostgreSQL database with real-time capabilities and built-in authentication.

1. Create Account: Go to supabase.com and create a free account
2. New Project: Create a new project and choose a region close to your users
3. Get Credentials: Copy your project URL and anon key from Settings → API
4. Database Schema: Insert the required database schema (see database.webp reference in assets folder)

⚠️ Important Note: You'll need to turn off RLS policies which is not recommended for production. Create your own policies for select, insert, update operations.

git clone https://github.com/FilipElznic/LearningApp.git

cd LearningApp

npm install react react-dom react-router-dom
npm install @supabase/supabase-js
npm install lucide-reactct

npm install tailwindcss postcss autoprefixer
npm install @splinetool/react-splinee

npm install -D vite @vitejs/plugin-react
npm install -D eslint eslint-plugin-reactt

npm install

Create a .env file in the root directory:

VITE_SUPABASE_URL=your_supabase_project_url

VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

🔒 Security Warning: Never commit your .env file to version control. Add it to .gitignore!

npm run dev

This will start the development server at http://localhost:5173

npm run build

Creates an optimized production build in the dist folder

• Secure login/signup with Supabase Auth

• Earn points based on difficulty levels

• Monitor learning journey and achievements

• Engaging space-themed interface

• Earth, Moon, and Deep Space challenges

• Compete with fellow space explorers

• Frontend: React, Vite
• Styling: Tailwind CSS
• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• 3D Elements: Spline
• Icons: Lucide React
• Routing: React Router DOM

LearningApp/
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   └── App.css
│   └── App.jsx
│   └── AuthContext.jsx
│   └── index.css
│   └── main.jsx
│   └── supabaseClient.js
│   └── ToastContext.jsx
├── public/
├── .env
├── package.json
├── tailwind.config.js
└── vite.config.js
 vite.config.js

Ready to explore the cosmos of learning? 🌌