Fix the Quickstart and updated the tooling

- Added Prettier
- Upgraded ESLint to v9
- Improved the TypeScript configuration while keeping some of the old config too
- Fixed the QS by adding routes which is in the .env.sample so the code now reflects that
- Changed the lockfile to pnpm

.prettierignore

@@ -0,0 +1,4 @@
+pnpm-lock.yaml
+node_modules
+dist
+README.md

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80
+}

app/routes/_index.tsx

@@ -5,7 +5,7 @@ import {
   UserButton,
   SignInButton,
   SignUpButton,
-} from "@clerk/remix";
+} from '@clerk/remix';
 
 export default function Index() {
   return (
@@ -23,12 +23,10 @@ export default function Index() {
       </SignedIn>
       <SignedOut>
         <p>You are signed out</p>
-        <div>
-          <SignInButton />
-        </div>
-        <div>
-          <SignUpButton />
-        </div>
+
+        <SignInButton />
+
+        <SignUpButton />
       </SignedOut>
     </div>
   );

app/routes/sign-in.tsx

@@ -0,0 +1,9 @@
+import { SignIn } from '@clerk/remix';
+
+export default function SignInRoute() {
+  return (
+    <>
+      <SignIn />
+    </>
+  );
+}

app/routes/sign-up.tsx

@@ -0,0 +1,9 @@
+import { SignUp } from '@clerk/remix';
+
+export default function SignUpRoute() {
+  return (
+    <>
+      <SignUp />
+    </>
+  );
+}

eslintrc.config.mjs

@@ -0,0 +1,28 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js';
+import { fixupConfigRules } from '@eslint/compat';
+
+export default [
+  { files: ['**/*.{mjs,ts,jsx,tsx}'] },
+  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...fixupConfigRules(pluginReactConfig),
+  {
+    settings: {
+      react: {
+        version: 'detect',
+        pragma: 'React',
+        pragmaFrag: 'React.Fragment',
+      },
+    },
+  },
+  {
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+    },
+  },
+];