Skip to main content

​
Overview

The PriceSignal frontend is built with:
  • React 18 - UI framework
  • TypeScript - Type safety
  • Vite - Fast build tool and dev server
  • Apollo Client - GraphQL client for API communication
  • Tailwind CSS - Utility-first styling
  • Radix UI - Accessible component primitives

​
Project Structure

The React application is located in src/react-app/ with the following structure: 
src/react-app/
├── src/           # Application source code
├── public/        # Static assets
├── package.json   # Dependencies and scripts
├── vite.config.ts # Vite configuration
├── tsconfig.json  # TypeScript configuration
└── codegen.ts     # GraphQL code generation config

​
Development Scripts

# Runs both backend and frontend in watch mode
npm run dev
The npm run dev command uses concurrently to run both dotnet watch for the backend and vite for the frontend, providing a seamless full-stack development experience.

​
Key Dependencies

​
Core Libraries

  • @apollo/client (^3.10.4) - GraphQL client with caching and state management
  • react-router-dom (^6.23.1) - Client-side routing
  • graphql-ws (^5.16.0) - GraphQL subscriptions over WebSocket

​
UI Components

  • Radix UI - Headless, accessible component primitives:
    • Avatar, Dialog, Dropdown Menu, Label, Popover, Select, Slot, Switch, Tabs
  • lucide-react (^0.379.0) - Icon library
  • klinecharts (^9.8.8) - Cryptocurrency charting library
  • recharts (^2.12.7) - Composable charting library

​
Form Handling

  • react-hook-form (^7.51.5) - Performant form management
  • @hookform/resolvers (^3.4.2) - Validation resolvers
  • zod (^3.23.8) - Schema validation

​
Styling

  • tailwindcss (^3.4.3) - Utility-first CSS framework
  • tailwindcss-animate (^1.0.7) - Animation utilities
  • class-variance-authority (^0.7.0) - Component variant management
  • clsx & tailwind-merge - Conditional class utilities

​
Authentication

  • firebase (^10.12.5) - Firebase SDK for authentication

​
Development Workflow

1

Start Development Server

Navigate to the frontend directory and start the dev server:
cd src/react-app
npm run dev
This starts both the ASP.NET Core backend (with hot reload) and Vite dev server.
2

Access the Application

Open your browser to:
  • Frontend: http://localhost:5173 (Vite dev server)
  • Backend GraphQL: http://localhost:5000/graphql (or configured port)
3

Make Changes

Edit files in src/react-app/src/ and see changes reflected instantly with hot module replacement (HMR).
4

Run GraphQL Codegen (When Schema Changes)

If the backend GraphQL schema changes, regenerate types:
npm run codegen

​
GraphQL Integration

PriceSignal uses GraphQL for all API communication between frontend and backend.

​
Code Generation

The project uses @graphql-codegen/cli to automatically generate TypeScript types from the GraphQL schema: 
npm run codegen
Configuration is in codegen.ts. This generates:
  • Type definitions for queries, mutations, and subscriptions
  • React hooks for Apollo Client operations

​
Apollo Client Setup

Apollo Client is configured to connect to the HotChocolate GraphQL server running on the backend. It supports:
  • Queries - Fetch data
  • Mutations - Modify data
  • Subscriptions - Real-time updates via WebSocket
Ensure the backend GraphQL server is running before starting frontend development, especially when using npm run dev.

​
Building for Production

1

Run Production Build

npm run build
This:
  1. Runs TypeScript compiler to check types
  2. Builds optimized production bundle with Vite
2

Output Location

Built files are output to dist/ directory and are served by the ASP.NET Core backend from wwwroot/.
3

Preview Build Locally

Test the production build:
npm run preview

​
Code Quality

​
Linting

The project uses ESLint with TypeScript support: 
npm run lint
Configuration includes:
  • @typescript-eslint - TypeScript-specific rules
  • eslint-plugin-react-hooks - React hooks best practices
  • eslint-plugin-react-refresh - React Fast Refresh compatibility

​
Formatting

Prettier is configured for code formatting. Format code: 
npx prettier --write src/

​
TypeScript Configuration

The project uses strict TypeScript settings for maximum type safety. Key compiler options:
  • Target: ES2020
  • Module: ESNext
  • Strict mode enabled
  • Path aliases configured for clean imports

​
Common Tasks

​
Adding a New Component

  1. Create component in src/components/
  2. Use TypeScript for props interface
  3. Style with Tailwind CSS classes
  4. Export from index file if needed

​
Adding a New Route

  1. Create page component in src/pages/ or src/routes/
  2. Add route to router configuration
  3. Update navigation if needed

​
Working with GraphQL

  1. Write your query/mutation in a .graphql file or as a string
  2. Run npm run codegen to generate types
  3. Import and use the generated hook in your component

​
Troubleshooting

​
Port Already in Use

If port 5173 is already in use, Vite will automatically try the next available port. Check the terminal output for the actual URL.

​
GraphQL Type Errors

If you see TypeScript errors related to GraphQL types:
  1. Ensure the backend is running
  2. Run npm run codegen to regenerate types
  3. Restart the TypeScript server in your IDE

​
Build Failures

If npm run build fails:
  1. Check for TypeScript errors: npx tsc --noEmit
  2. Ensure all dependencies are installed: npm install
  3. Clear Vite cache: rm -rf node_modules/.vite

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us