Juan Sebastian Montoya
16731409df
- Converted web application from Next.js to SolidJS with Vite - Replaced React components with SolidJS components - Implemented GraphQL client using URQL - Added authentication, room, and chat components - Updated project structure and configuration files - Removed unnecessary Next.js and docs-related files - Added Docker support for web and API applications
104 lines
2.5 KiB
Markdown
104 lines
2.5 KiB
Markdown
# 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)
|