Feat/os project boilerpalte

.env.example

@@ -0,0 +1,2 @@
+# base url is required n the .env or playwright tests won't work
+BASE_URL="http://localhost:3000"

.github/workflows/housekeeping.yml

@@ -0,0 +1,33 @@
+name: lint and test
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g pnpm && pnpm install
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Lint code
+      run: pnpm lint
+    - name: Run unit tests
+      run: pnpm vitest
+    - name: Start Vite dev server
+      run: pnpm exec vite --port 3000 &
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -11,7 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
-
+.env
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -22,7 +22,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+tsconfig.node.tsbuildinfo
 /test-results/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+tsconfig.app.tsbuildinfo
+codealike.json

docs/BOILERPLATE.md

@@ -0,0 +1,161 @@
+The project is using 
+
+### [tanstack router](https://tanstack.com/query/latest)
+The router which offers a declarative way to navigate between different routes in a React application.
+picked for 
+- highly configurable file based routing
+- auto generated typescript types
+- auto code splitting
+- nice serach params handling
+- possible to upgrade to [tanstack start](https://tanstack.com/start/latest) should `SSR` + `SEO` requiremnents arise
+
+
+### [tanstack query  (react query)](https://tanstack.com/query/latest)
+Data fetching and caching library
+picked for being the most popular way to handle aysn state in react with caching and preloading capabilities
+
+best practices include 
+
+- declaring the `queryOptions` outside of the `useQuery` hook for easy reusability
+
+```tsx
+import { queryOptions } from "@tanstack/react-query";
+interface usersQueryOptionPropss {
+  keyword: string;
+}
+export function usersListQueryOptions({ keyword }: usersQueryOptionPropss) {
+  return queryOptions({
+    queryKey: ["users_list", keyword],
+    queryFn: () => {
+      return new Promise<{
+        items: Array<Record<string, any> & { id: string }>;
+      }>((res, rej) => {
+        setTimeout(() => {
+          res({
+            items: [{ id: "id_1" }, { id: "id_2" }, { id: "id_3" }],
+          });
+        }, 1000);
+      });
+    },
+  });
+}
+```
+- using the `useSuspenseQuery` over the `useQuery` hook
+ > suspense is the new way tohnadle data fetching in react that enebles [render while you fetch](https://www.epicreact.dev/render-as-you-fetch)
+
+- Invalidate queries on mutation
+  ,
+
+The query client setup includes a way to pass in a meta object to the mutation which will contain an array of keys to invalidate  
+```tsx
+// main.tsx
+export const queryClient = new QueryClient({
+  mutationCache: new MutationCache({
+    onSuccess: async (_, __, ___, mutation) => {
+      if (Array.isArray(mutation.meta?.invalidates)) {
+        // biome-ignore lint/complexity/noForEach: <explanation>
+        mutation.meta?.invalidates.forEach((key) => {
+          return queryClient.invalidateQueries({
+            queryKey: [key.trim()],
+          });
+        });
+      }
+    },
+  }),
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 10,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+//  usage 
+useMutation({
+  mutationFn: async (value: {}) => {
+    return new Promise<{}>((resolve, reject) => {
+      setTimeout(() => {
+        resolve(value);
+      }, 2000);
+    });
+  },
+  onSuccess: () => {
+    makeHotToast({
+      title: "User added",
+      description: "User has been added successfully",
+      variant: "success",
+    });
+  },
+  meta: {
+    // this will mark any query with the key "users as stale
+    invalidates: ["users"],
+  },
+})
+```
+- add any values that your query depends on into the query key
+```tsx
+function userListQueryOptions({ keyword, first_name,last_name }: usersQueryOptionPropss) {
+    queryClient({
+      queryKey: ["users_list", keyword, first_name, last_name],
+      queryFn: () => {
+        return new Promise<{
+          items: Array<Record<string, any> & { id: string }>;
+        }>((res, rej) => {
+          setTimeout(() => {
+            res({
+              items: [{ id: "id_1",first_name,last_name }, { id: "id_2".first_name,last_name }, { id: "id_3" }],
+            });
+          }, 1000);
+        });
+      },
+    });
+```
+- the tanstack query eslint plugin will catch most of these common issues
+
+### [tailwind css](https://tailwindcss.com/) + [daisyui](https://daisyui.com/)
+For styling daisyui is a bootstrap like tailwind classes that can help make your taiiwnd cleaner. 
+it also comes with nice theme tokens , which are the prefered way of adding background/text colors 
+
+```json
+  daisyui: {
+    themes: [
+      {
+        light: {
+          "color-scheme": "light",
+          primary: "#1eb854",
+          "primary-focus": "#188c40",
+          "primary-content": "#241f31",
+          secondary: "#20d55f",
+          "secondary-focus": "#18aa4b",
+          "secondary-content": "#000000",
+          accent: "#d99330",
+            ....
+        },}...
+```
+```tsx
+<div>
+<btn className="btn btn-sm btn-primary">
+    primary button
+</btn>
+<div className="bg-base-100">Default background</div>
+<div className="bg-base-200">Lighter background</div>
+<div className="bg-base-300">Lightest background</div>
+<<p className="text-base-content">The default text color</p>
+<soan className="text-primary">This will be primary text</span>
+</div>
+```
+
+### [shadcn](https://ui.shadcn.com/)
+
+A set of accessible components built on [radix ui](https://www.radix-ui.com/primitives) with tailwind styles. 
+
+### [zod](https://zod.dev/)
+ schema validation that helps in confirming the shape of data returned matches the expectations (local storage , search params...)
+
+
+
+### [react-hook-form](https://www.react-hook-form.com/)
+Form management
+
+### [vitest](https://vitest.dev/) + [playwright](https://playwright.dev/)
+unit testing + E2E

docs/CHECKLIST.MD

@@ -0,0 +1,14 @@
+# CHECKLIST
+
+Before working on a feature, it's recommended to check out the [issues](https://github.com/SpaceyaTech/CoLabs-Frontend/issues) and assign yourself one. If none of them interest you, you can [check out the Figma file](https://www.figma.com/design/2r8LJbRj7TEXZ7obQvVeb8/SpaceYaTech-Website-Re-design?node-id=4-598&node-type=canvas&t=ZX1LpTU4llEME87H-0) and identify the feature you want to work on.
+- Create an issue on GitHub with the feature you want to work on and assign yourself.
+- Create a branch for the feature you want to work on.
+- Work on your feature.
+- Write some tests to ensure someone else won't break your code.
+- Run the tests, linter, and build to make sure you didn't break anything.
+```sh
+    npm run dryrun
+```
+- If everything is fine, you can make a pull request and await a review.
+- 🎉 🎉 🎉 You did it. Rinse and repeat.
+

docs/TANSTACK-QUERY.md

@@ -0,0 +1,39 @@
+# tips
+
+- prefer `useSuspenseQuery` over `useQuery`
+- prefer defining `queryOptions` over inlinignthem into the query hooks
+
+  ```tsx
+  import { queryOptions,useSuspenseQuery } from "@tanstack/react-query";
+    //users/queryOptions.ts
+    // this is re-usable and decltters your components
+  export const userQueryOptions = queryOptions({
+    queryKey: ["user"],
+    queryFn: () => {
+      ...
+    }
+  })
+  // users.tsx
+  const query = useSuspenseQuery(userQueryOptions);
+  ```
+- wrap the data fetching components with `Suspense` component
+
+  ```tsx
+   // users page
+   <div>
+   <header>Users page</headers>
+  <Suspense fallback={<div>Loading users</div>}>
+    <Users />
+  </Suspense>
+</div>
+  ```
+
+run `p/mpm run page users` to scafold a page with these best practices
+
+
+## handling forms
+
+We'll use [react-hook-form](https://react-hook-form.com/) to manage our forms and [zod](https://zod.dev/) to validate our data.
+[quick tutorial on react hhok form + zod](https://www.youtube.com/watch?v=cc_xmawJ8Kg)
+
+then use the useMutation hook

docs/TANSTACK-ROUTER.md

@@ -0,0 +1,108 @@
+- anything under the src/routes folder is a route
+
+ex
+
+- `src/routes/index.tsx` ->` /`
+- `src/routes/profile.tsx` or `src/routes/profile/index.tsx` -> `/profile/`
+
+Dynamic routes
+
+- `src/routes/users/$oneuser/index.tsx` -> `/users/$oneuser`
+
+inside here you'll have access to the `oneuser` param
+
+```tsx
+// src/routes/users/$user/index.tsx
+import { createFileRoute, useParams } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/users/$user')({
+  component:OneUserComponent,
+})
+functon OneUserComponent() {
+const {user} = useParams({
+    from:"/users/$user"
+})
+    return (
+        <div>
+            <h1>{user}</h1>
+        </div>
+    )
+}
+```
+
+if you nest multiple dynamic routes then you can access them in the same way
+
+```tsx
+// src/routes/users/$user/friends/$friend/index.tsx
+import { createFileRoute, useParams } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/users/$user/friends/$friend/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { friend,user } = useParams({
+    from: "/users/$user/friends/$friend/",
+  });
+  return (
+    <div>
+      <h1>{user}</h1>
+      <h1>{friend}</h1>
+    </div>
+  );
+}
+
+
+```
+
+you can also define search params ,validate them and auth guard
+
+```tsx
+import {
+  createFileRoute,
+  redirect,
+  useNavigate,
+  useSearch,
+} from "@tanstack/react-router";
+import { z } from "zod";
+const searchparams = z.object({
+    // make it optional if it won't always be used
+  page: z.number().optional(),
+});
+
+export const Route = createFileRoute("/users/")({
+  component: RouteComponent,
+  //  declare and validate your search params here
+  // this page should alwatys have /users?page=1
+  validateSearch: (search) => searchparams.parse(search),
+  //   this is how you auth guard routes (only allow logged in users here )
+  async beforeLoad(ctx) {
+    const viewer = ctx.context?.viewer;
+    if (!viewer?.record) {
+      throw redirect({
+        to: "/auth",
+        // this search params will be used to redirect you back to this page once you log in
+        search: { returnTo: ctx.location.pathname },
+      });
+    }
+  },
+});
+
+function RouteComponent() {
+  const { page } = useSearch({
+    from: "/users/",
+  });
+  const navigate = useNavigate({
+    from: "/users",
+  });
+  return (
+    <div>
+      {page}
+      <button onClick={() => navigate({ search: { page: (page ?? 0) + 1 } })}>
+        next page
+      </button>
+    </div>
+  );
+}
+
+```