A STEP BY STEP GUIDE TO CREATING A FULL STACK WEB APP USING NEXT JS AND SUPABASE 🙌🙌💥..

#nextjs #tailwindcss #webdev #react

In today's digital era, applications play a vital role in our lives, providing instant access to information and services. If you have a passion for baking or want to share your favorite cake recipes with the world, building a cake recipe application can be an exciting project. In this blog post, we will guide you through the process of creating a cake recipe application using Supabase and Next.js, two powerful tools that make development efficient and enjoyable.

What is Supabase?
Supabase is an open-source Firebase alternative that provides a set of backend services, including authentication, database, and real-time functionality. It allows you to rapidly build web and mobile applications without the need for server-side development. With Supabase, you can easily handle user authentication, store data, and implement real-time updates.

Why choose Next.js?
Next.js is a popular React framework that enables server-side rendering (SSR) and provides an excellent development experience. It offers features like automatic code splitting, server-side rendering, and static site generation, making it a perfect choice for building performant and SEO-friendly applications. Next.js also provides an intuitive routing system and seamless integration with React components.

To get started, make sure you have Node.js and npm installed on your machine. Here's how you can set up the project:

Create a new Next.js project by running the following command make sure to include tailwind:
`

`
npx create-next-app cakes

`
`
I named mine cakes but you can name yours anything you are comfortable with.

Navigate into the project directory:
cd cakes

Install Supabase client library and dependencies:
npm install @supabase/supabase-js

Head over to supabase.com and register for an account or you can simply log in with your GitHub account. Create a database and create a new table. Interesting thing about supabase is that it gives a very friendly UI and is very easy to work with I just love it:

I created a table and named it Cakes:

once you are done head over back to vs studio so that we can start working on our project 😊😊

Designing the User Interface:
Next.js provides various options for styling your application, including CSS modules, styled-components, or tailwind CSS. Choose the one that suits your preferences. Create a layout and component structure for your application, including pages for the home screen, recipe list, and individual recipe details.

Personally I used Float UI , I can guarantee you that this is a game changer in the design of the front-end working🔥with tailwind 💥👌👌🔥.Just head over to their website Float UI and you can see the amazing components that they have:

Its just a copy and paste. I will be importing some code from Float UI. You can run the *npm run dev * command in your cli to make sure that your Next js website is up and running correctly. You can now start designing your webpage to fit your design. Im going ahead to create a components directory inside of my src/app directory:

Create a file named Nav.tsx and head over to Float UI to get the code .You can pick one of the Navbars that fit your intrest and copy paste the code:

import the Nav component to your main layout.tsx and have it inside the body tag just before {children}:

We first need to fetch data from supabase which we can work with. Lets start by creating a file named supabase.js in the root directory.

We need to head over to supabase and get the public anon key which we will later add to our .env.local file and the url which we will need.

Open your project settings in supabase go to API:

You will need both the url and anon public. Copy paste the supabase anon key in your.env.local file that you have created in the root directory:

Back to the supabase.js file have the code below:

copy and paste your supabase url.

In the main page.tsx fetch the data with the help of useEffect hook and useState hooks :

Make sure you have created a table and input some data to be fetched. Supabase offers a simple GUI to help you achive this. Make sure that you disable the row level security first as nothing will be returned but an empty array:

My table basically has five columns the id and created_at are there by default . I added the title column which is a text field, image for the image url which is a varchar field and the recipe column which is a text field.

Once you have added data to your rows you can check out the APIs offered by supabase for your table.

In the components directory have a Cards component where data will be mapped over and be displayed to the client in different cards. I passed over the data that I fetched as a prop.

An advantage of using typescript is that it comes in handy when defining the model in your database where you can create a type/interface which will make it easier while working with your data. I do this by having my types in the types.d.ts file in the root directory