DEV Community: Isaac Dyor

How to programmatically post your personal blogs to Dev.to, Hashnode, and Medium with Github actions.

Isaac Dyor — Tue, 30 Jul 2024 17:07:29 +0000

The reason

This article details how you can post the blogs from your personal site to external sites like Dev.to, Hashnode, or Medium. Now why would you want to do this? I think that the main reason that this is valuable is so that you can own your own content and develop your personal brand while also improving SEO and expanding your reach.

For me personally (and i have heard this sentiment before), when you read an article and it is written on someone's personal site, you are far more likely to explore the site and learn more about them. If I read an article on Dev.to, I won't check out the other articles on their page. If you would like to read more on why owning your own content is valuable I would check out this article: Own your own content, it convinced me to start my own personal blog instead of continuing to post on Dev.to.

I think the problem with just posting on your own personal website is that nobody reads it. Unless you already have a strong audience of people who are interested in what you are reading you will most likely be writing into a black hole. I think that having your writing read by people is extremely important because you can see what resonates with people, and in my opinion it is a big motivator to continue writing. I wrote a simple article on Dev.to that got like 200 likes and that definitely inspired me to keep writing.

So how do you effectively balance using these external platforms to get your work in front of people while also owning your own content and developing your personal brand? I think the simplest and most effective way to do this is to automatically post the blogs from your personal sites onto these external sites so you don't have to think about it. This is really easily done with Github actions.

Setting Up Github Actions

The first step is to create a .github folder in your root directory. This is where we will define our workflows and actions. Inside this folder create two new folders: workflows and actions. The workflow will check if there are any new files in our posts folder, and if there are it will call our parse action defined in the actions folder. The parse action calls actions for each platform we want to post to.

Creating our workflow

There are a few things we need to do in our workflow:

Define environment variables
Find new files
Run parse action for each new file

Here is how I implemented it (if your posts are not in src/content/post you should change the path to match your specific path)

name: New Blog Post Action

on:
  push:
    branches:
      - main
    paths:
      - "src/content/post/**"

jobs:
  process-new-post:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Identify new files
        id: new-files
        run: |
          NEW_FILES=$(git diff --name-only --diff-filter=A ${{ github.event.before }} ${{ github.sha }} -- src/content/post/)
          echo "New files: $NEW_FILES"
          echo "new_files=$NEW_FILES" >> $GITHUB_OUTPUT
      - name: Process new files
        if: steps.new-files.outputs.new_files != ''
        env:
          HASHNODE_API_KEY: ${{ secrets.HASHNODE_API_KEY }}
          HASHNODE_PUBLICATION_ID: ${{ secrets.HASHNODE_PUBLICATION_ID }}
          DEVTO_API_KEY: ${{ secrets.DEVTO_API_KEY }}
          MEDIUM_API_KEY: ${{ secrets.MEDIUM_API_KEY }}
          MEDIUM_AUTHOR_ID: ${{ secrets.MEDIUM_AUTHOR_ID }}
        run: |
          echo "Debug: Entering Process new files step"
          echo "New files detected: ${{ steps.new-files.outputs.new_files }}"

          IFS=$'\n'
          for file in ${{ steps.new-files.outputs.new_files }}; do
            echo "Processing file: $file"

            node .github/actions/parse.js "$file"
          done

To make sure this works correctly we need to define these environment variables in our project under secrets. Go to your project on Github and go to settings. Then select the dropdown for secrets and variables and select actions. There you can define your secrets and access them in your actions using normal process.env.VARIABLE syntax.

Parse

Now that our action has recognized the new files we need to parse the content and metadata from the file. We do this by creating a parse.js file inside our .github/actions/ folder. Add the following code:

// .github/actions/parse.js

import { promises as fs } from "fs";
import postToDevTo from "./devto.js";
import postToHashnode from "./hashnode.js";
import postToMedium from "./medium.js";

const getFrontMatterAndBody = (markdown) => {
  const charactersBetweenGroupedHyphens = /^---([\s\S]*?)---\s*([\s\S]*)/;
  const matched = markdown.match(charactersBetweenGroupedHyphens);

  if (!matched) {
    return { frontmatter: {}, body: markdown };
  }

  const metadata = matched[1];
  const body = matched[2];

  const metadataLines = metadata.split("\n");
  const frontmatter = metadataLines.reduce((accumulator, line) => {
    const [key, ...value] = line.split(":").map((part) => part.trim());

    if (key)
      accumulator[key] = value.length > 1 ? value.join(":") : value.join("");
    return accumulator;
  }, {});

  return { frontmatter, body };
};

async function postToBlogs(filePath) {
  // Read the markdown file
  const content = await fs.readFile(filePath, "utf8");

  // Extract the front matter and body from the markdown file
  const { frontmatter, body } = getFrontMatterAndBody(content);

  await postToDevTo(frontmatter, body);
  await postToHashnode(frontmatter, body);
  await postToMedium(frontmatter, body);
}

// Get the file path from command line arguments
const filePath = process.argv[2];

if (!filePath) {
  process.stderr.write("Please provide a file path\n");
  process.exit(1);
}

postToBlogs(filePath);

Now we can define an action for each platform we want to post to. If you want to add more platforms, like posting a link to your blog on twitter or something, you can just define another action and call it in this file.

Posting to platforms

Now we just need to follow the documentation of the APIs for the platforms we want to post to. If you have set up the rest of the project correctly, the following code should work for Dev.to, Hashnode, and Medium:

// .github/actions/devto.js

export default async function postToDevTo(frontMatter, body) {
  try {
    // Prepare the request body
    const postData = JSON.stringify({
      article: {
        title: frontMatter.title,
        body_markdown: body,
        published: true,
        tags: frontMatter.title,
        canonical_url: frontMatter.canonical_url,
      },
    });

    // Prepare the request headers
    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("api-key", process.env.DEVTO_API_KEY);

    // Prepare the request options
    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: postData,
      redirect: "follow",
    };

    const response = await fetch("https://dev.to/api/articles", requestOptions);
    return response;
  } catch (error) {
    process.stderr.write(`Error in postToDevTo: ${error.message}\n`);
  }
}

// .github/actions/hashnode.js

export default async function postToHashnode(frontMatter, content) {
  const graphqlEndpoint = "https://gql.hashnode.com";
  const authToken = process.env.HASHNODE_API_KEY;

  const mutation = `
    mutation PublishPost($input: PublishPostInput!) {
      publishPost(input: $input) {
        post {
          id
          title
          slug
          url
        }
      }
    }
  `;

  const variables = {
    input: {
      publicationId: process.env.HASHNODE_PUBLICATION_ID,
      title: frontMatter.title,
      contentMarkdown: content,
      originalArticleURL: frontMatter.canonical_url,
    },
  };

  try {
    const response = await fetch(graphqlEndpoint, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: authToken,
      },
      body: JSON.stringify({
        query: mutation,
        variables: variables,
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error!: ${response.body}`);
    }

    const result = await response.json();

    if (result.errors) {
      throw new Error(`GraphQL Error: ${JSON.stringify(result.errors)}`);
    }

    const post = result.data.publishPost.post;
    return post;
  } catch (error) {
    process.stderr.write(`Error in postToHashnode: ${error.message}\n`);
  }
}

// .github/actions/medium.js

export default async function postToMedium(frontMatter, body) {
  try {
    // Prepare the request body
    const postData = JSON.stringify({
      title: frontMatter.title,
      contentFormat: "markdown",
      content: body,
      tags: frontMatter.tags,
      publishStatus: "public",
      canonicalUrl: frontMatter.canonical_url,
    });

    // Prepare the request headers
    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Authorization", `Bearer ${process.env.MEDIUM_API_KEY}`);

    // Prepare the request options
    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: postData,
      redirect: "follow",
    };

    // Make the API request using fetch
    const response = await fetch(
      `https://api.medium.com/v1/users/${process.env.MEDIUM_AUTHOR_ID}/posts`,
      requestOptions
    );
    return response;
  } catch (error) {
    process.stderr.write(`Error in postToMedium: ${error.message}\n`);
  }
}

Now when you add your new blog post to the src/content/post folder this workflow will be called, which posts to these three platforms. You can check out the source code for my personal website here, which has all of this implemented. Feel free to fork it and use it as your own if you want a base for starting your own personal site!

Creating a practice test builder with OctoAI Json mode

Isaac Dyor — Sun, 05 May 2024 21:12:42 +0000

I am currently taking calc 3 in university and I wanted to create a study tool for myself to practice. My goal was to create a tool that would give me practice questions based on my mastery of that certain topic, so I practice the things I am good at less than the topics I am struggling with. I know I could just do this manually but it seemed fun.

The plan

For my class there are a lot of practice midterms that we can use to study and they are all stored as pdfs. So the first step would be to parse the pdf so I can plug it into an LLM. Then I would need the LLM to separate the test into different topics, so it could determine which parts I am good at and which parts need work.

Once it separated the test into topics, it would need to choose a topic to ask me a question on. I will talk about how to do that more later, but the general idea is to preference topics you have previously scored low on.

Once the LLM asks you the question you solve it and input your answer. Since the LLM might output the answer in a different form than you input, instead of auto grading you it will show you the work and it's answer and you can tell it whether you got it correct or incorrect.

Once it sees how you performed on that question it will update your proficiency in that topic accordingly, and the process will restart. Now time for implementation!

Setup

Create a new folder and open it up in vscode. We need to create a virtual environment for dependency management. Run python3 -m venv .venv if you are on mac/linux or python -m venv .venv if you are on windows. Create a main.py file and restart your terminal with the new virtual environment.

Loading the pdf

We are going to use PyPDF2 to read the Pdf so run pip install PyPDF2. I have my pdf saved in the root of my project, so now I can add the following code:

reader = PyPDF2.PdfReader('midterm1.pdf')
midterm = ""
for page in reader.pages:
    text = page.extract_text()
    midterm += text

Now the practice test is saved as a string which I can plug into the LLM.

Connecting to Octo

We will be using OctoAI to host our model. First we need to get an API token. There are instructions on how to do that here. Once you have your token you can set the environment variable with this command: export OCTOAI_TOKEN=YOUR_TOKEN_HERE.

Next we have to install Octo so run the following command: pip install OctoAI.

Now we can connect to the model with the following code:

import os
from octoai.client import OctoAI

OCTOAI_TOKEN = os.getenv('OCTOAI_TOKEN')

octoai = OctoAI(api_key=OCTOAI_TOKEN)

Getting topics

We want to get a list of topics that are covered on the test. An easy way to do this is with Octo's Json mode. We can use pydantic to describe the shape we want out data to be. In our case we just want one list of topics:

from pydantic import BaseModel
from typing import List

class Test(BaseModel):
    topics: List[str]

Now we can use this schema when we query the LLM:

import json
from octoai.text_gen import ChatMessage, ChatCompletionResponseFormat

completion = octoai.text_gen.create_chat_completion(
    model="llama-2-70b-chat",
    messages=[
        ChatMessage(
            role="system",
            content="Below is an instruction that describes a task. Write a response that appropriately completes the request.",
        ),
        ChatMessage(role="user", content="I will give you a practice midterm. Please give me a list of topics covered on the midterm. Each topic should be a string the array" + midterm),
    ],
    response_format=ChatCompletionResponseFormat(
        type="json_object",
        schema=Test.model_json_schema()
    ),
)

topics = json.loads(completion.choices[0].message.content)["topics"]

Now topics holds a lists of each topic on the test. We also want to keep track of how well you are doing on each section so I am going to create a dictionary that keeps track of your scores.

scores = {key: 0 for key in topics}

Generating questions

Now that we have the topics we have to generate questions. The first step is deciding which topic we should ask a question on. We need to come up with some way to determine which topic to choose based off of the current proficiency scores.

To do this we are basically going to calculate the difference between the score and 100 and use that as a weight for our random choice. This means that if you have a proficiency score of 100 you won't get any more questions on that topic. This is how we can implement it.

import random

def get_next_topic():
    inverted_weights = [100 - score for score in scores.values()]
    return random.choices(topics, weights=inverted_weights, k=1)[0]

Now that we know which topic we are going to ask a question for we have to actually ask the question. Since we want the question, the answer, and the work for the solution we are again going to use Json mode.

Lets define the schema:

class Problem(BaseModel):
    question: str
    work: str
    answer: str

And now we are going to start a while loop so it will keep asking questions until we decide we are done studying. Inside the while loop we are going to generate the question and solution, and some other stuff I will cover later.

running = True

while running:
    topic = get_next_topic()
    completion = octoai.text_gen.create_chat_completion(
        model="llama-2-70b-chat",
        messages=[
            ChatMessage(
                role="system",
                content="Below is an instruction that describes a task. Write a response that appropriately completes the request.",
            ),
            ChatMessage(role="user", content="Please give me a question about " + topic + " it should not be taken from the midterm but it should be heavily inspired by the midterm. You should also solve the question and provide the work in the work section and the final answer in exact form in the answer section. Do not round."),
        ],
        response_format=ChatCompletionResponseFormat(
            type="json_object",
            schema=Problem.model_json_schema()
        ),
    )

    problem = completion.choices[0].message.content
    question = json.loads(problem)["question"]
    work = json.loads(problem)["work"]
    correct_answer = json.loads(problem)["answer"]

Now that we have the question and the solution, the only thing left to do is determine whether or not the answer was correct and adjust the scores accordingly.

Since its pretty hard to determine correctness programmatically (they might input the answer in a different format etc...), we are just going to ask the user if they got the answer correct.

    print("Question: " + question)
    given_answer = input("What is your answer?" + "\n")

    print("Correct Answer: " + correct_answer) 
    print("Work: " + work)

    while True:
      response = input("Did you get the answer correct? (y/n)")
      if response == "y":
          if scores[topic] < 100:
            scores[topic] += 10
          print("Your new score for " + topic + " is " + str(scores[topic]))
          break
      elif response == "n":
          if scores[topic] > 10:
              scores[topic] -= 10
          print("Your new score for " + topic + " is " + str(scores[topic]))
          break
      else:
          print("Invalid input. Please enter 'y' for yes or 'n' for no.")

    while True:
      response = input("Would you like to continue? (y/n)")
      if response == "y":
          get_next_topic()
          break
      elif response == "n":
          running = False
          break
      else:
          print("Invalid input. Please enter 'y' for yes or 'n' for no.")

If the user wants to continue it will restart the whole process with a new random topic based on the updated proficiency scores.

Conclusion

This was just a simple tool I wanted to build and thought it could be cool to incorporate AI into it. It has a long way to go before it will help me ace my next test, but I like this direction of AI helping me learn about complex topics and I want to keep advancing it.

A couple things I would like to add would be a better way of keeping track of proficiency. Right now I just increment or decrement by a fixed amount and it might be cool to have some more complicated algorithm to determine proficiency. I also think it would be interesting if I could take a picture of my work and it would analyze the correctness. That way if you made one small mistake it wouldn't penalize you too much, similar to the way the real tests are graded.

Also this is all just in the terminal. It would be neat to have some sort of UI to interact with it. Also all of the variables are just stored on the machine so it wouldn't be able to remember your proficiency from the last session, so hooking it up to a database might be cool.

Entire code

import json
import random
import PyPDF2
import os
from octoai.client import OctoAI

from pydantic import BaseModel
from typing import List

from octoai.text_gen import ChatMessage, ChatCompletionResponseFormat

reader = PyPDF2.PdfReader('midterm1.pdf')
midterm = ""
for page in reader.pages:
    text = page.extract_text()
    midterm += text

OCTOAI_TOKEN = os.getenv('OCTOAI_TOKEN')

octoai = OctoAI(api_key=OCTOAI_TOKEN)

class Test(BaseModel):
    topics: List[str]

completion = octoai.text_gen.create_chat_completion(
    model="llama-2-70b-chat",
    messages=[
        ChatMessage(
            role="system",
            content="Below is an instruction that describes a task. Write a response that appropriately completes the request.",
        ),
        ChatMessage(role="user", content="I will give you a practice midterm. Please give me a list of topics covered on the midterm. Each topic should be a string the array" + midterm),
    ],
    response_format=ChatCompletionResponseFormat(
        type="json_object",
        schema=Test.model_json_schema()
    ),
)

topics = json.loads(completion.choices[0].message.content)["topics"]

scores = {key: 0 for key in topics}

def get_next_topic():
    inverted_weights = [100 - score for score in scores.values()]
    return random.choices(topics, weights=inverted_weights, k=1)[0]

class Problem(BaseModel):
    question: str
    work: str
    answer: str

running = True

while running:
    topic = get_next_topic()
    completion = octoai.text_gen.create_chat_completion(
        model="llama-2-70b-chat",
        messages=[
            ChatMessage(
                role="system",
                content="Below is an instruction that describes a task. Write a response that appropriately completes the request.",
            ),
            ChatMessage(role="user", content="Please give me a question about " + topic + " it should not be taken from the midterm but it should be heavily inspired by the midterm. You should also solve the question and provide the work in the work section and the final answer in exact form in the answer section. Do not round."),
        ],
        response_format=ChatCompletionResponseFormat(
            type="json_object",
            schema=Problem.model_json_schema()
        ),
    )

    problem = completion.choices[0].message.content
    question = json.loads(problem)["question"]
    work = json.loads(problem)["work"]
    correct_answer = json.loads(problem)["answer"]

    print("Question: " + question)
    given_answer = input("What is your answer?" + "\n")

    print("Correct Answer: " + correct_answer) 
    print("Work: " + work)

    while True:
      response = input("Did you get the answer correct? (y/n)")
      if response == "y":
          if scores[topic] < 100:
            scores[topic] += 10
          print("Your new score for " + topic + " is " + str(scores[topic]))
          break
      elif response == "n":
          if scores[topic] > 10:
              scores[topic] -= 10
          print("Your new score for " + topic + " is " + str(scores[topic]))
          break
      else:
          print("Invalid input. Please enter 'y' for yes or 'n' for no.")

    while True:
      response = input("Would you like to continue? (y/n)")
      if response == "y":
          get_next_topic()
          break
      elif response == "n":
          running = False
          break
      else:
          print("Invalid input. Please enter 'y' for yes or 'n' for no.")

T3 stack with app router and supabase

Isaac Dyor — Sat, 06 Jan 2024 00:12:18 +0000

Introduction

I am writing this blog post to document the creation of a new project of mine so I can remember specific things I did and hopefully make development quicker in the future. I also hope other people might find it useful.

I am building this app with inspiration from Taxonomy and Acme corp so a lot of the design comes from there.

Why this stack? I have never used this exact stack before but I have used the t3 stack with Planetscale and Clerk before and really enjoyed it. I did not find a great solution for realtime, so I thought that I could use Supabase to replace Planetscale and Clerk and add realtime and storage. I also watched this video and this video so it seems like using trpc could be an interesting way to fetch data if I want interactivity.

This blog is kind of like a case a study to see if I enjoy working with this stack. Let's get started!

Creating T3 app

Run npm create t3-app@latest to create a new t3 app. I selected the following options:

Typescript: yes
Tailwind: yes
tRPC: yes
Authentication: none
Orm: prisma
App router: yes

Run npm run dev to start your local server. You are probably getting errors about an invalid prisma.post.findMany invocation because not everything is set up yet. For now we are just going to completely wipe the homepage so its just:

export default async function Home() {
  return <p>hello world</p>;
}

Also delete the file posts.ts file in src/server/api/routers. We will define our own routers later.

Deploying our app

We should be deploying early and deploying often, so even though we don't really have any content, lets deploy our app to vercel.

The first thing we have to do is add the correct environment variables. If you open the env.mjs file you will see the schema for environment variables. The point of this file is to validate your environment variables to make sure you don't try to use an environment variable you don't actually have access to.

As you can see, the schema expects you to have a database url so lets include that. I am using supabase so first create a new supabse project. In the supabase dashboard for your project go to settings and in the database section you will find connection string.

Select uri and copy paste that into your .env file. It should look like this:

// .env
DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.lbcubcyvjdzufnvuynno.supabase.co:5432/postgres"

Now that you have your environment variables set up we can deploy to vercel. First create a new github repository and push your code. Then go to vercel and press add new and import the repository you just created. Add the database url as an environment variable and press deploy.

Setting up shadcn

Run npx shadcn-ui@latest init to start the shadcn initialization process. I selected the following options:

Typescript: yes
Style: default
Base color: slate
Global css file: src/styles/globals.css
Css variables: yes
Custom prefix: blank
Tailwind config: tailwind.config.ts
Component import alias: @/components
Utils import alias: @/lib/utils
React server components: yes
Write to components.json: yes

Now run npm install next-themes to install next themes. Add a component called theme-provider.tsx to your components folder and include the following code:

// components/theme-provider.tsx

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

Once you have your provider setup, you want to add it to the layout.tsx so it is implemented on the entire app. Wrap the {children} with the Theme provider like this:

// app/layout.tsx
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider cookies={cookies().toString()}>
          <ThemeProvider
            attribute="class"
            defaultTheme="dark"
            enableSystem
            disableTransitionOnChange
          >
            {children}
          </ThemeProvider>
        </TRPCReactProvider>
      </body>
    </html>
  );

Now go to the shadcn themes page. And select the theme you want to use and press copy code. Then add that copied code to your globals.css so it looks like this:

// styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Navbar

We will be building a navbar that works for web and mobile, and on mobile we need a hamburger menu that can be opened and closed. For the icons we will be using heroicons, so run npm install @heroicons/react to install it. We also need to install the button component from shadcn so run npx shadcn-ui@latest add button to install it.

For now we will keep the navbar basic, but in the future we can check to see if the user is logged in and render different content based on the user's status.

Create a new file in components/navbar/Navbar.tsx. Add the following code to the file: (Note that since we are going to be using state to open and close the hamburger menu on mobile, we need to make it a client component).

// components/navbar/Navbar.tsx
"use client";
import Link from "next/link";
import React, { useState } from "react";
import { XMarkIcon, Bars3Icon } from "@heroicons/react/24/solid";
import { Button } from "../ui/button";

const routes: { title: string; href: string }[] = [
  { title: "Features", href: "#features" },
  { title: "Resources", href: "#resources" },
  { title: "Pricing", href: "#pricing" },
];

const Navbar: React.FC = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  return (
    <div className="flex h-16 items-center justify-between px-6 lg:px-14">
      <div className="flex items-center">
        <Link href={"/"} className="shrink-0">
          <h1 className="text-accent-foreground text-2xl font-bold">devlink</h1>
        </Link>
        <div className="bg-background hidden w-full justify-end gap-1 px-4 py-2 sm:flex">
          {routes.map((route, index) => (
            <Link
              key={index}
              href={route.href}
              className={`hover:text-accent-foreground text-muted-foreground inline-flex h-10 w-full items-center px-4 py-2 text-sm transition-colors sm:w-auto`}
            >
              {route.title}
            </Link>
          ))}
        </div>
      </div>

      <div className="hidden items-center gap-2 sm:flex">
        <Link href={"/login"} className="w-full sm:w-auto">
          <Button variant="secondary" size="sm" className="w-full">
            Log In
          </Button>
        </Link>
        <Link href="/signup" className="w-full sm:w-auto">
          <Button variant="default" size="sm" className="w-full">
            Sign Up
          </Button>
        </Link>
      </div>

      {menuOpen && <MobileMenu toggleMenu={toggleMenu} />}

      <button onClick={toggleMenu} className="sm:hidden">
        {menuOpen ? (
          <XMarkIcon className="h-7 w-7" />
        ) : (
          <Bars3Icon className="h-7 w-7" />
        )}
      </button>
    </div>
  );
};

const MobileMenu: React.FC<{ toggleMenu: () => void }> = ({ toggleMenu }) => {
  return (
    <div className="absolute right-0 top-16 flex h-[calc(100vh-64px)] w-full flex-col">
      <div className="bg-background  flex w-full grow flex-col gap-1 px-4 pb-2 sm:hidden">
        {routes.map((route, index) => (
          <Link
            key={index}
            href={route.href}
            onClick={toggleMenu}
            className={`hover:text-accent-foreground text-muted-foreground inline-flex h-10 w-full items-center text-sm transition-colors sm:w-auto`}
          >
            {route.title}
          </Link>
        ))}
        <Link href={"/login"} className="w-full sm:w-auto">
          <Button
            onClick={toggleMenu}
            variant="secondary"
            size="sm"
            className="w-full"
          >
            Log In
          </Button>
        </Link>
        <Link href="/signup" className="w-full sm:w-auto">
          <Button
            onClick={toggleMenu}
            variant="default"
            size="sm"
            className="w-full"
          >
            Sign Up
          </Button>
        </Link>
      </div>
      <div className="bg-background/60 h-screen w-full sm:hidden" />
    </div>
  );
};

export default Navbar;

Now that we have our Navbar component we need to add it to the layout.tsx to apply it to all of our pages:

// app/layout.tsx
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`font-sans ${inter.variable}`}>
        <TRPCReactProvider cookies={cookies().toString()}>
          <ThemeProvider
            attribute="class"
            defaultTheme="dark"
            enableSystem
            disableTransitionOnChange
          >
            <Navbar />
            {children}
          </ThemeProvider>
        </TRPCReactProvider>
      </body>
    </html>
  );

Adding supabase auth

Run npm install @supabase/ssr @supabase/supabase-js to install the supabase client and supabase ssr.

Now we need to configure our environment variables for authentication. In api settings section of the supabase dashboard you will find your project url and your anon key. Add both of these to your .env file so it looks like this:

// .env
DATABASE_URL=url
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

Now that we have added new enviornment variables we need to make sure our schema in env.js is up to date. Navigate to the env.js file and inside the client section add these two new environment variables:

// env.js
  client: {
    NEXT_PUBLIC_SUPABASE_URL: z.string(),
    NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string(),
  },

You also have to add them to the runtime env section, so it should now look like this:

  runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  },

Supabase client

Now we are going to create some utility functions to create a supabase instance on the client, server, and in middleware. Create a new folder in the src directory called utils and add a new folder inside called supabase. Add a file called middleware.ts and add the following code:

// utils/supabase/middleware.ts
import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { type NextRequest, NextResponse } from "next/server";
import { env } from "@/env";

export const createClient = (request: NextRequest) => {
  // Create an unmodified response
  let response = NextResponse.next({
    request: {
      headers: request.headers,
    },
  });

  const supabase = createServerClient(
    env.NEXT_PUBLIC_SUPABASE_URL,
    env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          // If the cookie is updated, update the cookies for the request and response
          request.cookies.set({
            name,
            value,
            ...options,
          });
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          });
          response.cookies.set({
            name,
            value,
            ...options,
          });
        },
        remove(name: string, options: CookieOptions) {
          // If the cookie is removed, update the cookies for the request and response
          request.cookies.set({
            name,
            value: "",
            ...options,
          });
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          });
          response.cookies.set({
            name,
            value: "",
            ...options,
          });
        },
      },
    },
  );

  return { supabase, response };
};

Now create a new file in the same directory called client.ts and add the following code:

// utils/supabase/client.ts
import { createBrowserClient } from "@supabase/ssr";
import { env } from "@/env";

export const createClient = () =>
  createBrowserClient(
    env.NEXT_PUBLIC_SUPABASE_URL,
    env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  );

And finally add a file called server.ts and add the following code:

// utils/supabase/server.ts
import { env } from "@/env";
import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { cookies } from "next/headers";

export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
  return createServerClient(
    env.NEXT_PUBLIC_SUPABASE_URL,
    env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options });
          } catch (error) {
            // The `set` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: "", ...options });
          } catch (error) {
            // The `delete` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    },
  );
};

Now whenever you need a new instance of supabase you can import it already preconfigured with your environment variables.

Middleware

We need to add a middleware to refresh the session if it is expired. This is required for server components. This is also where we can define which routes are protected or unprotected using the matcher array. In the src directory add a new file called middleware.ts and add the following code:

// middleware.ts
import { type NextRequest } from "next/server";
import { createClient } from "@/utils/supabase/middleware";

export async function middleware(request: NextRequest) {
  const { supabase, response } = createClient(request);

  await supabase.auth.getSession();

  return response;
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

Callback route

If you send someone a confirmation email after they sign up you want them to be automatically signed in once they press the link. The way this is done is through a code exchange. We can set this up through a callback route. Create a new file at app/(auth)/auth/callback/route.ts and add the following code:

// app/(auth)/auth/callback/route.ts
import { createClient } from "@/utils/supabase/server";
import { NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function GET(request: Request) {
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get("code");

  if (code) {
    const cookieStore = cookies();
    const supabase = createClient(cookieStore);
    await supabase.auth.exchangeCodeForSession(code);
  }

  // URL to redirect to after sign in process completes
  return NextResponse.redirect(requestUrl.origin);
}

Authentication

Now we need a way for the user to login and logout. To do this we can create a new folder called (auth) in the app directory and add two new pages, a login/page.tsx and a signup/page.tsx.

Before we add any code to these files we need to import the input, and form components from shadcn. The form component automatically uses react-hook-form so we can easily implement form validation. We will also need to install react-icons because hero-icons doesn't have github/google icons. (If you only want to use react-icons that is fine too, I just like the consistency of heroicons).

Run npx shadcn-ui@latest add form to install the form and npx shadcn-ui@latest add input for input. Run npm install react-icons --save to install react-icons.

Fixing navbar

There is also a little more configuration we need to do to make everything look good. I don't want the navbar showing on the auth pages because I think it looks a lot cleaner. (It's a little complicated for a small nitpick so you can skip this if you want). The best way I know how to do this is to make a (main) folder in the app directory so I can add the navbar in the layout.tsx of that folder, rather than adding the navbar to the entire project.

So first remove the Navbar from your main layout.tsx. Next create a new (main) folder and move the page.tsx into that folder. Create a new layout.tsx file in the new folder and include the following code:

// app/(main)/layout.tsx
import React from "react";
import Navbar from "@/components/navbar/Navbar";

const RootLayout: React.FC<{ children: React.ReactNode }> = async ({
  children,
}) => {
  return (
    <>
      <Navbar />
      {children}
    </>
  );
};

export default RootLayout;

Now the navbar will be applied to all of the files in the main folder, which will be everything other than auth. Although I don't want the entire navbar showing on the auth pages I still want the main logo to show so the user can easily navigate back to the homepage. I also want to redirect the user away from the auth pages if they are already signed in (this may be better as a middleware but this was easy). To do that create a layout.tsx in the (auth) folder and add the following code:

// app/(auth)/layout.tsx
import React from "react";
import { createClient } from "@/utils/supabase/server";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import Link from "next/link";

const RootLayout: React.FC<{ children: React.ReactNode }> = async ({
  children,
}) => {
  const supabase = createClient(cookies());

  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (user) {
    redirect("/");
  }
  return (
    <>
      <Link href={"/"} className="absolute left-6 top-4 shrink-0 lg:left-14">
        <h1 className="text-accent-foreground text-2xl font-bold">devlink</h1>
      </Link>
      {children}
    </>
  );
};

export default RootLayout;

Okay now everything should be working properly. Your app folder structure should look like this now:

.
└── app/
    ├── (auth)/
    │   ├── auth/
    │   │   └── callback/
    │   │       └── route.ts
    │   ├── signup/
    │   │   └── page.tsx
    │   ├── login/
    │   │   └── page.tsx
    │   └── layout.tsx
    ├── (main)/
    │   ├── page.tsx
    │   └── layout.tsx
    ├── api/
    │   └── trpc/
    │       └── [trpc]/
    │           └── route.ts
    └── layout.tsx

Signup page
Now that we have completed that tangent we need to add the signup page. In the signup page add the following code: (It doesn't have any functionality yet, we will add that later. This is just the markup).

// app/(auth)/signup/page.tsx
"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";

import { Input } from "@/components/ui/input";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import React from "react";

import { FaGithub } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";

const registerSchema = z.object({
  email: z.string().email(),
  password: z.string().min(6).max(100),
});

export type SignupInput = z.infer<typeof registerSchema>;

export default function Login() {
  const form = useForm<SignupInput>({
    resolver: zodResolver(registerSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  const onSubmit = async (data: SignupInput) => {
    console.log(data);
  };

  return (
    <div className="flex">
      <div className="bg-secondary/15 hidden h-screen grow lg:block" />
      <div className="bg-background h-screen w-full lg:w-1/2">
        <div className="flex h-full items-center justify-center">
          <div className="w-full max-w-md p-8">
            <h1 className="mb-4 text-2xl font-semibold">Sign up</h1>
            <Form {...form}>
              <form
                onSubmit={form.handleSubmit(onSubmit)}
                className="animate-in text-muted-foreground flex w-full flex-1 flex-col justify-center gap-2"
              >
                <FormField
                  control={form.control}
                  name="email"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-muted-foreground">
                        Email Address
                      </FormLabel>
                      <FormControl>
                        <Input
                          placeholder="Your email address"
                          {...field}
                          autoComplete="on"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-muted-foreground">
                        Password
                      </FormLabel>
                      <FormControl>
                        <Input
                          placeholder="Your password"
                          type="password"
                          autoComplete="on"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <Button variant="default" className="my-3 w-full" type="submit">
                  Sign up
                </Button>
              </form>
            </Form>
            <div className="flex items-center gap-2 py-4">
              <hr className="w-full" />
              <p className="text-muted-foreground text-xs">OR</p>
              <hr className="w-full" />
            </div>
            <Button
              variant="outline"
              className="text-muted-foreground mb-2 w-full font-normal"
            >
              <div className="flex items-center gap-2">
                <FaGithub className="h-5 w-5" />
                <p>Sign in with GitHub</p>
              </div>
            </Button>
            <Button
              variant="outline"
              className="text-muted-foreground mb-2 w-full font-normal"
            >
              <div className="flex items-center gap-2">
                <FcGoogle className="h-5 w-5" />
                <p>Sign in with Google</p>
              </div>
            </Button>
            <p className="text-muted-foreground py-4 text-center text-sm underline">
              <Link href="/signup">Already have an account? Sign in</Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Signup functionality

When the user submits the form it should call a server action where we can call supabase.signup. Lets build that server action.

In the (auth) folder lets add a new file called actions.ts. This is where we will define the signup, login, and logout functions. Inside the actions file add the following code:

// app/(auth)/actions.ts
"use server";

import { createClient } from "@/utils/supabase/server";
import { cookies, headers } from "next/headers";
import type { SignupInput } from "./signup/page";

const supabase = createClient(cookies());
const origin = headers().get("origin");

export const signUp = async (data: SignupInput) => {
  "use server";

  const { error } = await supabase.auth.signUp({
    email: data.email,
    password: data.password,
    options: {
      emailRedirectTo: `${origin}/auth/callback`,
    },
  });

  if (error) {
    return {
      error: error.message,
    };
  }
};

And now we need to call this function on submit of the signup page. If there is an error we want to render the error so the user knows, and if the confirmation email has been successfully sent we also want to let the user know. To do this we are going to use state.

In the top of your signup component add the following code:

// app/(auth)/signup.tsx

...

const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);

const onSubmit = async (data: SignupInput) => {
  setSuccess("Check your email for further instructions");
  const result = await signUp(data);
  if (result?.error) {
    setSuccess(null);
    setError(result.error);
  }
};

...

Now we need to conditionally render the error and success messages. Add the following code below the signup button:

// app/(auth)/signup.tsx

...

{success && (
  <div className="bg-secondary/50 border-border mb-3 mt-1 rounded-md border p-3">
    <p className="text-muted-foreground text-center text-sm font-medium">
      {success}
    </p>
  </div>
)}
{error && (
  <div className="bg-destructive/10 border-destructive mb-3 mt-1 rounded-md border p-3">
    <p className="text-destructive text-center text-sm font-medium">
      {error}
    </p>
  </div>
)}

...

Now when you press signup you should see a message saying check your email. If you check the auth tab of the Supabase dashboard you should that there is a new user pending verification. Once you go to your email and press the link it should automatically sign you in.

Logout
Now once the user has signed up they need to be able to logout. For now lets just add a button on the home page to logout, but later we can put it in a profile menu. In the app/(main)/page.tsx file add the following code:

// app/(main)/page.tsx
import { createClient } from "@/utils/supabase/server";
import Link from "next/link";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

export default async function AuthButton() {
  const supabase = createClient(cookies());

  const {
    data: { user },
  } = await supabase.auth.getUser();

  const signOut = async () => {
    "use server";

    const supabase = createClient(cookies());
    await supabase.auth.signOut();
    return redirect("/login");
  };

  return user ? (
    <div className="flex items-center gap-4">
      Hey, {user.email}!
      <form action={signOut}>
        <button className="bg-btn-background hover:bg-btn-background-hover rounded-md px-4 py-2 no-underline">
          Logout
        </button>
      </form>
    </div>
  ) : (
    <Link
      href="/login"
      className="bg-btn-background hover:bg-btn-background-hover flex rounded-md px-3 py-2 no-underline"
    >
      Login
    </Link>
  );
}

When you press the logout button it should redirect you to /login which doesn't exist, but when you navigate back to the home page you will see that you are not logged in. Now lets add the login page.

Login
Although this process will be quite similar to signup I did not create a reusable component because in my opinion it complicates things. (My keeping the pages seperate I can easily add things like password confirmation to the signup page without messing with the login page. If you want to make it a component feel free).

In the app/(auth)/login/page.tsx file add the following code:

// app/(auth)/login/page.tsx

"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";

import { Input } from "@/components/ui/input";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import React, { useState } from "react";

import { FaGithub } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";
import { signIn, signUp } from "../actions";

const registerSchema = z.object({
  email: z.string().email(),
  password: z.string().min(6).max(100),
});

export type LoginInput = z.infer<typeof registerSchema>;

export default function Login() {
  const form = useForm<LoginInput>({
    resolver: zodResolver(registerSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  const [error, setError] = useState<string | null>(null);

  const onSubmit = async (data: LoginInput) => {
    const result = await signIn(data);
    if (result?.error) {
      setError(result.error);
    }
  };

  return (
    <div className="flex">
      <div className="bg-secondary/15 hidden h-screen grow lg:block" />
      <div className="bg-background h-screen w-full lg:w-1/2">
        <div className="flex h-full items-center justify-center">
          <div className="w-full max-w-md p-8">
            <h1 className="mb-4 text-2xl font-semibold">Sign in</h1>
            <Form {...form}>
              <form
                onSubmit={form.handleSubmit(onSubmit)}
                className="animate-in text-muted-foreground flex w-full flex-1 flex-col justify-center gap-2"
              >
                <FormField
                  control={form.control}
                  name="email"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-muted-foreground">
                        Email Address
                      </FormLabel>
                      <FormControl>
                        <Input
                          placeholder="Your email address"
                          {...field}
                          autoComplete="on"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="text-muted-foreground">
                        Password
                      </FormLabel>
                      <FormControl>
                        <Input
                          placeholder="Your password"
                          type="password"
                          autoComplete="on"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <Button variant="default" className="my-3 w-full" type="submit">
                  Sign in
                </Button>
                {error && (
                  <div className="bg-destructive/10 border-destructive mb-3 mt-1 rounded-md border p-3">
                    <p className="text-destructive text-center text-sm font-medium">
                      {error}
                    </p>
                  </div>
                )}
              </form>
            </Form>
            <div className="flex items-center gap-2 py-4">
              <hr className="w-full" />
              <p className="text-muted-foreground text-xs">OR</p>
              <hr className="w-full" />
            </div>
            <Button
              variant="outline"
              className="text-muted-foreground mb-2 w-full font-normal"
            >
              <div className="flex items-center gap-2">
                <FaGithub className="h-5 w-5" />
                <p>Sign in with GitHub</p>
              </div>
            </Button>
            <Button
              variant="outline"
              className="text-muted-foreground mb-2 w-full font-normal"
            >
              <div className="flex items-center gap-2">
                <FcGoogle className="h-5 w-5" />
                <p>Sign in with Google</p>
              </div>
            </Button>
            <p className="text-muted-foreground py-4 text-center text-sm underline">
              <Link href="/signup">Don&apos;t have an account? Sign up</Link>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

We have not defined the signIn action yet so let's do that. In the app/(auth)/actions.ts file add the following function below the signUp function:

app/(auth)/actions.ts

...
export const signIn = async (data: LoginInput) => {
  "use server";

  const { error } = await supabase.auth.signInWithPassword({
    email: data.email,
    password: data.password,
  });
  if (error) {
    return {
      error: error.message,
    };
  }
};
...

Now if you are logged out you can navigate to the /login route and you should be able to login.

OAuth
The final part of supabase auth we need to implement is signing in with OAuth. Right now we have some buttons for this that don't do anything so lets change that.

The first thing we need to do is set up the providers in the supabase dashboard. To do this we need to get the client id and client secret for whatever providers we are using. I am using google and github. Follow the google oauth documentation and the github oauth documentation to get your credentials.

Once you have your credentials go to the providers section of the auth section of the supabase dashboard. Enable the providers you want to use and add your credentials. Make sure that you add the callback url as an approved redirect url for all of the providers you choose.

In the components folder create a new file at auth/OauthButton.tsx and add the following code:

// components/auth/OauthButton.tsx

"use client";

import { Button } from "@/components/ui/button";
import { redirect, usePathname } from "next/navigation";
import { FcGoogle } from "react-icons/fc";
import React from "react";
import { Provider } from "@supabase/supabase-js";
import { FaGithub } from "react-icons/fa";
import { createClient } from "@/utils/supabase/client";

const OauthButton: React.FC<{ provider: Provider }> = ({ provider }) => {
  const pathname = usePathname();
  const supabase = createClient();

  const handleLogin = async () => {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: provider,
      options: {
        redirectTo: `${location.origin}/auth/callback?next=${pathname}`,
      },
    });

    if (error) {
      return redirect("/login?message=Could not authenticate user");
    }
  };

  if (provider === "google") {
    return (
      <Button
        variant="outline"
        className="text-muted-foreground mb-2 w-full font-normal"
        onClick={() => handleLogin().catch(console.error)}
      >
        <div className="flex items-center gap-2">
          <FcGoogle className="h-5 w-5" />
          <p>Sign in with Google</p>
        </div>
      </Button>
    );
  }

  if (provider === "github") {
    return (
      <Button
        variant="outline"
        className="text-muted-foreground mb-2 w-full font-normal"
        onClick={handleLogin}
      >
        <div className="flex items-center gap-2">
          <FaGithub className="h-5 w-5" />
          <p>Sign in with GitHub</p>
        </div>
      </Button>
    );
  }
};

export default OauthButton;

Now we need to replace our old Oauth buttons with this new component. In both signup/page.tsx and login/page.tsx replace the old buttons with the following code:


...
<OauthButton provider={"google"} />
<OauthButton provider={"github"} />
...

If you set up everything correctly you should now be able to login using oauth.

Adding auth to navbar

Now that we have Supabase auth setup we should only render the signup and login buttons when there is no current session, and instead render a profile button if the user is logged in.

To do this we are going to create an auth component that handles all this logic for us, and we can import it into our navbar.

There are a few interesting things to note here. If we are going to be showing the current users data that means we need to query the current user. It is possible to query from the client side but generally it is better to query from a server component and pass the data as a prop to a client component. However, you cannot import a server component into a client component and since the navbar is a client component that would mean we could not import our AuthComponent if we made it a server component.

The way next.js recommends you handle this is through passing the component as a prop.

The first step of this process is to create our server component at components/navbar/AuthComponent.tsx and add the following code:

// components/navbar/AuthComponent.tsx

import { createClient } from "@/utils/supabase/server";
import { cookies } from "next/headers";
import Link from "next/link";
import { Button } from "../ui/button";
import ProfileButton from "./ProfileButton";

const AuthComponent = async () => {
  const supabase = createClient(cookies());

  const {
    data: { user },
  } = await supabase.auth.getUser();

  return user ? (
    <ProfileButton user={user} />
  ) : (
    <div className="hidden items-center gap-2 sm:flex">
      <Link href={"/login"} className="w-full sm:w-auto">
        <Button variant="secondary" size="sm" className="w-full">
          Log In
        </Button>
      </Link>
      <Link href="/signup" className="w-full sm:w-auto">
        <Button variant="default" size="sm" className="w-full">
          Sign Up
        </Button>
      </Link>
    </div>
  );
};

export default AuthComponent;

For the profile button I want to be able to open and close a profile modal which means I need state which means it needs to be a client component. Create a new component at components/navbar/ProfileButton.tsx and add the following code:

// components/navbar/ProfileButton.tsx

"use client";

import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { User } from "@supabase/supabase-js";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { createClient } from "@/utils/supabase/client";

const ProfileButton: React.FC<{ user: User }> = ({ user }) => {
  const [menuOpen, setMenuOpen] = useState(false);

  const router = useRouter();
  const supabase = createClient();

  const signOut = async () => {
    await supabase.auth.signOut();
    router.refresh();
  };

  const ref = React.useRef<HTMLDivElement>(null);

  // close the modal if we click outside of it
  useEffect(() => {
    const handleOutsideClick = (event: MouseEvent) => {
      if (!ref.current?.contains(event.target as Node)) {
        setMenuOpen(false);
      }
    };

    document.addEventListener("mousedown", handleOutsideClick);

    return () => {
      document.removeEventListener("mousedown", handleOutsideClick);
    };
  }, [ref]);

  if (!user) return null;
  return (
    <div ref={ref} className="hidden sm:block">
      <Avatar
        className="hover:cursor-pointer"
        onClick={() => setMenuOpen(!menuOpen)}
      >
        <AvatarImage src="https://wallpapers.com/images/high/funny-profile-picture-7k1legjukiz1lju7.webp" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      {menuOpen && (
        <div className="bg-secondary absolute right-5 top-16 z-50 flex w-72 flex-col rounded-lg bg-opacity-80 p-4">
          <div className="flex items-center">
            <div className="pr-4">
              <Avatar onClick={() => setMenuOpen(!menuOpen)}>
                <AvatarImage src="https://wallpapers.com/images/high/funny-profile-picture-7k1legjukiz1lju7.webp" />
                <AvatarFallback>CN</AvatarFallback>
              </Avatar>
            </div>
            <div className="flex flex-col">
              <p className="text-xl">Isaac Dyor</p>
              <p className="text-md text-muted-foreground">{user?.email}</p>
            </div>
          </div>
          <hr className="my-2 border-t-2 border-slate-600" />
          <p className="text-muted-foreground py-2 text-lg">
            <Link
              onClick={() => setMenuOpen(false)}
              className="hover:text-muted-foreground/70"
              href="/profile"
            >
              Profile
            </Link>
          </p>
          <p className="text-muted-foreground py-2 text-lg">
            <Link
              onClick={() => setMenuOpen(false)}
              className="hover:text-muted-foreground/70"
              href="/settings"
            >
              Settings
            </Link>
          </p>

          <div className="text-muted-foreground py-2 text-lg">
            <button
              className="hover:text-muted-foreground/70"
              onClick={() =>
                signOut().then(() => {
                  setMenuOpen(false);
                  router.refresh();
                })
              }
            >
              Sign out
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default ProfileButton;

Now that we have our Auth component set up we need to pass it as a prop to our navbar. Replace the login and signup links with children and we will pass the auth component in from the layout page. Your navbar should now contain the following code:

// components/navbar/Navbar.tsx
"use client";
import Link from "next/link";
import React, { useState } from "react";
import { XMarkIcon, Bars3Icon } from "@heroicons/react/24/solid";

const routes: { title: string; href: string }[] = [
  { title: "Features", href: "#features" },
  { title: "Resources", href: "#resources" },
  { title: "Pricing", href: "#pricing" },
];

const Navbar: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [menuOpen, setMenuOpen] = useState(false);

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  return (
    <div className="flex h-16 items-center justify-between px-6 lg:px-14">
      <div className="flex items-center">
        <Link href={"/"} className="shrink-0">
          <h1 className="text-accent-foreground text-2xl font-bold">devlink</h1>
        </Link>
        <div className="bg-background hidden w-full justify-end gap-1 px-4 py-2 sm:flex">
          {routes.map((route, index) => (
            <Link
              key={index}
              href={route.href}
              className={`hover:text-accent-foreground text-muted-foreground inline-flex h-10 w-full items-center px-4 py-2 text-sm transition-colors sm:w-auto`}
            >
              {route.title}
            </Link>
          ))}
        </div>
      </div>

      {children}

      {menuOpen && <MobileMenu toggleMenu=

      <button onClick={toggleMenu} className="sm:hidden">
        {menuOpen ? (
          <XMarkIcon className="h-7 w-7" />
        ) : (
          <Bars3Icon className="h-7 w-7" />
        )}
      </button>
    </div>
  );
};

const MobileMenu: React.FC<{
  toggleMenu: () => void;
  children: React.ReactNode;
}> = ({ toggleMenu, children }) => {
  return (
    <div className="absolute right-0 top-16 flex h-[calc(100vh-64px)] w-full flex-col">
      <div className="bg-background  flex w-full grow flex-col gap-1 px-4 pb-2 sm:hidden">
        {routes.map((route, index) => (
          <Link
            key={index}
            href={route.href}
            onClick={toggleMenu}
            className={`hover:text-accent-foreground text-muted-foreground inline-flex h-10 w-full items-center text-sm transition-colors sm:w-auto`}
          >
            {route.title}
          </Link>
        ))}
        {children}
      </div>
      <div className="bg-background/60 h-screen w-full sm:hidden" />
    </div>
  );
};

export default Navbar;

Now in the app/(main)/layout.tsx replace the <Navbar /> with:

// app/(main)/layout.tsx

...
<Navbar>
  <AuthComponent />
</Navbar>
...

And now when you are logged in you should see a profile button and when you click on it it should show your email.

We are now finished with auth! Now it is time to start making mutations with trpc.

Mutations with trpc

Prisma

I want to make it so once users login they can create a profile to add more information. To do this we need to create a new profile table in our database. To do this we need to update our prisma schema. In the schema.prisma file we need to set the provider to postgresql since we are using supabase. We also need to add whatever columns we want for our table. Mine looks like this:

// prisma/prisma.schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

enum RoleType {
  FRONTEND
  BACKEND
  FULLSTACK
  DESIGN
}

model Profile {
  id        String   @id
  createdAt DateTime @default(now()) @map("created_at")
  email     String   @unique
  firstName String   
  lastName  String   
  role      RoleType
  skills    String[]
  bio       String
  github    String?
  linkedin  String?
  website   String?
}

To push these changes to your database run npx prisma db push. Now when you go to the table editor in the supabase dashboard you should see a new profile table. Prisma also has its own user interface called prisma studio. To open that up run npx prisma studio.

Form

Now we need a way for the user to create a new profile once they login. Before we build the form we need to create a zod schema to ensure the user's inputs are valid. To do this we need to add a new folder in the lib directory called validators. Inside validators add a new file called newProfile.ts and add the following code:

// lib/validators/newProfile.ts

import { z } from "zod";
import { RoleType } from "@prisma/client";

export const newProfileSchema = z.object({
  firstName: z.string().min(1),
  lastName: z.string().min(1),
  role: z.nativeEnum(RoleType),
  skills: z
    .object({ name: z.string().min(1) })
    .array()
    .min(1),
  bio: z.string().min(100).max(500),
  github: z.string(),
  linkedin: z.string(),
  website: z.union([z.literal(""), z.string().trim().url()]),
});

For the form we are going to be using a couple new shadcn components so lets import those. Run the following commands:

npx shadcn-ui@latest add card
npx shadcn-ui@latest add select
npx shadcn-ui@latest add textarea

Now create a page at app/(main)/profile/new/page.tsx and add the following code:

// app/(main)/profile/new/page.tsx

"use client";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";

import { Input } from "@/components/ui/input";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

import { Textarea } from "@/components/ui/textarea";

import { useFieldArray, useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { newProfileSchema } from "@/lib/validators/newProfile";

import { TrashIcon } from "@heroicons/react/24/outline";
import { useRouter } from "next/navigation";

export type NewProfileInput = z.infer<typeof newProfileSchema>;

export default function NewProfileForm() {
  const form = useForm<NewProfileInput>({
    resolver: zodResolver(newProfileSchema),
    defaultValues: {
      firstName: "",
      lastName: "",
      role: undefined,
      skills: [{ name: "" }],
      bio: "",
      github: "",
      linkedin: "",
      website: "",
    },
  });

  const { fields, append, remove } = useFieldArray({
    control: form.control,
    name: "skills",
  });

  const watchSkills = form.watch("skills");

  const router = useRouter();

  const onSubmit = async (data: NewProfileInput) => {
    console.log(data);
  };

  return (
    <div className="flex w-screen justify-center p-8">
      <Card className="border-border w-full max-w-2xl border">
        <CardHeader>
          <CardTitle>Create Profile</CardTitle>
          <CardDescription>Yabba dabba doo</CardDescription>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className="text-muted-foreground flex w-full flex-1 flex-col justify-center gap-6"
            >
              <div className="flex flex-row gap-4">
                <FormField
                  control={form.control}
                  name="firstName"
                  render={({ field }) => (
                    <FormItem className="w-full">
                      <FormLabel className="">First name</FormLabel>
                      <FormControl>
                        <Input placeholder="Your first name" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="lastName"
                  render={({ field }) => (
                    <FormItem className="w-full">
                      <FormLabel className="">Last name</FormLabel>
                      <FormControl>
                        <Input placeholder="Your last name" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              <FormField
                control={form.control}
                name="role"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Role</FormLabel>
                    <Select
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Select your role" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="FULLSTACK">Full Stack</SelectItem>
                        <SelectItem value="FRONTEND">Frontend</SelectItem>
                        <SelectItem value="BACKEND">Backend</SelectItem>
                        <SelectItem value="DESIGN">Design</SelectItem>
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="skills"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Skills</FormLabel>
                    <div className="grid grid-cols-2 gap-2">
                      {fields.map((field, index) => (
                        <div key={field.name}>
                          <div className="group relative flex items-center">
                            <FormControl>
                              <Input
                                placeholder="Your skill"
                                className="group-hover:pr-8"
                                {...form.register(
                                  `skills.${index}.name` as const,
                                )}
                              />
                            </FormControl>
                            {fields.length > 1 && (
                              <TrashIcon
                                className="hover:text-muted-foreground/30 text-muted-foreground/40 invisible absolute right-1 h-6 w-6 hover:cursor-pointer group-hover:visible"
                                onClick={() => remove(index)}
                              />
                            )}
                          </div>

                          {form.formState.errors.skills?.[index]?.name && (
                            <p className="text-destructive text-sm font-medium">
                              This can't be empty
                            </p>
                          )}
                        </div>
                      ))}
                    </div>
                    <Button
                      type="button"
                      disabled={watchSkills.some((field) => !field.name)}
                      onClick={() => append({ name: "" })}
                      className="max-w-min"
                    >
                      Add Skill
                    </Button>
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="bio"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Bio</FormLabel>
                    <FormControl>
                      <Textarea
                        placeholder="Tell us a little bit about yourself"
                        className="resize-none"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="flex flex-row gap-4">
                <FormField
                  control={form.control}
                  name="github"
                  render={({ field }) => (
                    <FormItem className="w-full">
                      <FormLabel>Github Username</FormLabel>
                      <FormControl>
                        <Input placeholder="Your github username" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="linkedin"
                  render={({ field }) => (
                    <FormItem className="w-full">
                      <FormLabel>Linkedin Username</FormLabel>
                      <FormControl>
                        <Input
                          placeholder="Your linkedin username"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              <FormField
                control={form.control}
                name="website"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Website</FormLabel>
                    <FormControl>
                      <Input placeholder="Your website url" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <Button variant="default" className="my-4 w-full" type="submit">
                Submit
              </Button>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
  );
}

Context and Private Procedure

Now we have the form but we need to push this data to the database when the user submits it. To do that we need to create a new trpc procedure. Before we actually write the procedure there are a few things we need to add.

The first step is to add the userId to the trpc context. This will make things a lot quicker because it means we don't have to pass the userId from the client. For example if we want to get the current user's posts, instead of passing the current user id to the server, we can just call the function with no props and it already knows who the user is.

Navigate to the server/api/trpc.ts file and import the supabase client:

// server/api/trpc.ts

...
import { createClient } from "@/utils/supabase/server";
import { cookies } from "next/headers";
...

Now inside the createTRPCContext function we need to pass the userId to the context like this:

// server/api/trpc.ts

...
export const createTRPCContext = async (opts: { headers: Headers }) => {
  const supabase = createClient(cookies());

  const {
    data: { user },
  } = await supabase.auth.getUser();

  return {
    user,
    db,
    ...opts,
  };
};
...

The next step is to create a new type of procedure called private procedure, which is a procedure that can only be called by authenticated users. This is helpful because it means that we know there is a userId for our queries. If we were to use a public procedure we would have to assert that we know the user is authenticated and handle that on the client which is a lot more complicated. To do this add the following code at the bottom of the file:

// server/api/trpc.ts

...
const enforceUserIsAuthed = t.middleware(async ({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({
      code: "UNAUTHORIZED",
    });
  }

  return next({
    ctx: {
      user: ctx.user,
    },
  });
});

export const privateProcedure = t.procedure.use(enforceUserIsAuthed);
...

Procedure

Now we can get started writing the procedure. Go to server/api/routers and you should see a posts.ts file. Delete that file and create a new one called profiles.ts. Inside that file add the following code:

// server/api/routers/profiles.ts

import { z } from "zod";
import { createTRPCRouter, privateProcedure } from "@/server/api/trpc";

import { RoleType } from "@prisma/client";

export const profileRouter = createTRPCRouter({
  create: privateProcedure
    .input(
      z.object({
        firstName: z.string(),
        lastName: z.string(),
        role: z.nativeEnum(RoleType),
        skills: z.array(z.string()),
        bio: z.string(),
        github: z.string(),
        linkedin: z.string(),
        website: z.union([z.literal(""), z.string().trim().url()]),
      }),
    )
    .mutation(async ({ ctx, input }) => {
      const user = await ctx.db.profile.create({
        data: {
          id: ctx.user.id,
          email: ctx.user.email!,
          firstName: input.firstName,
          lastName: input.lastName,
          role: input.role,
          skills: input.skills,
          bio: input.bio,
          github: input.github,
          linkedin: input.linkedin,
          website: input.website,
        },
      });

      return user;
    }),
});

Now we need to expose this router to the client. Go to server/api/root.ts and add the following code:

// server/api/root.ts

import { profileRouter } from "@/server/api/routers/profiles";
import { createTRPCRouter } from "@/server/api/trpc";

export const appRouter = createTRPCRouter({
  profiles: profileRouter,
});

export type AppRouter = typeof appRouter;

Now we need to call the mutation on submit on form submission. Before we do that though, lets create a utility function to capitalize just the first letter of the string, so all of the names are uniform. In lib/utils.ts add the following function:

// lib/utils.ts

...

export function capitalizeFirstLetter(inputString: string) {
  const lowercaseString = inputString.toLowerCase();

  const capitalizedString =
    lowercaseString.charAt(0).toUpperCase() + lowercaseString.slice(1);

  return capitalizedString;
}

...

Now we can use our mutation. Add the following code to app/(main)/profile/new/page.tsx:

// app/(main)/profile/new/page.tsx

const router = useRouter();

const { mutate } = api.profiles.create.useMutation({
  onSuccess: () => {
    router.push("/profile");
  },
  onError: (e) => {
    const errorMessage = e.data?.zodError?.fieldErrors.content;
    console.error("Error creating investment:", errorMessage);
  },
});

const onSubmit = async (data: NewProfileInput) => {
  const skillsList = data.skills.map((skill) => skill.name);
  mutate({
    firstName: capitalizeFirstLetter(data.firstName),
    lastName: capitalizeFirstLetter(data.lastName),
    role: data.role,
    skills: skillsList,
    bio: data.bio,
    github: data.github,
    linkedin: data.linkedin,
    website: data.website,
  });
};

Now when you submit the form you should be redirected to a profile page and when you check the table in supabase the new data should be there. Now that we have the data, let's make it so we can view it.

Querying data

Go back to server/api/routers/profiles.ts and add the following query below your mutation:

// server/api/routers/profiles.ts

...
getCurrent: privateProcedure.query(async ({ ctx }) => {
  const profile = await ctx.db.profile.findUnique({
    where: { id: ctx.user.id! },
  });
  return profile;
}),
...

Create a new page in the profile folder and add the following code:

// app/(main)/profile/page.tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { capitalizeFirstLetter } from "@/lib/utils";
import { api } from "@/trpc/server";

export default async function ProfilePage() {
  const profile = await api.profiles.getCurrent.query();

  if (!profile) return null;

  return (
    <div className="flex w-full justify-center ">
      <Card className="mt-12 w-full max-w-xl">
        <CardHeader>
          <CardTitle>
            {profile.firstName} {profile.firstName}
          </CardTitle>
          <CardDescription>{profile.email}</CardDescription>
        </CardHeader>
        <CardContent>
          <p>Role: {capitalizeFirstLetter(profile.role)}</p>
        </CardContent>
        <CardContent className="flex items-center">
          <p className="pr-1">Skills:</p>
          {profile.skills.map((skill, index) => (
            <p key={index} className="border-border w-min rounded-full border px-2 py-0.5">
              {skill}
            </p>
          ))}
        </CardContent>
        <CardContent>
          <p>Bio: {profile.bio}</p>
        </CardContent>
        <div className="flex">
          <CardContent>
            <p>Github: {profile.github}</p>
          </CardContent>
          <CardContent>
            <p>Linkedin: {profile.linkedin}</p>
          </CardContent>
          <CardContent>
            <p>Website: {profile.website}</p>
          </CardContent>
        </div>
      </Card>
    </div>
  );
}

This isn't styled very well, its just supposed to show how you can fetch the data on the server side with trpc. Notice that we are importing the api from the server folder not the react folder. This means we cant use hooks like usequery and usemutation because we are in a server component.

Conclusion

This app doesn't really do anything, it is just supposed to get you started where everything is configured properly to design a cool web application. You can add to your prisma schema and start doing more complicated queries and mutations with the same principles used for just a simple profile.

All of the code for this project will be at this repo.

Thanks for reading!

P.S. If you are a software developer in college shoot me an email at isaac@dyor.com. I am going to start building a website for college students to find other developers in their area to build projects together. If you want to help me build it or use it or provide feedback or whatever I would love to chat.

Create responsive navbar with React and Tailwind using the same markdown

Isaac Dyor — Fri, 15 Dec 2023 08:51:56 +0000

Introduction

When building a responsive navbar you need to render two different views for desktop and mobile. One approach is to hardcode the two different views and conditionally render them based on the screen size. Although this method seems simple in the long term, it makes refactoring more complicated because if you want to change one of your links you have to do it in two places. For this reason the better option is to use the same markdown and apply styles conditionally so it works with both desktop and mobile. This way if you want to change something you can do it in one place and the changes will be applied to both views.

Basic mobile navbar

Tailwind has a mobile first design approach. For this reason I will start by building the mobile navbar, and later I will apply conditional styles to make it work with desktop.

First we are just going to create the flexbox for the navbar with the logo. This eventually will use state for the hamburger menu so it needs to be a client component.

"use client";
import Image from "next/image";
import Link from "next/link";
import Logo from "/public/logo.png";

const Navbar: React.FC = () => {
  return (
    <div className="flex items-center justify-between p-3 border-b border-b-border">
      <Link href={"/"} className="shrink-0 px-4">
        <Image src={Logo} alt="Spark Royalty Logo" width={250} height={250} />
      </Link>
    </div>
  );
};

export default Navbar;

Since we are on the mobile view we want to add a hamburger menu to toggle the links visibility. I am using heroicons. We use some basic react state to know whether or not the hambuger is open, and we conditionally render either the hamburger or an X.

"use client";
import Image from "next/image";
import Link from "next/link";
import Logo from "/public/logo.png";
import { useState } from "react";
import { XMarkIcon, Bars3Icon } from "@heroicons/react/24/solid";

const Navbar: React.FC = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  return (
    <div className="flex items-center justify-between p-3 border-b border-b-border">
      <Link href={"/"} className="shrink-0 px-4">
        <Image src={Logo} alt="Spark Royalty Logo" width={250} height={250} />
      </Link>
      <button onClick={toggleMenu} className="md:hidden">
        {menuOpen ? (
          <XMarkIcon className="h-7 w-7" />
        ) : (
          <Bars3Icon className="h-7 w-7" />
        )}
      </button>
    </div>
  );
};

export default Navbar;

Right now the hamburger menu isnt actually rendering anything when it is opened, so lets add some links and a sign up and login button. I am using shadcn for my buttons and my colors. Check out my last post if you want to get that set up.

"use client";
import Image from "next/image";
import Link from "next/link";
import Logo from "/public/logo.png";
import { useState } from "react";
import { XMarkIcon, Bars3Icon } from "@heroicons/react/24/solid";
import { Button } from "./ui/button";

const Navbar: React.FC = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  const routes: { title: string; href: string }[] = [
    { title: "Features", href: "#features" },
    { title: "Resources", href: "#resources" },
    { title: "Pricing", href: "#pricing" },
  ];

  return (
    <div className="flex items-center justify-between p-3 border-b border-b-border">
      <Link href={"/"} className="shrink-0 px-4">
        <Image src={Logo} alt="Spark Royalty Logo" width={250} height={250} />
      </Link>
      <div
        className={`flex items-center grow justify-start flex-col absolute top-[71.5px]  right-0 w-full  ${
          menuOpen ? "visible" : "invisible"
        }`}
      >
        <div className="flex flex-col justify-end w-full py-2 px-4 gap-1 bg-background">
          {routes.map((route, index) => (
            <Link
              key={index}
              href={route.href}
              className={`inline-flex h-10 w-full items-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground`}
            >
              {route.title}
            </Link>
          ))}

          <Link href={"/login"} className="w-full ">
            <Button variant="secondary" className="w-full">
              Log In
            </Button>
          </Link>
          <Link href="/signup" className="w-full">
            <Button variant="default" className="w-full">
              Sign Up
            </Button>
          </Link>
        </div>
        <div className="h-full w-full bg-background/70" />
      </div>
      <button onClick={toggleMenu}>
        {menuOpen ? (
          <XMarkIcon className="h-7 w-7" />
        ) : (
          <Bars3Icon className="h-7 w-7" />
        )}
      </button>
    </div>
  );
};

export default Navbar;

I create a flex column to store the flex column with all of the links as well as a div to take up the rest of the space. This div is opaque to cover up whatever is on the screen currently. Makes it look like this:

Making it work for desktop

Now that our navbar works for mobile we want to make it work for desktop. We are going to use the same markup, just give it different styles. We will do this by applying tailwind styles with the md: prefix so they will only be applied on medium screen sizes and larger.

There are a couple of things we need to change:

Make the content always visible so the hamburger state doesn't affect it
Make it a flex row instead of flex col
Make the position static instead of fixed
Hide the hamburger menu
Make the width of the buttons and links auto instead of full
Add some styles specific to desktop, like padding between the login and signup buttons.

"use client";
import Image from "next/image";
import Link from "next/link";
import Logo from "/public/logo.png";
import { useState } from "react";
import { XMarkIcon, Bars3Icon } from "@heroicons/react/24/solid";
import { Button } from "./ui/button";

const Navbar: React.FC = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

  const routes: { title: string; href: string }[] = [
    { title: "Features", href: "#features" },
    { title: "Resources", href: "#resources" },
    { title: "Pricing", href: "#pricing" },
  ];

  return (
    <div className="flex items-center justify-between p-3 border-b border-b-border">
      <Link href={"/"} className="shrink-0 px-4">
        <Image src={Logo} alt="Spark Royalty Logo" width={250} height={250} />
      </Link>
      <div
        className={`flex items-center h-[calc(100vh-71.5px)] grow justify-start flex-col absolute top-[71.5px]  right-0 w-full  md:visible md:flex-row md:justify-end md:static md:h-auto ${
          menuOpen ? "visible" : "invisible"
        }  `}
      >
        <div className="flex flex-col justify-end w-full py-2 px-4 gap-1 bg-background md:flex-row">
          {routes.map((route, index) => (
            <Link
              key={index}
              href={route.href}
              className={`inline-flex h-10 w-full items-center rounded-md px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground md:w-auto`}
            >
              {route.title}
            </Link>
          ))}

          <Link href={"/login"} className=" w-full md:px-1 md:w-auto">
            <Button variant="secondary" className="w-full">
              Log In
            </Button>
          </Link>
          <Link href="/signup" className="w-full md:w-auto">
            <Button variant="default" className="w-full">
              Sign Up
            </Button>
          </Link>
        </div>
        <div className="h-full w-full bg-background/70 md:hidden" />
      </div>
      <button onClick={toggleMenu} className="md:hidden">
        {menuOpen ? (
          <XMarkIcon className="h-7 w-7" />
        ) : (
          <Bars3Icon className="h-7 w-7" />
        )}
      </button>
    </div>
  );
};

export default Navbar;

Now you have a responsive navbar using the same markdown for each view, so if you want to add a new link or change the text, you only have to do it one place!

Setting up Next.js project with Prisma, Supabase, and Shadcn.

Isaac Dyor — Wed, 13 Dec 2023 23:27:55 +0000

Setting up Next.js

First run the following command to initialize the next js project with supabase, typescript, and tailwind: npx create-next-app@latest. Select all of the default options:

Setting up Prisma

Run the following command to install prisma:
npm install prisma --save-dev

Once prisma is installed run the following command to initialize the schema file and the .env file:
npx prisma init

There should now be a .env file. You should add your database_url to connect prisma to your database. Should look like this:

// .env
DATABASE_URL=url

Inside your schema.prisma you should add your model, i am just using some random model for now:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id        String     @default(cuid()) @id
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  String?
}

model User {
  id            String       @default(cuid()) @id
  name          String?
  email         String?   @unique
  createdAt     DateTime  @default(now()) @map(name: "created_at")
  updatedAt     DateTime  @updatedAt @map(name: "updated_at")
  posts         Post[]
  @@map(name: "users")
}

Now you can run the following command to sync your database with your schema:
npx prisma db push

In order to access prisma on the client side you need to install prisma client. You can do so by running the following command:
npm install @prisma/client

Your client must be in sync with your schema as well and you can do this by running the following command:
npx prisma generate

When you run npx prisma db push the generate command is automatically called.

In order to access the prisma client you need to create an instance of it, so create a new folder in the src directory called lib, and add a new file called prisma.ts to it.

// prisma.ts

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export default prisma;

Now you can import the same instance of Prisma in any file.

Setting up Shadcn

First run the following command to start setting up shadcn:
npx shadcn-ui@latest init

I selected the following options:
typescript: yes
style: default
base color: slate
global css: src/app/globals.css
css variables: yes
tailwind config: tailwind.config.ts
components: @/components (default)
utils: @/lib/utils (default)
react server components: yes
write to components.json: yes

Next run the following command to set up next themes:
npm install next-themes

Then add a file called theme-provider.tsx to your components library and add the following code:

// theme-provider.tsx

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

Once you have your provider setup, you want to add it to the layout.tsx so it is implemented on the entire app. Wrap the {children} with the Theme provider like this:

// layout.tsx
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );

Now go to the shadcn themes page. And select the theme you want to use and press copy code. Then add that copied code to your globals.css so it looks like this:

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;
  }
}

Now you should be able to use shadcn components and themes in your project.

Setting up Supabase

The first step is to create a new supabase project. Next, install the next.js auth helpers library:
npm install @supabase/auth-helpers-nextjs @supabase/supabase-js

Now you must add your supabase url and your anon key to your .env file. Your .env file should now look like this:

// .env
DATABASE_URL=url
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

We are going to use the supabase cli to generate types based on our schema. Install the cli with the following command:
npm install supabase --save-dev

In order to login to supabase run npx supabase login and it will automatically log you in.

Now we can generate our types by running the following command:
npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/lib/database.types.ts which should add a new file in your lib folder with the types based on your schema.

Now create a middleware.ts file in the root of your project and add the following code:

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextResponse } from "next/server";

import type { NextRequest } from "next/server";
import type { Database } from "@/lib/database.types";

export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient<Database>({ req, res });
  await supabase.auth.getSession();
  return res;
}

Now create a new folder in the app directory called auth, then another folder within auth called callback, and finally a file called route.ts. Add the following code in that file:

// app/auth/callback/route.ts
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

import type { NextRequest } from "next/server";
import type { Database } from "@/lib/database.types";

export async function GET(request: NextRequest) {
  const requestUrl = new URL(request.url);
  const code = requestUrl.searchParams.get("code");

  if (code) {
    const cookieStore = cookies();
    const supabase = createRouteHandlerClient<Database>({
      cookies: () => cookieStore,
    });
    await supabase.auth.exchangeCodeForSession(code);
  }

  // URL to redirect to after sign in process completes
  return NextResponse.redirect(requestUrl.origin);
}

With that setup we can create a login page. In the app directory create a new folder called login with a page.tsx.

// app/login/page.tsx
"use client";

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
import { useRouter } from "next/navigation";
import { useState } from "react";

import type { Database } from "@/lib/database.types";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const router = useRouter();
  const supabase = createClientComponentClient<Database>();

  const handleSignUp = async () => {
    await supabase.auth.signUp({
      email,
      password,
      options: {
        emailRedirectTo: `${location.origin}/auth/callback`,
      },
    });
    router.refresh();
  };

  const handleSignIn = async () => {
    await supabase.auth.signInWithPassword({
      email,
      password,
    });
    router.refresh();
  };

  const handleSignOut = async () => {
    await supabase.auth.signOut();
    router.refresh();
  };

  return (
    <>
      <input
        name="email"
        onChange={(e) => setEmail(e.target.value)}
        value={email}
      />
      <input
        type="password"
        name="password"
        onChange={(e) => setPassword(e.target.value)}
        value={password}
      />
      <button onClick={handleSignUp}>Sign up</button>
      <button onClick={handleSignIn}>Sign in</button>
      <button onClick={handleSignOut}>Sign out</button>
    </>
  );
}

Now create a new folder within the auth directory called sign-up, and a route.ts within that file. Add the following code:

// app/auth/sign-up/route.ts
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

import type { Database } from "@/lib/database.types";

export async function POST(request: Request) {
  const requestUrl = new URL(request.url);
  const formData = await request.formData();
  const email = String(formData.get("email"));
  const password = String(formData.get("password"));
  const cookieStore = cookies();
  const supabase = createRouteHandlerClient<Database>({
    cookies: () => cookieStore,
  });

  await supabase.auth.signUp({
    email,
    password,
    options: {
      emailRedirectTo: `${requestUrl.origin}/auth/callback`,
    },
  });

  return NextResponse.redirect(requestUrl.origin, {
    status: 301,
  });
}

Create another folder in the same location called login.

// app/auth/login/route.ts
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import { NextResponse } from "next/server";

import type { Database } from "@/lib/database.types";

export async function POST(request: Request) {
  const requestUrl = new URL(request.url);
  const formData = await request.formData();
  const email = String(formData.get("email"));
  const password = String(formData.get("password"));
  const cookieStore = cookies();
  const supabase = createRouteHandlerClient<Database>({
    cookies: () => cookieStore,
  });

  await supabase.auth.signInWithPassword({
    email,
    password,
  });

  return NextResponse.redirect(requestUrl.origin, {
    status: 301,
  });
}

And finally add a logout route in the same place.

// app/auth/logout/route.ts
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

import type { Database } from '@/lib/database.types'

export async function POST(request: Request) {
  const requestUrl = new URL(request.url)
  const cookieStore = cookies()
  const supabase = createRouteHandlerClient<Database>({ cookies: () => cookieStore })

  await supabase.auth.signOut()

  return NextResponse.redirect(`${requestUrl.origin}/login`, {
    status: 301,
  })
}

Now there should be basic login logout sign up functionality when you navigate to localhost http://localhost:3000/login.

Now we have some basic boilerplate for a next js app with prisma shadcn and supabase auth setup.

Hello, World!

Isaac Dyor — Wed, 11 Oct 2023 05:21:11 +0000

Hello DEV, this is my first post

Initializing and deploying T3 app with AWS database.

Isaac Dyor — Wed, 26 Apr 2023 21:08:35 +0000

Initializing the Project

This is just a document to remind me how I created this project.

We will use Create T3 App to create the scaffolding for our application.

Run the command npm create t3-app@latest and select typescript. Give your project a name and then press a to select all 4 dependencies.

Create a new github repo and then run the following commands to push the code to the repo:

git add . git commit -m "initial commit" git remote add origin https://github.com/<username>/<repo-name>.git git branch -M main git push -u origin main

We now want to deploy our app to vercel, but we first have to set up our database.

Database Urls

For development we will use a local Postgres database and for production we will use an Amazon RDS database. Make sure to make your AWS database publicly accessible. You may also have to edit inbound rules and allow all traffic from all ips so that vercel can access it.

In the .env file of your code include the local database url with the following information:

Once you have your url set up, go to the schema.prisma file and change the provider to postgresql:



datasource db {
    provider = "postgresql"
    url      = env("DATABASE_URL")
}

Also uncomment the @db.Text in the Account model.

Now go to vercel and import your github repo. Then add the connection url of your AWS database as an environment variable.

Setting up Nexauth

We are not yet ready to deploy because next auth isn't set up.
Create t3 app automatically configures sign-in with discord, but I would rather use sign in with google so I will get that set up.

Get your credentials by following these steps:

Make sure to add localhost and your vercel url to authorized urls.

Once you have your client ID and Secret, add them to your .env file like this:



GOOGLE_CLIENT_ID="*******"
GOOGLE_CLIENT_SECRET="******"

Next, navigate to the server directory and open the auth.ts file. Replace the discord provider with the Google Provider.



  // auth.ts
  providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
  ],

You might be getting a type error so go to the env.mjs file in the src directory and replace discord with google in two locations.



  GOOGLE_CLIENT_ID: z.string(),
  GOOGLE_CLIENT_SECRET: z.string(),

and



const processEnv = {
  DATABASE_URL: process.env.DATABASE_URL,
  NODE_ENV: process.env.NODE_ENV,
  NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
  NEXTAUTH_URL: process.env.NEXTAUTH_URL,
  GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
  GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
};

You can now start your server with npm run dev and you should be able to sign in with google. Make sure to use one of the users that you defined as a test user earlier.

Deploying to Vercel

We want to deploy our project as early as possible so that if there are any problems they are much easier to spot than later down the line.

Now that we have all of our Next-auth environment variables set up we need to push our code to the repo and add the environment variables in vercel.

Go to the vercel site and try logging in, it should work.

Now you can start building up your website with all of this stuff configured.

How to create Google Maps clone with Next.js, Prisma, and Postgres.

Isaac Dyor — Sun, 10 Jul 2022 22:25:38 +0000

This article is a documentation of my process of implementing a map on my website that displays markers at certain points stored in a Postgres database through Next.js and Prisma.

To start this project I created a Next.js project with the command:

npx create-next-app@latest

Next I created a Postgres database hosted on Heroku following these steps: .

Then I needed to connect my Next project to my Postgres database through Prisma. The first step was to install Prisma with the following command:

npm install prisma --save-dev

Then I initialized the Prisma project by running

npx prisma init

This adds a prisma.schema file which is where you define your schema. It also creates a .env file where you can define your environment variables. In my .env file I defined my database link. You can find this by following step 4 of the link to setup a postgres database.

DATABASE_URL="postgresql:blahblahblah"

Then I created my schema in the prisma.schema file. Make sure to include an address field in the schema because that is how our program will know where to place the markers. I also included other information I wanted to provide the user in the info window.

//prisma.schema
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Location {
  id        String     @default(cuid()) @id
  title     String
  address   String?
  website   String?
  phone     String?
}

Push the schema to your database

npx prisma db push

Install prisma client

npm install @prisma/client

Updata your prisma client

npx prisma generate

Create a new directory called lib and a prisma.js file in it.

In the prisma.js file you have to create an instance of the Prisma client.

Then you can import your instance of the Prisma client into any file you need.

//prisma.js
const { PrismaClient } = require('@prisma/client')
const prisma = new PrismaClient()

export default prisma

Run npx prisma studio to open the Prisma studio, I added a few entries to play around with.

Now that I have my project connected with my database I can start building the webpage.

I created a new file in the pages directory called maps.js. First I imported all of the packages that we need to use. We need useState and useRef from React to manage the state.
We also need to import a few things from the @react-google-maps/api package which is a package designed to connect the google maps api to our react application.
We also need a few things from the react-places-autocomplete package which makes it easy for us to implement a google places api searchbar into our application.
I also imported my prisma instance from my prisma.js file, and the script package from next/script.

import React, {useState, useRef} from 'react';
import {GoogleMap, useLoadScript, Marker, InfoWindow,} from "@react-google-maps/api";
import PlacesAutocomplete, {geocodeByAddress, getLatLng} from 'react-places-autocomplete'

import Script from "next/script";
import prisma from "../lib/prisma";

const libraries = ['places']

After we have all of this imported then we can query our database for our data.

export const getServerSideProps = async () => {
  const locations = await prisma.location.findMany();
  return { props: { locations } };
}

Then we can create a new functional component with our quereyed data as a prop.

const App = ({ locations }) => {

}

Then we are going to create some state. I created a lot of state and this can probably done in a more efficient way but it works so I will go with it.

const App = ({ locations }) => {

  const [center, setCenter] = useState({
    lat: 0,
    lng: 0,
  });

  const [address, setAddress] = useState("");

  const [coords, setCoords] = useState([]);

  const [mapRef, setMapRef] = useState(null);

  const [selected, setSelected] = useState(null);

  const mapRef2 = useRef();

  const options = {
    disableDefaultUI: true,
    zoomControl: true,
  }

}

The mapRef2 is pretty stupid but who cares.

Next we need to connect to the google maps api. We do this through the useLoadScript function we imported earlier. The first step is to get a google maps api key. The instructions to do so can be found here.

The second step is to create a .env.local file in the root directory. You might be able to use the .env file that Prisma created but this is the way that I did it. In the .env.local file add the following line and insert your API Key.

NEXT_PUBLIC_MAPS_API_KEY=your-api-key

You can then use this api key in your component with the following function:

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY,
    libraries,
  })

The libraries line at the end importants the places library.

Now we need to define a few functions that will be called later on in our code.

The first function takes the address that the user selects from the places autocomplete dropdown and it converts the address to latitude and longitude. It also sets the center to the new latitude and longitude.

  const handleSelect = async (value) => {
    const results = await geocodeByAddress(value);
    const latLng = await getLatLng(results[0]);
    setAddress(value);
    setCenter(latLng);
  };

The next function is the convertAddress function which is called onMapLoad and converts all of the addresses stored in the database to latitude and longitude points so that we can use those coordinates to display markers later on.

  const convertAddress = async (value) => {
    const results = await geocodeByAddress(value.address);
    const latLng = await getLatLng(results[0]);
    const locationData = {
      title: value.title,
      address: value.address,
      website: value.website,
      phone: value.phone,
      lat: latLng.lat,
      lng: latLng.lng
    }
    setCoords(coords => [...coords, locationData])
  };

The next function is called when someone clicks on a marker. What this function does is set the center of the map to whatever the current center is. It gets the current center through calling getCenter() on the mapRef.

  const onCenterChanged = () => {
    if (mapRef) {
      const newCenter = mapRef.getCenter();
      console.log(newCenter);
      setCenter({
        lat: mapRef.getCenter().lat(),
        lng: mapRef.getCenter().lng()
      })
    }
  }

The next function is called when the map loads, and it initializes the map as well as converts all of our addresses into latitude and longitude as mentioned earlier.

  const onCenterChanged = () => {
    if (mapRef) {
      const newCenter = mapRef.getCenter();
      console.log(newCenter);
      setCenter({
        lat: mapRef.getCenter().lat(),
        lng: mapRef.getCenter().lng()
      })
    }
  }

The final function just pans the map to a certain lat and long.

  const panTo = React.useCallback(({lat, lng}) => {
    mapRef2.current.panTo({lat, lng});
  }, [])

Overall our component looks like this right now:

const App = ({ locations }) => {

  const [center, setCenter] = useState({
    lat: 0,
    lng: 0,
  });

  const [address, setAddress] = useState("");

  const [coords, setCoords] = useState([]);

  const [mapRef, setMapRef] = useState(null);

  const [selected, setSelected] = useState(null);

  const mapRef2 = useRef();

  const options = {
    disableDefaultUI: true,
    zoomControl: true,
  }

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY,
    libraries,
  })

  const handleSelect = async (value) => {
    const results = await geocodeByAddress(value);
    const latLng = await getLatLng(results[0]);
    setAddress(value);
    setCenter(latLng);
  };

  const convertAddress = async (value) => {
    const results = await geocodeByAddress(value.address);
    const latLng = await getLatLng(results[0]);
    const locationData = {
      title: value.title,
      address: value.address,
      website: value.website,
      phone: value.phone,
      lat: latLng.lat,
      lng: latLng.lng
    }
    setCoords(coords => [...coords, locationData])
  };

  const onCenterChanged = () => {
    if (mapRef) {
      const newCenter = mapRef.getCenter();
      console.log(newCenter);
      setCenter({
        lat: mapRef.getCenter().lat(),
        lng: mapRef.getCenter().lng()
      })
    }
  }



  const onMapLoad = (map) => {
    mapRef2.current = map
    setMapRef(map);
    {locations.map(location => {
      convertAddress(location)
    })}
  }

  const panTo = React.useCallback(({lat, lng}) => {
    mapRef2.current.panTo({lat, lng});
  }, [])

The first thing I did was create a button that got the coordinates of the user and panned the map to those coordinates.

<button className='locate' onClick={() => {
          setAddress('')
          navigator.geolocation.getCurrentPosition((position) => {
            panTo({
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            })
            setCenter({
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            })
          }, () => null);
        }}>Locate</button>

Then I created the map itself. Inside the map I mapped through the different coordinates that had been converted from our database, and I displayed a marker at each place. I also included an info window that displays the information of each place.

<GoogleMap
          zoom={10}
          center={{lat: center.lat, lng: center.lng}}
          mapContainerClassName='map-container'
          options={options}
          onLoad={onMapLoad}
          // onBoundsChanged={onCenterChanged}
        >
          {coords.map(coord => {
            return(
              <Marker
                key={coord.lat}
                position={{ lat: parseFloat(coord.lat), lng: parseFloat(coord.lng) }}
                onClick={() => {
                  onCenterChanged()
                  setSelected(coord);
                }}
              />
            )
          })}
          {selected ? (
            <InfoWindow
              position={{ lat: selected.lat, lng: selected.lng }}
              onCloseClick={() => {
                setSelected(null);
              }}
            >
              <div>
                <h2>
                  {selected.title}
                </h2>
                <p>{selected.address}</p>
              </div>
            </InfoWindow>
          ) : null
          }



        </GoogleMap>

Finally I added the places autocomplete searchbox. I also loaded the google maps places api through the script tag.

        <PlacesAutocomplete
          value={address}
          onChange={setAddress}
          onSelect={handleSelect}
        >
          {({ getInputProps, suggestions, getSuggestionItemProps }) => (
            <div>
              <input {...getInputProps({ placeholder: "Type address" })} />

              <div>
                {suggestions.map(suggestion => {
                  const style = {
                    backgroundColor: suggestion.active ? "#41b6e6" : "#fff"
                  };

                  return (
                    <div {...getSuggestionItemProps(suggestion, { style })}>
                      {suggestion.description}
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </PlacesAutocomplete>
        <Script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMePTwqFO2xPCaxUYqq0Vq4JQc631jo0o&libraries=places"
          strategy="beforeInteractive"
        ></Script>

That is pretty much it. Keep in mind that this code is far from perfect. Also this code has literally zero styling so it is very ugly. It works though which is pretty cool. All in all this is the final code.

//maps.js

import React, {useState, useRef} from 'react';
import {GoogleMap, useLoadScript, Marker, InfoWindow,} from "@react-google-maps/api";
import PlacesAutocomplete, {geocodeByAddress, getLatLng} from 'react-places-autocomplete'

import Script from "next/script";
import prisma from "../lib/prisma";

const libraries = ['places']

export const getServerSideProps = async () => {
  const locations = await prisma.location.findMany();
  return { props: { locations } };
}

const App = ({ locations }) => {

  const [center, setCenter] = useState({
    lat: 0,
    lng: 0,
  });

  const [address, setAddress] = useState("");

  const [coords, setCoords] = useState([]);

  const [mapRef, setMapRef] = useState(null);

  const [selected, setSelected] = useState(null);

  const mapRef2 = useRef();

  const options = {
    disableDefaultUI: true,
    zoomControl: true,
  }

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_PUBLIC_MAPS_API_KEY,
    libraries,
  })

  const handleSelect = async (value) => {
    const results = await geocodeByAddress(value);
    const latLng = await getLatLng(results[0]);
    setAddress(value);
    setCenter(latLng);
  };

  const convertAddress = async (value) => {
    const results = await geocodeByAddress(value.address);
    const latLng = await getLatLng(results[0]);
    const locationData = {
      title: value.title,
      address: value.address,
      website: value.website,
      phone: value.phone,
      lat: latLng.lat,
      lng: latLng.lng
    }
    setCoords(coords => [...coords, locationData])
  };

  const onCenterChanged = () => {
    if (mapRef) {
      const newCenter = mapRef.getCenter();
      console.log(newCenter);
      setCenter({
        lat: mapRef.getCenter().lat(),
        lng: mapRef.getCenter().lng()
      })
    }
  }



  const onMapLoad = (map) => {
    mapRef2.current = map
    setMapRef(map);
    {locations.map(location => {
      convertAddress(location)
    })}
  }

  const panTo = React.useCallback(({lat, lng}) => {
    mapRef2.current.panTo({lat, lng});
  }, [])

  if (!isLoaded) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    )
  }

  if (isLoaded) {
    return(
      <div>
        <button className='locate' onClick={() => {
          setAddress('')
          navigator.geolocation.getCurrentPosition((position) => {
            panTo({
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            })
            setCenter({
              lat: position.coords.latitude,
              lng: position.coords.longitude,
            })
          }, () => null);
        }}>Locate</button>

        <GoogleMap
          zoom={10}
          center={{lat: center.lat, lng: center.lng}}
          mapContainerClassName='map-container'
          options={options}
          onLoad={onMapLoad}
          // onBoundsChanged={onCenterChanged}
        >
          {coords.map(coord => {
            return(
              <Marker
                key={coord.lat}
                position={{ lat: parseFloat(coord.lat), lng: parseFloat(coord.lng) }}
                onClick={() => {
                  onCenterChanged()
                  setSelected(coord);
                }}
              />
            )
          })}
          {selected ? (
            <InfoWindow
              position={{ lat: selected.lat, lng: selected.lng }}
              onCloseClick={() => {
                setSelected(null);
              }}
            >
              <div>
                <h2>
                  {selected.title}
                </h2>
                <p>{selected.address}</p>
              </div>
            </InfoWindow>
          ) : null
          }

        </GoogleMap>

        <PlacesAutocomplete
          value={address}
          onChange={setAddress}
          onSelect={handleSelect}
        >
          {({ getInputProps, suggestions, getSuggestionItemProps }) => (
            <div>
              <input {...getInputProps({ placeholder: "Type address" })} />

              <div>
                {suggestions.map(suggestion => {
                  const style = {
                    backgroundColor: suggestion.active ? "#41b6e6" : "#fff"
                  };

                  return (
                    <div {...getSuggestionItemProps(suggestion, { style })}>
                      {suggestion.description}
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </PlacesAutocomplete>



        <Script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMePTwqFO2xPCaxUYqq0Vq4JQc631jo0o&libraries=places"
          strategy="beforeInteractive"
        ></Script>
      </div>
    )
  }
}


export default App;

Also there is an error on line 168 because I didn't include a key. It is not breaking but you can just add a key to solve it.

Booh yah.

Building a next app with Prisma.

Isaac Dyor — Wed, 06 Jul 2022 20:48:48 +0000

Create your next application

npx create-next-app@latest

Install Prisma

npm install prisma --save-dev

Initialize Prisma project

npx prisma init

Add your postgres link to your .env file. Make sure that everything is on the same line.

DATABASE_URL="postgresql:blahblahblah"

Create your database schema in the prisma.schema file

// schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        String     @default(cuid()) @id
  title     String
  content   String?
  published Boolean @default(false)
  author    User?   @relation(fields: [authorId], references: [id])
  authorId  String?
}

model User {
  id            String       @default(cuid()) @id
  name          String?
  email         String?   @unique
  createdAt     DateTime  @default(now()) @map(name: "created_at")
  updatedAt     DateTime  @updatedAt @map(name: "updated_at")
  posts         Post[]
  @@map(name: "users")
}

Push the schema to your database

npx prisma db push

Install prisma client

`npm install @prisma/client'

Updata your prisma client

`npx prisma generate'

Create a new directory called lib and a prisma.js file in it.

In the prisma.js file you have to create an instance of the Prisma client.

Then you can import your instance of the Prisma client into any file you need. Then you create a getServerSideProps function to query the data. Then you can display those props however you want.

import prisma from '../lib/prisma';
import React from "react"

export const getServerSideProps = async () => {
  const feed = await prisma.post.findMany({
    where: { published: true },
    include: {
      author: {
        select: { name: true },
      },
    },
  });
  return { props: { feed } };
}


const Blog = ({feed}) => {
  console.log(feed)
  return (
    <div>
      {feed[0].title}
    </div>
  )
}

export default Blog

My next post might be on creating a REST API with Prisma.