Skip to main content

​
T1 Component Library

A complete component showcase system with interaction tracking, built with Next.js and Express. Visualize, test, and analyze UI component usage in real-time.

​
What is T1 Component Library?

T1 Component Library is a full-stack application that combines a beautiful component showcase with powerful interaction tracking capabilities. It allows you to:
  • Display and demonstrate your UI component library
  • Track how users interact with each component
  • Analyze usage patterns and statistics
  • Export interaction data for further analysis
  • Manage users with authentication
The system consists of two main parts: a Next.js client for the component showcase and an Express server for the REST API and data persistence.

​
Key Features

​
Interactive Component Showcase

Display your UI components with live, interactive examples. Users can test different variants, sizes, and states in real-time.

​
Interaction Tracking

Automatically track every interaction with your components - clicks, hovers, form inputs, and more. All data is stored with timestamps and user context.

​
User Authentication

Built-in JWT-based authentication system allows you to manage registered users and track their interactions separately from anonymous users.

​
Theme Support

Dark and light mode support with a custom theming system using CSS variables and Tailwind CSS.

​
Comprehensive Testing

Full test coverage with Jest and Testing Library, maintaining 80%+ coverage across the codebase.

​
Data Export

Export all tracking data in various formats for analysis, reporting, or integration with other tools.

​
REST API

Well-documented REST API with endpoints for authentication, component tracking, statistics, and data export.

​
TypeScript

Fully typed codebase for both client and server, ensuring type safety and better developer experience.

​
Architecture

The application follows a modern full-stack architecture: 
┌─────────────────────────────────────────────────────────────┐
│                        CLIENT                               │
│                     (Next.js 16)                            │
│                                                              │
│  ┌─────────┐  ┌──────────┐  ┌─────────┐  ┌──────────────┐  │
│  │ Showcase│  │Dashboard │  │  Docs   │  │   Exports    │  │
│  │   Page  │  │   Page   │  │  Page   │  │    Page      │  │
│  └────┬────┘  └────┬─────┘  └────┬────┘  └──────┬───────┘  │
│       │            │             │              │           │
│       └────────────┴─────────────┴──────────────┘           │
│                           │                                  │
│                    ┌──────┴──────┐                          │
│                    │  API Client │                          │
│                    │  (lib/api)  │                          │
│                    └──────┬──────┘                          │
└───────────────────────────┼─────────────────────────────────┘
                            │ HTTP/REST
                            ▼
┌───────────────────────────┼─────────────────────────────────┐
│                        SERVER                              │
│                     (Express.js)                             │
│                                                              │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                     Routes                           │   │
│  │  /api/health  /api/auth/*  /api/components/*        │   │
│  └─────────────────────────┬───────────────────────────┘   │
│                            │                                │
│  ┌─────────────────────────┴───────────────────────────┐   │
│  │                  Controllers                         │   │
│  └─────────────────────────┬───────────────────────────┘   │
│                            │                                │
│  ┌─────────────────────────┴───────────────────────────┐   │
│  │                   Services                           │   │
│  │            (auth.service, tracking.service)          │   │
│  └─────────────────────────┬───────────────────────────┘   │
│                            │                                │
│  ┌─────────────────────────┴───────────────────────────┐   │
│  │                MongoDB (Mongoose)                    │   │
│  │           (Users, Tracking collections)              │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

​
Tech Stack

​
Frontend

  • Next.js 16 - React framework with App Router
  • React 19 - UI library
  • TypeScript 5 - Type safety
  • Tailwind CSS 4 - Utility-first styling
  • TanStack React Query - Server state management
  • Zustand - Client state management
  • Jest & Testing Library - Testing framework

​
Backend

  • Express.js 4 - Web framework
  • MongoDB Atlas - Cloud database
  • Mongoose 8 - MongoDB ODM
  • JWT - Authentication
  • bcryptjs - Password hashing
  • TypeScript 5 - Type safety
Get started with T1 Component Library by following these guides:

Installation

Install and configure both client and server

Quick Start

Get the full stack running in minutes

Components Overview

Explore available UI components

API Reference

Complete REST API documentation

​
What’s Next?

After setting up the project, you can:
  • Browse the component showcase at http://localhost:3000
  • View usage statistics in the dashboard
  • Read component documentation to understand props and variants
  • Explore the API to integrate tracking into your own projects
  • Export data for analysis and reporting
Check out the Quick Start Guide to get your development environment up and running in just a few minutes!

Build docs developers (and LLMs) love

Get started for freeTalk to us