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.
- Start With a Clear Project Structure
Organising files and screens early makes a project easier to maintain as it grows.
- 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.
- Test Every Feature
Testing helped me discover problems that were not immediately visible while writing the code.
- 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.
- 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.
- 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.
