Develop performant blog with Qwik and Supabase

Hey there!

In this first article of the series "How to develop a blog with Qwik and Supabase " we will give an overview of the project by highlighting the development process and the technologies we are going to use.

Topics

1. Prerequisites
2. Planning
3. Technologies for development
4. Deploy in production
5. Functional Requirements
6. Conclusions

1. Prerequisites

For this project, in-depth technical skills are not necessary, but you will be at an advantage if you have already used:

• React/NextJS
• Vite
• Relational Databases

2. Planning 📐

The first step in building our blog will be to design it.

We will define what will be the Sitemap of the site schematically and try to understand what the minimum requirements are.

We will not design a layout from scratch (UI/UX) but will refer to an existing template and use it as the basis for developing our pages.

We will finally go on to define the database structure and storage organization to dynamically manage our blog information and articles.

3. Technologies for development💻

The technologies we will use for the development of the Blog are, today, relatively recent, high-performance, and very promising:

• Qwik: Main framework for client side development of the Blog
• Supabase: Online database that we will use for data and storage (Prices)
• Tailwindcss: CSS Framework for styling
• SendGrid: Email send (Prices)

Beyond these main tools we will get to see how to create a contact/newsletter form and multiple language management.

4. Deploy in production 🚀

Putting the project into production will be very simple, we will use Netlify which offers a good free plan (Prices) to which we will link the GitHub account so that we can deploy automatically.

5. Functional Requirements ⚖️

The blog we are going to design will be a pokemon-focused blog and must have the following features:

• Newsletter subscription
• Contact form
• Pokemon list
• Pokemon detail sheet
• Pokemon search with filters
• Articles list

6. Conclusions 🥸

As simple as the project may seem we will definitely go into some very interesting points such as form management, internationalization management, we will make api calls to take pokemon information, and we will see how to create and interact with a Supabase database and storage.

See you at the planning stage! 😉

01. Project Overview 👈

05. Build main layout | Cooming Soon