Skip to content
/ xlug Public

Link shortener tool that allows you to create shorter and more manageable versions of long URLs.

License

Notifications You must be signed in to change notification settings

iswilljr/xlug

Repository files navigation

Xlug - Short and Manage your Long URLs

Link shortener tool that allows you to create shorter and more manageable versions of long URLs.

Stack

This is a Next.js project bootstrapped with create-next-app:

  • Next.js 13 /app directory + Typescript - The React Framework for the Web.
  • Tailwind CSS + shadcn/ui components - Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
  • Iconoir icons - An open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid.
  • React Hook Form Performant, flexible and extensible forms with easy-to-use validation.
  • Sonner - An opinionated toast component for React.
  • SWR - React Hooks for Data Fetching.
  • Zustand - A small, fast and scalable bearbones state-management solution using simplified flux principles.

Getting Started

  1. Install dependencies:
pnpm install
  1. Create a .env file in the root folder and paste your variables:
cp -r .env.example .env

How to get Github OAuth Client ID and Client Secret

  • Click here to create new Github OAuth app
  • Set the Application name. Example: Xlug development
  • Set the Homepage URL to http://localhost:3000
  • Set the Authorization callback URL to http://localhost:54321/auth/v1/callback
  • Go to "Client secrets" and generate new client secret
  • Copy the Client ID and Client Secret, go to .env and paste them into GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET

How to setup local supabase instance

pnpm db:start

# Started supabase local development setup.

#          API URL: http://localhost:54321
#           DB URL: postgresql://postgres:postgres@localhost:54322/postgres
#       Studio URL: http://localhost:54323
#     Inbucket URL: http://localhost:54324
#       JWT secret: <jwt-secret>
#         anon key: <anon-key>
# service_role key: <service-role-key>

How to link to a supabase project

Setup supabase project

Setup database

Finally, if you followed all the previous steps your .env file should look like this:

# The supabase api url and anon key
NEXT_PUBLIC_SUPABASE_URL="<URL>"
NEXT_PUBLIC_SUPABASE_ANON_KEY="<ANON-KEY>"

# Supabase project
SUPABASE_PASSWORD="<PASSWORD>"
SUPABASE_PROJECT_REF="<REF-ID>"

# Github OAuth
GITHUB_CLIENT_ID="<CLIENT-ID>"
GITHUB_CLIENT_SECRET="<CLIENT-SECRET>"

then run the following command to setup the supabase project database:

# If not logged in run $ pnpm supabase login
pnpm db:link && pnpm db:push

Start developing

You are all set, now you can run:

pnpm dev

License

This project is MIT Licensed.