# Unreal Chat Web

The frontend web application for Unreal Chat, built with SolidJS and URQL GraphQL client.

## Features

- Real-time chat with GraphQL subscriptions
- User authentication
- Chat room management
- Message sending and receiving
- Responsive design

## Getting Started

### Prerequisites

- Node.js (v18 or later)
- npm (v10 or later)

### Installation

1. Install dependencies:

```bash
npm install
```

2. Set up environment variables:

Create a `.env` file in the root directory with the following variables:

```
VITE_API_URL=http://localhost:4000/graphql
VITE_WS_URL=ws://localhost:4000/graphql
```

3. Start the development server:

```bash
npm run dev
```

The web app will be available at http://localhost:5173.

## Available Scripts

- `npm run dev` - Start the development server
- `npm run build` - Build the application
- `npm run preview` - Preview the built application
- `npm run check-types` - Check TypeScript types

## Project Structure

```
src/
├── components/     # UI components
├── lib/            # Utilities and shared code
├── types/          # TypeScript type definitions
├── App.tsx         # Main application component
└── index.tsx       # Application entry point
```

## Components

- `LoginForm`: User login form
- `RegisterForm`: User registration form
- `RoomList`: List of available chat rooms
- `ChatRoom`: Chat room with messages
- `CreateRoom`: Form to create a new chat room

## GraphQL Client

The application uses URQL as the GraphQL client with subscription support. The client is configured in `src/lib/graphql-client.ts`.

## Authentication

Authentication is handled using a simple token-based approach. The token is stored in localStorage and included in GraphQL requests.

```bash
$ npm install # or pnpm install or yarn install
```

### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)

## Available Scripts

In the project directory, you can run:

### `npm run dev`

Runs the app in the development mode.<br>
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.

### `npm run build`

Builds the app for production to the `dist` folder.<br>
It correctly bundles Solid in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

## Deployment

Learn more about deploying your application with the [documentations](https://vite.dev/guide/static-deploy.html)