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: 3 months 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 (7 months ago)
- Default Branch: dev
- Last Pushed: 2025-02-02T15:52:06.000Z (5 months ago)
- Last Synced: 2025-03-26T22:36:36.987Z (3 months ago)
- Topics: github-api, nextjs, postgresql, trpc
- Language: TypeScript
- Homepage: https://comix-dev.vercel.app
- Size: 24.6 MB
- Stars: 7
- 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 API
NEXT_PUBLIC_GITHUB_GQL_API=https://api.github.com/graphql
```
### Installation
There are two ways to run Comix locally:
1. **With Docker**: If you have Docker installed, you can run the app with Docker Compose. Check out the [Docker Installation](#docker-installation) section.
2. **Manual Installation**: You can also run the app manually by following the [Manual Installation](#manual-installation) steps.
#### Docker Installation
Docker Compose is the easiest way to run Comix locally. Make sure you have Docker installed on your machine.
1. This command will build containers for the app, postgres, and redis. The app will be available at `http://localhost:3000`.
```sh
docker-compose up
```
These are the default urls to access the services:
```sh
# Postgres url
DB_URL=postgresql://comix_user:comix_password@db/comix_dev_db?sslmode=disable
# Redis
REDIS_URL=redis://cache:6379/0
```
2. Run the database migrations:
```sh
docker-compose exec app npm run db:generate
docker-compose exec app npm run db:migrate
```
#### Manual 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!