DEV Community: Taishi

Supabase Just Got More Powerful: Queue, Cron, and Background Tasks in Edge Functions

Taishi — Sun, 15 Dec 2024 01:52:02 +0000

// Detect dark theme var iframe = document.getElementById('tweet-1865405946543173752-941'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1865405946543173752&theme=dark" }

This was my first reaction when Supabase announced their new Queue, Cron and Background Tasks in an Edge Function features.
Let me show you why this is such a big deal.

The Old World: Juggling Multiple Services

Picture this: You're building an (AI) app that needs to handle long-running processes, like AI-powered audio transcription. Until now, you had to piece together a puzzle of different services:

Queue management with Bull or Trigger.dev
A separate hosting platform for your background jobs (ex: Render, Railway)
Redis for job state management
And of course, Supabase for your main database

I experienced this while building AutoRepurpose AI - a tool that transforms YouTube videos into engaging social media content. The process involves:

Extracting video subtitles
Creating and storing embeddings in Supabase (PostgreSQL)
Generating tailored social posts using these embeddings

For these tasks, I had to set up Bull on a Node.js instance hosted on Railway, plus Redis for managing the background processes.

The New World: Supabase Queue Changes Everything

Now, everything lives under one roof. No more context switching between services. No more managing multiple platforms. Just pure, streamlined efficiency.

Here's all you need to implement background processing with Supabase:

Add items to your queue
Create an edge function to process queued items
Set up a cron job to trigger the processing

Let's see how this looks in code ✨:

Add a queue item: React component (Next.js)

const supabase = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  { db: { schema: "pgmq_public" } }
);

const sendToQueue = async () => {
  await supabase.rpc("send", {
    queue_name: "ai-background-job",
    message: { userId, videoId },
  });
};

return <button onClick={sendToQueue}>Create a new project</button>

ai-process edge function (Supabase Edge Functions)

import { createClient } from "https://esm.sh/@supabase/supabase-js@2.47.7";
import process from "node:process";
import type { Database } from "../supabase.ts";

const supabase = createClient<Database>(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!,
);

const supabasePgmqSchema = createClient<Database>(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!,
  { db: { schema: "pgmq_public" } },
);

Deno.serve(async (req) => {
  const queueToProcess = await supabasePgmqSchema.rpc("pop", {
    queue_name: "ai-background-job",
  });

  if (
    queueToProcess.error || !queueToProcess.data ||
    !Array.isArray(queueToProcess.data)
  ) {
    return new Response(
      JSON.stringify({ success: false }),
      { headers: { "Content-Type": "application/json" }, status: 500 },
    );
  }

  const { userId, videoId } = queueToProcess.data[0].message as {
    userId: string;
    videoId: string;
  };

  // Fetch the transcription of the video, generate social posts,
  // and save them in the database in the background
  EdgeRuntime.waitUntil(processAIStuff({ userId, videoId }));

  return new Response(
    JSON.stringify({ success: true }),
    { headers: { "Content-Type": "application/json" } },
  );
});

Set up a cron job

The new cron interface is quite straightforward. Just a few clicks in the dashboard, and you're done:

The Complete Backend Package

Supabase now offers everything you need in one platform:

Queuing system
Simple, powerful cron jobs
Edge Functions with serverless computing and background task capabilities
authentication
PostgreSQL database with superpowers

They didn't just add a missing piece - they completed the backend puzzle. As developers, we can now focus on building features instead of managing infrastructure.

Supabase truly has become the backend that eats backends! ⚡️

I got #1 Product of the Day on Product Hunt without spending a dollar

Taishi — Tue, 23 Apr 2024 08:20:24 +0000

On Sunday, April 14, at 2:01 PM in Thailand, my product - AutoRepurpose was launched on Product Hunt.

Like my previous launches, I wasn't expecting anything crazy. I figured I’d probably end up around 8th place or something.

But an hour later, when I checked AutoRepurpose's ranking on Hunted.space, to my surprise, we were in 2nd place! However, this kind of early success can be deceptive, as other products often catch up at an insane pace, and I usually end up back around 8th.

But this time was different.
Four hours in, AutoRepurpose hit an unexpected first place!
And it stayed there even after 20 hours after the launch!

As a result, I achieved my first-ever #1 product of the day.

This accomplishment on Product Hunt, where many startups compete, felt like a major achievement for me as a solopreneur.

// Detect dark theme var iframe = document.getElementById('tweet-1779784112225890776-803'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1779784112225890776&theme=dark" }

Wait, what is AutoRepurpose?

Let me give you a quick introduction to AutoRepurpose.

AutoRepurpose turns YouTube videos into text content for Twitter thread, LinkedIn posts and etc for YouTube creators to grow their social media 10x faster.

So basically it's a YouTube repurpose tool.

So how did I build AutoRepurpose?

As a solopreneur with very limited budget and time, it's crucial to choose a tech stack that is:

Affordable
Quick to set up
Reliable

For AutoRepurpose, I opted for Supabase as the backbone of the backend. It has reliably supported Penelope AI, which garnered over 15k users in 2022 without any issues.

I use Supabase for its:

Database (also as a Vector database)
Realtime capabilities
Auth features
Storage solutions

Using Supabase allows for easy setup of these components, making it ideal for quickly building and launching products.

I find the Vector database and Realtime capabilities particularly invaluable.

This is because, in many cases, you'd need to use a separate service like Pinecone for a vector database, and implementing Realtime features often takes a lot of time. Using Supabase helps avoid these complexities and streamlines the development process.

I was able to launch AutoRepurpose just three weeks after starting to build it.

How much traction did I get from the launch?

I tweeted about it here.

// Detect dark theme var iframe = document.getElementById('tweet-1780175441002909697-305'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1780175441002909697&theme=dark" }

At its peak, AutoRepurpose received about 1.3k visits in one day. We had around over 100 sign-ups.

Does that sound lower than expected?

Sundays on Product Hunt tend to be relatively quiet, so that might be part of it.

However, I'm happy I was able to handle this volume of traffic for free.

I'm still using Supabase free plan haha.

What I used other than Supabase?

Apart from Supabase, I use Modal. I consider it the best hosting service for running ML and AI processes in Python.

Modal gives you free $30 credits every month, so it's free unless your app scales enough (and it's a good thing!)

I'll stick with them

When I build software products, I consistently use Supabase, Modal if needed, and Next.js (you should use whichever framework you're most comfortable with).

Especially with Supabase, which just went GA (General Availability) during the latest launch week, they're rolling out more new features, making it even more essential to keep an eye on.

// Detect dark theme var iframe = document.getElementById('tweet-1779827208120611231-611'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1779827208120611231&theme=dark" }

How I build my startup supa-quick

Taishi — Wed, 11 Oct 2023 14:14:37 +0000

I've been working on Supabox.

Supabox is a Gmail add-on for Founders to stay on top of the inbox.

Supabox uses AI to automatically tag emails to help you spot the most important ones at a glance.

In this article, I'd like to share how I built Supabox, and how I took advantage of my fav tool - Supabase⚡️

Many Supabox functions rely on Supabase

Authentication

The difference from the apps I usually make is that Supabox requires the use of the Gmail API to access the user's inbox, so I give it an additional scope and ask the user to log in.

Data encryption

Often there will be times when you want to encrypt data in your database.

With Supabase, you can implement the encryption function in about 5 seconds.

Dang!

The Column Encryption feature is just too good to be true.

Supabase uses pgsodium inside it and it uses XChaCha20-SIV algorithm.

You want to have a cron job? No problem.

I needed to call the API every 30 minutes, so I decided to use pg_cron.

pg_cron is a Postgres extension and you can use Postgres as a CRON server :)

Supabase has a GUI to configure these easily!

API responsible for time-consuming processing

The process with AI takes time, so I decided to use Render to host an API built with Node.js and use bull to use AI in the background job.

It works very well so far, without any problem.

I'm using Betterstack Log for logging and it's supa easy to set it up with Render.

Highly recommended.

Something I'd like to try in the future

Supabase x Resend integration

I've been using Resend for a couple of months, and I found this video the other day.

This integration will likely make it easier to send emails to users using Resend.

By the way, I am regarding sending emails this time,

Resend
Loops

I strongly recommend both.

pg_vector

pg_vector is another Postgres extension to store vector data in the Postgres.

Storing OpenAI embeddings in Postgres with pgvector

I'm using it for Autothread AI and it's working very well!

I'm sure I'll need it for Supabox in the future and excited to use it again!

Conclusion

I hope you understand how easy it is to create apps with Supabase (it's supa easy :D)

I think you will be able to complete your MVP very quickly, especially since there is a lot of integration with popular third-party tools (Resend, Langchain, etc).

Also, take a look at Supabox.

I'm looking g forward to seeing how you like it :)

Let me know your thoughts on the article and Supabox!
@taishik_

We don't have to use Enums on TypeScript? 【Discussion】

Taishi — Tue, 03 May 2022 01:18:16 +0000

Hi, Devs! I am Taishi, a software developer in Vancouver!

I have been thinking about using Enums lately, and my conclusion is that we should NOT use Enums if possible.

But why?

Enums has impact on compiled JavaScript files

Usually tsc command removes all the TypeScript unique stuff such as

Type definition
Interface definition
Type annotation

This means TypeScript doesn't have any effect on the compiled JavaScript files.

On the other hand, TypeScript has some impact on JS files if you use Enums.

Let's compare them!

Case 1: Union types

TypeScript

type BigTechz = "Google" | "Apple" | "Amazon";

const myFav: BigTechz = "Apple";

Javascript after tsc

"use strict";
const myFav = "Apple";

Case 2: Enums

enum BigTechz {
  Google = "Google",
  Apple = "Apple",
  Amazon = "Amazon",
}

const myFav: BigTechz = BigTechz.Apple;

Javascript after tsc

"use strict";
var BigTechz;
(function (BigTechz) {
  BigTechz["Google"] = "Google";
  BigTechz["Apple"] = "Apple";
  BigTechz["Amazon"] = "Amazon";
})(BigTechz || (BigTechz = {}));
const myFav = BigTechz.Apple;

My thought

As you can see above, Enums stays on a JavaScript file as an object...which causes a bigger bundle size.
And more importantly, I think TypeScript shouldn't have any impact on compiled JavaScript files.

TypeScript is basically a type checker when you write codes and when you compile TS files with tsc command.

Most of the times you can use other TS syntax instead of Enums, and I think we should do that if possible (Maybe I just prefer Union types🙄)!

I'd like to hear other devs' opinion about this topic, and I appreciated if you leave a comment!

Thanks!

My first impression of Supabase - The better version of Firebase!?

Taishi — Mon, 22 Feb 2021 06:09:13 +0000

What is Supabase!?

On the website, it says The Open Source Firebase Alternative

The Open Source Alternative to Firebase. | The Open Source Firebase Alternative | Supabase

It has Authentication, Database, storage(coming soon), and function(coming soon) just like Firebase does.

I converted my Firebase project into Supabase one and I am gonna write down my impression of it ✍️

Authentication

The authentication feature of Supabase is as easy and handy as Firebase.

We can sign up with the third parties too.

Google
Github
Gitlab
Azure
Facebook
Bitbucket

I tried with GitHub and the procedure of setting is the same as Firebase.

We have to create a GitHub app and put App Client Id, secret and call back URL.

Supabase takes care of the call back URL ✌️

https://<your-project>.supabase.co/auth/v1/callback

If you want users to sign up/sign in with a GitHub account, you can simply put the code below.

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_ANON_KEY)

const handleSignUp = async () => {
  const { user, session, error } = await supabase.auth.signIn({
    // provider can be 'github', 'google', 'gitlab', or 'bitbucket'
    provider: 'github',
  })
}

Firebase's Authentication feature is very easy to use and so convenient.
What I am impressed with is that Supabase's Authentication feature has the same level as Firebase's.

This is really amazing.

Database

I bet many of you have wished that Firebase has a relational database, not No SQL.

And Supabase comes with PostgreSQL!!
I think this is the biggest difference between Firebase and Supabase.

You can execute complex queries.

Firebase has Database but that's a NO SQL (Firestore) which is not good at fetching data with complex queries.

I have been waiting for the product that is like Firebase with RDB, thus Supabase is my ideal 😻

If you want to save a user's data on a database every time a user signs up, you can create a function and trigger it!

1.Create the public.user table

create table users (
  id uuid references auth.users not null primary key,
  email text
);

2.Create the function

create or replace function public.handle_new_user() 
returns trigger as $$
begin
  insert into public.users (id, email)
  values (new.id, new.email);
  return new;
end;
$$ language plpgsql security definer;

3.Trigger the function

create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

Reference:

Comment for #563

kiwicopple commented on Feb 04, 2021

Hi all - I just tried with a new project and didn't have any errors here. Here were the steps:

Create a public.users table:

create table users (
  id uuid references auth.users not null primary key,
  email text
);

create a trigger:

create or replace function public.handle_new_user() 
returns trigger as $$
begin
  insert into public.users (id, email)
  values (new.id, new.email);
  return new;
end;
$$ language plpgsql security definer;

Trigger the function on invite:

-- trigger the function every time a user is created
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

Invite a user via the UI

See the user with email in the table:

Let me know if I'm missing anything

View on GitHub

As a result, auth.users(that Supabase automatically creates and not accessible for the public) and publis.users (that you created with the SQL!) have the user information.

public.users

auth.users

Rules for DB

Firestore has a rule functionality.

I use it to restrict database manipulation.

allow write: if request.auth.uid == userId;

With Supabase, we can do the same thing with Policies.
You can create politics from a dashboard or with SQL.

create policy "Individuals can update their own data." on users for
    update using (auth.uid() = id);

Now my users table has one policy.

Make sure the users table is locked (Row Level Security is on).

Wanna use a complicated query?

Of curse, you can.

Because of security risk, you can't use some type of query with Supabase's npm library.
But just same as normal PostgreSQL, you can create a view and use it from the front-end.

Create a view

CREATE VIEW public.events_by_month AS
SELECT to_char(generate_series(event_months.min, event_months.max, '1 month'), 'Mon-YY') AS months
FROM (
  SELECT
    date_trunc('month', min(start_date)) AS min,
    date_trunc('month', max(start_date)) AS max
  FROM events
) event_months

Use the view

const response = await supabase
    .from('events_by_month')
    .select('*')

I used the view feature to execute the query with the join clause and it worked 🤩

Reference:

Comment for #190

kiwicopple commented on Sep 09, 2020

Unfortunately you can't do it that way as it would probably open up the possibility of SQL injection.

But it can be done! You can just create a view on your data, and you can select() that. Something like this:

CREATE VIEW public.events_by_month AS
SELECT to_char(generate_series(event_months.min, event_months.max, '1 month'), 'Mon-YY') AS months
FROM (
  SELECT
    date_trunc('month', min(start_date)) AS min,
    date_trunc('month', max(start_date)) AS max
  FROM events
) event_months

then you can query it with supabase-js:

const response = await supabase
    .from('events_by_month')
    .select('*')

Let me know if that works for your use-case!

View on GitHub

Summary

When compared to Firebase, Supabase offers the same ease of use as Firebase. This is great.
In addition to that, you can use Relational Database.

In my case, I wanted to create a Tinder-like app and it's easy to imagine that the RDB feature is essential for data fetching. And I just went for Supabase 🚀

It's not hard for Supabase to become a must-have for my app development.

If you are a developer who uses Firebase a lot, and you need a relational database, Supabase will surely help you!

How to manage global data with Context API, without Redux on React

Taishi — Sun, 04 Oct 2020 22:34:05 +0000

Hi, Taishi here 👋

How do you manage global data on React?
I used to use Redux for that, however, I currently use Context API for that purpose and I don't even install redux and redux-related packages!

2 ways to implement it with Context API

I think there are 2 ways to make it happen.
A simple and complicated one.

I am gonna explain the simple one first ☝️

Imagine we want to manage the logged-in user data.

1. Use state variable

First of all, we need a Context component for sure.

I found this way when I was reading next.js/userContext.js at master · vercel/next.js 😋

Add userContext.js

Let's make ./src/context/userContext.js.

// File: ./src/context/userContext.js
import React, { useState, useEffect, createContext, useContext } from 'react';
import firebase from '../firebase/clientApp';

export const UserContext = createContext();

export default function UserContextComp({ children }) {
  const [user, setUser] = useState(null);
  const [loadingUser, setLoadingUser] = useState(true); // Helpful, to update the UI accordingly.

  useEffect(() => {
    // Listen authenticated user
    const unsubscriber = firebase.auth().onAuthStateChanged(async (user) => {
      try {
        if (user) {
          // User is signed in.
          const { uid, displayName, email, photoURL } = user;
          // You could also look for the user doc in your Firestore (if you have one):
          // const userDoc = await firebase.firestore().doc(`users/${uid}`).get()
          setUser({ uid, displayName, email, photoURL });
        } else setUser(null);
      } catch (error) {
        // Most probably a connection error. Handle appropriately.
      } finally {
        setLoadingUser(false);
      }
    });

    // Unsubscribe auth listener on unmount
    return () => unsubscriber();
  }, []);

  return (
    <UserContext.Provider value={{ user, setUser, loadingUser }}>
      {children}
    </UserContext.Provider>
  );
}

// Custom hook that shorhands the context!
export const useUser = () => useContext(UserContext);

As you can see, UserContextComp component has user state variable.

const [user, setUser] = useState(null);

We store the user data in this user variable and update it with setUser() function.

Edit index.js

Now we have to use the UserContextComp component to consume it!
Edit ./src/index.js like below.

// File: ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import UserProvider from './context/userContext';

ReactDOM.render(
  <React.StrictMode>
    <UserProvider>
      <App />
    </UserProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Now we can use user variable and update it with setuser() function everywhere ✌️

How to consume it

Import the useUser function from the ./src/context/userContext.js and get the variable you need.
In this case, we take loadingUser, user, and setUser.

import React from 'react';
import { useUser } from '../context/userContext';

const MyComponent = () => {
  const { loadingUser, user, setUser } = useUser();

  return (
    <>
      {loadingUser ? (
        <div>loading…</div>
      ) : (
        <div>Welcome, {user.displayName}</div>
      )}
    </>
  );
};

export default MyComponent;

Please just use setUser if you need to update the user data just like when you update the usual state variable.

2. Use dispatch and reducer (more Redux way)

In this way, we use useContext with useReducer hook.

I feel like this way is Redux without Redux 🤤
Sure, Redux uses Context API inside itself.

By the way. I made an example app here.
Please take a look at this if you wanna make it happen on your local environment.

taishikato / context-api-with-useReducer

Context API with useReducer

This is a demo app to show how Context API x useReducer work 🧝🏻‍♀️

1. Set your firebase project

Please edit ./src/firebase.js.

2. `yarn start`

That's it!

View on GitHub

Anyway, let's dive into it!

Add `./src/context/reducer.js`

If you are familiar with Redux, you can understand this with ease.

Now we are gonna define the reducer function and initialState.
The default value of user is null.

// File: ./src/context/reducer.js
export const initialState = {
  user: null,
};

export const actionTypes = {
  SET_USER: 'SET_USER',
};

const reducer = (state, action) => {
  switch (action.type) {
    case actionTypes.SET_USER:
      return {
        ...state,
        user: action.user,
      };
    default:
      return state;
  }
};

export default reducer;

Make `./src/context/StateProvider.js`

// File: ./src/context/StateProvider.js`

import React, { createContext, useContext, useReducer } from 'react';

export const StateContext = createContext([]);

export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

export const useStateValue = () => useContext(StateContext);

Set the Provider in `./src/index.js`

Because of this, we can consume the StateContext component everywhere!

// File: ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
+ import { StateProvider } from './context/StateProvider';
+ import reducer, { initialState } from './context/reducer';

ReactDOM.render(
  <React.StrictMode>
+    <StateProvider initialState={initialState} reducer={reducer}>
      <App />
+    </StateProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Now display the logged in user's name!

Make a Auth component and use it in App.js like below.

We need login/logout methods (handleLogin, handleLogout) to handle onclick events, so make them as well.

// File: ./src/App.js
import React from 'react';

import Auth from './Auth';
import { auth, provider } from './firebase';
import { useStateValue } from './context/StateProvider';
import { actionTypes } from './context/reducer';
import './App.css';

function App() {
  const [state, dispatch] = useStateValue();

  const handleLogin = async () => {
    try {
      const result = await auth.signInWithPopup(provider);
      dispatch({
        type: actionTypes.SET_USER,
        user: result.user,
      });
    } catch (err) {
      alert(err.message);
    }
  };

  const handleLogout = async () => {
    await auth.signOut();
    dispatch({
      type: actionTypes.SET_USER,
      user: null,
    });
  };

  return (
    <Auth>
      <div className="App">
        <header className="App-header">
          <div>{state.user?.displayName}</div>
          {state.user ? (
            <button onClick={handleLogout}>Logout</button>
          ) : (
            <button onClick={handleLogin}>Login</button>
          )}
        </header>
      </div>
    </Auth>
  );
}

export default App;

As the reference says, useReducer returns state and dispatch.

An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.)

That's why we can get variables like this.

useStateValue() returns useContext(StateContext), and this returns useReducer(reducer, initialState).

const [state, dispatch] = useStateValue();

Now you see like this and you can login/logout.

If you logged in successfully, you can see your name as below.

When the value of state.user is set, your name will be shown.

<div>{state.user?.displayName}</div>

Note

I think 2. Use dispatch and reducer (more Redux way) may look complicated to you, but we can easily understand what kind of data this app manages globally in initialState. In this example, we manage only user variable globally, but imagine if we manage like 10 variables 😅

Hope this helps.

【Step by Step】How to implement Dark Mode with Tailwind CSS on React

Taishi — Mon, 28 Sep 2020 00:00:18 +0000

This article is also on Medium and en.taishikato.com

Taishi here👋

Today I am going to write about how to implement Dark Mode with Tailwind CSS.
Dark Mode is now one of the important features for usability and you should implement this on your website if you have not done yet.

Don't worry. It's quite easy!

BTW, the complete example on GitHub is here ✌️

taishikato / Dark-Mode-with-Tailwind-CSS

This repo is for my article: https://dev.to/taishi/step-by-step-how-to-implement-dark-mode-with-tailwind-css-on-react-3565

Create your React app with CRA CLI

$ npx create-react-app dark

Let's host it on http://local:3000

$ cd dark
$ npm run start

Now I believe you see this page on your http://localhost:3000 🎉

This time we don't need ./src/App.css, so delete the file and make ./src/App.js simpler like below😸

import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Now the website looks much simpler.

Add Tailwind CSS

Let's add packages for Tailwind CSS

$ npm i tailwindcss autoprefixer postcss-cli --save-dev

Generate a config file of Tailwind CSS.

The command below creates ./tailwind.config.js.

$ npx tailwindcss init

Add `postcss.config.js`

The content looks like this.

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

Make a Stylesheet file.

Let's add a ./src/tailwind.src.css like below.

@tailwind base;

@tailwind components;

@tailwind utilities;

Add a script to generate a CSS file

tailwind:css on package.json builds a CSS file as ./src/tailwind.css you actually use in your React app.

"scripts": {
+   "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css",
     "start": "react-scripts start",
     "build": "react-scripts build",
     .
     .
     .

Let start and build use tailwind:css.

"scripts": {
  - "start": "react-scripts start",
  - "build": "react-scripts build",
  + "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css",
  + "start": "npm run tailwind:css && react-scripts start",
  + "build": "npm run tailwind:css && react-scripts build",

Every time you use the start or build script, it generates a CSS file for you👍

Let's import `tailwind.css` in `App.js`

import React from 'react';
+ import ./'tailwind.css';

 function App() {
   return (

All set! Now your app uses Tailwind CSS 🌬️

Use Tailwind CSS to align your text

Just try to use a class text-center from Tailwind CSS. Now our App.js looks like below.

import React from 'react';
import './tailwind.css';

function App() {
  return (
    <div className="App">
      <header className="App-header text-center">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Your web page looks like below.

Customize Tailwind CSS for Dark mode

We want to use dark: like this. In this example, when the value of prefers-color-scheme is dark, bg-black becomes valid.

<div className="dark:bg-black">

First, we need to customize tailwind.config.js to make it happen😎

Customize the `screens` property

Your current tailwind.config.js should look like this.

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Add screens property under extend.

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: ['./src/App.js'],
  theme: {
    extend: {
      screens: {
        dark: { raw: '(prefers-color-scheme: dark)' },
      },
    },
  },
  variants: {},
  plugins: [],
}

What's gonna happen!?

According to the Tailwind CSS document - Custom media queries, we can make our own screen, which means tailwindcss command generates CSS like this:

@media (prefers-color-scheme: dark) {
  .dark\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    .dark\:container {
      max-width: 640px;
    }
  }
  .
  .

Let's execute npm run start again to generate a new tailwind.css and check the file 👀

It's working!

Dark Mode

Let's make your app dark mode available 😈

Just add dark:bg-black dark:text-white on App.js.

import React from 'react';
import './tailwind.css';

function App() {
  return (
    <div className="App dark:bg-black dark:text-white">
      <header className="App-header text-center">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Now it has Dark Mode 👽

Thank you for reading.

How does Optional Chaining make React App development easier?

Taishi — Fri, 25 Sep 2020 22:03:07 +0000

What do you do when you are not sure that the object variable has the specific property?

My recent answer is Optional chaining.

What is Optional chaining?

The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. Optional chaining (?.) - JavaScript | MDN

I just quoted from MDN haha.

It basically makes it easier to access a property within an object.

How does it make React App development easier?

Imagine you fetch the user data from Firebase Authentication.

The user variable will be like this after fetching data.

{ displayName: 'Mike' }

import React from 'react';
// Use Context API and make useStateValue
import { useStateValue } from './context/useStateValue'

function App() {
  const [user, dispatch] = useStateValue(null);

  return (
    <div className="App">
      <h1>Welcome, {user.dispayName}</h1>
    </div>
  );
}

export default App;

What's gonna happen?

TypeError: Cannot read property 'dispayName' of null

Yes, this is what happens.

Conventional way

Trinomial calculus

I always used Trinomial calculus before Optional Chaining in this case.

In this pattern, your React app renders <div>Loading…</div> initially and then show <h1>Welcome, Your Name</h1> after fetching data from Firebase.

I kinda like this because <h1> doesn't get rendered until it's needed to be rendered.

{user ? <h1>Welcome, {user.dispayName}</h1> : <div>Loading…</div>}

Nullish coalescing Operator

<h1>Welcome, {user && user.dispayName}</h1>

Use Optional chaining

Just adding one ?! Deadly simple, isn't it!?

<h1>Welcome, {user?.dispayName}</h1>

Conclusion

I think most of the time Optional chaining is very handy and speeds up your development.

Count on Trinomial calculus when you need to show other elements while the object or property is not valid.

【Finally…】Announcing the Official Launch of AskMakers v2.0

Taishi — Tue, 21 Jul 2020 00:45:46 +0000

Oh…I am so sleepy…because I launched AskMakers 2.0 on Product Hunt and I have been monitoring it almost without sleeping😪

The first version of it was launched about 10 months ago.
I worked so hard on it and it got over 100 upvotes within 24 hours for the first time🤩

To make an app useful, I sent emails to ask successful makers to join AskMakers.
I am nobody, just a software developer from Tokyo (currently in Vancouver), however, some of them signed up on and support it!! Unbelievable🤯

Thank you Justin, Hari, Amie, Jonathan, and Jaime😆

After that, it took 10 months until the launch of 2.0…
I always thought like I need to add more features to launch, and I felt like I can never launch it…I should not try to be perfect.

This post pushed my back very hard.

The saddest “Just Ship It” story ever | by Kitze | Medium

Kitze ・ Jul 8, 2020 ・
Medium

Eventually, I decide to launch AskMakers 2.0!

Taishi@🇨🇦

@askmakers_app

The new version of AskMakers is now LIVE on @ProductHunt 📢
This is a Q&A web app for makers (You can say Quora for makers)💡
Thank you for the support @mijustin @1HaKr @hyper_yolo @jonathanbull @jtatsubana and many makers👩‍💻🧑‍💻🙏

producthunt.com/posts/askmaker…

01:04 AM - 21 Jul 2020

BTW, it's live on Product Hunt.
Please check it AskMakers 2.0 - Ask experienced makers questions💡

🛠 New stack

I know most users don't care what kind of technology the product use but…yeah, I just did.
・Next.js for SSR
・Totally new design with Tailwind CSS
I used to use Nuxt.js and Bulma for AskMakers, but I wanted to make SSR and use React, so I chose Next.js.

🎨 Renewed UI

I have worked so hard to make it better for users to browse AskMakers.
I am not a designer so I did research, learned, and applied my new knowledge to AskMakers.

👨‍🎤 New featured makers

Jonathan and Jaime joined AskMakers 2.0.
Thank you!

🔍 Search questions

🚀 Categories

When I sent an email to @dinkydani21 about AskMakers, she told me the categories and search functionality are absolutely necessary for AskMakers.
I agree! What kind of web applications like this doesn't have these functionalities?
I wrote a code and implemented it ASAP.
Thank you for the kind feedback @dinkydani21 😊

💬 Comment on the answer

The discussion is very important, therefore I added the commenting feature!

📧 Email notifications

You receive an email notification when you receive an answer, an upvote on your answer, your answer gets bookmarked, or someone comments on your answer.
You can turn off the notifications on your setting page👌

🔮 More to come

I am very excited about the future!!
I talked with my friend @shyamady and I think I got a very promising idea for the v3.0.
Can't wait to show you!

Stay tuned👨🏻‍🎤

Do you know how to use Nuxt.js with Express? Let's explain it.

Taishi — Wed, 10 Jun 2020 03:33:07 +0000

Last year I was obsessed with the stack below 🔥

Could Functions: For Node.js hosting
Nuxt.js: For backend and frontend
Firebase Hosting: For static files (HTML, CSS, JavaScript and etc)
Cloudinary: For media files (dev.to uses this!)

When I first started using Nuxt.js with Cloud Functions, I could not understand how they communicate with each other.

How does Express call Nuxt.js when it receives a request?

So this time, I am going to elaborate on how we can connect Express to Nuxt.js on Cloud Functions.

Integrate Nuxt.js with Express

Point1. Use Nuxt.js as middleware on Express.

You can use Nuxt.js as middleware like this

I didn't have such an idea that I can use Nuxt.js as middleware on another framework.

Separate processing for each path using nuxt.renderRoute()

With nuxt.renderRoute(), you can decide which page component Nuxt.js will use for each path.

For example, the application is https://example.com.
If you wrote the following, if you went to https://example.com, you would see the Nuxt.js uses pages/top.vue. Easy!!

app.get('/', (req, res) => {
  nuxt.renderRoute('/top', { req })
  .then(result => {
    res.send(result.html);
  })
  .catch(e => {
    res.send(e);
  });
});

You cam pass the context as a second argument.

If you want to call some API on Express and pass the response to Nuxt.js, you can use req object like below.

app.get('/', (req, res) => {
  (async () => {
    // Call an API with axios
    const { data } = await axios.get('https://api.com');
    req.data = data;
    const result = await nuxt.renderRoute('/top', { req });
    res.send(result.html);
  })();
});

You can use that data with Nuxt.js asyncData function.

<template>
  <div>
    {{ apiResult }}
  </div>
</template>

<script>
export default {
  asyncData(context) {
    return { apiResult: context.req.data };
  }
}
</script>

Explanation of the entire process with diagrams

Client send a request to Firebase Cloud Functions (or any other web servers) and Express receive it.
Express calls nuxt.renderRoute()
Nuxt.js generates HTML and returns it to Express
Express sends the HTML returned by Nuxt.js to the client

Hope it helps!

Thank you for reading!!

Check my socials as well✌️
Twitter: @askmakers_app
Product Hunt: @taishi_kato

I am currently looking for full-time job in Vancouver and Toronto area!
My resume is here.
Please hit me if you can help🙏

Thank you!

How I make my npm package conformable to TypeScript?

Taishi — Sun, 24 May 2020 23:00:21 +0000

Last time we made an NPM package with JavaScript.

How I published my first npm package?

Taishi ・ May 23 '20 ・ 4 min read

#npm #javascript #productivity #typescript

Yes. It’s great! We made it😎.

BUT, there is one problem. We can not use it with TypeScript projects out of the box because there is no type definition file and TS project can’t know any types of this NPM package.

This time we will make a TypeScript file and generate a type definition file.

Don't worry. It's just a piece of cake🍰.

Change your index.js file to index.ts

Just change the extension of the file and update the source code.

JavaScript

import { v4 as uuidv4 } from 'uuid';
const generateSlug = (target, hasUuidSuffix = false) => {
  const text = target.toLowerCase();
  const filterdText = text.replace(/[^a-zA-Z0-9]/g, ' ');
  let textArray = filterdText.split(/\s|\n\t/g);
  textArray = textArray.filter(text => {
    return text !== '';
  });
  const slug = textArray.join('-');
  if (hasUuidSuffix) return `${slug}-${uuidv4().split('-')[0]}`;
  return slug;
};
export default generateSlug;

TypeScript

import { v4 as uuidv4 } from 'uuid';
const generateSlug = (target: string, hasUuidSuffix = false): string => {
  const text = target.toLowerCase();
  const filterdText = text.replace(/[^a-zA-Z0-9]/g, ' ');
  let textArray = filterdText.split(/\s|\n\t/g);
  textArray = textArray.filter(text => {
    return text !== '';
  });
  const slug = textArray.join('-');
  if (hasUuidSuffix) return `${slug}-${uuidv4().split('-')[0]}`;
  return slug;
};
export default generateSlug;

They are almost the same this time😅.

Initialize with tsc command

Let’s initialize your project with tsc command, which generates tsconfig.json file.

$ tsc --init
message TS6071: Successfully created a tsconfig.json file.

Add `"declaration": true` to your `tsconfig.json`

We should do this to generate corresponding .d.ts file (type definition file) when we execute yarn build.
Your tsconfig.json looks like below.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "strict": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Add `"types": "index.d.ts"` to your `package.json`

By adding this, a type definition file will be generated as index.d.ts.
So your package.json looks like below.

{
  "name": "@taishikato/slug-generator",
  "version": "2.2.0",
  "description": "generate slug string",
  "main": "index.js",
  "types": "index.d.ts",
  "repository": "https://github.com/taishikato/slug-generator",
  "author": "taishikato",
  "license": "MIT",
  "private": false,
  "scripts": {
    "build": "tsc"
  },
  "dependencies": {
    "uuid": "^7.0.2"
  },
  "keywords": [
    "slug",
    "npm",
    "package",
    "taishikato",
    "slug generator"
  ],
  "devDependencies": {
    "@types/uuid": "^7.0.2",
    "typescript": "^3.8.3"
  }
}

Add .npmignore

This file is the key.
npm command usually checks .gitignore file to see which file should be excluded in the package.
You need to add .npmignore when the files which should be excluded are different from .gitignore. In this case, npm command does not check .gitignore, checks only .npmignore.
Your .npmignore looks like below

.gitignore
yarn.lock
node_modules
index.ts

That’s it!
Easy peasy!

taishikato/slug-generator: Slug generator for blog posts or any other contents

Thank you for reading

How I published my first npm package?

Taishi — Sat, 23 May 2020 23:04:39 +0000

This article is originally posted here.

I thought making and publishing an NPM package isn’t easy.

Actually, it’s so easy! Your package doesn’t have to be very tricky, unique, and awesome.

You can publish your favorite utility code and install it on your project with npm or yarn command.
All I want to say is…it’s not complicated. We can do it!

TL;DR

This time I publish an npm package called @taishikato/slug-generator which generates slug string from text such as blog post title.

e.i. The string below is the slug for this URL(https://medium.com/@TaishiKato/how-i-published-my-first-npm-package-5388564bf643).

how-i-published-my-first-npm-package-5388564bf643

How to publish

Create an account
Let’s make an npm account here.

Login via CLI
npm command takes care of you.

$ npm adduser
Username: your-username
Password:
Email: (this IS public) your-email
Logged in as your-username on https://registry.npmjs.org/.

Great. Now you are logged in.
Then make a directory for the package.

$ mkdir slug-generator && cd $_

Now you are under the slug-generator directory.
We want to make our package scoped package to use the name (slug-generator in this case) that already is taken by someone.
Execute yarn init to generate a package.json. You will be asked some questions so please answer them.

$ yarn init
yarn init v1.16.0
warning ../../package.json: No license field
question name (slug-generator): @taishikato/slug-generator
question version (1.0.0):
question description: generate slug string
question entry point (index.js):
question repository url: https://github.com/taishikato/slug-generator
question author: taishikato
question license (MIT):
question private: false
success Saved package.json
✨  Done in 68.06s.

Then you need to use npm publish — access=public to publish a public package.

$ npm publish --access=public
npm notice
npm notice 📦  @taishikato/slug-generator@1.0.0
npm notice === Tarball Contents ===
npm notice 258B package.json
npm notice === Tarball Details ===
npm notice name:          @taishikato/slug-generator
npm notice version:       1.0.0
npm notice package size:  257 B
npm notice unpacked size: 258 B
npm notice shasum:        bf71ac427082c283c6d2cf600f7d1691ab0b5964
npm notice integrity:     sha512-clwDAYf181ObB[...]5pwvhOJbTUAiA==
npm notice total files:   1
npm notice
+ @taishikato/slug-generator@1.0.0

All done. Too quick? But yes version 1.0.0 of your package is on npm.
But we still don’t have a README, LICENSE file, and actual lines of codes😇.

Add README!

Yes, we need a blazing README.
Go to shields.io to generate budgets and show how cool we are😎.
At first, we generate a budge to display the version of your package on npm.

Next, we got an error because we don’t have any code yet… but generate it anyway🙄.

Make a README.md file and paste the budgets you made.

Let’s add some code (Finally)

Just simple code here.

import { v4 as uuidv4 } from 'uuid';
const generateSlug = (target, hasUuidSuffix = false) => {
  const text = target.toLowerCase();
  const filterdText = text.replace(/[^a-zA-Z0-9]/g, ' ');
  let textArray = filterdText.split(/\s|\n\t/g);
  textArray = textArray.filter(text => {
    return text !== '';
  });
  const slug = textArray.join('-');
  if (hasUuidSuffix) return `${slug}-${uuidv4().split('-')[0]}`;
  return slug;
};
export default generateSlug;

License

Hit this page (Insights→Community) on Github.

Choose MIT anyway😅

Version

By the way, npm uses Semantic Versioning. You don’t need to know the detail of it now but the main rules and concepts are

Given a version number MAJOR.MINOR.PATCH, increment the:

MAJOR version when you make incompatible API changes,
MINOR version when you add functionality in a backwards compatible manner, and
PATCH version when you make backwards compatible bug fixes.

We need to change the major version so use the command below.

$ npm version major
v2.0.0

Publish🚀

$ npm publish
npm notice
npm notice 📦  @taishikato/slug-generator@2.0.0
npm notice === Tarball Contents ===
npm notice 1.1kB LICENSE
npm notice 496B  index.js
npm notice 304B  package.json
npm notice 901B  README.md
npm notice === Tarball Details ===
npm notice name:          @taishikato/slug-generator
npm notice version:       2.0.0
npm notice package size:  1.7 kB
npm notice unpacked size: 2.8 kB
npm notice shasum:        a43b58c8d1434faaeaf207778619981d5b372bd5
npm notice integrity:     sha512-u4jsqO8B7j3PY[...]kfdDVtGHT4+Zw==
npm notice total files:   4
npm notice
+ @taishikato/slug-generator@2.0.0

Add some keywords on package.json

Mine is something like this

{
  "name": "@taishikato/slug-generator",
  "version": "2.0.0",
  "description": "generate slug string",
  "main": "index.js",
  "repository": "https://github.com/taishikato/slug-generator",
  "author": "taishikato",
  "license": "MIT",
  "private": false,
  "dependencies": {
    "uuid": "^7.0.2"
  },
  "keywords": [
    "slug",
    "npm",
    "package",
    "taishikato",
    "slug generator"
  ]
}

Thank you!

Now you can ship your code on npm!
You can do it for your future projects.
You can do it for the developers’ community.
It’s great for any reason.

What are you waiting for?
Let’s make a package.json and output something in this world🌎!

Reference

Thank you Jonathan Wood for the great article!
How to make a beautiful, tiny npm package and publish it

🖊️taishikato/slug-generator🖋️

taishikato/slug-generator: Slug generator for blog posts or any other contents

DEV Community: Taishi

Supabase Just Got More Powerful: Queue, Cron, and Background Tasks in Edge Functions

The Old World: Juggling Multiple Services

The New World: Supabase Queue Changes Everything

The Complete Backend Package

I got #1 Product of the Day on Product Hunt without spending a dollar

Wait, what is AutoRepurpose?

So how did I build AutoRepurpose?

How much traction did I get from the launch?

What I used other than Supabase?

I'll stick with them

How I build my startup supa-quick

Many Supabox functions rely on Supabase

Authentication

Data encryption

You want to have a cron job? No problem.

API responsible for time-consuming processing

Something I'd like to try in the future

Supabase x Resend integration

pg_vector

Conclusion

We don't have to use Enums on TypeScript? 【Discussion】

Enums has impact on compiled JavaScript files

My thought

My first impression of Supabase - The better version of Firebase!?

What is Supabase!?

Authentication

Database

Comment for #563

Rules for DB

Wanna use a complicated query?

Comment for #190

Summary

How to manage global data with Context API, without Redux on React

2 ways to implement it with Context API

1. Use state variable

Add userContext.js

Edit index.js

How to consume it

2. Use dispatch and reducer (more Redux way)

taishikato / context-api-with-useReducer

Context API with useReducer

1. Set your firebase project

2. yarn start

Add ./src/context/reducer.js

Make ./src/context/StateProvider.js

Set the Provider in ./src/index.js

Now display the logged in user's name!

Note

【Step by Step】How to implement Dark Mode with Tailwind CSS on React

taishikato / Dark-Mode-with-Tailwind-CSS

This repo is for my article: https://dev.to/taishi/step-by-step-how-to-implement-dark-mode-with-tailwind-css-on-react-3565

Create your React app with CRA CLI

Add Tailwind CSS

Let's add packages for Tailwind CSS

Generate a config file of Tailwind CSS.

Add postcss.config.js

Make a Stylesheet file.

Add a script to generate a CSS file

Let's import tailwind.css in App.js

Use Tailwind CSS to align your text

Customize Tailwind CSS for Dark mode

Customize the screens property

Dark Mode

How does Optional Chaining make React App development easier?

What is Optional chaining?

How does it make React App development easier?

Conventional way

Trinomial calculus

Nullish coalescing Operator

Use Optional chaining

Conclusion

【Finally…】Announcing the Official Launch of AskMakers v2.0

The saddest “Just Ship It” story ever | by Kitze | Medium

Kitze ・ Jul 8, 2020 ・ Medium

🛠 New stack

🎨 Renewed UI

👨‍🎤 New featured makers

🔍 Search questions

🚀 Categories

2. `yarn start`

Add `./src/context/reducer.js`

Make `./src/context/StateProvider.js`

Set the Provider in `./src/index.js`

Add `postcss.config.js`

Let's import `tailwind.css` in `App.js`

Customize the `screens` property

Kitze ・ Jul 8, 2020 ・
Medium

Add `"declaration": true` to your `tsconfig.json`

Add `"types": "index.d.ts"` to your `package.json`