unreal-chat/apps/web
Jusemon 6214b503bc Feature/Use fastify instead of express (#1)
- Replaced Apollo Server with Mercurius for GraphQL API
- Updated resolvers to use Mercurius-compatible GraphQL implementation
- Migrated from Express to Fastify for server framework
- Improved error handling with GraphQL error extensions
- Added Zod for environment variable validation
- Updated Prisma schema and migrations
- Configured CORS and WebSocket subscriptions
- Simplified GraphQL schema and resolver structure
- Enhanced type safety and code organization
- Replaced Apollo Server with Mercurius for GraphQL API
- Updated resolvers to use Mercurius-compatible GraphQL implementation
- Migrated from Express to Fastify for server framework
- Improved error handling with GraphQL error extensions
- Added Zod for environment variable validation
- Updated Prisma schema and migrations
- Configured CORS and WebSocket subscriptions
- Simplified GraphQL schema and resolver structure
- Enhanced type safety and code organization

Reviewed-on: #1
Co-authored-by: Jusemon <juansmm@outlook.com>
Co-committed-by: Jusemon <juansmm@outlook.com>
2025-03-06 19:15:56 -05:00
..
public refactor: migrate from Next.js to SolidJS and GraphQL 2025-03-04 01:08:52 -05:00
src Feature/Use fastify instead of express (#1) 2025-03-06 19:15:56 -05:00
.dockerignore refactor: migrate from Next.js to SolidJS and GraphQL 2025-03-04 01:08:52 -05:00
.gitignore refactor: migrate from Next.js to SolidJS and GraphQL 2025-03-04 01:08:52 -05:00
Dockerfile refactor: migrate from Next.js to SolidJS and GraphQL 2025-03-04 01:08:52 -05:00
eslint.config.js Feature/Use fastify instead of express (#1) 2025-03-06 19:15:56 -05:00
index.html Feature/Use fastify instead of express (#1) 2025-03-06 19:15:56 -05:00
package.json Feature/Use fastify instead of express (#1) 2025-03-06 19:15:56 -05:00
README.md refactor: migrate from Next.js to SolidJS and GraphQL 2025-03-04 01:08:52 -05:00
tsconfig.json Feature/Use fastify instead of express (#1) 2025-03-06 19:15:56 -05:00
vite.config.ts Feature/Use fastify instead of express (#1) 2025-03-06 19:15:56 -05:00

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:
npm install
  1. 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
  1. Start the development server:
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.

$ npm install # or pnpm install or yarn install

Learn more on the Solid Website and come chat with us on our Discord

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.

npm run build

Builds the app for production to the dist folder.
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.
Your app is ready to be deployed!

Deployment

Learn more about deploying your application with the documentations