Launching the Beta of My Side Project: CodeBreath 🚀 - Making Daily Coding Natural and Fun
Tags: github, architecture, sideprojects, webdev
Published: 2024-03-25 08:03:00

## Introducing CodeBreath: Engineering as Natural as Breathing

**CodeBreath** embodies our mission to integrate daily engineering seamlessly into life, mirroring the simplicity and necessity of breathing.

[](https://codebreath.dev)

**Leveraging GitHub**, CodeBreath tracks and analyzes coding activities to visualize progress and boost motivation. Through **gamification**, users can enjoy learning and developing by completing missions and ranking up.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/je3y7f9io8hvxfy036xa.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83193ztknlfvfhrrhjm9.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iv7r7bkrepzmwd1b7829.png)


Currently, CodeBreath offers:

- GitHub Integration for authentication and commit tracking.
- Gamification features like missions, ranks, and leaderboards.
- Visualization of repository activities with heatmaps, showcasing ongoing streaks and total active days.
- Profile customization and settings.

## Technology stack
In selecting our technology stack, we prioritized cost-efficiency, familiarity to ensure good development efficiency, and an overall positive development experience.

### Technical configuration

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p6gmclmuz5xcp6j653f.png)

### Remix
[Official site](https://remix.run/)

We built the client and server sides using **Remix**, a React-based full-stack web framework.

Remix focuses on enhancing user experience through efficient data fetching and optimized page rendering.

Its familiarity was a key reason for selection, allowing us to leverage previous knowledge and lower the learning barrier for newcomers. Our application incorporates TypeScript, TailwindCSS, and Prisma.

### Fly.io
[Official site](https://fly.io/)

We chose **Fly.io** for both computing and database services.
 
Fly.io offers edge computing, allowing applications to run closer to users for faster, low-latency experiences.

This aligns well with Remix's SSR (Server-Side Rendering) focus, as Fly.io's edge computing enhances SSR's speed and efficiency.

We opted for Fly.io not only because of its compatibility with Remix but also due to its free plan option, though pricing may have changed, so it's wise to check for [the latest details](https://fly.io/docs/about/pricing/#plans).

Initially, our setup included Fly.io for computing and [PlanetScale](https://planetscale.com/) for databases. However, with the discontinuation of PlanetScale's free plan, which led to a minimum charge of $39 per month, we transitioned to using Fly.io's Postgres service to maintain cost-efficiency.

Our infrastructure comprises both production and staging environments, doubling the computing and database machines to four in total.

With the launch of our beta version, we subscribed to Fly.io's Launch plan at $29 monthly. This approach aims at streamlining cost management and operational efficiency for current and future service development, leveraging Fly.io's comprehensive offerings for both computing and databases.

### Firebase
[Official site](https://firebase.google.com/?hl=ja)

We're also utilizing **Firebase** for its reliability.

- For GitHub authentication, we're using Firebase **Authentication**.
- For storing images, Firebase **Storage** is our choice.

### CloudRun Job
[Document of CloudRun Job](https://cloud.google.com/run/docs/overview/what-is-cloud-run?hl=ja#jobs)
[Document of CloudScheduler](https://cloud.google.com/scheduler?hl=ja)

At CodeBreath, daily batch processes run at midnight UTC to update mission completion statuses, calculate experience points, and compute rankings based on user activities. These batch jobs are executed with **CloudRun Job**, scheduled by **CloudScheduler**.

The choice of CloudRun was motivated by its cost-effectiveness and our familiarity with GCP from work use. This setup remains free under a certain user count threshold.

Considering CodeBreath's potential global user base, we plan to stagger job execution times by region, ensuring data processing occurs during off-peak hours for all users.
 Additionally, scalability to handle increased user numbers through parallel task execution is a key future capability.

## Integrating GitHub
For integrating GitHub with CodeBreath, the service primarily focuses on aggregating GitHub activities, with a keen eye on security and privacy. It collects commit or push timings from GitHub activities.
- For public repositories, it directly fetches commit times using GitHub API through scheduled jobs controlled by CodeBreath.
- For private repositories, instead of using GitHub API, it requires users to save a token in secrets and place a workflow file to execute CodeBreath's API on push, avoiding direct repo access.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go6xp0qc0yy5ni0kt3fn.png)

To manage commit times from private repositories without GitHub API, avoiding the need for 'repo' scope OAuth, which grants extensive permissions, CodeBreath utilizes GitHub workflows.
This method triggers CodeBreath's API to capture activity times, ensuring service doesn't need to read the repository directly.

This approach might limit future feature expansion to public repositories only if certain activity tracking becomes unachievable through workflows.

## Reflecting on the journey of developing and launching CodeBreath

Reflecting on the journey of developing and launching CodeBreath, a few key learnings stand out:

- **The fear of SaaS free plan discontinuations is real.** For systems intended for long-term operation, it's crucial to estimate realistically needed resources and choose SaaS providers accordingly. Free plans often serve as marketing tools and may not last forever.

- **Large Language Models (LLMs) have significantly boosted development efficiency.** They've been instrumental in idea generation, logic implementation, and even design tasks. The base designs for mission icons were also generated by ChatGPT.

- **There's a growing desire to learn and apply business strategies actively.** In developing CodeBreath's full version and future projects, there's a focused intent to develop with revenue generation in mind, aiming for a profitable venture.

## Future Outlook
As we've launched the beta version of CodeBreath, we're just getting started. **Our mission with CodeBreath is to infuse daily engineering routines with new excitement, turning engineering into a habit and ultimately aiding in project success.** To achieve this, our development will focus on three key areas:

- Habitualizing coding, learning, and blogging activities.
- Offering insights into personal work habits.
- Fostering connections among peers.

Guided by this philosophy, we've outlined a [roadmap](https://trello.com/b/HnPSq2Va) for ongoing development. In parallel, we're eager to explore new service development.