TypeLabs

January 22, 2025 · View on GitHub

A modern, customizable typing application inspired by monkeytype built with React, TypeScript, and Vite. Practice your typing skills with a beautiful interface and extensive theme customization.

Features

🎨 160+ Built-in themes
🎵 Spotify integration for music playback
⚡️ Fast and responsive typing experience
⌨️ Keyboard shortcuts support
Sound effects and volume controls
Custom font support

Tech Stack

React 18
TypeScript
Vite
Tailwind CSS
Zustand (State Management)
React Query
Shadcn UI Components
Spotify Web API

Getting Started

Installation

Clone the repository:

git clone https://github.com/frstycodes/typelabs.git
cd typelabs

Install dependencies:

bun install

Create a .env file in the root directory with your Spotify API credentials:

VITE_SPOTIFY_CLIENT_ID=your_client_id

Start the development server:

bun run dev

Building for Production

To create a production build:

bun run build

Project Structure

typelabs/
├── src/
│   ├── components/    # React components
│   ├── hooks/         # Custom React hooks
│   ├── state/         # Zustand store and state management
│   ├── styles/        # Theme definitions and global styles
│   ├── utils/         # Utility functions
│   └── config/        # Configuration files
├── public/            # Static assets

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Inspired by monkeytype and themes used from monkeytype's github repo
Built with shadcn/ui components