I Created the MKBHD Panels App Without Cost Using ClaudeDev and Expo

I Re-Created the MKBHD Panels App for Free Using AI Tools

Recently, I stumbled upon a buzz on Twitter about the MKBHD panels app, an intriguing wallpaper application created by popular tech reviewer MKBHD. Initially, I glanced at it without much interest, as I tend to stick to the default wallpapers on my devices. Honestly, I can be a bit lazy when it comes to customizing my digital spaces. However, curiosity got the better of me when I noticed that the app had garnered a wave of criticism. Users were vocal about their disappointment regarding the app’s numerous ads, a costly premium membership, and various other issues.

I decided to dive deeper instead of taking Twitter users’ opinions at face value. So, I headed to the app’s website. Upon arrival, I found the site to be quite basic, a classic design but with an odd amount of empty space. The text seemed disproportionately large, almost as if it were a bit overzealous in its font choice. I also noticed some social media links that led nowhere—definitely a rookie mistake from the development team. However, the top links did lead to their actual social media handles, which was a minor redeeming quality.

Next, I downloaded the MKBHD panels app itself. Contrary to what others had reported, it didn’t prompt me for any tracking permissions, at least on my Android device. After skipping the login process, I was asked to select from various artists I didn’t recognize. I thought I would be taken to their profiles, but the app just selected the artist without showcasing their work. This meant I had to randomly choose one based on the banner images.

Once I made a selection, I arrived at a page featuring a carousel of wallpapers. At first glance, it was somewhat appealing, but I quickly encountered ads interrupting my experience. This was disappointing, as I had to watch an ad just to download a low-resolution wallpaper. To access high-definition wallpapers, I discovered that a premium membership was required—a bit pricey, if you ask me. Beyond that, the app seemed unpolished overall. For instance, the font sizes were comically large, and the interface looked like a prototype rather than a finished product.

I also noticed some puzzling features, such as the inability to change the five artists I selected at the beginning. To browse the artists’ pages directly, I had to find one of their wallpapers first, which was frustrating. Even after watching ads, not all wallpapers were accessible, which added to the disappointment. The app was undeniably rough around the edges and plagued with issues.

When I considered the app’s concept, it felt outdated. With the advancements in artificial intelligence, I thought, why not create something similar using AI? I figured we could build an entire app using AI tools. This idea was exciting, and I decided to embark on the journey of creating an app inspired by the MKBHD panels app.

We strongly recommend that you check out our guide on how to take advantage of AI in today’s passive income economy.

Getting Started with App Development

To kick off this project, I decided to use React Native along with Expo. If you’re unfamiliar with these terms, a quick Google search will illuminate their capabilities. Essentially, Expo simplifies the app development process, allowing developers to focus on writing React Native code without worrying about the underlying complexities of building for both iOS and Android platforms.

For the AI component of my project, I chose Claude 3.5 Sonet. This AI model has a reputation for being one of the best coding assistants, surpassing even my coding abilities. However, I couldn’t use the model directly; I needed a coding interface. That’s where ClaudeDev came in, as it integrates seamlessly with Visual Studio Code, allowing me to provide prompts and watch the magic unfold.

One thing I want to emphasize is that this app does not require a backend. A wallpaper app doesn’t need any login features or complicated databases. Instead, I decided to use Unsplash’s API, a platform where users can upload images for free use, which is perfect for sourcing wallpapers. With that plan in place, it was time to get started.

Creating the Expo App

The first step was creating an Expo app. I simply ran the command npx create-expo-app, which prompted me for a project name. After entering a name, the Expo project was generated, and I was ready to get started. I opened the project in Visual Studio Code and made sure to install ClaudeDev. This was a straightforward process; all I had to do was search for it in the extensions marketplace and hit install.

Once installed, I configured my API keys in the settings of ClaudeDev. I was excited to begin the coding process. As I mentioned earlier, I would be utilizing Claude 3.5 Sonet through Google Vertex AI. Google provides $300 worth of free credits, making it a cost-effective solution for my development needs. However, it’s worth noting that it doesn’t support prompt caching, which can lead to increased costs if you’re using real credits.

I started by giving Claude a basic prompt explaining what I wanted to achieve with the app. After a brief moment, the AI began generating code for the app. It was fascinating to watch the process unfold as I approved the code that was being created. Once I gave the green light, I ran the app to see how it looked.

Initial Impressions of the App

To run the Expo app, I simply executed the command npm run web. This launched the application in a web environment, as I had not yet installed Xcode for iOS development. Upon loading, I was impressed with the initial layout. While it was still a work in progress, it was a promising start. I decided to prompt Claude to refine the app further.

To take it to the next level, I provided a screenshot of the homepage from the MKBHD panels app and asked Claude to replicate that design. Within moments, the AI began working, and soon enough, it was finished. I reviewed the updated design and was pleased with the improvements. It was a significant upgrade, though there were still areas that needed refinement.

The carousel function wasn’t operating as intended, so I sent another prompt to Claude asking for a fix. After making adjustments, I ran the app again, and the carousel was finally working as it should. The next step involved creating a dedicated wallpaper page, where users could view and set wallpapers. I once again provided Claude with a screenshot as a reference, and it diligently worked to replicate that layout.

Refining the User Interface

After receiving the new design for the wallpaper page, I noticed that the text was printed over the image, making it hard to read. I promptly sent another request to Claude, asking for an overlay beneath the text to enhance readability. It was great to see how quickly the AI implemented this change.

Continuing my refinement process, I focused on improving the homepage layout further. I asked Claude to remove any unnecessary margins and polish the overall design. While I’m not sharing every detail here due to time constraints, I plan to release an extended version for members, showcasing all the prompts and modifications I made during the development process.

Once the homepage was looking sharp, I shifted my attention to the profile page. I took a screenshot of the original MKBHD panels app and requested Claude to recreate that design. Within moments, it was completed, and the resemblance was uncanny—maybe even better than the original. I was thrilled with the progress.

Exploring the Explore Page

Next, it was time to tackle the explore page. You might wonder where the images for the app were sourced. Fortunately, ClaudeDev automatically fetched static images from Unsplash. My plan was to integrate the Unsplash API later once the user interface was finalized.

The explore page displayed a variety of images, and I found the filtering functionality quite interesting. However, it occasionally produced overly large filters that cluttered the interface. I sent a prompt to Claude asking for a fix, and it promptly adjusted the filters. Unfortunately, during that process, the grid layout got thrown out of alignment, which required me to spend additional time wrestling with the layout until it finally looked right.

After some effort, the explore page was transformed into an attractive layout that fit seamlessly with the rest of the app. With the UI shaping up nicely, it was time to implement the Unsplash API key into the application. I sent a prompt to Claude to get that process started, and soon it created an .env file for me to enter my access key.

Integrating the Unsplash API

Once the API was set up, I had to install a few necessary packages. With everything configured, I was eager to see how the app looked now. Upon launching it, I was pleased to find that the API was functioning smoothly. However, some minor UI issues persisted, such as text overflowing the designated areas.

I captured a screenshot of the problem and sent it to Claude along with a prompt. The AI worked quickly to resolve the issue, and I was impressed with how effectively it handled visual references. After a few tweaks, the app’s appearance improved significantly.

Now, I was able to browse various categories of images within the explore page. Each category was easy to access, adding a valuable layer to the user experience. However, I noticed that clicking on an image didn’t display the author’s name or picture, which seemed like an essential feature to include.

Finalizing the App

I promptly sent another prompt to Claude, requesting the author’s name and image to be displayed alongside the wallpapers. After implementing this change, the app became even more informative and engaging.

At this stage, I worked on refining additional features like implementing dark and light themes. I also added a “Set as Wallpaper” button, as the app previously only included a download option. With these enhancements, the final app was shaping up beautifully.

Now, on the For You page, users could browse all the trending images sourced from Unsplash. If they selected an image, they had the option to download it or set it as wallpaper directly from the app. This added layer of functionality brought the app closer to completion.

Conclusion

Building this app from scratch was an exciting and rewarding process. With the help of Claude 3.5 Sonet, I was able to create a polished and functional wallpaper app without having to write every line of code myself. While there were certainly some bumps along the way, the result exceeded my expectations.

This experiment showcased the power of AI in app development, particularly for individuals like myself who don’t consider coding their primary strength. If you’re looking to build an app but feel intimidated by the technical aspects, I highly recommend exploring AI-assisted development tools.