Vercel + Supabase: The Ultimate Toolset for Rapid Prototyping

Authors

Vercel is an incredibly powerful frontend application deployment platform that not only allows you to quickly and easily launch your application but also offers various AI integration features, even enabling AI to automatically generate pages. If your project requires a reliable PostgreSQL database, Supabase is the perfect choice. Supabase provides a convenient JavaScript SDK, making it exceptionally simple to use a database when deploying a Next.js application on Vercel.

Imagine being able to develop a stunning application within just a few hours! The perfect combination of Vercel and Supabase makes this possible. Whether you're rapidly prototyping or building complex projects, this golden duo will be a tremendous help. It is undoubtedly the ultimate tool in every developer's toolkit. This article will guide you through quickly implementing a like button feature for your blog using Supabase. Buckle up, and let's get started.

Vercel

Vercel is a static site hosting platform primarily designed for frontend developers, offering high-performance and easy-to-use deployment and continuous integration services. Its features include:

  1. Fast Deployment: Automated deployment through integration with GitHub, GitLab, and Bitbucket.
  2. Global CDN: Ensures fast loading of your website worldwide through a global content delivery network (CDN).
  3. Serverless Functions: Supports serverless functions, allowing you to easily add backend logic to your frontend application.

Supabase

Supabase is an open-source alternative to Firebase, providing developers with features like real-time databases, authentication, storage, and Edge Functions. Its features include:

  1. PostgreSQL Database: A powerful relational database that supports complex queries and transactions.
  2. Real-time Data Sync: Achieves real-time data updates via WebSocket.
  3. User Authentication and Access Control: Built-in support for various authentication methods and fine-grained access control.
  4. File Storage: Supports file uploads and management.

Quickly Adding a Like Button Feature to a Blog Deployed on Vercel Using Supabase

1. Create a Project in Supabase

vercelsupabasetheult-1

Create an article_like table, where we will store the like data for each of our blog posts.

vercelsupabasetheult-2

2. Configure Supabase Integration in Vercel

Visit https://vercel.com/integrations/supabase to link your Vercel project with your Supabase project.

vercelsupabasetheult-3
vercelsupabasetheult-0

Once linked, Vercel will automatically configure the Supabase keys into the environment variables.

Next, create a supabase.tsx file in your Next.js project to configure the Supabase client.

'use client'

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string

export default createClient(supabaseUrl, supabaseAnonKey)

3. Use the Supabase API

Import and use the Supabase client in your pages or components. For example, here is how you can implement a like button using Supabase:

'use client'

import React, { useState, useEffect } from 'react'
import { PiHandsClappingThin } from 'react-icons/pi'
import supabase from '../utils/supabase'
import '../css/likebutton.css' // Import the stylesheet

const LikeButton = ({ article }) => {
  const [likeCount, setLikeCount] = useState(0)
  const [isAnimating, setIsAnimating] = useState(false)

  const handleLike = async () => {
    // Skip if the previous operation is not completed
    if (isAnimating) {
      return
    }

    setIsAnimating(true)
    setTimeout(() => setIsAnimating(false), 200)

    if (likeCount > 0) {
      const { data, error } = await supabase
        .from('article_like')
        .update({ like_count: likeCount + 1 })
        .eq('article', article)

      if (error) {
        console.error(error)
      } else {
        setLikeCount(likeCount + 1)
      }
      return
    }

    // 1. Check if there is a corresponding article_like record
    const { data: articleLike, error } = await supabase
      .from('article_like')
      .select('*')
      .eq('article', article)
      .single()

    if (error && error.code !== 'PGRST116') {
      // If there is an error and it's not because the record was not found
      console.error(error)
      return
    }

    if (articleLike) {
      // 2. If a record exists, update like_count +1
      const { data, error } = await supabase
        .from('article_like')
        .update({ like_count: articleLike.like_count + 1 })
        .eq('article', article)

      if (error) {
        console.error(error)
      } else {
        setLikeCount(articleLike.like_count + 1)
      }
    } else {
      // 3. If no record exists, insert a new record and set like_count = 1
      const { data, error } = await supabase
        .from('article_like')
        .insert({ article: article, like_count: 1 })

      if (error) {
        console.error(error)
      } else {
        setLikeCount(1)
      }
    }
  }

  useEffect(() => {
    fetchCount()
  })

  const fetchCount = async () => {
    const { data, error } = await supabase.from('article_like').select('*').eq('article', article)
    if (error) {
      console.error('Error get article count:', error)
    } else if (data && data[0]) {
      setLikeCount(data[0].like_count)
    } else {
      setLikeCount(0)
    }
  }

  return (
    <div
      className={`like-button ${isAnimating ? 'animating' : ''}`}
      style={{ display: 'flex', alignItems: 'center', marginRight: '10px' }}
    >
      <PiHandsClappingThin size={30} onClick={handleLike} style={{ cursor: 'pointer' }} />
      <span style={{ marginLeft: '10px' }}>{likeCount}</span>
    </div>
  )
}

export default LikeButton;

4. Deploy to Vercel

Push your code to the Git repository linked with Vercel, then click the "Deploy" button in the Vercel dashboard to complete the deployment. Check out the result:

vercelsupabasetheult-5

Summary

This article introduced how to quickly build a prototype using Vercel and Supabase. Vercel is a powerful frontend application deployment platform with various AI integration features, while Supabase is a reliable PostgreSQL database service with a convenient JavaScript SDK. Together, these tools can help us develop feature-rich applications in a short time.

If you have any questions or suggestions regarding this article, feel free to share your thoughts in the comments section.

Share this content