# Project export: clubhub

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: Cal Hacks 10.0
- Tagline: bridging the gap between students and college organizations
- Devpost: https://devpost.com/software/clubhub-vjkibl
- GitHub: https://github.com/aimogeniusOfficial/clubhub-web
- Demo: https://github.com/aimogeniusOfficial/clubhub-nest
- Team: 4 GitHub contributor(s) — aimogeniusOfficial (26 commits), Eldar Hasanov (14 commits), Eldar Hasanov (8 commits), NurzhanAbdrassilov (4 commits)

## Devpost submission (written by the team)

No Devpost description available.

## README (from the GitHub repository)

# clubhub ;)

# Vite + React + Typescript + Eslint + Prettier

A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

I found out about Vite and I wanted to have a boilerplate for the technologies that I use. You can find more about these in the following links: [Vite](https://github.com/vitejs/vite), [React](https://reactjs.org/), [Typescript](https://www.typescriptlang.org/), [Eslint](https://eslint.org/), [Prettier](https://prettier.io/).

## Installation

Clone the repo and run `yarn install`

## Start

After the successful installation of the packages: `yarn dev`

## Run backend

Follow steps [here](https://github.com/nazar-ospanov/clubhub-nest) to run the backend for this project.

## Steps in Vscode

use [vscode-example.json](vscode-example.json)

#### (works with better with this template)

1. Install Eslint and prettier extension for vs code.
2. Make Sure Both are enabled
3. Make sure all packages are installed. (Mostly Eslint and prettier in node_modules)
4. Enable formatOnSave of vs code
5. Open a .tsx file and check if the bottom right corners of vs code have Eslint and Prettier with a double tick

#### All icons to use from [Icons](https://tabler-icons.io/)

#### All illustrations to use from [Illustrations](https://undraw.co/illustrations)

### Types generation flow:

1. `npx supabase login`
2. Get access token https://app.supabase.com/account/tokens and put in terminal
3. `npx supabase gen types typescript --project-id mzdosecddjbllfefjwhb --schema public > ./src/types/generated/supabase.ts`


## Detected evidence (automated analysis)

Indexed codebase: 184 recognized source files, 260 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- React (technology) — detected in the code
- Supabase (technology) — detected in the code
- TypeScript (language) — detected in the code

## Codebase structure (from repository index)

### Files (120 of 197)

```
.eslintignore
.eslintrc.cjs
.github/pull_request_template.md
.gitignore
.prettierrc.cjs
.storybook/main.ts
.storybook/preview.ts
index.html
LICENSE
netlify.toml
package.json
README copy.md
README.md
src/App.tsx
src/components/cards/DeleteCard.tsx
src/components/cards/FormCard.tsx
src/components/ClubHubLogo.tsx
src/components/EventTypes.tsx
src/components/inputs/PasswordInput.tsx
src/components/inputs/QuantityInput.tsx
src/components/loaders/Loader.tsx
src/components/states/EmptyState.tsx
src/components/states/ErrorBoundary.tsx
src/components/states/LoadingOverlay.tsx
src/components/Table/components/TableHeader.tsx
src/components/Table/components/TableRow.tsx
src/components/Table/index.ts
src/components/Table/Table.tsx
src/components/typography/Headline.tsx
src/components/typography/index.ts
src/components/typography/Text.tsx
src/contexts/AuthContext.tsx
src/contexts/FeatureGateContext.tsx
src/contexts/models/sign-in-dto.ts
src/contexts/models/sign-up-dto.ts
src/hooks/admin/user-invitations/useCreateUserInvite.ts
src/hooks/admin/user-invitations/usePaginatedUserInvitations.ts
src/hooks/admin/user-invitations/useStatus.ts
src/hooks/announcements/useAnnouncements.ts
src/hooks/announcements/useMaintenance.ts
src/hooks/auth/useDeleteUserInvitations.ts
src/hooks/auth/useProfile.ts
src/hooks/auth/useSignIn.ts
src/hooks/auth/useSignUp.ts
src/hooks/auth/useUpdateProfile.ts
src/hooks/auth/useUserRole.ts
src/hooks/auth/useValidateUsername.ts
src/hooks/auth/useVerifyUserInvitation.ts
src/hooks/clubs/useGetClubs.ts
src/hooks/csv/useExportCsv.ts
src/hooks/csv/useImportCsv.ts
src/hooks/features/useFeatures.ts
src/hooks/features/useUpdateFeature.ts
src/hooks/journal_entry/useCreateJournalEntry.ts
src/hooks/journal_entry/useDeleteJournalEntry.ts
src/hooks/journal_entry/useJournalEntry.ts
src/hooks/journal_entry/useLikeJournalEntry.tsx
src/hooks/journal_entry/usePaginatedJournalEntry.ts
src/hooks/journal_entry/useUpdateJournalEntry.ts
src/hooks/journal_entry/useUploadEntryFile.ts
src/hooks/membership/useStripeCheckout.ts
src/hooks/membership/useStripePortal.ts
src/hooks/membership/useStripeSession.ts
src/hooks/membership/useSubscriptionPlan.ts
src/hooks/useCurrentRoute.ts
src/hooks/useNavbarLinks.ts
src/hooks/useSupabase.ts
src/hooks/versions/useVersions.ts
src/main.tsx
src/MaintenanceRouter.tsx
src/mocks/data.ts
src/MonthlyCalendar.tsx
src/pages/private/admin/AdminHome.tsx
src/pages/private/admin/components/UserInvite.tsx
src/pages/private/admin/features/Features.tsx
src/pages/private/admin/index.ts
src/pages/private/student/Account/Account.tsx
src/pages/private/student/Account/AcountPanel/AccountPanel.tsx
src/pages/private/student/Account/BillingPanel/Membership/+util/format-subscription-date-range.ts
src/pages/private/student/Account/BillingPanel/Membership/components/MembershipCard.tsx
src/pages/private/student/Account/BillingPanel/Membership/components/ReviewOrder.tsx
src/pages/private/student/Account/BillingPanel/Membership/components/SubscriptionBillingDateRangeDisplay.tsx
src/pages/private/student/Account/BillingPanel/Membership/components/SubscriptionPlanLimitCard.tsx
src/pages/private/student/Account/BillingPanel/Membership/components/SubscriptionPlanLimitDisplay.tsx
src/pages/private/student/Account/BillingPanel/Membership/index.ts
src/pages/private/student/Account/BillingPanel/Membership/SubscriptionPlanSelection.tsx
src/pages/private/student/Account/BillingPanel/MembershipPanel.tsx
src/pages/private/student/Account/index.ts
src/pages/private/student/Calendar/+models/grow-space-environment.enum.ts
src/pages/private/student/Calendar/+models/grow-space-type.enum.ts
src/pages/private/student/Calendar/Calendar.tsx
src/pages/private/student/Calendar/components/GrowSpaceCard.tsx
src/pages/private/student/Calendar/components/GrowSpaceCreateFormDrawer.tsx
src/pages/private/student/Calendar/components/GrowSpaceEmpty.tsx
src/pages/private/student/Calendar/components/GrowSpaceImg.tsx
src/pages/private/student/Calendar/components/GrowSpaceList.tsx
src/pages/private/student/Calendar/components/GrowSpaceTable.tsx
src/pages/private/student/Calendar/index.ts
src/pages/private/student/ClubList/ClubDetails.tsx
src/pages/private/student/ClubList/ClubFilters.tsx
src/pages/private/student/ClubList/ClubList.tsx
src/pages/private/student/ClubList/ClubListLayout.tsx
src/pages/private/student/ClubList/ClubScroll.tsx
src/pages/private/student/ClubList/components/ClubCard.tsx
src/pages/private/student/Home/components/entryCreate/AddEntryButton.tsx
src/pages/private/student/Home/components/entryCreate/AddEntryModal.tsx
src/pages/private/student/Home/components/entryCreate/CreateJournalEntry.tsx
src/pages/private/student/Home/components/entryCreate/CreateJournalEntryModal.tsx
src/pages/private/student/Home/components/entryCreate/FileEntry.tsx
src/pages/private/student/Home/components/EntryDetailModal.tsx
src/pages/private/student/Home/components/GrowerEntryCard.tsx
src/pages/private/student/Home/components/JournalEntryList.tsx
src/pages/private/student/Home/components/LikeButton.tsx
src/pages/private/student/Home/Home.tsx
src/pages/private/student/Home/index.ts
src/pages/private/student/MyClubs/components/ClubCard.tsx
src/pages/private/student/MyClubs/components/ClubCardList.tsx
src/pages/private/student/MyClubs/modals/CreateGrowerCultivarModal.tsx
src/pages/private/student/MyClubs/modals/CreateOtherPlantGrowerCultivar.tsx
src/pages/private/student/MyClubs/MyClubs.tsx
[77 more files omitted for size]
```

### Dependencies

- package.json: @emotion/react@^11.11.0, @mantine/carousel@^6.0.19, @mantine/core@^6.0.13, @mantine/dates@^6.0.13, @mantine/dropzone@^6.0.13, @mantine/form@^6.0.13, @mantine/hooks@^6.0.13, @mantine/modals@^6.0.19, @mantine/notifications@^6.0.13, @mantine/spotlight@^6.0.13, @storybook/addon-essentials@^7.0.9, @storybook/addon-interactions@^7.0.9, @storybook/addon-links@^7.0.9, @storybook/blocks@^7.0.9, @storybook/react@^7.0.9, @storybook/react-vite@^7.0.9, @storybook/testing-library@^0.0.14-next.2, @supabase/supabase-js@^2.10.0, @tabler/icons-react@^2.23.0, @tanstack/eslint-plugin-query@^4.29.4, @tanstack/react-query@^4.29.5, @tanstack/react-query-devtools@^4.29.6, @types/papaparse@^5.3.7, @types/react@^18.0.26, @types/react-dom@^18.0.9, @types/react-table@^7.7.14, @types/uuid@^9.0.4, @typescript-eslint/eslint-plugin@^4.18.0, @typescript-eslint/parser@^4.18.0, @vitejs/plugin-react@^3.0.0, autoprefixer@^10.4.13, axios@^1.5.0, dayjs@^1.11.7, embla-carousel-react@^8.0.0-rc12, emotion@^11.0.0, eslint@^7.22.0, eslint-config-airbnb@^18.2.1, eslint-config-airbnb-typescript@^12.3.1, eslint-config-prettier@^8.1.0, eslint-import-resolver-typescript@^3.5.2, eslint-plugin-chai-friendly@^0.6.0, eslint-plugin-cypress@^2.11.3, eslint-plugin-eslint-comments@^3.2.0, eslint-plugin-import@^2.25.4, eslint-plugin-jest@^24.3.1, eslint-plugin-jsx-a11y@^6.5.1, eslint-plugin-prettier@^3.3.1, eslint-plugin-react@^7.22.0, eslint-plugin-react-hooks@^4.2.0, eslint-plugin-simple-import-sort@^7.0.0, papaparse@^5.4.1, prettier@^2.8.1, react@^18.2.0, react-confetti@^6.1.0, react-dom@^18.2.0, react-fb-image-video-grid@^0.1.10, react-infinite-scroll-component@^6.1.0, react-intersection-observer@^9.4.3, react-router-dom@^6.5.0, react-table@^7.8.0, supabase@^1.45.1, typescript@^4.5.5, uuid@^9.0.1, vite@^4.0.0, vite-plugin-eslint@^1.8.1, vite-tsconfig-paths@^4.0.3

### Recent commits (newest first)

- Update README.md
- Update README.md
- Update clubs with logos
- Update my clubs
- Clean up
- Merge branch 'clean-up' of https://github.com/aimogeniusOfficial/clubhub into clean-up
- Cleaning up
- Cleaning up
- Merge pull request #13 from aimogeniusOfficial/land
- landing and text edited
- Merge pull request #11 from aimogeniusOfficial/calendar calendar done
- Create club list tab
- Create club list tab
- final check and amendements
- updated the HTML to change title and icon
- made the calendar and events tab
- merge request for myclub page that has main functionalities
- myclub page (still in development) but has main functions
- myclub page (still in development)
- Merge pull request #9 from aimogeniusOfficial/reshape

## Key source files (fetched from GitHub, selected and truncated for size)

### README copy.md

```markdown
# Vite + React + Typescript + Eslint + Prettier

A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

I found out about Vite and I wanted to have a boilerplate for the technologies that I use. You can find more about these in the following links: [Vite](https://github.com/vitejs/vite), [React](https://reactjs.org/), [Typescript](https://www.typescriptlang.org/), [Eslint](https://eslint.org/), [Prettier](https://prettier.io/).

## Installation

Clone the repo and run `yarn install`

## Start

After the successful installation of the packages: `yarn dev`

## Steps in Vscode

use [vscode-example.json](vscode-example.json)

#### (works with better with this template)

1. Install Eslint and prettier extension for vs code.
2. Make Sure Both are enabled
3. Make sure all packages are installed. (Mostly Eslint and prettier in node_modules)
4. Enable formatOnSave of vs code
5. Open a .tsx file and check if the bottom right corners of vs code have Eslint and Prettier with a double tick

#### All icons to use from [Icons](https://tabler-icons.io/)

#### All illustrations to use from [Illustrations](https://undraw.co/illustrations)

### Types generation flow:

1. `npx supabase login`
2. Get access token https://app.supabase.com/account/tokens and put in terminal
3. `npx supabase gen types typescript --project-id mzdosecddjbllfefjwhb --schema public > ./src/types/generated/supabase.ts`

```

### .github/pull_request_template.md

```markdown
## Notion Ticket Link
[Notion Task](https://www.notion.so)

## Description
[Describe the purpose and scope of the pull request]

## Changes Made
[List the changes made in this pull request]

## Related Issues
[Reference any related issues or pull requests]

## Screenshots (if applicable)
[Add screenshots or GIFs to visually demonstrate the changes]

## Checklist
- [ ] Tests have been added or updated to cover the changes
- [ ] Documentation has been updated to reflect the changes
- [ ] Code follows the project's coding conventions
- [ ] The pull request title follows the established naming convention
- [ ] All checks pass (e.g., linting, continuous integration)

## Reviewers
[Mention specific reviewers or teams for the pull request]

## Additional Notes
[Add any additional notes or context for the reviewers]


```

### package.json

```
{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore",
    "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
    "lint:check": "eslint ./src --ext .jsx,.js,.ts,.tsx",
    "lint": "yarn lint:format && yarn lint:fix ",
    "type-check": "tsc",
    "generate-types": "npx supabase gen types typescript --project-id mzdosecddjbllfefjwhb --schema public > ./src/types/generated/supabase.ts",
    "generate-types:local": "npx supabase gen types typescript --local --schema public > ./src/types/generated/supabase.ts",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@emotion/react": "^11.11.0",
    "@mantine/carousel": "^6.0.19",
    "@mantine/core": "^6.0.13",
    "@mantine/dates": "^6.0.13",
    "@mantine/dropzone": "^6.0.13",
    "@mantine/form": "^6.0.13",
    "@mantine/hooks": "^6.0.13",
    "@mantine/modals": "^6.0.19",
    "@mantine/notifications": "^6.0.13",
    "@mantine/spotlight": "^6.0.13",
    "@supabase/supabase-js": "^2.10.0",
    "@tabler/icons-react": "^2.23.0",
    "@tanstack/react-query": "^4.29.5",
    "axios": "^1.5.0",
    "dayjs": "^1.11.7",
    "embla-carousel-react": "^8.0.0-rc12",
    "emotion": "^11.0.0",
    "papaparse": "^5.4.1",
    "react": "^18.2.0",
    "react-confetti": "^6.1.0",
    "react-dom": "^18.2.0",
    "react-fb-image-video-grid": "^0.1.10",
    "react-infinite-scroll-component": "^6.1.0",
    "react-intersection-observer": "^9.4.3",
    "react-router-dom": "^6.5.0",
    "react-table": "^7.8.0",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.0.9",
    "@storybook/addon-interactions": "^7.0.9",
    "@storybook/addon-links": "^7.0.9",
    "@storybook/blocks": "^7.0.9",
    "@storybook/react": "^7.0.9",
    "@storybook/react-vite": "^7.0.9",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@tanstack/eslint-plugin-query": "^4.29.4",
    "@tanstack/react-query-devtools": "^4.29.6",
    "@types/papaparse": "^5.3.7",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@types/react-table": "^7.7.14",
    "@types/uuid": "^9.0.4",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vitejs/plugin-react": "^3.0.0",
    "autoprefixer": "^10.4.13",
    "eslint": "^7.22.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-import-resolver-typescript": "^3.5.2",
    "eslint-plugin-chai-friendly": "^0.6.0",
    "eslint-plugin-cypress": "^2.11.3",
    "eslint-plugin-eslint-comments": "^3.2.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jest": "^24.3.1",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "prettier": "^2.8.1",
    "supabase": "^1.45.1",
    "typescript": "^4.5.5",
    "vite": "^4.0.0",
    "vite-plugin-eslint": "^1.8.1",
    "vite-tsconfig-paths": "^4.0.3"
  },
  "packageManager": "yarn@1.22.19"
}
```

### src/main.tsx

```typescript
import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

```

### .storybook/main.ts

```typescript
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config;

```

### src/App.tsx

```typescript
import React from 'react';

import { MantineProvider } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import { Notifications } from '@mantine/notifications';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
// eslint-disable-next-line import/no-extraneous-dependencies
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { AuthProvider } from 'contexts/AuthContext';
import { FeatureGateProvider } from 'contexts/FeatureGateContext';
import { MaintenanceRouter } from 'MaintenanceRouter';
import { BrowserRouter } from 'react-router-dom';

import Router from './Router';
import { lightTheme } from './styles/theme';

function App(): JSX.Element {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <MantineProvider theme={lightTheme} withGlobalStyles withNormalizeCSS>
        <AuthProvider>
          <ModalsProvider>
            <Notifications zIndex={10000} position='top-right' />
            <MaintenanceRouter>
              <FeatureGateProvider>
                <BrowserRouter>
                  <Router />
                </BrowserRouter>
              </FeatureGateProvider>
            </MaintenanceRouter>
          </ModalsProvider>
        </AuthProvider>
      </MantineProvider>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;

```

### src/types/index.ts

```typescript
export interface UrlParams {
  [k: string]: string;
}

```

### src/components/Table/index.ts

```typescript
import Table from './Table';

export default Table;

```

### src/routes/types/index.ts

```typescript
export interface RoutesMap {
  [key: string]: JSX.Element;
}

```

### src/components/typography/index.ts

```typescript
import Headline from './Headline';
import Text from './Text';

export { Headline, Text };

```

[175 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]