DEV Community

Allan Niñal
Allan Niñal

Posted on • Edited on

Why I Choose Supabase, Vercel, and GitHub for Most of My Personal Projects

Introduction

As developers, we're constantly searching for the perfect tech stack that balances power, simplicity, and cost-effectiveness. After years of experimenting with various technologies, I've settled on a combination that has proven incredibly effective across projects of all sizes: Supabase for backend services, Vercel for frontend deployment, and GitHub for version control and static hosting.

In this article, I'll share why this trio has become my go-to tech stack, backing up my experiences with research from across the developer community.

Image description

The Powerful Backend: Supabase

Image description

What is Supabase?

Supabase is an open-source Firebase alternative that provides a suite of backend services built on PostgreSQL. It offers authentication, database management, storage solutions, and real-time capabilities through a developer-friendly interface.

Why I Choose Supabase

  1. PostgreSQL Foundation

Supabase is built on PostgreSQL, a mature and highly extensible SQL database that provides strong data integrity and reliability compared to other options. This gives me confidence that my data layer is built on a rock-solid foundation.

  1. Comprehensive Backend Services

Rather than cobbling together separate services, Supabase provides "authentication, database, and storage – without the overhead of managing these systems ourselves". This dramatically reduces development time and removes the complexity of managing multiple services.

  1. Real-Time Capabilities

Modern applications often require real-time updates. Supabase makes this easy with "real-time database features that allow you to subscribe to database changes and sync data with your frontend seamlessly", eliminating the need for custom WebSocket implementations.

  1. Free Tier That Scales

Supabase offers a generous free tier that includes 2 free databases, 500MB database storage, and support for up to 50,000 monthly active users. This makes it perfect for prototypes and early-stage projects, with clear upgrade paths as your application grows.

As one developer noted on their experience with the stack, "Supabase, our go-to for backend services, offers an alternative to Firebase but with an open-source ethos and a robust PostgreSQL foundation".

Image description

The Frontend Deployment Platform: Vercel

Image description

What is Vercel?

Vercel is a cloud platform for static sites and Serverless Functions that's optimized for frontend frameworks like Next.js, React, Vue, and others.

Why I Choose Vercel

  1. Optimized for Modern Frameworks

Vercel provides "frontend deployment capabilities" specifically designed for modern JavaScript frameworks. Their platform is particularly optimized for Next.js, which they maintain, but works excellently with any frontend framework.

  1. Global CDN for Performance

Vercel's global CDN ensures that "our applications are fast, no matter where our users are", providing excellent performance worldwide without additional configuration.

  1. Preview Deployments

One of my favorite features is how Vercel automatically creates preview deployments for pull requests, allowing me and my clients to visualize and test changes before merging them to production.

  1. Developer Experience

The overall developer experience is exceptional. As developers at DiverseTalent noted, "Vercel ties it all together with its seamless deployment and hosting capabilities... ensuring our applications are not just swiftly deployed but also delivered with speed to users worldwide".

Image description

The Foundation: GitHub

Image description

What is GitHub?

GitHub is a platform for version control and collaboration that lets developers work together on projects from anywhere. While most known for Git repositories, it also provides GitHub Pages for static hosting and GitHub Actions for automation.

Why I Choose GitHub

  1. Industry-Standard Version Control

GitHub provides robust version control that's become the industry standard, making it easy to collaborate with team members and manage code history effectively.

  1. Static File Hosting with GitHub Pages

GitHub Pages allows developers to "host a website about yourself, your organization, or your project directly from a repository". This provides free and reliable hosting for static assets, documentation, or even complete static websites.

  1. Automation with GitHub Actions

GitHub Actions has "the backing of hundreds of engineers here at GitHub and a rich community with over 14,000 GitHub Actions in the GitHub Marketplace", allowing me to automate builds, tests, and deployments with ease.

  1. Seamless Integration with Static Site Generators

GitHub Pages works exceptionally well with static site generators, making it easy to deploy sophisticated static websites through automated workflows.

Image description

The Integration Advantage

What makes this tech stack truly powerful is how seamlessly these three tools work together:

Supabase + Vercel Integration

The official integration between Supabase and Vercel means that "you can manage all your Supabase services directly from the Vercel dashboard". This allows you to:

  • Create a Supabase project as a Vercel Storage resource
  • Handle invoices via Vercel instead of Supabase
  • Automatically sync environment variables
  • Create redirect URLs in Supabase Preview branches

In August 2024, the partnership deepened with Vercel adding "official First-Party Integrations" with Supabase, making "it a lot easier to launch Postgres databases from Vercel with full support for Vercel Templates and integrated billing."

GitHub + Vercel Deployment Flow

The GitHub and Vercel integration creates a seamless deployment workflow:

  1. Push code to GitHub
  2. Vercel automatically detects changes
  3. Builds and deploys your application
  4. Creates preview environments for pull requests
  5. Provides deployment URLs for review

GitHub Pages + Actions for Static Content

For static content, GitHub Pages and Actions work together beautifully:

"With the shift to GitHub Actions, GitHub Pages are now tracking deployments instead of builds. A source branch is not required anymore and is at the discretion of a workflow's triggers."

This means you can set up sophisticated build processes for static content that integrate perfectly with the rest of your application infrastructure.

Image description

Free Tier Comparison

One of the most compelling reasons to use this stack, especially for new projects, is the generous free tiers:

Supabase Free Tier

  • 2 free PostgreSQL databases
  • 500MB database storage
  • 1GB file storage
  • 50,000 monthly active users (auth)
  • 2GB bandwidth
  • Starter compute (up to 0.5GB RAM)

Vercel Free Tier

  • Unlimited personal projects
  • Serverless functions (limited execution)
  • Automatic HTTPS/SSL
  • Global CDN
  • Preview deployments
  • Continuous deployment from GitHub

GitHub Free Tier

  • Unlimited public and private repositories
  • GitHub Pages for static websites
  • 500MB of GitHub Packages storage
  • 2,000 GitHub Actions minutes per month
  • GitHub Codespaces (60 hours/month)

These free tiers provide everything needed for small to medium-sized projects, making this stack perfect for startups, side projects, and MVPs.

Real-World Implementation

In practice, here's how I typically structure projects using this stack:

  1. Repository Structure

    • Frontend code (React/Next.js) in the main directory
    • Backend code (Supabase migrations, functions) in a /supabase directory
    • Static content (documentation, landing pages) in a /docs directory deployed to GitHub Pages

  2. Development Workflow

    • Local development using Supabase CLI for database work
    • Push to GitHub repository
    • Vercel automatically deploys the application
    • GitHub Actions builds and deploys static content to GitHub Pages

  3. Production Setup

    • Main application hosted on Vercel
    • Database and authentication handled by Supabase
    • Documentation and marketing site on GitHub Pages
    • CI/CD entirely automated through GitHub Actions and Vercel integrations

Image description

Testimonials from the Developer Community

This stack isn't just my preference—many developers and companies have found success with it:

"I don't think we would have grown so quickly without Supabase and Vercel. We have used many different products since we started the company, but Supabase and Vercel are the few services that we still use today." - From Resend, a company with 180,000 users.

"The simplicity, efficiency, and scalability of our chosen stack are not just a relief; they have proved a strategic advantage." - DiverseTalent.ai team

"The synergy between Svelte, Supabase, and Vercel has significantly boosted our productivity." - Productive Programmer

Limitations and Considerations

While this stack works wonderfully for most of my projects, it's important to acknowledge some limitations:

  1. Learning Curve

Despite Supabase's user-friendly interface, there could be "a learning curve for those unfamiliar with PostgreSQL or real-time database concepts".

  1. Vendor Lock-in Concerns

While Supabase is open-source and can be self-hosted, there's still some level of dependency on these platforms. However, the use of standard technologies (PostgreSQL, Git) makes migration possible if needed.

  1. Cost for Advanced Features

"While Supabase offers a free tier, advanced features and higher usage plans come with a cost. This might be limiting for startups or hobby projects with tight budgets."

  1. Specific Use Cases May Require Alternatives

For applications with extremely high write loads or specific compliance requirements, you might need to consider alternatives or additional services.

Conclusion

The combination of Supabase, Vercel, and GitHub creates a powerful, integrated tech stack that addresses the full spectrum of modern web development needs while remaining cost-effective and developer-friendly.

By leveraging Supabase for backend services, Vercel for frontend deployment, and GitHub for version control and static hosting, I've been able to dramatically increase my development speed while creating applications that scale effectively.

The official integrations between these platforms further enhance their combined value, creating a cohesive development experience that allows me to focus on building features rather than managing infrastructure.

Whether you're working on a personal project, a startup MVP, or a larger application, I highly recommend giving this tech stack a try.

What's your preferred tech stack? Have you tried this combination before? Let me know in the comments!

Image description

References:

  1. Restack. "Supabase vs Vercel comparison". https://www.restack.io/docs/supabase-knowledge-supabase-vs-vercel
  2. Vercel Marketplace. "Supabase for Vercel". https://vercel.com/marketplace/supabase
  3. Productive Programmer. "The Power Trio: Svelte, Supabase, & Vercel - My [current] Tech Stack of Choice". https://productiveprogrammer.io/the-power-trio-sveltekit-supabase-vercel-my-current-tech-stack-of-choice/
  4. Supabase Blog. "Supabase + Vercel Partnership". https://supabase.com/blog/supabase-vercel-partnership
  5. Hacker News. "Neon Postgres vs. Supabase". https://news.ycombinator.com/item?id=41223327
  6. DiverseTalent. "Supabase, Vercel & Svelte – Our Perfect Tech Trio". https://diversetalent.ai/supabase-vercel-svelte-our-perfect-tech-trio/
  7. GitHub Discussions. "Supabase & Vercel Environments Mapping". https://github.com/orgs/supabase/discussions/11888
  8. Vercel Templates. "Supabase Starter". https://vercel.com/templates/next.js/supabase
  9. Bytebase. "Neon vs. Supabase: Which One Should I Choose". https://www.bytebase.com/blog/neon-vs-supabase/
  10. SaasHub. "Vercel VS Supabase - compare differences & reviews?". https://www.saashub.com/compare-vercel-vs-supabase
  11. Supabase. "Vercel | Works With Supabase". https://supabase.com/partners/integrations/vercel
  12. Supabase Blog. "Vercel Integration and Next.js App Router Support". https://supabase.com/blog/using-supabase-with-vercel
  13. Vercel Integrations. "Supabase for Vercel". https://vercel.com/integrations/supabase
  14. Supabase Docs. "Self Hosting". https://docs-git-docs-compute-overview-supabase.vercel.app/docs/guides/hosting/overview
  15. GitHub Discussions. "Issue with Vercel Integration". https://github.com/orgs/supabase/discussions/20751
  16. GitHub Discussions. "Supabase integration (Vercel)". https://github.com/orgs/supabase/discussions/3918
  17. Paddle Developer. "Build and deploy a Next.js app with Vercel and Supabase". https://developer.paddle.com/build/nextjs-supabase-vercel-starter-kit
  18. GitHub Docs. "Configuring a publishing source for your GitHub Pages site". https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
  19. Hugo Documentation. "Host on GitHub Pages". https://gohugo.io/host-and-deploy/host-on-github-pages/
  20. GitHub. "actions/deploy-pages". https://github.com/actions/deploy-pages
  21. GitHub. "peaceiris/actions-gh-pages". https://github.com/peaceiris/actions-gh-pages
  22. DEV Community. "GitHub Actions and Pages". https://dev.to/rfornal/github-actions-and-pages-2fba
  23. GitHub Blog. "GitHub Pages now uses Actions by default". https://github.blog/news-insights/product-news/github-pages-now-uses-actions-by-default/
  24. GitHub Marketplace. "GitHub Pages action". https://github.com/marketplace/actions/github-pages-action
  25. GitHub Docs. "GitHub's plans". https://docs.github.com/en/get-started/learning-about-github/githubs-plans
  26. GitHub Docs. "What is GitHub Pages?". https://docs.github.com/en/pages/getting-started-with-github-pages/what-is-github-pages
  27. GitHub Marketplace. "Deploy to GitHub Pages". https://github.com/marketplace/actions/deploy-to-github-pages

Open for Projects

I'm currently available to take on new projects in the following areas:

  • Artificial Intelligence solutions (both no-code and custom development)
  • No-code automation with n8n (and open to other automation platforms)
  • React.js frontend development
  • Node.js backend/API development
  • WooCommerce development and customization
  • Stripe payment integration and automation
  • PHP applications and frameworks
  • Python development
  • Supabase, Vercel & GitHub integration

My Expertise

I'm a Senior Web Developer with growing expertise in AI/ML solutions, passionate about creating practical applications that leverage artificial intelligence to solve real-world problems. While relatively new to AI/ML development (less than a year of focused experience), I've quickly built a portfolio of functional projects that demonstrate my ability to integrate AI capabilities into useful applications. My specialized skills include:

  • AI Integration: Connecting pre-trained AI models with web applications through APIs and direct implementation
  • Computer Vision & NLP: Implementing image captioning, sentiment analysis, text summarization, chatbots, and language translation applications
  • Agentic AI Workflows: Creating intelligent autonomous agents that can execute complex tasks through multi-step reasoning
  • Full-Stack Development: Crafting seamless experiences with React.js frontends and Python/Flask or Node.js backends
  • E-commerce Solutions: Expert in WooCommerce/Stripe integrations with subscription management and payment processing
  • Automation Tools: Python scripts and n8n workflows for business-critical processes and data pipelines
  • Content Automation: Creating AI-powered systems that generate complete content packages from blog posts to social media updates

Featured Projects

Personal AI Chatbot - A complete conversational AI application built with React and Flask, powered by Microsoft's DialoGPT-medium model from Hugging Face. This project demonstrates how to create an interactive chatbot with a clean, responsive interface that understands and generates human-like text responses.

Image Captioning App - A full-stack application that generates descriptive captions for uploaded images using AI. Built with React for the frontend and Flask for the backend, this app leverages Salesforce's BLIP model via Hugging Face's transformers library to analyze images and create natural language descriptions of their content.

Sentiment Analysis App - A lightweight full-stack application that performs sentiment analysis on user-provided text using React.js for the frontend and Flask with Hugging Face Transformers for the backend. This project demonstrates how easily powerful pre-trained NLP models can be integrated into modern web applications.

Agentic AI Workflow - A Python-based framework for building intelligent AI agents that can break down complex tasks into manageable steps and execute them sequentially. This project demonstrates how to leverage OpenRouter API to access multiple AI models (OpenAI, Anthropic, Google, etc.) through a unified interface, enabling more sophisticated problem-solving capabilities and better reasoning in AI applications.

WiseCashAI - A revolutionary privacy-first financial management platform that operates primarily in your browser, ensuring your sensitive financial data never leaves your control. Unlike cloud-based alternatives that collect and monetize your information, WiseCashAI offers AI-powered features like intelligent transaction categorization, envelope-based budgeting, and goal tracking while keeping your data local. Optional Google Drive integration with end-to-end encryption provides cross-device access without compromising privacy.

Content Automation Workflow Pro - AI-powered content generation system that transforms content creation with a single command. This Python-based workflow leverages OpenRouter and Replicate to generate SEO-optimized blog posts, custom thumbnail images, and platform-specific social media posts across 7+ platforms, reducing content creation time from hours to minutes.

Stripe/WooCommerce Integration Tools:

  • Stripe Validator Tool - Cross-references WooCommerce subscription data with the Stripe API to prevent payment failures (78% reduction in failures)
  • Invoice Notifier System - Automatically identifies overdue invoices and sends strategic payment reminders (64% reduction in payment delays)
  • WooCommerce Bulk Refunder - Python script for efficiently processing bulk refunds with direct payment gateway API integration

Open-Source AI Mini Projects

I'm actively developing open-source AI applications that solve real-world problems:

  • Image Captioning App - Generates descriptive captions for images using Hugging Face's BLIP model
  • AI Resume Analyzer - Extracts key details from resumes using BERT-based NER models
  • Document Summarizer - Creates concise summaries from lengthy documents using BART models
  • Multilingual Translator - Real-time translation tool supporting multiple language pairs
  • Toxic Comment Detector - Identifies harmful or offensive language in real-time
  • Recipe Finder - AI-powered tool that recommends recipes based on available ingredients
  • Personal AI Chatbot - Customizable chat application built with DialoGPT

All these projects are available on my GitHub with full source code.

Development Philosophy

I believe in creating technology that empowers users without compromising their privacy or control. My projects focus on:

  • Privacy-First Design: Keeping sensitive data under user control by default
  • Practical AI Applications: Leveraging AI capabilities to solve real-world problems
  • Modular Architecture: Building systems with clear separation of concerns for better maintainability
  • Accessibility: Making powerful tools available to everyone regardless of technical expertise
  • Open Source: Contributing to the community and ensuring transparency

Technical Articles & Tutorials

I regularly share detailed tutorials on AI development, automation, and integration solutions:

I specialize in developing practical solutions that leverage AI and automation to solve real business problems and deliver measurable results. Find my tutorials on DEV.to and premium tools in my Gumroad store.

If you have a project involving e-commerce, content automation, financial tools, or custom AI applications, feel free to reach out directly at landix.ninal@gmail.com.

Top comments (0)