👨‍💻

Building a Twitter Clone Named 'Quitter' with SvelteKit, Supabase, and Tailwind CSS

Jul 14, 2024

View transcript

Building a Twitter Clone Named 'Quitter'

Technologies Used

  • SvelteKit for the framework
  • Supabase for the database and authentication
  • DaisyUI built on Tailwind CSS for UI components

Features Implemented

  • Email Authentication: Using magic links via Supabase for login
  • Post Creation: Users can create posts
  • Commenting: Users can comment on posts (not real-time)
  • Likes: Users can like posts
  • Image Uploading: Users can upload images with their posts
  • Sign Out: Users can log out
  • 3D Animation Bonus: Using SvelteCubed for a 3D animation feature

Setup and Initialization

Initial Setup with SvelteKit

  1. Create a new SvelteKit project npm init svelte@next
  2. Install dependencies npx svelte-add@latest tailwindcss npm install daisyui npm install
  3. Configure Tailwind CSS and DaisyUI
    • Add DaisyUI to Tailwind CSS plugins

Supabase Configuration

  1. Create a new Supabase project
  2. Set up email authentication via magic links
  3. Adjust email confirmation settings
  4. Create required tables:
    • posts
    • likes
    • comments
  5. Configure Row Level Security (RLS) policies to handle authenticated access
  6. Set up Supabase client in the project by filling in SUPABASE_URL and PUBLIC_KEY

Error Handling Setup

  • Created an error component to handle Supabase errors

Implementation Details

Authentication

  • Magic Link Authentication: Users enter their email to receive a magic link to log in
  • Login Form: Uses DaisyUI components for input and submit buttons

Creating Posts

  • Setting Up Post Table: Includes columns for user, content, and optional image
  • Form to Submit Posts: Allows text input and binds values for submission

Adding Likes and Comments

  • Likes: Incremented by clicking a button
  • Comments: Users can add comments below the posts
  • Handling State Changes: Updates through promises and checking for errors

Image Uploading

  • Supabase Storage: Configured bucket for image storage
  • Uploading Images: Components handle file selection and upload
  • Displaying Images: Fetch the public URL for images to display them in posts

Sign Out

  • Logout Function: Allows users to log out and redirects them to the login page

Bonus: Adding 3D Graphics

  • SvelteCubed: Used to add a spinning 3D geometry on the page
  • Integrating Three.js: Setting up a canvas and adding a rotating geometry
// Example of rotating geometry const spin = 0; onFrame(() => { spin += 0.01; });

Final Deliverables

  • Basic Functionality: Post creation, comments, likes, image upload, and authentication
  • 3D Animation: Demonstrated how to integrate SvelteCubed for added interactivity

Conclusion

  • This guide provided a walkthrough of building a simplified Twitter clone using popular web technologies. While the project remains incomplete, the main goal was to teach how to use SvelteKit, Supabase, and TailwindCSS together effectively.
  • For a more polished and full-featured application, you would need to address real-time functionality, refine error handling, and more.

Like and Subscribe for more content!

Full transcript