HOW I BUILT MY FIRST MOBILE APP WITH REACT NATIVE AND EXPO

Building my first mobile application was both challenging and rewarding. As a tech intern learning mobile application development, I wanted to move beyond tutorials and create a project that could solve a real problem. That motivation led me to build DahveedCalc, a mobile application designed to help students calculate, track, and predict their academic performance.

The app allows students to calculate their GPA, monitor their CGPA, save academic records, and predict future academic outcomes based on expected grades. In this article, I will share how I built my first mobile application using React Native and Expo, the technologies I used, the challenges I encountered, and the lessons I learned along the way.

CHOOSING THE RIGHT TOOLS

Before writing any code, I needed to decide which technologies to use for the project. I chose React Native because it allows developers to build mobile applications using JavaScript and React concepts while targeting both Android and iOS from a single codebase.

To simplify the development process, I used Expo, a framework built around React Native. Expo made it easier to set up the project, run the application, manage development tools, and test the app on an Android emulator.

For navigation, I used Expo Router, which helped me organise the different screens in the application. I also used Firebase for user authentication and Firestore for cloud data management. For locally storing academic records, I used AsyncStorage.

THE MAIN TECHNOLOGIES BEHIND THE APPLICATION WERE:

• React Native
• Expo
• Expo Router
• JavaScript and TypeScript concepts
• Firebase Authentication
• Cloud Firestore
• AsyncStorage
• Android Studio and LDPlayer for testing

THE IDEA BEHIND DahveedCalc

The idea for the application came from a simple problem: many students calculate their GPA manually or use different tools for calculating and tracking their academic performance.

I wanted to create an application that could bring these functions together in one place.

THE APPLICATION INCLUDES THE FOLLOWING MAJOR FEATURES:

• GPA calculation
• CGPA calculation
• GPA history
• CGPA prediction
• Target CGPA calculation
• User authentication
• Cloud-based user data management

My goal was to create an application with a simple and student-friendly interface that could make academic calculations easier.

SETTING UP THE PROJECT

The first step was creating the React Native project with Expo.

Expo provided a straightforward development environment and allowed me to start building quickly without having to manually configure the entire Android or iOS development environment.

After creating the project, I organised the application into multiple screens and routes. The main sections of the application included:

• Home
• GPA Calculator
• CGPA Calculator
• History
• CGPA Predictor
• Authentication screens

I used Expo Router to structure the navigation between these different sections.

BUILDING THE GPA CALCULATOR

The GPA Calculator was one of the first major features I developed.

The user can add multiple courses and provide information such as:

• Course code or title
• Credit unit
• Grade

Each grade is converted into a grade point. The application then calculates the total quality points and divides them by the total credit units.

The basic GPA formula is:

GPA = Total Quality Points ÷ Total Credit Units

This was an important part of the application because I had to ensure that the calculations were accurate and that users could add or remove courses easily.

I also added input validation to prevent errors such as calculating a GPA without adding courses or entering invalid credit units.

ADDING GPA HISTORY

After the GPA calculation was working, I wanted users to be able to save their academic results.

I used AsyncStorage to store GPA records locally on the device.

Each saved record contained information such as the GPA, courses, total credit units, and calculation details. The History screen then loads the saved records and displays them to the user.

This feature helped transform the application from a simple calculator into a tool that could track academic performance over time.

One important lesson I learned was that saving data is only useful if the application can also retrieve and use that data effectively. This led to the next major feature.

CONNECTING GPA HISTORY TO THE CGPA CALCULATOR

Initially, my CGPA screen used hard-coded academic results for testing. While this was useful during development, I eventually replaced those values with actual saved GPA records.

The application now retrieves GPA history and uses the saved data to calculate the user's CGPA.

The general CGPA calculation is based on the student's accumulated quality points and total credit units:

CGPA = Total Quality Points Across Semesters ÷ Total Credit Units Across Semesters

Connecting the GPA history to the CGPA calculator made the application more functional because the different features could now work together.

Instead of manually entering old results, the application could use the student's previously saved academic records.

BUILDING THE CGPA PREDICTOR

One of the most interesting features I worked on was the CGPA Predictor.

The predictor provides two main functions.

PREDICTING A FUTURE CGPA

The user can enter the expected number of credit units and their expected GPA for the next semester.

The application combines this information with the user's current academic records to estimate the future CGPA.

Calculating the GPA Required to Reach a Target CGPA

The user can also enter a target CGPA.

The application then calculates the approximate GPA the student needs in the next semester to achieve that target.

This feature required careful mathematical calculations and input validation. For example, the application checks whether the user has entered valid credit units and whether GPA values are within the expected range.

Building this feature helped me understand how software development often involves more than designing a user interface. Behind a simple result on the screen, there can be significant logic and calculations.

ADDING USER AUTHENTICATION WITH FIREBASE

To support user accounts, I integrated Firebase Authentication into the application.

Users can create accounts and sign in to the application. I also used Cloud Firestore to manage user-related data.

During this stage, I encountered one of the challenges that helped me better understand the difference between local storage and cloud-based data.

At one point, I created a new user account but still saw results that had been saved while using another account. The reason was that the GPA history was stored locally using AsyncStorage and was not initially separated by user account.

This helped me understand an important concept:

Local storage belongs to the device, while user data in a cloud application should usually be associated with a specific authenticated user.

Solving and understanding issues like this was one of the most valuable parts of the development process.

CHALLENGES I FACED

Building my first mobile application was not without challenges.

One of the first problems I encountered was configuring the project correctly. Small errors in configuration files caused Expo to fail when starting the application.

I ALSO ENCOUNTERED PROBLEMS WITH:

• JSON syntax errors
• Incorrect image and asset paths
• Navigation and route configuration
• Emulator connections
• Firebase authentication
• Firestore security rules
• Local data storage
• Device testing

For example, I spent time troubleshooting why my application could not locate certain image files. The problem was caused by incorrect file paths between the application screens and the assets folder.

I also experienced difficulties connecting the LDPlayer Android emulator to my development environment. This required checking Android Debug Bridge connections and network ports.

Although these problems were frustrating, they taught me an important lesson about software development: debugging is a major part of the development process.

Writing code is only one part of building an application. Developers must also learn how to read error messages, identify problems, test possible solutions, and understand why an error occurred.

WHAT I LEARNED

Building DahveedCalc taught me several important lessons.

1. Start With a Clear Project Structure

Organising files and screens early makes a project easier to maintain as it grows.

1. Build Features Step by Step

Instead of trying to build the entire application at once, I worked on individual features.

For example:

GPA Calculation → GPA History → CGPA Calculation → CGPA Prediction

This made the project easier to manage and test.

1. Test Every Feature

Testing helped me discover problems that were not immediately visible while writing the code.

1. Read Error Messages Carefully

Error messages can look intimidating, especially as a beginner, but they often provide useful information about the source of the problem.

1. User Experience Matters

An application should not only work correctly. It should also be easy to understand and use.

This influenced how I designed the screens, navigation, buttons, forms, and calculation results.

1. Real Projects Teach More Than Tutorials

Tutorials are useful for learning concepts, but building a complete project forces you to make decisions, solve problems, and connect different technologies.

That was one of the biggest differences I noticed while building my first application.

WHAT I WOULD IMPROVE NEXT

DahveedCalc is an important milestone for me, but there are still improvements I would like to make.

Some of the next features I would consider include:

• User-specific cloud storage for academic records
• Improved data synchronisation
• Semester and course management
• Data visualisation and academic progress charts
• Exporting academic results
• Improved notifications and reminders
• More advanced performance predictions
• Enhanced user interface and accessibility features
• Full testing on both Android and iOS devices

FINAL THOUGHTS

Building my first mobile application with React Native and Expo was one of the most valuable experiences of my internship and mobile development journey.

The project started with a simple idea: build an application that could help students calculate their GPA and CGPA.

As development continued, the project grew into a more complete application with GPA history, CGPA calculations, predictions, authentication, and data storage.

More importantly, the process taught me that software development is not just about writing code that works the first time. It involves planning, designing, testing, debugging, learning from mistakes, and continuously improving.

DahveedCalc may be my first major mobile application, but it has given me the confidence and practical experience to continue building more complex projects.Learning Mobile App Development at Early Code Institute

This project was developed as part of my learning journey in the Android and iOS Development course at Early Code Institute.

The course gave me practical exposure to mobile application development and helped me understand important concepts such as React Native, cross-platform development, mobile application navigation, user interface development, Firebase integration, and building functional mobile applications.

As a tech intern, one of the most valuable aspects of the learning experience was the opportunity to move beyond theory and apply my knowledge by building a real project.

DahveedCalc, my Student GPA and CGPA Calculator and Predictor, became an important part of that journey. Building the application allowed me to combine the concepts I learned throughout the course and apply them to solve a real-world problem.

The course also reinforced an important lesson for me: learning a technology becomes much more meaningful when you apply it to a practical project. Each feature I built, each bug I encountered, and every problem I solved contributed to my growth as a mobile developer.

If you are interested in learning more about the course that contributed to this project, you can visit the Android and iOS Development course at Early Code Institute:

"Explore the Android and iOS Development Course at Early Code Institute" (www.earlycode.net)

The course focuses on cross-platform mobile application development using technologies such as React Native and covers practical skills including mobile UI development, navigation, backend integration, Firebase, and preparing applications for deployment.

You can also learn more about "[Early Code Institute"] and its available technology training programs.

My biggest lesson from this experience is simple:

The best way to learn how to build applications is to start building one.

Comments

[Kane Lim]

Hello Glad to see you, I am Kane Lim from Hong Kong. I have over 10 years of development experience. I am writing this because your post was interesting.

DahveedCalc is a great first project because you went beyond CRUD and connected domain logic, persistence, authentication, navigation, and prediction into one workflow. The AsyncStorage account isolation issue is particularly valuable because it demonstrates a real architectural boundary between device state and identity scoped data.

For the next iteration, I would introduce a repository layer so the calculation domain remains independent from Firebase and AsyncStorage. Store records using the authenticated UID as the ownership boundary, enforce that constraint with Firestore security rules, and add schema validation before persistence.

For the predictor, I would also move calculations into pure deterministic functions and cover them with property based tests. Then you can safely add charts, synchronization, offline first behavior, conflict resolution, and eventually analytics without coupling UI state to business logic.

Excellent progress for a first mobile application. Keep building real products because these architectural problems teach far more than tutorials.