No code experience? No problem. Expo + Cursor is all you need

No code experience? No problem. Expo + Cursor is all you need

This is a guest post from Glodin Mulali who DM'd us about his experience building his first ever app with Expo and Cursor. It was such an inspiring story so we asked him to turn it into a blog post and here it is!

...

What happens when you have a big idea but no coding experience?

As someone who played sports in college, I wanted an app that could adjust workouts and meal plans based on real-time progress—something that felt personal, not just a one-size-fits-all solution. After searching for the perfect app, I realized it didn’t exist... yet. So, I decided to make it myself.

The problem? I had absolutely no idea how to code.

Today my app (TrainAi) is live on the App Store and Google Play Store, and people are using it!

How did I go from no-coding-experience to a cross-platform production application? Expo and Cursor.


TrainAI Screenshots

Discovering Expo and Cursor

Expo: With no app development experience, I had to learn and gather as much information as I could. I started googling, watching YouTube videos, and learning as much as I could about app development. Flutter and React Native kept coming up as options for cross-platform applications. The deciding factor for me was Expo Snack. The fact that I could build and test a prototype without having to struggle with setting up my development environment made it feel like I had stumbled upon the ultimate cheat code for mobile development. If you’re new to app development, Expo Snack is your best friend—it handles all the hard stuff so you can focus on bringing your ideas to life.


My First React Native Prototype

After weeks of playing around with Expo Snack, I started to see its limitations and the reality that I needed to set up a development environment if I wanted to deploy my app to the world.

Here’s why Expo was a game-changer for me:

  1. Expo CLI made setup super easy. I could start a project with just a few commands.
  2. Expo Go allowed me to see changes in real-time on my phone. This feedback loop helped me iterate quickly.
  3. Expo Router felt more intuitive, like using Next.js for web development.

Key Expo libraries I used:

  • expo-notifications: To send personalized push notifications to users.
  • expo-image-picker: Allows users to upload images from their device.
  • expo-font: Gave my app a custom, polished look with unique fonts.
  • expo-linear-gradient: Used to create sleek gradient effects in the UI.
  • expo-router: Expo's file-based routing solution for navigation.
  • expo-constants: Provides system information that remains constant throughout the lifetime of your app.
  • expo-device: Provides information about the device running the app.
  • expo-file-system: Provides access to the file system on the device.
  • expo-image: A high-performance image component for React Native.
  • expo-linking: Provides utilities for linking and URL handling.
  • expo-sensors: Allows access to device sensors like accelerometer, gyroscope, etc.
  • expo-sharing: Enables sharing content from your app.
  • expo-splash-screen: Manages the splash screen during app loading.
  • expo-status-bar: Manages the status bar appearance.
  • expo-updates: Allows you to push updates to your app over-the-air.

Cursor: I started looking into setting up my development environment and kept seeing Xcode, Android Studio, and Visual Studio Code. I already had Visual Studio Code on my computer, so I was able to start with that but had no luck setting up my environment and running my app—not because it wasn't working, but because I had no clue what I was doing. This is when I found out about Cursor, an AI-driven code editor that became my secret weapon. Cursor wasn’t just a coding tool; it was like having a senior developer by my side, guiding me through every challenge. Whenever I hit a roadblock, Cursor would offer up code snippets and explain the logic behind them. For someone who had never coded before, this was HUGE. Cursor even helped me troubleshoot bugs and clean up my code when things got messy.

Cursor offers several features that can be extremely helpful for any developer:

  • Chat Feature: This allows you to ask any question or fix bugs, with the AI having full context of your codebase. It's like having a knowledgeable teammate always ready to help.

  • AI Selection: You can choose the AI model you prefer to work with, tailoring the assistant to your needs.

  • Context Length: Select whether you want the AI to consider a long or short context, depending on the complexity of your project.

  • Edit Feature: Easily make changes or improvements to your code with AI suggestions.

  • Review Feature: Have the AI review your code, offering insights and identifying potential issues.

  • Composer Feature: Quickly generate code snippets or boilerplate code to speed up your development process.

Building TrainAi

With the help of Cursor, I created a flowchart to map out the application's architecture.


The development journey was full of small wins and (many) facepalm moments. Here's a breakdown of how it all came together:

1. Project Setup

Expo CLI made this easy. With just a single command, I had a working project up and running. I also used Expo Go to test the app on my device in real-time, which was incredibly helpful for immediate feedback.


2. UI/UX Design

I started with pen and paper, sketching out how I wanted the app to look. This initial step was crucial in organizing my thoughts and creating a clear vision. From there, I translated those sketches into digital wireframes using Figma. I spent time researching UI/UX best practices to ensure the app was user-friendly and intuitive. Expo’s pre-built components like React Native Paper and NativeBase saved me hours in design work, making my app look professional even with my lack of experience.


3. Backend Setup

For the backend, I chose Firebase for authentication and real-time database management. Setting this up was a massive learning curve, but Firebase’s integration with Expo made it manageable. I also integrated RapidAPI for accessing various APIs to enhance the app's functionality. RevenueCat was used to handle in-app subscriptions, simplifying the process of managing purchases across platforms. Additionally, I used Heroku for deploying some backend services.


Backend Architecture

4. Testing and Deployment

Testing was a critical part of the development process. I used Expo Go and the dev client for testing on physical devices. For iOS, I utilized TestFlight to distribute beta versions to testers. This allowed me to gather feedback and fix issues before the official launch. Managing dependencies and ensuring compatibility across platforms was challenging but essential for a smooth user experience.

5. Tackling Android Deployment

The most painful part? Deploying the Android version. I ran into so many build errors, it felt like I was stuck in a loop. Issues ranged from Gradle configurations to SDK mismatches. But after diving deep into Expo’s documentation, scouring community forums, and sometimes reaching out for help, I was able to fix the issues. Seeing the app finally launch on the Play Store was incredibly rewarding.

Overcoming Challenges

Building an app without coding experience is hard. Period. But the biggest lesson I learned? You don’t have to do it alone.

  • Expo’s Documentation and Community were lifesavers. When I couldn’t figure out how to handle notifications or implement real-time updates, the Expo forums had the answers.
  • Cursor saved me countless hours of Googling. Instead of struggling with the "how," Cursor would give me real-time suggestions, making complex problems manageable.

Launch and User Feedback

When TrainAi went live on the App Store and Google Play, it was a surreal moment. Seeing people download and use something I had built (without any prior coding experience) was beyond rewarding. Early feedback has been positive, with users enjoying the personalized workout plans and meal suggestions.


What’s Next?

I plan to keep improving TrainAi—adding new features, enhancing existing ones, and continuously refining the user experience based on feedback.

Advice for Aspiring Developers: You Can Do This!

If there’s one thing I’ve learned, it’s this: You don’t need to be a professional coder to build something amazing. Tools like Expo and Cursor make development accessible to everyone. So if you’ve got an idea, don’t let the fear of coding hold you back.

Here’s my advice:

  1. Start with What You Know: Focus on your app’s idea and let platforms like Expo handle the technical side.
  2. Use AI Tools: Cursor was invaluable in helping me learn faster, troubleshoot problems, and build smarter.
  3. Don’t Be Afraid to Fail: I hit walls, made mistakes, and had to start over multiple times. But that’s part of the process!


Conclusion: From Idea to Reality

The journey from zero coding knowledge to developing and launching TrainAi has been nothing short of transformative. With the help of Expo and Cursor, I was able to turn a simple idea into a functional app that’s live and being used by real people.

To the teams at Expo and Cursor, thank you for creating such powerful, accessible tools. And to anyone reading this—if I could do it, you absolutely can too.

要查看或添加评论,请登录

Expo的更多文章

社区洞察

其他会员也浏览了