add client architecture

---

title: Client Architecture

---

# Theming

- [tailwindcss](https://tailwindcss.com/)

- Component library: [HeroUI](https://www.heroui.com/docs/components) (formerly NextUI)

- Icon library: [FontAwesome](https://fontawesome.com/icons) [@icons-pack/react-simple-icons](https://www.npmjs.com/package/@icons-pack/react-simple-icons)

- [framer-motion](https://motion.dev/docs)

- (Discouraged) SCSS is loaded and the entrypoint is `src/style.scss`

# Networking

Networking is done via REST & WebSocket

## REST

The main use for REST is for non-immediate actions (like moderation or profile changes)

The endpoints are exposed in `/packages/server/src/api/`

## WebSocket

Executed via socket.io and client-side communications are handled in `packages/client/src/lib/network.ts`

Event names & data are specified in `/packages/lib/src/net.ts` to be shared by client & server

# File Structure (/packages/client)

## src/components/

Houses all the React elements

- Generally one file is one component

- Components that contain multiple sub-components should be placed in their own folder (eg all chat components are in their own folder)

## src/contexts/

Every context should be placed in this folder

## src/lib/

Every component that isn't a React component

## src/worker/

Files that are loaded as ServiceWorkers

- Files should end with `.worker.ts` in this folder

- ServiceWorkers are loaded at runtime via adding `?worker` to the import line

> See: [vite.dev](https://vite.dev/guide/features.html#web-workers)