feat: add tailwind, remove unwanted files or code, improve overall code

.gitignore

@@ -1,12 +1,37 @@
-.DS_Store
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
 node_modules
-.turbo
-*.log
-.next
-dist
-dist-ssr
-*.local
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+.swc/
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
 .env
-.cache
-server/dist
-public/dist
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# ui
+dist/

apps/client/.eslintrc.js

@@ -1,8 +1,3 @@
-/** @type {import("eslint").Linter.Config} */
 module.exports = {
   extends: ["@repo/eslint-config/next.js"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-  },
 };

apps/client/README.md

@@ -0,0 +1,28 @@
+## Getting Started
+
+First, run the development server:
+
+```bash
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.
+
+To create [API routes](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) add an `api/` directory to the `app/` directory with a `route.ts` file. For individual endpoints, create a subfolder in the `api` directory, like `api/hello/route.ts` would map to [http://localhost:3000/api/hello](http://localhost:3000/api/hello).
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/client/next.config.js

@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
 };

apps/client/package.json

@@ -1,14 +1,14 @@
 {
   "name": "client",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
+    "start": "next start",
     "build": "next build",
-    "clean": "rm -rf .next",
-    "dev": "next dev -p 3002",
+    "dev": "next dev",
+    "type-check": "tsc --noEmit",
     "lint": "next lint",
-    "typecheck": "tsc --noEmit",
-    "start": "next start"
+    "clean": "rm -rf .next"
   },
   "dependencies": {
     "@repo/logger": "workspace:*",
@@ -20,11 +20,15 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.1",
-    "@repo/eslint-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
     "@types/node": "^20.11.24",
-    "@types/react": "^18.2.62",
+    "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
-    "typescript": "^5.3.3"
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "typescript": "^5.3.3",
+    "@repo/tailwind-config": "workspace:*",
+    "tailwindcss": "^3.4.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35"
   }
 }

apps/client/postcss.config.js

@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/client/src/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/client/src/app/layout.tsx

@@ -1,6 +1,10 @@
-import "./styles.css";
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
 
-export const metadata = {
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
   title: "Player App",
 };
 
@@ -11,7 +15,7 @@ export default function RootLayout({
 }): JSX.Element {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }

apps/client/tailwind.config.ts

@@ -0,0 +1,11 @@
+// tailwind config is required for editor support
+
+import type { Config } from "tailwindcss";
+import sharedConfig from "@repo/tailwind-config";
+
+const config: Pick<Config, "content" | "presets"> = {
+  content: ["./src/app/**/*.tsx"],
+  presets: [sharedConfig],
+};
+
+export default config;

apps/client/tsconfig.json

@@ -1,13 +1,8 @@
 {
-  "exclude": ["node_modules"],
   "extends": "@repo/typescript-config/nextjs.json",
   "compilerOptions": {
-    "outDir": "dist",
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
+    "plugins": [{ "name": "next" }]
   },
-  "include": ["src", "next.config.js", "next-env.d.ts", ".next/types/**/*.ts"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

package.json

@@ -1,18 +1,21 @@
 {
   "private": true,
   "scripts": {
-    "build": "turbo run build",
-    "clean": "turbo run clean",
+    "build": "turbo build",
     "dev": "dotenv -- turbo run dev",
     "dev:api": "dotenv -- turbo dev --filter api",
     "dev:client": "dotenv -- turbo dev --filter client",
+    "test": "turbo test",
+    "type-check": "turbo type-check",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "lint": "turbo run lint",
-    "test": "turbo run test",
-    "typecheck": "turbo run typecheck"
+    "lint": "turbo lint",
+    "clean": "turbo clean"
   },
   "devDependencies": {
+    "eslint": "^8.57.0",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "@repo/typescript-config": "workspace:*",
     "turbo": "latest"
   },
   "packageManager": "[email protected]",

packages/config-eslint/server.js → packages/config-eslint/library.js

@@ -3,7 +3,7 @@ const { resolve } = require("node:path");
 const project = resolve(process.cwd(), "tsconfig.json");
 
 /*
- * This is a custom ESLint configuration for use server side
+ * This is a custom ESLint configuration for use with
  * typescript packages.
  *
  * This config extends the Vercel Engineering Style Guide.
@@ -19,29 +19,19 @@ module.exports = {
   parserOptions: {
     project,
   },
-  env: {
-    node: true,
-    es6: true,
+  globals: {
+    React: true,
+    JSX: true,
   },
-  plugins: ["only-warn"],
   settings: {
     "import/resolver": {
       typescript: {
         project,
       },
-    },
-  },
-  overrides: [
-    {
-      files: ["**/__tests__/**/*"],
-      env: {
-        jest: true,
+      node: {
+        extensions: [".mjs", ".js", ".jsx", ".ts", ".tsx"],
       },
     },
-  ],
-  ignorePatterns: [".*.js", "node_modules/", "dist/"],
-  // add rules configurations here
-  rules: {
-    "import/no-default-export": "off",
   },
+  ignorePatterns: ["node_modules/", "dist/"],
 };

packages/config-eslint/next.js

@@ -27,15 +27,17 @@ module.exports = {
     React: true,
     JSX: true,
   },
-  plugins: ["only-warn"],
   settings: {
     "import/resolver": {
       typescript: {
         project,
       },
+      node: {
+        extensions: [".mjs", ".js", ".jsx", ".ts", ".tsx"],
+      },
     },
   },
-  ignorePatterns: [".*.js", "node_modules/", "dist/"],
+  ignorePatterns: ["node_modules/", "dist/"],
   // add rules configurations here
   rules: {
     "import/no-default-export": "off",

packages/config-eslint/package.json

@@ -1,13 +1,9 @@
 {
   "name": "@repo/eslint-config",
-  "license": "MIT",
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
     "@vercel/style-guide": "^5.2.0",
-    "eslint-config-turbo": "^1.12.4",
-    "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-only-warn": "^1.1.0",
-    "eslint-plugin-storybook": "^0.8.0"
+    "eslint-config-turbo": "^1.12.4"
   }
 }