/shoryuken

Shoryuken is Trello-like app created with NextJS.

Primary LanguageTypeScript

Logo

Shoryuken

Shoryuken is Trello-like web app created with NextJS and TailwindCSS.

Board Detail

It has some features like:

  • Authentication.
  • Update user profile.
  • Create a board, open board detail, update board title, and delete a board.
  • Create a list, update list content, move a list and delete a list.
  • Create a card, update card content, move a card, and delete a card.

Card Detail

Prerequisites

You need to install these first on your machine:

  • NodeJS v18.17.* as minimum
  • Yarn 1.22.21
  • Git
  • VSCode

Installation

You need to follow these steps to run this project on your machine:

  1. Clone the repo from GitHub.
git clone git@github.com:gattigaga/shoryuken.git
  1. Open the directory and run yarn to install node_modules.
yarn

  1. Sign in and create a project in Supabase.

  2. Create database with this schema below in Supabase here.

DB Schema

  1. Create a view from auth.users in SQL Editor in Supabase here.
create or replace view public.users as select id, email, raw_user_meta_data from auth.users;
revoke all on public.users from anon, authenticated;

grant select on users to anon;
grant select on users to authenticated;

  1. Setup to enable Google Authentication in Supabase with this guide.

  2. Create .env.local in root directory and fill it with supabase url and anon key you got from this page in Supabase.

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
  1. Run the project with yarn.
yarn dev

Motivation

I create Shoryuken because I seek for a new frontend challenges and I think Trello is a good example. It has many interactivity features like drag and drop card, create a board, and etc.