Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/indiecodermm/comix
Gamified commits tracker to make coding fun and engaging
https://github.com/indiecodermm/comix
github-api nextjs postgresql trpc
Last synced: about 3 hours ago
JSON representation
Gamified commits tracker to make coding fun and engaging
- Host: GitHub
- URL: https://github.com/indiecodermm/comix
- Owner: IndieCoderMM
- License: mit
- Created: 2024-12-15T16:41:19.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-01-12T09:23:17.000Z (4 days ago)
- Last Synced: 2025-01-12T10:26:22.123Z (4 days ago)
- Topics: github-api, nextjs, postgresql, trpc
- Language: TypeScript
- Homepage: https://comix-dev.vercel.app
- Size: 4.83 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
---
Gamify your GitHub journey!
Track your commits, compete globally, and make coding more fun and rewarding with Comix.
---
## What is Comix?
**Comix** is a gamified platform designed to make tracking your GitHub commits fun and engaging.
With Comix, you can:
- Set daily commit goals.
- Earn _GitCoins_ and experience points for completing your goals.
- Compete on a global leaderboard and climb ranking tiers.
- Share your repositories and boost them to gain visibility.
- Access a real-time stats dashboard showing your GitHub contributions.
## Live Website
Check out **Comix** live! Visit the platform to start tracking your GitHub commits and join the global leaderboard:
> [!NOTE]
> Comix is an early-stage product, and we welcome any feedback to help us improve the platform.
> Feel free to share your suggestions or ideas with us!
## Key Features
- 🎯**Daily Goals:** Stay consistent with your coding habits by setting and completing daily commit goals.
- âš¡**Coins & EXP:** Make progress more exciting by earning rewards.
- 👑**Global Leaderboard:** See how you rank among developers worldwide.
- 🚀**Boost Repositories:** Use your coins to promote your projects and gain visibility.
- 📊**Real-Time Stats Dashboard:** Get detailed insights into your GitHub contributions.
## Use Case
- **For Developers:** Comix helps you maintain consistency in coding while enjoying a gamified experience.
- **For Project Owners:** Gain visibility for your repositories by boosting them in the Comix platform.
## Tech Stack
- **Frontend:** Next.js, Tailwind CSS, ShadCN
- **Backend:** tRPC, Apollo, Redis
- **Database:** PostgreSQL, Drizzle ORM, Supabase
- **Hosting:** Vercel
- **Validation:** Zod
## Getting Started
### GitHub OAuth Setup
To run Comix, you need to create a GitHub OAuth app and retrieve the client ID and secret. Follow these steps:
1. **Create a GitHub OAuth App:**
- Visit the [GitHub Developer Settings](https://github.com/settings/developers).
- Click on **"New OAuth App"** under the "OAuth Apps" section.
2. **Fill Out Application Details:**
- **Application Name:** Enter a name (e.g., "Comix").
- **Homepage URL:** Use your platform's URL (e.g., `https://Comix.example.com`).
- **Authorization Callback URL:** Use the callback endpoint (e.g., `https://comix.example.com/api/auth/callback`).
3. **Save and Copy Secrets:**
- Copy the **Client ID** and **Client Secret** from the app's settings.
### Environment Variables
Create a `.env.local` file in the root directory and add the following environment variables:
```sh
# GitHub OAuth
GITHUB_SECRET=
GITHUB_ID=
# Random Secret
NEXTAUTH_SECRET=
# Postgres url
DB_URL=
# Redis
REDIS_URL=
# GitHub GraphQL AP
NEXT_PUBLIC_GITHUB_GQL_API=https://api.github.com/graphql
```
### Installation
1. **Install Dependencies:**
```sh
npm install --legacy-peer-deps
```
2. **Set Up Database:**
```sh
npm run db:generate
npm run db:migrate
```
3. **Run Development Server:**
```sh
npm run dev
```
4. **Build for Production:**
```sh
npm build
```
## Project Structure
Click to expand
```
.
└── ./
├── app/
├── components/
├── db/
│ ├── drizzle/
│ └── db.ts
├── features/
│ ├── dashboard/
│ └── landing/
├── hooks/
├── lib/
│ ├── redis.ts
│ └── apollo.ts
├── server/
│ └── trpc/
│ ├── routers/
│ └── trpc.ts
├── services/ # DB & API services
│ ├── users/
│ ├── github/
│ └── leaderboard/
├── styles/
├── types/
├── utils/
│ ├── auth.ts # Auth provider & session
│ └── trpc.ts # trpc client
└── middleware.ts
```
### Roadmap
- [ ] **User Profiles:** Allow users to create profiles and share
- [ ] **Streaks:** Track and reward users for maintaining commit streaks
- [ ] **Achievements:** Unlock badges and achievements for completing milestones
- [ ] **More Challenges:** Introduce more coding challenges and competitions
- [ ] **Custom Challenges:** Allow users to create and share custom challenges
- [ ] **Bounty Issues:** Solve issues and earn rewards from the community
## Contribution
Comix is open-source and we welcome contributions! Check out the repository and feel free to create pull requests or raise issues.
## License
This project is licensed under the [MIT License](./LICENSE).
---
Ready to level up your coding?
Login with GitHub and start your Comix journey today!