Remix rewrite

.env.example

@@ -1,14 +1,15 @@
 # Turso
-TURSO_DATABASE_URL=someurl
-TURSO_DATABASE_AUTH_TOKEN=sometoken
+TURSO_DATABASE_URL=some_url
+TURSO_DATABASE_AUTH_TOKEN=some_token
+CLERK_USER_ID=your_clerk_user_id # useful for seeding the database with your clerk user id
 
 # Clerk
 CLERK_SECRET_KEY=skey
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pkey
-NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
-NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
-NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
-NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
+CLERK_PUBLISHABLE_KEY=pkey
+CLERK_SIGN_IN_URL=/sign-in
+CLERK_SIGN_UP_URL=/sign-up
+CLERK_SIGN_IN_FALLBACK_URL=/
+CLERK_SIGN_UP_FALLBACK_URL=/
 
 # Upstash
 UPSTASH_REDIS_REST_URL=upstash.redis.url

.eslintrc.cjs

@@ -0,0 +1,89 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ['!**/.server', '!**/.client'],
+
+  // Base config
+  extends: ['eslint:recommended'],
+
+  overrides: [
+    // React
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react', 'jsx-a11y'],
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+      ],
+      settings: {
+        react: {
+          version: 'detect',
+        },
+        formComponents: ['Form'],
+        linkComponents: [
+          {name: 'Link', linkAttribute: 'to'},
+          {name: 'NavLink', linkAttribute: 'to'},
+        ],
+        'import/resolver': {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ['**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint', 'import'],
+      parser: '@typescript-eslint/parser',
+      settings: {
+        'import/internal-regex': '^~/',
+        'import/resolver': {
+          node: {
+            extensions: ['.ts', '.tsx'],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+      ],
+      rules: {
+        '@typescript-eslint/consistent-type-imports': [
+          'error',
+          {
+            prefer: 'type-imports',
+            fixStyle: 'inline-type-imports',
+          },
+        ],
+        '@typescript-eslint/no-import-type-side-effects': 'error',
+        '@typescript-eslint/no-namespace': ['error', {allowDeclarations: true}],
+      },
+    },
+
+    // Node
+    {
+      files: ['.eslintrc.cjs'],
+      env: {
+        node: true,
+      },
+    },
+  ],
+}

.gitignore

@@ -1,41 +1,17 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+node_modules
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
+/.cache
 /build
-
-# misc
 .DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # env files
 .env*
 .env*.local
 !.env.example
 
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-# drizzle
-/drizzle
+# sqlite db tables
 *.db*
+
+# drizzle migrations
+/drizzle/migrations/meta
+!/drizzle/migrations/*.sql

README.md

@@ -18,7 +18,7 @@ your leisure.
 
 ## Tech Stack and infrastructure
 
-- Next.js
+- Remix
 - Tailwind CSS
 - Drizzle ORM
 - Zod
@@ -45,20 +45,29 @@ bun install
 ```
 
 Next thing, you'll need to run the db migrations and push the schema to
-Planetscale:
+Turso:
 
 ```bash
-bun run db:migrate && bun run db:push
+bun db:generate && bun db:migrate && bun db:push
 ```
 
-If you wanna have some data right off the bat, you can run the seed command:
+If you want to have some data right off the bat, it's going to be extremely
+simple thanks to SQLite's simplicity. You need to first generate a local
+database file by running:
 
 ```bash
-bunx ts-node ./src/db/seed.ts
+turso dev --db-file local.db
 ```
 
-Then you can run the app:
+This will create a `local.db` file in the root of the project. You can now
+populate it with some data:
 
 ```bash
-bun run dev
+bun db:seed
+```
+
+Now you can run the app:
+
+```bash
+bun dev
 ```

app/components/error-list.tsx

@@ -0,0 +1,17 @@
+export function ErrorList({
+  id,
+  errors,
+}: {
+  id?: string
+  errors?: Array<string> | null
+}) {
+  return errors?.length ? (
+    <ul id={id} className="flex flex-col gap-1">
+      {errors.map((error, i) => (
+        <li key={i} className="text-sm text-destructive">
+          {error}
+        </li>
+      ))}
+    </ul>
+  ) : null
+}