colearnspace Svelte Themes

Colearnspace

ColearnSpace is a community skill building and showcasing hub, using youtube videos as part of community driven courses, it allows everyone to create a course, youtube videos embedded or not, users can also make lessons via text, not to forget challenges, create challenges and let users battle out to showcase their coding & problem solving skills

CoLearnSpace

A modern web application built with SvelteKit, Supabase, and a modular feature-first architecture. This app is designed to scale, with a strong focus on shared logic, clean data handling, and good developer experienceπŸ˜…πŸ˜“.


Features

  • Challenges: Create/host a tech challenge, have users battle it out to showcase their skills as they solve a problem you createdπŸ’€I'm kidding... but for real
  • Courses: Create courses using videos under 50mb or use your youtube videos, can be embedded into your modules easily, just copy and paste the video link
  • Not sure if its a feature☠️ But you don't have to create an account to use the features here, "ghost" has got your backπŸ˜…just don't abuse himπŸ₯Ίhe's already working overtime.

What to expect as a Dev?

  • Feature-based folder structure (/challenges, /courses, etc.)
  • Shared business logic in /lib/server/[feature]/
  • API routes in /routes/api/
  • SSR-powered data fetching using +page.server.ts
  • Supabase for authentication, storage, and database
  • Supports both authenticated and anonymous users

πŸ—‚οΈ Project Structure


/
β”œβ”€β”€ lib/
β”‚   └── server/
β”‚       └── challenges/
β”‚           β”œβ”€β”€ core.ts         # Main logic: fetching challenges, etc.
β”‚           β”œβ”€β”€ submissions.ts  # Submission logic
β”‚           └── community.ts    # Community topics logic
β”‚
β”œβ”€β”€ routes/
β”‚   β”œβ”€β”€ challenge/
β”‚   β”‚   └── \[slug]/
β”‚   β”‚       β”œβ”€β”€ +page.svelte
β”‚   β”‚       β”œβ”€β”€ +page.server.ts  # Uses logic from lib/server/challenges
β”‚   β”‚       └── community/
β”‚   β”‚       └── submissions/
β”‚   └── api/
β”‚       └── challenge/
β”‚           β”œβ”€β”€ +server.ts            # POST: Create challenge
β”‚           └── \[slug]/
β”‚               β”œβ”€β”€ +server.ts        # GET: Fetch specific challenge
β”‚               └── submissions/
β”‚                   └── +server.ts    # GET: Submissions for a challenge
β”‚
└── README.md

🧠 Data Layer Philosophy

We use shared logic in lib/server to prevent code duplication. If a feature needs data fetching, validation, or transformation:

  • Create a folder for it in lib/server/[feature]
  • Place all logic functions in meaningful files (core.ts, submissions.ts, etc.)
  • Reuse these functions in both:
    • +page.server.ts (for SSR)
    • +server.ts (for APIs)

πŸ’‘ Example: How to Fetch Challenge Submissions

// lib/server/challenges/submissions.ts
export async function getSubmissionsForChallenge(slug: string) {
    // Supabase logic here
}

// routes/api/challenge/[slug]/submissions/+server.ts
import { getSubmissionsForChallenge } from '$lib/server/challenges/submissions';

export async function GET({ params }) {
    const submissions = await getSubmissionsForChallenge(params.slug);
    return json(submissions);
}

Running Locally

Lets get into business now

You just have to...

npm install
npm run dev

To spin up your backend, make sure you have Docker installed and running

Run the following command

npx supabase start

It will download the supabase docker image for you to use locally When its done running, you will have to copy the supabase url and the anon key and create a .env file in the root of your project

Then set up your .env with Supabase keys, for example:

PUBLIC_SUPABASE_URL=...
PUBLIC_SUPABASE_ANON_KEY=...

🌱 Contributing

If you're adding a new feature:

  • Create a new folder in lib/server/[feature]
  • Add functions for handling server logic there
  • Use those in +server.ts or +page.server.ts as needed
  • Keep your files short and single-responsibility
  • We use camelCase in our code, and snake_case in our database to define entities and attributes

πŸ” Security Notes

We support both authenticated and anonymous access. For anonymous users, progress tracking is done using the client IP address (non-invasive, limited use). Avoid storing any sensitive data.


πŸ“¦ Tech Stack

  • SvelteKit
  • Docker
  • Supabase (PostgreSQL, Storage, Auth)
  • TypeScript
  • Lucide Icons (via lucide-svelte)
  • TailwindCSS

Top categories

Loading Svelte Themes