Financial Literacy App Development
UI/UX Design, Prompt Engineering
Tools: ChatGPT, Claude, Trae, Node.js, React Native, MongoDB
Overview
This finance AI app is a gamified mobile experience designed to help young users improve their financial literacy. The app delivers lessons, quizzes, and rewards in a fun, engaging format to make learning about money accessible and motivating. It’s built using a modern tech stack — React Native for the mobile frontend, Node.js/Express for the backend, and MongoDB for the database.
This project combines my interests in UX/UI, AI-assisted design, and digital education. I’m using this as a learning experience to build a real-world app from scratch while applying skills in wireframing, product thinking, and prompt engineering.
Approach
Since I’m somewhat new to coding, I am using this project as an opportunity to see how AI tools can guide and accelerate the early stages of design and development.
​
I utilized ChatGPT, describing the app idea to generate the MVP and backend documentation, define key files, and outline API endpoints and database schemas. This helped me understand how the pieces of a full-stack app fit together.
​
I used Claude-3.7-Sonnet, a LLM available for free within the builder mode of an AI programming called Trae. Here, I used these tools to co-create high-fidelity wireframes for the app.
Next Steps
Now that the structure and documentation are in place, I’m transitioning into the development phase. Here’s what I’ll be focusing on next:
1. Set Up the Dev Environment
-
Finalize installation of Node.js, React Native CLI, and MongoDB to begin local development and testing.
​
2. Build Authentication
-
Implement basic user login, registration, and secure password handling — essential for saving progress and customizing the user experience.
3. Design the Content System
-
Translate the educational modules into database-friendly formats and begin building the lesson delivery system.
4. Add Gamification Logic
-
Design features like points, levels, and rewards to keep users engaged and motivated to complete lessons.
5. Connect Frontend to Backend
-
Use the defined API endpoints to start linking UI screens to real data — making the app interactive and dynamic.
stay tuned! :)