initial commit

.cursorrules

@@ -0,0 +1,79 @@
+You are an expert in modern full-stack development with Typescript, React, Remix, TailwindCSS.
+You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers.
+
+# Technologies
+
+- Typescript for frontend and backend
+- React for frontend
+- Remix for Backend for frontend
+- TailwindCSS for styling
+- Radix UI for accessible UI components
+- Github Actions for CI/CD
+- pnpm for package manager
+
+# Guidelines
+
+## Communication
+
+- Ask questions when you need to, don't make assumptions.
+- Summarize your changes distinctly and ask follow up questions.
+- Fully implement all requested functionality.
+- Leave NO todo’s, placeholders or missing pieces.
+- Ensure code is complete! Verify thoroughly finalised.
+
+## Documentation
+
+- Suggest adding/extending/modifying documentation in a root `docs/` folder
+- Create user flow diagrams for complex interactions.
+
+## Javascript/Typescript
+
+- Utilize Typescript and avoid using any!
+- Prefer types over interfaces
+- Prefer object params for a function in most cases (except when there is only 1 param)
+- kebab-case for filenames and folder-names
+- camelCase for functions and variables
+- PascalCase for React component functions
+- Handle errors and edge cases gracefully
+- Use typed error responses
+- Add sensible logging where appropriate
+- Use `const` for immutable variables.
+- Use template strings for string interpolation.
+- Use functional and declarative programming patterns; avoid classes.
+- Avoid enums; use maps instead.
+
+## React
+
+- Write functional components
+- Don't use `React.FC`
+- Don't add too much boilerplate to the components – keep it clean
+- Inline component prop types if they are used only once
+- Always add loading and error states to data fetching components
+- Use Error Boundaries for React component error catching (in Remix)
+
+## Accessibility
+
+- Use semantic elements (e.g., <header>, <main>, <footer>, <article>, <section>).
+- Make sure that all interactive elements are focusable and usable with the keyboard
+- Use `tabindex` where sensible
+- Don't duplicate information for screen readers
+- Use `aria-hidden` where sensible
+- Implement keyboard shortcuts where sensible (ESC, Enter, Tab, Arrow keys)
+- Use ARIA roles and attributes to enhance accessibility.
+- Ensure sufficient color contrast for text.
+- Use focus styles to indicate focus state.
+- Use landmarks (e.g., <nav>, <main>, <aside>) for screen readers.
+
+## Styling
+
+- Implement responsive design with Tailwind CSS; use a mobile-first approach.
+- Use `clsx` for combining styles and conditional styles
+
+## Routing and rendering
+
+- Do data fetching in `loader` functions
+- Move as much logic as possible to the `loader` functions
+  - Filtering, sorting, pagination, etc
+- Use `cacheHeader` from `pretty-cache-header` to set cache headers
+  - Always set sMaxage and stale-while-revalidate
+-

.eslintrc.cjs

@@ -0,0 +1,84 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @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",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "plugins": [
+        "prettier-plugin-tailwindcss"
+    ]
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

README.md

@@ -0,0 +1,30 @@
+# Arthouse full-stack starter-kit
+
+Base starter-kit for full-stack Typescript+React web dev projects. Has sensible defaults, clears out boilerplate and adds minimal utilities on top.
+
+Includes a `.cursorrules` file to get you started with Cursor – adapt it to your needs/style.
+
+Made by [Christian Cito](https://chrcit.com?utm_source=arthouse-starter-kit&utm_medium=github) /
+[Arthouse](https://madebyarthouse.com?utm_source=arthouse-starter-kit&utm_medium=github)
+
+## Stack
+
+- TypeScript
+- React
+- Remix w/ Vite
+- Tailwind
+- pnpm
+- Plausible analytics
+- Utilities (`prettier`, `eslint`, `clsx`, `pretty-cache-header`)
+
+## Setup
+
+Search for `change me` in the repo and replace with your own values.
+
+See [docs/replicate.md](docs/replicate.md) for steps to replicate this setup.
+
+## Pre-launch todos
+
+- [ ] Submit /sitemap.xml to search console
+- [ ] Setup domain in Plausible
+- [ ] Configure [`app/config.ts`](./app/config.ts)

app/config.ts

@@ -0,0 +1,34 @@
+const productionDomain = "change me";
+
+export const config = {
+  productionDomain,
+  productionUrl: `https://${productionDomain}`,
+  themeColor: "#000",
+  manifest: {
+    name: "change me",
+    shortName: "change me",
+    description: "change me",
+    backgroundColor: "#ffffff",
+    themeColor: "#000",
+    display: "standalone",
+    orientation: "portrait",
+    icons: [
+      {
+        src: "/icons/icon-192x192.png",
+        sizes: "192x192",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+      {
+        src: "/icons/icon-512x512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+  },
+};

app/entry.client.tsx

@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  );
+});