Frontend

Frontend Architecture

Our application is built using Next.js with React and TypeScript. This framework helps us to create a fast, modern, and scalable web application. We also use Windsurf components for a consistent UI design.

Key Technologies

  • Next.js for routing and server-side rendering

  • React for component-based UI

  • TypeScript for type safety

  • Windsurf for UI components

  • Tailwind CSS for styling

Design Principles

Usability

  • Clean and straightforward interface

  • Clear labels on buttons

  • Well-organized layout

  • Consistent interaction patterns

Accessibility

  • Support for all users, including those with accessibility needs

Responsiveness

  • Optimized for desktop design

  • Scalable across different screens

  • Graceful element scaling

Styling and Theming

Color Palette

  • Primary: #1E90FF (bright blue) for key interactive elements

  • Secondary: #FF7F50 (soft coral) for accents

  • Background: #F5F5F5 (light grey)

  • Text: #333333 (dark grey)

Dark Theme

  • Overall Background: Dark gray/near-black (bg-gray-900)

  • Header/Outer Containers: Dark gray/near-black (bg-gray-900)

  • Header Text: Light gray/white (text-gray-100 or text-white)

  • Main Content Area: White (bg-white)

  • Content Area Text: Dark gray/black (text-gray-800, text-gray-700, text-gray-600)

  • Accent/Buttons: Indigo (bg-indigo-600, hover:bg-indigo-700, text-white)

  • Sidebar Background: Dark gray (bg-gray-800)

  • Sidebar Text: White/Light Gray (text-white, text-gray-300, hover:text-gray-100)

Layout Principles

  • Full height pages

  • Optional sidebar (fixed-width, w-64)

  • Main content area with rounded corners (rounded-lg)

  • Subtle shadows (shadow-lg)

  • Consistent padding (p-6 or p-8)

Component Structure

Key Features

  • Component-based architecture

  • Reusable UI components

  • Clear separation of presentation and logic

  • Well-organized component hierarchy

State Management

Implementation

  • React's built-in state management

  • Context API for shared state

  • Easy sharing of authentication states and conversation histories

Routing and Navigation

Structure

  • Vertical sidebar for prototype features

  • Persistent sidebar showing active view

  • Clear labels and interactive elements

  • Intuitive page transitions using Next.js

Performance Optimization

Techniques

  • Lazy loading

  • Code splitting

  • Asset optimization

  • Server-side rendering

  • Code-splitting

Linting Guide

Common ESLint Errors

1. Unused Variables (@typescript-eslint/no-unused-vars)

  • Remove unused variables

  • Use underscore prefix for intentionally unused variables

  • Use empty destructuring for unused state setters

  • Add comments explaining unused variables

2. Missing Dependencies in useEffect (react-hooks/exhaustive-deps)

  • Add missing variables to dependency array

3. Missing Key Prop in Lists (react/jsx-key)

  • Add unique key to each element in lists

Automatic Fixes

  • Use eslint --fix for automatic fixes

  • Configure VS Code for automatic linting

  • Set up pre-commit hooks for linting checks

PreviousArchitectureNextDevelopment

Last updated