DEV Community: EliasChen

Build a guestbook with Next.js, NextAuth and Supabase

EliasChen — Fri, 27 Jan 2023 13:00:48 +0000

Stack

Next.js as a framework
NextAuth (Authentication for Next.js)
Supabase (guestbook database)

Supabase

What is supabase?

Supabase is an open source Firebase alternative providing all the backend features you need to build a product and offer users more simple UI then Firebase.

Install supabase.

# npm
npm install @supabase/supabase-js
# yarn
yarn add @supabase/supabase-js

Sign up an account on https://supabase.com, create a new project (mine: Guestbookdemo).
Create a table (mine: guestbookdata).

Remember to disable RLS(Row Level Security) for table

Create supabaseClient.js in /lib .

// lib/supabaseClient.js
import { createClient } from '@supabase/supabase-js'

export const supabase = createClient('<project_url>', '<anon_public>')

Getting data from supabase data.

// pages/index.jsx
import React from 'react'
import { supabase } from '../lib/supabaseClient'

const index = () => {
    const [guestbookData, setGuestbookData] = React.useState(null)
    // fetch supabase table data
    const fetchguestbook = async () => {
        const { data, error } = await supabase.from('guestbook').select()
        if (data) {
            setGuestbookData(data)
            console.log(data)
        }
    }
    return (
        <div>
            <ul>{guestbookData && guestbookData.map((data) => <li>{data.message}</li>)}</ul>
        </div>
    )
}
export default index

Upload table data to supabase.

// pages/index.jsx
// ...
const uploaddata = async (e) => {
    let { data } = await supabase.from('guestbook').insert([
        {
            message: '<your message>',
            username: '<your username>',
            email: '<your email>',
        },
    ])
    fetchguestbook()
}
// ...

Remove table data from supabase.

// pages/index.jsx
// ...
const removedata = async (removeid) => {
    // removeid = table item you want to remove
    const { data } = await supabase.from('guestbook').delete().eq('id', removeid)
    fetchguestbook()
}
// ...

NextAuth

Install NextAuth.

# npm
npm install next-auth
# yarn
yarn add next-auth

To add NextAuth.js to a project create a file called [...nextauth].js in pages/api/auth

All provider set up documentation of NextAuth on https://next-auth.js.org/providers/

// pages/api/auth/[...nextauth].js
// Example for github provider
import NextAuth from 'next-auth'
import GithubProvider from 'next-auth/providers/github'

export const authOptions = {
    // Configure one or more authentication providers
    providers: [
        GithubProvider({
            clientId: process.env.GITHUB_ID,
            clientSecret: process.env.GITHUB_SECRET,
        }),
        // ...add more providers here
    ],
}

export default NextAuth(authOptions)

Add NextAuth login in pages.

// pages/index.jsx
// ...
import { useSession, signIn, signOut } from 'next-auth/react'

const index = () => {
    const { data: session } = useSession()

    return(
      // ...
      <button onClick={()=>signIn('Login provider')}>Sign in</button>
      <button onClcik={()=>signOut()} >Sign out</button>
      // ...
    )
}

Conclusion

Supabase and NextAuth are both perfect choices for beginners who want to learn basic database or build a simple auth login application.

Guestbook demo: https://eliaschen-guestbook-demo.vercel.app
Guestbook demo (github repository): https://github.com/chenelias/eliaschen-guestbook-demo
My Guestbook: https://eliaschen.dev/guestbook

⚡Thanks for reading, see you in the next blog.

Build a music player with YouTube IFrame Player API

EliasChen — Fri, 20 Jan 2023 12:56:36 +0000

I added a musicplayer based on YouTube IFrame Player API for my personal site music page to play my playlist from YTmusic.

Stack

React as a framework
YouTube Data API v3 (fetching music list from youtube)
react-youtube Youtube iframe player for react

react-youtube

Installation

Add player config.

import YouTube from 'react-youtube';
const opts = {
  height: "250",
  width: "350",
  playerVars: {
    autoplay: 1,
  },
};

Add player from react-youtube.

<YouTube
  videoId={"UEx5T0xfUk1td3F5ZFJ0elRhVHV6SGM3R0NYbEFSMmFPOC5EMEEwRUY5M0RDRTU3NDJC"} //Video id from youtube
  opts={opts}
/>;

Create a control player event value

let videoElement: YouTubePlayer = null

Player event control like:pauseVideo(), playVideo()\
Example of video play button:

<button onClick={()=>videoElement.target.playVideo()}>
     Play Video
</button>

PlayList

Create a API token on google api console, search and add YouTube Data API v3.

import React from 'react';
const [loading, setLoading] = React.useState(true);
const [playList ,setPlaylist] = React.useState(null);
React.useEffect(() => {
  setLoading(true);
  fetch(
    "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=PLyOL_RMmwqydRtzTaTuzHc7GCXlAR2aO8&key=<your_api_token>&maxResults=1000",
    {}
  )
    .then((res) => res.json())
    .then((data) => {
      setPlaylist(data.items);
      setLoading(false);
    });
}, []);
return (
  <ul>
    {loading || !playList ? (
      <h1>Loading...</h1>
    ) : (
      playList.map((items) => <li key={items.id}>{items.snippet.title}</li>)
    )}
  </ul>
);

Source code: Github
Website: Personal site
⚡Thanks for reading, see you in the next blog.

Build a personal site with Next.js and Tailwindcss

EliasChen — Sun, 01 Jan 2023 13:51:20 +0000

Why Next.js?

Next.js is an open-source javascript framework built on Node.js that allows you to create React applications that you can render on the server. It provides out-of-the-box tooling like next/image , next/router and configuration you need to build fast, SEO-friendly React apps.

Note: There is other ways to using next.js like T3 Stack .

The Stacks

Next.js as a framework
Tailwindcss for styling
Headless-ui for mobile RWD nav-menu
react-loading-skeleton made beautiful loading skeletons animated when the api data still loading
IonIcon use in /links page media icons
react-icon as a main icon provider
next-sitemap create a sitemap file when the project building

Fetch Github Rest API

to fetching data from github, you have to create a github account and create token of your github account.

You use axios or fetch to fetching api from github.
Example of fetching github user repository data with fetch.

import React from "react";

const tokenkey = "GITHUB_TOKENKEY";

export default function Fetchgithubapi() {
  const [data, setData] = React.useState(null);
  const [isLoading, setLoading] = React.useState(false);
  const loadingdisplay = (
    <div>
      <p>Loading...</p>
    </div>
  );
  useEffect(() => {
    setLoading(true);
    fetch("https://api.github.com/users/GITHUB_USERNAM/repos", {
      headers: {
        Authorization: { tokenkey },
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);
  if (isLoading) return loadingdisplay;
  if (!data) return loadingdisplay;
  return (
    <div>
      {data.map((repo) => (
        <div>
          <p>{repo.name}</p>
        </div>
      ))}
    </div>
  );
}

next-sitemap

The most easy way to do this is create a file called next-sitemap.config.js in the root floder of project and insert these few lines of code.

const siteUrl = 'http://www.eliaschen.dev/'
module.exports = { siteUrl }

SEO

SEO also is a very important key for your personal website, It's about how people can search your website in the search engine.

To make your SEO better you can add robots.txt in /public floder, and add your website to Google Search Console .

robots.txt (insert these code to robots.txt under the /public floder)

User-agent: *
Allow: /
Sitemap: https://example.com/sitemap-0.xml

Google Search Console Tools It's very simple to add your website to Google Search Console.
Visit Google Search Console
Create a new resource
Go to Produce an index > Site map add your sitemap with url

Deploy

I deploy my website with vercel.

Conclusion

Overall, If you want to build your own site, I would suggest using Next.js or checkout the scrose code of my personal site on github.

⚡Thanks for reading, see you in the next blog.