https://github.com/lethabomaepa11/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
https://github.com/lethabomaepa11/colearnspace
community-project courses css daisyui docker html javascript lessons skills supabase svelte sveltekit tailwindcss typescript youtube
Last synced: 3 months ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/lethabomaepa11/colearnspace
- Owner: lethabomaepa11
- Created: 2025-04-18T02:48:57.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-21T16:19:59.000Z (about 1 year ago)
- Last Synced: 2025-06-21T17:27:35.894Z (about 1 year ago)
- Topics: community-project, courses, css, daisyui, docker, html, javascript, lessons, skills, supabase, svelte, sveltekit, tailwindcss, typescript, youtube
- Language: Svelte
- Homepage: https://colearnspace.netlify.app
- Size: 3.59 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CoLearnSpace
A modern web application built with [SvelteKit](https://kit.svelte.dev), 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
```ts
// 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...
```bash
npm install
npm run dev
```
### To spin up your backend, make sure you have Docker installed and running
Run the following command
```bash
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:
```env
PUBLIC_SUPABASE_URL=...
PUBLIC_SUPABASE_ANON_KEY=...
```
#### If you are having trouble with the previous step, go to this link https://supabase.com/docs/guides/local-development
---
## 🌱 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