Keymapper

A modern web application for customizing keyboard settings, including sound profiles, macros, and RGB lighting.

Features

• Sound profiles with different switch types (Blue, Brown, Red)
• Macro recording and playback
• RGB lighting customization
• Cloud sync for settings
• Modern, responsive UI
• Complete keyboard customization
• Multi-layer support

Tech Stack

• Frontend: React 18 with TypeScript
• UI Library: Chakra UI & Material UI
• State Management: Zustand
• Routing: React Router v6
• Backend: Firebase (Authentication, Firestore, Storage)
• Build Tool: Vite
• Testing: Jest & React Testing Library

Prerequisites

• Node.js >= 18.0.0
• npm or yarn

Setup

1. Clone the repository:

git clone https://github.com/yourusername/keymapper.git
cd keymapper

2. Install dependencies:

npm install

3. Create a .env file in the root directory with your Firebase configuration:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id

4. Start the development server:

npm run dev

Project Structure

src/
├── assets/            # Static assets (images, sounds)
├── components/        # Reusable UI components
├── config/            # Configuration files
├── contexts/          # React contexts
├── features/          # Feature-specific code
├── hooks/             # Custom React hooks
├── layouts/           # Layout templates
├── pages/             # Page components
├── services/          # Service modules
├── store/             # Zustand stores
├── styles/            # CSS and style utilities
├── test/              # Test utilities and mocks
├── types/             # TypeScript type definitions
├── utils/             # Utility functions
├── App.tsx            # Main App component
├── main.tsx           # Application entry point

Testing

Run the test suite:

npm test

Run tests in watch mode:

npm run test:watch

Generate test coverage report:

npm run test:coverage

Build

To create a production build:

npm run build

Deployment

Preview the production build locally:

npm run preview

Contributing

1. Follow the coding style and conventions used throughout the project
2. Write tests for new features
3. Ensure all tests pass before submitting a PR
4. Update documentation as needed

License

MIT