Time Series Forecasting Platform

Live Demo

Try the production deployment on Vercel: v0-timeseries-five.vercel.app

Overview

This frontend application provides an interface for time series forecasting with support for multiple forecasting models like N-BEATS, Prophet, and TiDE. The application follows SOLID principles and uses a flexible component architecture to allow easy addition of new models.

Features

• Flexible model registry system for adding new forecasting models
• Dynamic parameter configuration for each model type
• Model training workflow with real-time progress tracking
• Dataset selection and management
• Clean, modern UI with dark mode support
• TypeScript for improved type safety

Real-time Updates

The application uses WebSockets for real-time updates during model training:

• Live Training Progress: Watch training progress in real-time with detailed metrics
• Resource Monitoring: Monitor CPU and memory usage during training
• Automatic Reconnection: Handles connection issues with smart retry logic
• Efficient Updates: Optimized message protocol minimizes bandwidth usage

This real-time capability enables a responsive user experience when training complex models that might take significant time to complete.

Requirements

• Deno 2.0 or higher
• Make
• pre-commit
• pnpm 11 or higher, only for local dependency audits with make audit

Installation

Automatic Setup

1. Clone the repository:

git clone https://github.com/your-username/TimeSeries_Frontend.git
cd TimeSeries_Frontend

2. Install required tooling:

# For macOS
brew install deno pre-commit pnpm

For other platforms, install Deno from https://deno.com/, pre-commit from https://pre-commit.com/, and pnpm from https://pnpm.io/.

3. Run the setup command:

make setup

Manual Setup

1. Clone the repository:

git clone https://github.com/your-username/TimeSeries_Frontend.git
cd TimeSeries_Frontend

2. Install Deno and pre-commit (if not already installed):

# For macOS
brew install deno pre-commit

# For Linux
curl -fsSL https://deno.land/x/install/install.sh | sh
python -m pip install pre-commit

3. Initialize project tooling:

make setup

Running the Application

Development Server

Start the regular development server:

make dev

Start the local environment development server (with mocked data):

make dev-local

The application will be available at http://localhost:3000.

Environment Configuration

The project supports multiple environments:

• local - Local development with mocked data
• development - Development environment with test API
• test - Testing environment
• production - Production environment

To create custom environment configurations:

1. Copy .env.example to .env.{environment} (e.g., .env.local)
2. Modify the variables as needed

Deploying to Vercel

1. Import this repository in Vercel.
2. In project settings, set Root Directory to src.
3. In Environment Variables, add:
   • NEXT_PUBLIC_API_BASE_URL = your backend API URL
4. Deploy from main (or your release branch) and use the generated domain.

If the app shows API access errors in production, verify that NEXT_PUBLIC_API_BASE_URL is set for the Production environment and points to a reachable backend with CORS enabled for your Vercel domain.

Building for Production

Build the application for production:

make build

Start the production server:

make start

Project Structure

• /src - Source code directory
  • /app - Next.js application files
  • /components - React components
  • /hooks - Custom React hooks
  • /lib - Utility functions and libraries
  • /public - Static assets
  • /styles - Global styles

Testing Strategy

The project implements a comprehensive testing approach across multiple layers:

Unit Testing

• Component testing with React Testing Library
• Model registry and utility function tests
• Type validation tests

Integration Testing

• Component interaction testing
• API client testing with mock servers
• State management testing

End-to-End Testing

• Critical user flow validation
• Backend integration testing
• WebSocket communication testing

Performance Testing

• Rendering performance measurements
• Network operation optimizations
• Memory usage monitoring

React Testing with Deno

We've implemented several improvements to support React component testing in Deno:

1. Enhanced Type Declarations:

   • Added proper JSX element type definitions
   • Updated React component return types
   • Created appropriate module declarations

2. Import Path Optimization:

   • Ensured proper file extensions in imports
   • Configured import map for correct module resolution

3. Documentation:

   • Added notes about current testing limitations
   • Provided workarounds for common issues

While there are still some compatibility challenges between Deno's type system and React's JSX, our improvements allow for reliable testing of both UI components and business logic.

Run tests with:

make test

Technology Stack

• Deno 2.0 as the runtime
• Next.js 15
• React 19
• Tailwind CSS
• Radix UI Components
• Recharts for data visualization
• D3.js and Observable Plot for advanced visualizations

Architecture

The application follows SOLID principles and uses several design patterns to ensure maintainability and extensibility:

Model Registry

The core of the application is a flexible model registry system that implements the Factory pattern:

• Dynamic Registration: Models can be registered at runtime
• Type Safety: Strong TypeScript typing for all model definitions
• Parameter Validation: Automatic validation of model parameters
• Extensibility: New models can be added without modifying existing code

Design Patterns

• Factory Pattern: Used for creating model instances
• Strategy Pattern: Applied for interchangeable forecasting algorithms
• Observer Pattern: Implemented for reactive UI updates
• Adapter Pattern: Used for backend API communication
• Repository Pattern: Applied for data access abstraction

Component Architecture

• Single Responsibility: Each component has a clear, focused purpose
• Composition over Inheritance: Components are composed of smaller, reusable parts
• Container/Presenter Pattern: Separation of logic and presentation
• Custom Hooks: Encapsulation of reusable logic

Why Deno?

• Security: Deno has a permissions system that provides greater security by default
• TypeScript built-in: No need for additional TypeScript configuration
• Modern JavaScript: First-class support for ESM and top-level await
• Built-in tooling: Includes testing, formatting, and linting out of the box
• Node.js compatibility: Deno 2.0 can use npm packages seamlessly
• Improved performance: Better runtime performance than Node.js

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Notes

Linting Issues

The codebase currently has some linting issues that are being addressed gradually:

1. 'any' type usage: We're working on replacing any types with more specific types
2. Unused variables: Some variables are unused and should be prefixed with underscores
3. Async functions without await: Some async functions need await statements or should have the async keyword removed

To keep linting and formatting clean during development, run:

make fmt
make lint

Then address any remaining issues manually in the reported files.

Pre-commit configuration

The pre-commit hooks are configured in .pre-commit-config.yaml. We're currently ignoring:

• no-explicit-any: allows any type for now
• require-await: allows async functions without await
• no-unused-vars: allows unused variables

In production code, these issues should be properly addressed.

To run all pre-commit hooks locally:

make pre-commit