feat: add hooks for API health, update checking, viewer caching, and viewer count management

- Implemented `useApiHealth` hook to check the health of the remote API (CORS disabled temporarily).
- Created `useUpdateChecker` hook to check for updates from GitHub releases.
- Developed `useViewerCache` hook to manage and cache viewer count values.
- Added `useViewerCount` hook to fetch and manage viewer count for a given username.
- Introduced `useWebSocketBot` hook for managing WebSocket connections and bot interactions.

chore: configure Next.js and Tailwind CSS

- Updated `next.config.js` for standalone output and build error handling.
- Added `postcss.config.js` for Tailwind CSS integration.
- Configured `tailwind.config.js` with custom content paths and theme extensions.

feat: implement local service connector and WebSocket service

- Created `LocalServiceConnector` for connecting to a local Python backend service.
- Developed `WebSocketService` for handling WebSocket communication with the bot.

feat: add Zustand store for bot management

- Implemented Zustand store to manage bot status and actions (start, stop, check status).

style: add global styles and utility functions

- Added global CSS styles and utility functions for animations and class name management.

Author: H1B0B0

frontend/.gitignore

@@ -3,12 +3,7 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
+.pnp.js
 
 # testing
 /coverage
@@ -28,14 +23,18 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
-.env
+# local env files
+.env*.local
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+bun.lockb

frontend/.npmrc

@@ -0,0 +1 @@
+package-lock=true

frontend/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

frontend/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Next UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

frontend/README.md

@@ -1,36 +1,53 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Next.js & HeroUI Template
 
-## Getting Started
+This is a template for creating applications using Next.js 14 (app directory) and HeroUI (v2).
 
-First, run the development server:
+[Try it on CodeSandbox](https://githubbox.com/heroui-inc/heroui/next-app-template)
+
+## Technologies Used
+
+- [Next.js 14](https://nextjs.org/docs/getting-started)
+- [HeroUI v2](https://heroui.com/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Tailwind Variants](https://tailwind-variants.org)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Framer Motion](https://www.framer.com/motion/)
+- [next-themes](https://github.com/pacocoursey/next-themes)
+
+## How to Use
+
+### Use the template with create-next-app
+
+To create a new project based on this template using `create-next-app`, run the following command:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+npx create-next-app -e https://github.com/heroui-inc/next-app-template
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### Install dependencies
+
+You can use one of them `npm`, `yarn`, `pnpm`, `bun`, Example using `npm`:
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```bash
+npm install
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+### Run the development server
 
-## Learn More
+```bash
+npm run dev
+```
 
-To learn more about Next.js, take a look at the following resources:
+### Setup pnpm (optional)
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+If you are using `pnpm`, you need to add the following code to your `.npmrc` file:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```bash
+public-hoist-pattern[]=*@heroui/*
+```
 
-## Deploy on Vercel
+After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Licensed under the [MIT license](https://github.com/heroui-inc/next-app-template/blob/main/LICENSE).

frontend/src/app/functions/BotAPI.ts frontend/app/functions/BotAPI.tsfrontend/src/app/functions/BotAPI.ts renamed to frontend/app/functions/BotAPI.ts

@@ -1,13 +1,13 @@
 "use client";
-import "./globals.css";
+import "@/styles/globals.css";
 import "react-toastify/dist/ReactToastify.css";
 import ThemeProvider from "../components/ThemeProvider";
 import ThemeSwitcher from "../components/ThemeSwitcher";
 import Spline from "@splinetool/react-spline";
 import ApiHealthProvider from "../components/ApiHealthProvider";
 import UpdateProvider from "../components/UpdateProvider";
 import { useEffect, useState } from "react";
-import { Button } from "@heroui/react";
+import { Button } from "@heroui/button";
 
 export default function RootLayout({
   children,

frontend/src/app/functions/KickAPI.ts frontend/app/functions/KickAPI.tsfrontend/src/app/functions/KickAPI.ts renamed to frontend/app/functions/KickAPI.ts

@@ -1,6 +1,9 @@
 "use client";
-import { Form, Input, Button, Card, CardHeader, CardBody } from "@heroui/react";
 import { toast, ToastContainer } from "react-toastify";
+import { Card, CardHeader, CardBody } from "@heroui/card";
+import { Form } from "@heroui/form";
+import { Input } from "@heroui/input";
+import { Button } from "@heroui/button";
 import "react-toastify/dist/ReactToastify.css";
 import React, { useState } from "react";
 import { login } from "../functions/UserAPI";