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π π.
/challenges
, /courses
, etc.)/lib/server/[feature]/
/routes/api/
+page.server.ts
/
βββ 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
We use shared logic in lib/server
to prevent code duplication. If a feature needs data fetching, validation, or transformation:
lib/server/[feature]
core.ts
, submissions.ts
, etc.)+page.server.ts
(for SSR)+server.ts
(for APIs)// 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);
}
Lets get into business now
npm install
npm run dev
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=...
If you're adding a new feature:
lib/server/[feature]
+server.ts
or +page.server.ts
as neededWe 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.
lucide-svelte
)