TSS App 🏝️

Tanstack Start simple starter project.

Tech Stack

• Tanstack Start
• Tailwind CSS
• shadcn/ui
• tRPC
• Drizzle
• Lucia Auth - Adapters Removed RFC

Acknowledgements

• Julius's tss app with tRPC implementation.
• tanstack.com for the useMutation wrapper to help with redirects.
• dotnize beat me to it and ceated a starter project. I liked their API routes structure so the API routes for auth is inspired by theirs.
• ethanniser drizzle config to handle local, remote, local-replica for libsql.
• create-t3-app I am sure I copied some stuff from here as well
• UI inspired by again the legend Julius's create-t3-turbo
• shadcn-ui/taxonomy

Getting Started

Clone project

  git clone [email protected]:ally-ahmed/tss-app.git
  cd tss-app

Install depndencies

pnpm install

Create db and tables

pnpm db:push

Run app

pnpm dev

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

GITHUB_CLIENT_ID=""

GITHUB_CLIENT_SECRET=""

TODO

• Cache auth validation

• Custom fonts

• Investigate if there is a way to return a redirect from the server function without it being an error and it automatically does the redirect in the client. Tanner suggest userServerFn should work and it does for only URLs within the app but not external URL. So the useServerFn works for logout but not for Github login. And even with the logout it still goes throw the error channel

• Maybe look at ESLint, Prettier or even jump ship and use biomejs

challenges/skill issue

• CSS flicker on hard refresh (ctrl/command + shift + r) so I had to import the css like this then it stopped.

import '@/styles/globals.css'
import appCss from '@/styles/globals.css?url'

and also a link to Route options

  links: () => [{ rel: 'stylesheet', href: appCss }],

• useMutation hook considers a server function that return a redirect as an error so you get the result of the redirect in the error channel.