DEV Community

Cover image for 🚀 Build a HackerNews Clone Using Svelte and Supabase
hmza
hmza

Posted on

🚀 Build a HackerNews Clone Using Svelte and Supabase

#vibecoding #ai #codeing #svelte

🚀 Build a HackerNews Clone Using Svelte and Supabase

"A blazing-fast HackerNews clone with zero backend boilerplate? Yes, please!"

In this tutorial, we’ll build a lightweight, fast, and modern HackerNews clone using Svelte (the frontend wizard 🧙) and Supabase (the open-source Firebase alternative 💾).

📦 Why Svelte + Supabase?

  • Svelte compiles to tiny, performant JS
  • Supabase gives us:
    • PostgreSQL with RESTful & realtime APIs
    • Auth, storage, edge functions
    • No server-side code required

Together, they let you build fullstack apps without fullstack headaches.

🧰 What We’ll Build

A HackerNews-style app with:

  • ✅ Sign Up / Login (via Supabase Auth)
  • 🔗 Submit links (title + URL)
  • 🗳️ Upvote posts
  • 💬 Comment threads (basic)
  • ⚡ Real-time updates

🛠️ Project Setup

1. Install the SvelteKit App 

 npm create svelte@latest hackernews-clone cd hackernews-clone npm install
Enter fullscreen mode Exit fullscreen mode

2. Install Supabase Client 

 npm install @supabase/supabase-js
Enter fullscreen mode Exit fullscreen mode

3. Set up Supabase Project 

 VITE_SUPABASE_URL=https://xyzcompany.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key-here
Enter fullscreen mode Exit fullscreen mode

4. Initialize Supabase Client

Create src/lib/supabaseClient.ts:

 import { createClient } from '@supabase/supabase-js'; const supabaseUrl = import.meta.env.VITE_SUPABASE_URL; const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY; export const supabase = createClient(supabaseUrl, supabaseAnonKey);
Enter fullscreen mode Exit fullscreen mode

🧑‍💻 Auth: Sign Up / Login

Create src/routes/login/+page.svelte

 <script lang="ts"> import { supabase } from '$lib/supabaseClient'; let email = ''; let password = ''; const login = async () => { const { error } = await supabase.auth.signInWithPassword({ email, password }); if (error) alert(error.message); }; </script> <input bind:value={email} placeholder="Email" /> <input type="password" bind:value={password} placeholder="Password" /> <button on:click={login}>Log In</button>
Enter fullscreen mode Exit fullscreen mode

🔗 Submitting a Post

Create a posts table with fields:

  • id
  • title
  • url
  • user_email
  • upvotes (default: 0)

Submit Page Example 

 let title = ''; let url = ''; const submit = async () => { const user = await supabase.auth.getUser(); await supabase.from('posts').insert([{ title, url, user_email: user.data.user.email }]); };
Enter fullscreen mode Exit fullscreen mode

🧠 Display Posts

src/routes/+page.svelte 

 let posts = []; onMount(async () => { const { data } = await supabase.from('posts').select('*').order('upvotes', { ascending: false }); posts = data; });
Enter fullscreen mode Exit fullscreen mode

🔼 Upvote Posts 

 const upvote = async (postId, currentVotes) => { await supabase.from('posts') .update({ upvotes: currentVotes + 1 }) .eq('id', postId); };
Enter fullscreen mode Exit fullscreen mode

⚡ Real-time Updates

Enable Realtime for posts in Supabase UI.

Then:

 supabase .channel('posts') .on('postgres_changes', { event: '*', schema: 'public', table: 'posts' }, payload => { // update local posts[] }) .subscribe();
Enter fullscreen mode Exit fullscreen mode

🔐 Auth Guard (optional)

Add to src/hooks.server.ts:

 export async function handle({ event, resolve }) { const { user } = await supabase.auth.getUser(); event.locals.user = user; return resolve(event); }
Enter fullscreen mode Exit fullscreen mode

🧪 Features You Can Add

  • 🧵 Comments table + nesting
  • 🧙 Admin flag moderation
  • 🕶️ Dark mode toggle
  • 🚀 PWA setup
  • 📱 Mobile-first UI

💡 Conclusion

You just built a modern HackerNews clone with Svelte and Supabase!

  • Svelte keeps your frontend blazing fast ⚡
  • Supabase handles your backend like magic 🧙

🌐 Useful Links

🔥 If you want part 2 — “Add Comments and Dark Mode” — let me know!

Top comments (0)