AI Blog Generator

We're going to build an AI blog generator powered by OpenAI's GPT-4 and DALL·E 3 models, Supabase backend for database and storage, Zuplo as our API Gateway, NextJs 14 for our frontend application, and Clerk for authentication and user management.

Source code

next-ai-blogger

hamedbahram

Youtube

Build an AI Blog Generator

Architecture

We'll start by creating a fullstack app using NextJs 14 and Supabase. We'll then add authentication using Clerk to protect our endpoints, and lastly, we'll add an API Gateway to proxy our backend and expose our API to other developers with API key authentication and rate limiting.

Backend

Supabase

We're going to use supabase to store our blog posts and images. Supabase is an open source Firebase alternative. It provides database, authentication, storage, and serverless functions. It's built on top of PostgreSQL and provides a nice UI for managing your database.

Frontend

NextJs

We're going to use NextJs 14 to build our frontend application and use server actions to handle form submission and API calls. We're going to learn about the App router, caching, server actions, and adding loading UI to our forms.

Clerk

We're going to use Clerk to add authentication to our application. Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users.

API Gateway

Zuplo

We're going to use Zuplo to proxy our backend API, add API key authentication, rate limiting, and analytics. Zuplo is a serverless API gateway deployed to the edge runtime that proxies your backend so you can add security, authentication and get analytics instantly - with minimal latency.

Recap

That's a wrap folks, here are a couple of suggestions to extend this project:

Add a GET route to get a list of all blog posts.
Add row level security (RLS) to supabase to only allow users to access their own blog posts.
Add Stripe to the mix to monitize your APIs on a per-usage-basis.

Resources

Here are the resources mentioned in this note: