A modern, customizable typing practice application with multiple themes and coding snippets.
- Install dependencies:
pnpm install
- Start the development server:
pnpm dev
The app will be available at http://localhost:3000
You can add new themes by modifying lib/themes/default-themes.ts
. Each theme follows this structure:
{
theme: {
name: "Your Theme Name",
id: "your-theme-id",
author: "Your Name",
description: "Theme description",
colors: {
background: "#hex-color",
foreground: "#hex-color",
card: "#hex-color",
"card-foreground": "#hex-color",
popover: "#hex-color",
"popover-foreground": "#hex-color",
primary: "#hex-color",
"primary-foreground": "#hex-color",
secondary: "#hex-color",
"secondary-foreground": "#hex-color",
muted: "#hex-color",
"muted-foreground": "#hex-color",
accent: "#hex-color",
"accent-foreground": "#hex-color",
destructive: "#hex-color",
"destructive-foreground": "#hex-color",
border: "#hex-color",
input: "#hex-color",
ring: "#hex-color"
}
},
category: "Dark" | "Light" | "Special"
}
You can add new coding problems by modifying lib/code-snippets.ts
. Each snippet follows this structure:
{
id: "unique-id",
language: "Programming Language",
name: "Snippet Name",
difficulty: "easy" | "medium" | "hard",
code: "Your code snippet here"
}
Note: When adding code snippets, make sure to:
- Use a unique ID for each snippet
- Properly escape special characters in the code
- Choose an appropriate difficulty level
- Format the code consistently
This project uses next/font
to automatically optimize and load Geist, a new font family for Vercel.
We welcome contributions to CatType! Here's how you can help make this project better.
- Fork the repository
- Clone your fork:
git clone https://github.com/your-username/cattype.git
cd cattype
- Install dependencies:
pnpm install
- Create a new branch for your feature:
git checkout -b feature/your-feature-name
- Ensure your code follows the existing style and conventions
- Write clear, descriptive commit messages
- Keep pull requests focused on a single feature or bug fix
- Add appropriate documentation for new features
- Make sure your changes don't break existing functionality
- Test your changes thoroughly before submitting
- Open
lib/themes.ts
- Add your theme following the structure provided above
- Ensure your theme:
- Has a unique ID
- Uses descriptive and appropriate color names
- Maintains good contrast ratios for accessibility
- Includes all required color properties
- Test your theme with different code snippets and UI elements
- Open
lib/code-snippets.ts
- Add your snippet following the structure provided above
- Ensure your snippet:
- Has a unique ID
- Uses appropriate difficulty classification
- Contains well-formatted, clean code
- Represents real-world programming scenarios
- Is neither too short nor too long (ideally 5-15 lines)
- Includes proper syntax highlighting support
- Check the existing issues or create a new one describing your proposed feature
- Discuss the implementation approach in the issue
- Follow the project's architecture and patterns
- Add necessary tests for new functionality
- Update documentation as needed
- Ensure the development server runs without errors
- Push your changes to your fork
- Create a Pull Request (PR) to the main repository
- In your PR description:
- Clearly describe the changes
- Reference any related issues
- Include screenshots for UI changes
- List any new dependencies added
- Wait for review and address any feedback
If you need help or have questions:
- Open an issue for bugs or feature discussions
- Be clear and descriptive in your communications
- Provide as much relevant information as possible
Thank you for contributing to CatType!