I Re-Created MKBHD’s Panels App with AI For FREE (ClaudeDev + Expo)
AI Summary
Summary of Video Transcript
- The video starts with the creator discovering an app called Panels, a wallpaper app launched by MKBHD, which received criticism on Twitter for its poor quality, excessive ads, and expensive premium membership.
- The creator decides to investigate the app themselves, noting the website’s basic design with some flaws, such as non-functional social media links.
- Upon examining the app, the creator finds it unpolished, with issues like oversized fonts, a confusing user interface, and a requirement to watch ads or pay for a premium membership to download HD wallpapers.
- The creator then sets out to build a similar app using AI, specifically using React Native and Expo for development, and CLA 3.5 Sonet via Google Vertex AI for coding assistance.
- The AI model is used to generate code for the app, which is then run and tested by the creator.
- The creator uses Unsplash’s API to source wallpapers for the app, avoiding the need for backend features like user login.
- Throughout the video, the creator iterates on the app’s design and functionality, using prompts to improve the UI and fix issues.
- The final app includes features like trending images, category browsing, dark/light theme toggling, and the ability to set wallpapers for different screen types.
- The creator emphasizes the cost-effectiveness of using AI for development, with the entire session costing $50 but effectively free due to Google Vertex AI credits.
- The video concludes with the creator expressing excitement about the potential of AI in app development and inviting viewers to join their membership for additional content.
Detailed Instructions and URLs
- Create an Expo app:
npx create-expo-app- Open the project in VS Code and install the Claud Dev extension.
- Set up API keys for Claud Dev in the settings.
- Use Google Vertex AI to access CLA 3.5 Sonet.
- Run the Expo app:
npm run web- Implement Unsplash API key by creating an
.envfile and entering the access key.- Install necessary packages as prompted by the AI-generated instructions.
Tips
- React Native and Expo simplify cross-platform app development.
- CLA 3.5 Sonet can generate code effectively when provided with clear prompts.
- Google Vertex AI offers $300 worth of free credits for new users.
- Prompt caching can significantly reduce costs when using AI services.
URLs
No complete exact URLs were provided in the transcript.