When building modern web apps, choosing between Material UI (MUI) and Shadcn can significantly impact your development workflow. Here's our practical comparison.



# Core Comparison Table

| Aspect                | Material UI          | Shadcn               | Winner               |
|-----------------------|----------------------|----------------------|----------------------|
| **Learning Curve**    | Moderate            | Easy                | Shadcn              |
| **Customization**     | Theme-based         | CSS Variables       | Shadcn              |
| **Default Look**      | Distinct Material   | Neutral/Generic     | MUI                 |
| **Bundle Size**       | 45kb (core)         | 8kb (base)          | Shadcn              |
| **Community**         | 80k+ GitHub stars   | 4k+ GitHub stars    | MUI                 |
| **Generic Risk**      | Recognizable Style  | Bland if Unstyled   | Tie                 |


# The Core Difference

Material UI offers a complete design system (Google's Material Design) with 50+ pre-built components. Shadcn takes a minimalist approach, providing basic components that you style yourself.

# Popularity vs Flexibility

- **Material UI** (Used by 56% of React projects)
  - ✅ Huge community support
  - ✅ Consistent design out-of-box
  - ❌ Can look "samey" across apps
  - ❌ Larger bundle size (~45kb)

- **Shadcn** (Used by 12% of React projects)
  - ✅ Lightweight (~8kb core)
  - ✅ Complete design control
  - ❌ Requires more styling work
  - ❌ Smaller ecosystem

# Real-World Use Cases

**Choose MUI when:**
- Building enterprise dashboards
- Rapid prototyping needed
- Your team knows Material Design
- You need date pickers/complex components

**Choose Shadcn when:**
- Creating unique brand identities
- Optimizing for performance
- Willing to invest in custom styling
- Building marketing sites/app landing pages

# The Generic Look Problem

Material UI's strength (consistent design) can become a weakness - many apps end up looking similar. Shadcn requires more design work but helps avoid this "Material UI clone" appearance.

# Our Experience

After using both in production:
- MUI saves 40% initial development time
- Shadcn reduces bundle size by 60%
- MUI needs 2x more CSS overrides
- Shadcn requires 3x more design decisions

# Which Should You Choose?

For most projects, we recommend:
- **Startups/Brands:** Shadcn + custom theme
- **Enterprise Apps:** Material UI
- **Public Dashboards:** Material UI
- **Marketing Sites:** Shadcn

Need help deciding? [Reach out to our team](mailto:hello@ckcollab.com).

Material UI vs Shadcn: Choosing UI Libraries

The AI race continues to heat up as Elon Musk's xAI launches Grok 3, their most powerful AI model yet. While tech giants battle for AI supremacy, we're more interested in what this means for local businesses here in North Idaho.



# The Latest AI Showdown

After OpenAI's rejection of Musk's $97.4 billion acquisition offer, xAI responded by releasing Grok 3. The new model has already made waves in the AI community, with benchmark scores surpassing both GPT-4 and Google's Gemini 2.0.

# Key Features of Grok 3

- DeepSearch: A new research and data analysis tool
- Real-time reasoning capabilities
- Available to Premium+ X subscribers
- Powered by the massive Colossus supercomputer cluster
- Trained on diverse datasets, including legal documentation

# Local Impact: North Idaho Business Use Cases

As a dev shop working with local businesses, we're particularly excited about Grok 3's potential impact on service-based businesses in North Idaho. Here's how different sectors could benefit:

## Plumbers & Electricians
Imagine a plumber in Coeur d'Alene using Grok 3's voice capabilities to:
- Handle customer calls while working on-site
- Schedule appointments hands-free
- Generate accurate quotes in real-time
- Transcribe job notes and create invoices

## Current Limitations

While early reviews praise Grok 3's capabilities, there are mixed opinions about its real-world performance. Former OpenAI co-founder Andrej Karpathy noted that while Grok 3 matches state-of-the-art models in many areas, it still shows sensitivity to ethical issues and sometimes struggles with humor - a key feature Musk had promoted.

# Looking Forward

The competition between xAI and OpenAI is driving rapid innovation in the AI space. OpenAI has already announced plans for GPT-4.5 and GPT-5, while xAI continues expanding its Colossus supercomputer cluster in Memphis.

For North Idaho businesses, this means:
- More accessible AI tools for daily operations
- Improved customer service capabilities
- Reduced administrative overhead
- Better data analysis and decision-making tools

# Our Take

As a development shop working with both cutting-edge tech and local businesses, we see Grok 3 as another step toward making AI practical for everyday use. While it may not be the "smartest AI ever" as initially claimed, it represents significant progress in making AI tools more accessible and useful for businesses of all sizes.

Want to learn how AI could benefit your North Idaho business? [Let's talk about it](mailto:hello@ckcollab.com).

Grok 3: What It Means for North Idaho Businesses

We're excited to announce our collaboration with FLOZ, an innovative startup transforming how we track and maintain healthy hydration habits. Their smart straw device combines elegant design with powerful tracking capabilities, working with the bottles you already own and love.



<div style="text-align: center;">
    <img src="/assets/blog/floz-hero.jpg" class="img-bordered" alt="FLOZ Hero Image">
</div>

# Why Hydration Tracking Matters

Proper hydration is crucial for optimal performance, whether you're an athlete, professional, or just trying to maintain a healthy lifestyle. Yet most of us struggle to track our water intake effectively. Traditional methods like manual logging or "smart bottles" often create more friction than solutions.

# The FLOZ Difference

What sets FLOZ apart is their unique approach: instead of requiring users to switch to a new bottle, their smart straw insert works with virtually any container. This means you can keep using your favorite Hydro Flask, Stanley, or Yeti while gaining precise hydration tracking.

Key features include:

- Universal compatibility with most water bottles and tumblers
- Waterproof and food-grade materials
- Real-time hydration tracking
- Bluetooth-enabled mobile app integration
- Wireless charging
- Personalized hydration goals based on:
  - Height
  - Weight
  - Age
  - Activity level

<div style="margin: 0 auto; max-width: 560px; border: 1px solid #c5aaff; border-radius: 20px; overflow: hidden;">
    <iframe 
        width="560" 
        height="315" 
        src="https://www.youtube.com/embed/ArjBRZm8ckk" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
    </iframe>
</div>

# Our Role in Development

As FLOZ's development partner, we've been working to create a seamless software experience that matches their hardware's elegance. The mobile app we're building provides:

- Real-time hydration tracking
- Custom goal setting
- Integration with health platforms like Apple Health
- Detailed analytics and insights
- Smart notifications

# Looking Forward

We're proud to be part of bringing this innovative wellness technology to life. FLOZ represents exactly the kind of forward-thinking product we love to work on - one that combines hardware and software to solve real problems in an elegant way.

Want to learn more about FLOZ? Visit their website at [flozhydration.com](https://www.flozhydration.com) or follow them on Twitter [@FlozHydration](https://twitter.com/FlozHydration).

Have an innovative hardware/software product that needs development? [Contact us!](mailto:hello@ckcollab.com)

FLOZ: Revolutionizing Hydration Tracking


# New tool: Lightning Network Profitability Calculator

Analyze the potential returns of running a Lightning Network node with our new [Profitability Calculator](https://lightningnetworkprofitability.com). This interactive tool helps node operators estimate costs, returns, and network metrics in real-time, providing valuable insights for anyone considering participating in Bitcoin's layer-2 payment network.

<div style="text-align: center;">
    <img src="/assets/blog/ln-calc-header.jpg" class="img-bordered">
</div>

# Introduction

As the Lightning Network continues to grow, understanding the economics of node operation has become increasingly important. The Lightning Network Profitability Calculator ([lightningnetworkprofitability.com](https://lightningnetworkprofitability.com)) offers a data-driven approach to evaluating node operation costs and potential returns.

# Key Features

## Interactive Calculator
Our tool provides multiple analysis modes:
- **Basic Mode**: Quick estimates using network averages
- **Advanced Mode**: Customizable inputs for channel size and fees
- **ROI Projector**: Long-term return projections based on historical data

<div style="text-align: center;">
    <img src="/assets/blog/ln-calc-chart.jpg" class="img-bordered">
</div>

## Real-Time Network Data
The platform integrates current Lightning Network metrics including:
- Average channel liquidity
- Typical routing fees
- Network capacity trends
- On-chain transaction costs

## Cost-Benefit Analysis
Evaluate different operation scenarios with variables including:
- Node hardware costs
- Channel management strategies
- Bitcoin price projections
- Energy consumption estimates

# Why This Matters

Understanding node economics is crucial for both individual operators and the overall health of the Lightning Network. As adoption grows, tools like this help maintain network stability by enabling informed participation decisions.

# Looking Forward

The Lightning Network Profitability Calculator will continue to evolve with new features including:
- Multi-currency cost calculations
- Automated API integrations with popular node implementations
- Historical performance benchmarking

# We're excited!

While Lightning Network node operation requires careful consideration, we're excited to provide tools that help demystify the economics of running payment channels. As Bitcoin's layer-2 solution matures, understanding these dynamics becomes increasingly important for network participants.

Have a Lightning Network project that needs development? [Contact us!](mailto:hello@ckcollab.com) 

Lightning Network Profitability Calculator

# Solving Depop's Missing Feature: Personalized Seller Stats



## Background

Depop is one of the biggest cloth reseller applications on the market. Millions of sellers and tens of millions of active users, this app empowers individuals to easily post and sell clothes. Whether the clothes are old gems collecting dust in the closet or diamond in the rough finds at your local thrift store, Depop is the go-to place for selling those items. They've really found their market niche and excelled, but they're still lacking one critical piece of functionality: personalized seller stats.

Personalized seller stats would allow sellers to look at their shop's performance, trends, and profits that would allow their sellers to make more informed decisions when acquiring, posting, and pricing their items. Even very simple statistics would be quite informative for sellers. Best selling brands, sizes, and categories are just some stats that would be majorly helpful for sellers.

Being surrounded by Depop sellers for years now, I've been acutely aware that there is a need for this. Years ago there wasn't even an easy way to see how much profit a seller made over a certain period of time. While they have improved on this slightly, there is still so much to be desired.

For this very purpose, around 6 years ago I created Mepop Reports. The initial goal was to easily analyze profits but it quickly evolved. As traction grew among sellers, user feedback drove the product to be more of an analysis of shop sales rather than strictly a tool for profit/revenue.

---

<div style="text-align: center; display: flex; gap:20px; margin-top:20px;">
    <img src="/assets/blog/mepop/profit-overview.png" class="img-bordered">
    <img src="/assets/blog/mepop/monthly-profits.png" class="img-bordered">
</div>

## The Technicals

### Data aggregation

The initial challenge of this project was the lack of any public Depop API. I explored several ways around this but finally settled on a CSV data import method for obtaining seller info. Depop allows sellers to export CSVs of all their sales. The exact details of the CSV have changed over time but all in all, it's remained a table of all sales made through the seller's account. Each row in the table has a good amount of data on that sale, and this allowed me to be quite flexible on the data I showed to the user.

While a CSV import was not the most user-friendly method of obtaining the data, it ended up being pretty effective and not as much of a barrier for the user as I had anticipated. I initially believed requiring users to access their Depop account, download their CSVs (limited to 3-month intervals), and then return to Mepop to upload them would result in a loss of user engagement. While I probably did lose some users to this, it wasn't a huge problem. The options for visualizing your sales were: 1) setting up a custom Excel sheet and importing your CSVs manually, or 2) using Mepop Reports. Mepop was clearly the easier choice between the two, and the rapid flocking of users early on to my platform was staunch proof of this.

<div style="text-align: center; display: flex; gap:20px; margin-top:20px;">
    <img src="/assets/blog/mepop/paypal-fees.png" class="img-bordered" style='flex:1'>
    <img src="/assets/blog/mepop/sales-by-category.png" class="img-bordered" style='flex:1'>
</div>

### Tech stack

At the time of building this, my easiest and best option to get it off the ground was to use Firebase as my backend. Firebase provided a simple-to-use database that I could spin up easily and host automatically through their platform. While Firebase isn't optimal for lots of projects, it ended up working pretty well for Mepop Reports. I offloaded as much onto the client and only stored critical data in Firebase. With auth, analytics, and domain management built-in, this got the app spun up pretty quickly.

For the first few years, I didn't even need any Firebase functions and almost exclusively used it for managing auth and storing files. All file processing/data aggregation was done client-side. Later on, I ended up wanting to optimize some of my Stripe integration and webhook integration, so I was forced to create some functions. This set me up for some marginal risk, and I realized that if the app's user base did grow 10x or so I would probably have to move off of Firebase and into something cheaper to host. So far, this hasn't been a problem.

The heavy-hitter technologies on the client were Next.js, React, Redux, and Recharts. Pretty classic and simple at the end of the day.

---

## Recent overhaul and current update

Remember how I mentioned seeing some new Stripe integrations after building? This was due to my experimentation with the onboarding. In an effort to move away from the free tier that was initially offered, and promote a free trial followed by a $9/month subscription, I had to make some changes. I started tracking how far the user would get into onboarding. This insight allowed me to see any weak links of the initial user flow that needed to be optimized. I changed the onboarding, user creation, and Stripe customer creation logic several times over. This was an ongoing process because I was constantly trying new UX tweaks to see how conversion rates were affected. Usually, these new onboarding optimizations would require the overhaul of some other aspect of the onboarding flow. So there was lots of tinkering and probably four serious refactors of the onboarding flow. It was a good learning experience to go over the flow repeatedly and, based on user experience, make improvements time and time again. Successful onboarding rates ended up nearly doubling by the end of the process.

Now it basically is running itself. As I get user feedback (via Discord, email, or otherwise), I'll try to implement the feedback and build the feature or whatever else is requested. It's smooth sailing for the most part.

---

## The Future

It's unclear at the moment what the future holds. Depop looks to be building their own version of seller stat tracking, and I'm not sure where that will leave us. It's shocking they haven't done it sooner, honestly. There's no way of knowing exactly what they'll end up doing (if anything), but for now, we're riding the wave and providing this much-needed tool for Depop sellers.

Feel free to check it out and let us know what you think: [mepopreports.com](https://www.mepopreports.com)

Mepop Reports


# New tool: A Bitcoin Reserve Tracker

Track the evolving landscape of Bitcoin legislation across the United States with our new [Bitcoin Reserve Monitor](https://bitcoinreservemonitor.com). This interactive tool provides real-time updates on state-level Bitcoin reserve proposals, passed legislation, and federal developments, helping you stay informed about the growing institutional adoption of digital assets.


<div style="text-align: center;">
    <img src="/assets/blog/bitcoinreservemonitor.jpg" class="img-bordered">
</div>

# Introduction

In an era where digital assets are increasingly entering mainstream finance, keeping track of legislative developments around Bitcoin reserves has become crucial. The Bitcoin Reserve Monitor ([bitcoinreservemonitor.com](https://bitcoinreservemonitor.com)) offers a comprehensive, visual approach to tracking Bitcoin-related legislation across all 50 states and federal.

# Key Features

## Interactive State Map
Our color-coded map provides instant visibility into each state's legislative status:
- Green: Legislation passed
- Orange: Bill under consideration
- Blue: Legislation proposed
- Red: Bill rejected
- Gray: No legislation proposed

## Real-Time Updates
The platform maintains current information about Bitcoin reserve legislation, with our latest updates showing significant movement in states like:
- Texas (SB 778) - Proposing the first state-level Strategic Bitcoin Reserve
- Oklahoma (HB 1203) - Considering allowing state funds to invest in Bitcoin
- Additional states exploring similar initiatives

## Federal Status Tracking
Beyond state-level monitoring, we track federal developments regarding Bitcoin reserves and related legislation, ensuring you have a complete picture of the regulatory landscape.

# Why This Matters

The emergence of state-level Bitcoin reserves represents a significant shift in how governmental bodies view and interact with digital assets. As states like Texas pioneer these initiatives, they're setting precedents that could influence future legislation and institutional adoption across the country.

# Looking Forward

The Bitcoin Reserve Monitor will continue to evolve alongside the rapidly changing legislative landscape. We're committed to providing the most accurate and up-to-date information as more states consider and implement Bitcoin reserve strategies.



# We're excited!

However weird Eric is for liking Bitcoin so much, we're excited about all of the possibilities. And, if it's not Bitcoin, surely some
cryptocurrency will reduce friction in markets and provide services to the unbanked.

Have a Bitcoin app that needs building? [Contact us!](mailto:hello@ckcollab.com)


Bitcoin Reserve Tracker


# The Active Developer: Blending Steps with Code

## Embracing Movement in the World of Code

The journey towards the 10,000 steps a day goal finds its roots in 1960s Japan, thanks to Dr. Yoshiro Hatano's research.
Initially a strategy to market pedometers, Dr. Hatano's findings illuminated the considerable health benefits tied to
this daily activity target. Over the decades, further studies have reinforced the importance of such physical engagement
for enhancing overall well-being.

In the realm of software engineering, where sedentary periods dominate, integrating this walking target can not only
boost health but also invigorate productivity and boost mental clarity.

For me, living in sunny San Diego has helped motivate me to get outside and walk every day, even if it's just for 30 
minutes or so. I hope I can help you do the same!

## Walking Towards Well-being and Innovation

The act of walking, particularly reaching the milestone of 10,000 steps daily, offers multifaceted benefits:

### Cardiovascular Health

Consistent walking is key in regulating blood pressure and strengthening heart health. Notably, a 2019 "JAMA" study
linked higher step counts to reduced mortality risk from all causes.

### Weight Management

As a natural weight control method, walking 10,000 steps can burn an estimated 400 to 500 calories, influenced by
individual factors such as pace and body mass.

### Mental Clarity

Physical activity, including walking, serves as a potent antidote to depression and anxiety, providing a necessary
mental break for software engineers amidst debugging and deadlines.

### Creative Sparks

Stanford University's research underscores walking's role in enhancing creative thought—crucial for engineers crafting
innovative solutions.

Personal experiences affirm that simple adjustments, like switching work positions, can rejuvenate focus and creativity.

## Striding Without Straying from Your Screen

Incorporating more steps into a developer's day requires creativity and a bit of strategy:

- **Scheduled Strolls**: Taking short walks during breaks, whether inside or outdoors, significantly contributes to your
  step tally. I find it really helpful to take these at a time of frustration or when you need to think through a
  problem.
- **Meetings in Motion**: Opt for walking meetings to boost steps and inspire creativity. This works well for meetings
  that won't involve screen sharing. However, this isn't always going to work.
- **Commute Creatively**: Whether it's part of your commute or choosing a farther parking spot, every step counts
  towards your daily goal.
- **Movement Reminders**: Use technology to your advantage with apps or smartwatches that remind you to move if you've
  been inactive.
- **Dynamic Desks**: Lastly and my personal favorite, a standing desk with a mini treadmill underneath. This setup makes
  achieving 10k steps in a day much easier. It's a bit of an investment and it takes some time to get used to typing while
  walking but in my opinion it's worth it.

## Navigating the Path to 10,000 Steps

Reaching a 10,000-step daily goal might seem formidable, especially for those juggling tight schedules or remote work.
However, setting realistic milestones and gradually increasing your step count can make this goal attainable.

Another thing I personally have found super helpful is using the Apple Health app to track steps. I put their widget on
the first page of my Iphone so that I am always thinking of it. 

<img src="/assets/blog/10k-steps/apple_health_widget.jpg" class="inline-image" style="border: 0;">

## The Step-Forward Mindset for Software Engineers

For software engineers, embarking on the 10,000-steps-a-day challenge is more than a health goal—it's a step towards
enhanced mental acuity, creativity, and overall job satisfaction. While the target might seem ambitious, starting with
smaller, achievable goals can lead to significant health and wellness benefits. The journey towards integrating movement
into a coding lifestyle is not just about the steps taken but the positive shifts in health, productivity, and
well-being that come with it.

Now get walkin!



The Active Developer: How to Walk 10,000 Steps a Day Without Leaving Your Code Behind


# Technical Dive into Procedural Room Generation and Connection in Maps

In this post, we explore the technical aspects of generating and connecting rooms procedurally within a map, a key
technique in game development and simulations to create dynamic and varied environments.

# Procedural Generation: An Overview

Procedural generation refers to the algorithmic creation of data with randomness, widely used for generating maps in
games. This method allows for a high degree of variability, ensuring that each map is unique. The core principle
involves using algorithms and randomness to layout elements like rooms, corridors, and obstacles.

Note: The matrix has three dimensions to it so we can denote depth in the map. Full definitions of helper functions can be found at the end of the page.

# Initializing the Map

The first step in our procedural generation process is initializing the map with a base tile, typically representing the
ground:

```python
def init_map(initial_tile=TILE_TYPES['Ground']):
  # initialize the map with 0 values
  matrix = np.full((MAP_SIZE, MAP_SIZE, MAP_DEPTH), 0)
  for x in range(MAP_SIZE):
    for y in range(MAP_SIZE):
      # place ground tile type on the entirety of the lowest "depth"
      place_tile(matrix, initial_tile, [y, x])
  return matrix
```

This function creates a 3D NumPy array representing our map, filling it with an initial tile type, ensuring we have a
starting point for adding more complex structures.

# Room Generation

Rooms are generated using the `create_rooms` function, which randomly determines their number, size, and position:

```python
def create_rooms(game_map, num_rooms, obstruction_tile, ground_tile, local_rand):
  # keep track of created rooms
  rooms = []
  for _ in range(num_rooms):
    rooms.append(create_room(game_map, local_rand, obstruction_tile))
  # remove walls that overlap w/ each other
  solve_room_overlap(game_map, rooms, ground_tile)

  # connect the rooms
  rooms = connect_rooms(game_map, rooms, obstruction_tile, ground_tile)
  return rooms
```

Each room is created and placed on the map ensuring it fits within the map boundaries. The `create_room` function is
responsible for the specifics of each room's dimensions and location.

# Handling Room Overlaps

<div>
The `solve_room_overlap` function addresses any overlaps between rooms, adjusting their positions or modifying walls to ensure each room is distinct. without these overlaps we would end up with many occurrences of rooms that look like so:
</div>
<div style="margin-bottom: 20px; text-align: center" class="img-bordered">
  <img style="width: 250px; height: 250px; margin: auto;" src="/assets/blog/procedural_maps/overlaps.png" class="img-bordered" alt="overlaps"/>
</div>

```python
def solve_room_overlap(game_map, rooms, tile_type):
  """for each room in rooms, check if overlap is present. if so, remove the overlapping sections of walls"""
  for i, room1 in enumerate(rooms):
    for room2 in rooms[i + 1:]:
      if rooms_overlap(room1, room2):
        remove_internal_walls(game_map, room1, room2, tile_type)

```

by removing the overlapping internal walls, we end up with something that makes sense

<div style="margin-bottom: 20px; text-align: center;">
<img style="width: 250px; height: 250px; margin: auto;" src="/assets/blog/procedural_maps/overlap_solved.png" class="img-bordered" alt="overlaps_solved"/>
</div>

# Connecting Rooms

The connect_rooms function weaves the rooms together by creating corridors or paths, making the map navigable:

```python
def connect_rooms(game_map, rooms, wall_tile, ground_tile):
  """for each room, find the closest room in rooms, then draw a line connecting each room's midpoint"""
  while len(rooms) > 1:
    room = rooms.pop(0)
    closest_room = find_closest_room(room, rooms)
    if closest_room:
      create_hallway(game_map, room, closest_room, wall_tile, ground_tile)
  return rooms
```

<div style="margin-top: 20px; text-align: center; display: flex; justify-content: center;">
    <img style="width: 250px; height: 250px; margin: auto;" src="/assets/blog/procedural_maps/connected_overlap_solved.png" class="img-bordered" alt="overlaps"/>
    <img style="width: 250px; height: 250px; margin: auto;" src="/assets/blog/procedural_maps/connected.png" class="img-bordered" alt="overlaps"/>
</div>

This function ensures each room is connected to at least one other room, using the create_hallway function to lay down
the paths.

# Conclusion

Through this technical exploration, we've seen how procedural generation can be harnessed to create complex and varied
map layouts with interconnected rooms. This process, from initialization to visualization, showcases the power of
algorithmic content creation in crafting immersive game environments.

This example barely scratches the surface of what we can do with simple techniques.

<blockquote style="margin-left: 15px; margin-right: 15px;">
  <i>Give me a lever long enough and a fulcrum on which to place it, and I shall move the world.</i>

&mdash; <i>Archimedes</i>

</blockquote>

# Helper Functions

```python
def place_tile(game_map, tile, p, lvl=0):
  """
  place the given tile at the given location
  """
  if p[0] < 0 or p[1] < 0:
    # return if out of bounds of map
    return
  try:
    game_map[*p, lvl] = tile
  except IndexError:
    pass


def create_room(game_map, local_rand, tile_type):
  # randomly place a room outlined by the provided tiletype
  width = local_rand.randint(4, 10)
  height = local_rand.randint(4, 10)

  start_x = local_rand.randint(0, MAP_SIZE - width)
  start_y = local_rand.randint(0, MAP_SIZE - height)

  for i in range(width):
    for j in range(height):
      x = start_x + i
      y = start_y + j
      if i == 0 or j == 0 or i == width - 1 or j == height - 1:
        place_tile(game_map, tile_type, [y, x])
  return start_x, start_y, width, height


def rooms_overlap(room1, room2):
  if isinstance(room1, list) and isinstance(room2, list) and isinstance(room1[0], list):
    # Both rooms are defined as lists of 4 points where each point is [y, x]
    # Extract the points
    tl1, tr1, br1, bl1 = room1
    tl2, tr2, br2, bl2 = room2

    # Check for overlap
    return (
      tl1[0] <= br2[0] and br1[0] >= tl2[0] and  # Check vertical overlap
      tl1[1] <= br2[1] and br1[1] >= tl2[1]  # Check horizontal overlap
    )
  else:
    # Unpack room parameters
    x1, y1, w1, h1 = room1
    x2, y2, w2, h2 = room2

    # Check for overlap
    return (x1 < x2 + w2 and x1 + w1 > x2 and
            y1 < y2 + h2 and y1 + h1 > y2)


def remove_internal_walls(game_map, room1, room2, tile_type):
  # Modify the walls of room1 and room2 that are internal after the overlap
  def modify_walls(start_x, start_y, width, height):
    for i in range(width):
      for j in range(height):
        if 0 < i < width - 1 and 0 < j < height - 1:
          x = start_x + i
          y = start_y + j
          place_tile(game_map, tile_type, [y, x])

  # Unpack room parameters
  modify_walls(*room1)
  modify_walls(*room2)


def find_closest_room(room, rooms):
  # Find the closest room to the given room
  closest_room = None
  room_vertices = get_room_vertices(room)
  for other_room in rooms:
    if rooms_overlap(room, other_room):
      continue
    other_room_vertices = get_room_vertices(other_room)

    # find min distance between vertices
    distances = []
    for point_1 in room_vertices:
      for point_2 in other_room_vertices:
        distances.append(abs(math.dist(point_1, point_2)))
    min_distance = min(*distances)

    # closer room has been found
    if not closest_room or min_distance < closest_room[0]:
      closest_room = [min_distance, other_room]
  if closest_room:
    return closest_room[1]
  return None


def create_hallway(room1, room2, wall_tile, ground_tile, game_map):
  # Assuming room format is (start_x, start_y, width, height)
  x1, y1, w1, h1 = room1
  x2, y2, w2, h2 = room2

  # Midpoints of the rooms
  mid_x1, mid_y1 = x1 + w1 // 2, y1 + h1 // 2
  mid_x2, mid_y2 = x2 + w2 // 2, y2 + h2 // 2

  # Decide the direction of the hallway (horizontal or vertical first)
  horizontal_first = abs(mid_x1 - mid_x2) > abs(mid_y1 - mid_y2)

  # Create the hallway
  if horizontal_first:
    # Create horizontal part
    for x in range(min(mid_x1, mid_x2), max(mid_x1, mid_x2) + 1):
      place_tile(game_map, ground_tile, [mid_y1, x])

    # Create vertical part
    for y in range(min(mid_y1, mid_y2), max(mid_y1, mid_y2) + 1):
      place_tile(game_map, ground_tile, [y, mid_x2])
  else:
    # Create vertical part
    for y in range(min(mid_y1, mid_y2), max(mid_y1, mid_y2) + 1):
      place_tile(game_map, ground_tile, [y, mid_x1])

    # Create horizontal part
    for x in range(min(mid_x1, mid_x2), max(mid_x1, mid_x2) + 1):
      place_tile(game_map, ground_tile, [mid_y2, x])

def get_room_vertices(room):
    # Unpack room parameters
    x1, y1, w1, h1 = room
    return [
        (x1, y1),            # top left
        (x1 + w1, y1),       # top right
        (x1 + w1, y1 + h1),  # bot right
        (x1, y1 + h1),       # bot left
    ]
```


Procedural Maps

### _"The intersection of technology and humanity is where magic happens. It’s not just about the code; it’s about how it touches lives."_ - Steve Jobs

If Steve Jobs believed in the harmonious blend of technology and humanity, 
then our story is no different. Our journey began with a simple idea: if we 
can make it, why not? Today, I want to share the story of four internal 
projects that began as ideas and transformed into tools that are not just 
efficient, but genuinely fun.



## MGMT2: Tracking, Efficiency, and a Bit of Bitcoin Magic
<div style="max-width: 450px;" class="img-bordered">
    <img src="/assets/images/articles/mgmt2.jpg">
</div>

Our passion lies in collecting achievements and milestones. MGMT2 is our 
tool designed to help our teammates track their achievements and, here's 
the cool part, their share of our Bitcoin treasure. Remember when we 
snagged some Bitcoin for our balance sheet? In about two years, that's 
going to be a delightful bonus for our team. Imagine making something as 
intangible as Bitcoin tangible for our employees. That's MGMT2 for you.

## GitHub Streak Tracker: Code, Commit, Repeat

<div class="img-bordered">
    <img src="/assets/images/articles/git-streak-tracker.jpg">
</div>

Seeing a growing GitHub streak is satisfying. With our 
[GitHub Streak Tracker](https://git-streak-tracker.herokuapp.com/), designed 
exclusively for iOS, you're not just encouraged to commit daily, but it 
becomes a part of your daily ritual. It's like having a personal 
cheerleader, reminding you of your coding journey and pushing you to 
achieve more.

## PropConnect.io: Simplifying Property Management

<div class="img-bordered">
    <img src="/assets/images/articles/propconnect.jpg">
</div>


Managing properties can be challenging. We created 
[PropConnect.io](https://propconnect.io/) to make property management 
a breeze. With direct text-based communication between tenants and vendors 
and comprehensive oversight, property managers can step back from the 
tedious tasks and focus on what truly matters: growing their portfolio 
or even just taking a well-deserved break.



## Brexyl: Monster Mayhem and Mischief in the Arena

<iframe 
  width="560" 
  height="315" 
  src="https://streamable.com/e/pp7rnm"
  frameborder="0"
  allowfullscreen></iframe>

Dive into an adrenaline-pumping arena where strategy meets action. Brexyl 
is our take on the game dynamics similar to Minion Masters. Spawn monsters 
from the cards you draw and watch them battle in an arena. Protect your main 
building, or it's game over. And if you're in the mood for some playful 
teasing, drop a giant "7" on your opponent. It might do nothing, but the 
laughs you get are priceless!

For this project we're using [Godot 4.1](https://godotengine.org/), a free and
open source game engine. It's a great tool for creating 2D and 3D games
and has a very active community. We've also chosen to leverage .NET
with Godot's C# support.

### Wrapping Up

Innovation doesn't always begin in a boardroom. Sometimes, it starts with a 
simple idea or a desire to make things better. If you're looking to create 
something groundbreaking or something that resonates with people - reach 
out to us. We're always ready for the next big challenge.

Having fun: Our internal projects

<br></br>
<div style="width: 100%; text-align: center;">
  <a href="https://reactnative.dev/">
      <img 
        src="/assets/blog/futuristic_ckc_building.png" 
        alt="CKC Building" 
        style="border: 0; border-radius: 0; margin: 0 auto;"
      >
  </a>
</div>

Nestled in the scenic beauty of Coeur d'Alene, Idaho, our app development company 
has been thriving since 2012. We are a team of passionate developers, designers, 
and innovators who love what we do and where we do it from.




<div style="width: 100%; text-align: center;">
  <a href="https://reactnative.dev/">
      <img src="/assets/blog/react_native_header_logo.svg" alt="React Native" style="max-width: 320px; border: 0; margin: 0 auto;">
  </a>
</div>


## Our Love for React Native

Our love for [React Native](https://reactnative.dev/) is no secret. This open-source 
mobile application framework has been our go-to tool for creating most of our 
applications. We've even developed our own base project, lovingly named 
[Skeletor](https://github.com/ckc-org/skeletor), which serves as the backbone for 
many of our projects. Skeletor allows us to streamline our process and deliver 
high-quality applications to our clients.

## Evolution into Game Development

While we started as an app development company, our passion for creating engaging 
experiences has led us to venture into the realm of game development. We've had 
the opportunity to work on a variety of exciting projects, each one pushing our 
creative and technical boundaries.

## VR Skydiving Simulator

One of our notable projects is a VR Skydiving simulator, available on 
[Oculus](https://www.oculus.com/experiences/rift/2552134034912884/). This game 
was developed by one of our engineers, an ex-NASA intern, who built a whole 
physics engine for the simulator. The result is an incredibly immersive experience 
that gives users the adrenaline rush of skydiving without leaving the ground. 
This project showcases our commitment to creating user-centric experiences that 
push the boundaries of technology.

## MacroAir Project

<div style="width: 100%; text-align: center;">
  <a href="https://reactnative.dev/">
      <img 
        src="/assets/blog/macroair_airviz_modeler.png" 
        alt="MacroAir Airviz Modeler" 
        style="border: 0; border-radius: 0; margin: 0 auto;"
      >
  </a>
</div>

Another project we're proud of is MacroAir, a tool for visualizing fan air movement. 
We're using [Babylon.JS](https://www.babylonjs.com/), a powerful, beautiful, 
simple, and open 3D engine, to create an awesome 3D modeler in JavaScript. 
This project is a testament to our ability to leverage cutting-edge technology 
to solve real-world problems and deliver value to our clients.

## Twitch-Integrated Godot Game

One of our ongoing projects is a Twitch-integrated game developed in 
[Godot](https://godotengine.org/). This project is a testament to our commitment 
to innovation and our desire to create games that not only entertain but also 
engage the community in new and exciting ways.

## Our Latest Project: A Cat Roleplaying Game

Our latest venture is a cat roleplaying game that we're incredibly excited about. 
This project, [Paw Borough](https://www.pawborough.net/), allows us to combine 
our love for gaming with our love for our feline friends. 

We've made significant optimizations in our cat generation process, improving from 
generating one cat per second to a hundred cats per second. This means we're able 
to generate around 10 million cats per day on a single processor! 

This wasn't an easy task, but we believe in doing things that are important, 
even if the odds are not in our favor. We're working hard to create a game 
that is not only fun to play but also captures the quirky and lovable nature of cats. 

We're proud to share that Paw Borough was funded for approximately $90k on 
[Kickstarter](https://www.kickstarter.com/projects/tbpt/paw-borough-the-feline-virtual-browser-rpg)! 
This is a testament to the support and love we've received from our community.

## Conclusion

From our humble beginnings in Coeur d'Alene to our expansion into San Diego and 
Spokane, our journey has been nothing short of exciting. We've evolved from an 
app development company into a game development company, and we can't wait to 
see what the future holds. 

We're grateful for the opportunities we've had to work on such diverse projects 
and are excited to continue creating unique and engaging experiences for our users. 
Our approach has always been to deliver first and then iterate, because we believe 
that done is better than perfect. 

We're a team of badass developers growing year-over-year, and we're just getting started.