A simple app built to stick React Native fundamentals through hands-on learning
- About
- Screenshots
- Learned Skills
- Development Process
- Technologies Used
- Prerequisites
- Installation
- License
ComprarApp is a "to buy" todo list app I built during Rocketseat's React Native 2025 course as part of the Fundamentals Module. It's basically a simple shopping list where you can add items you need to buy and check them off as you go - perfect for practicing React Native basics with something useful!
- 📐 Figma: Proposed design system
| Home | Pending Purchase Items | Done Purchase Items |
|---|---|---|
 |
 |
 |
- 🧩 Components: Built reusable components (buttons, inputs, list items) following React patterns, components lifecycle understanding, props & state for data flow and management, JSX(JavaScript XML syntax)
- 🔄 State Management: Used useState and useEffect hooks to manage todo list data and user interactions
- 📱 Mobile UI: Created touch-friendly interfaces with proper styling and layout using React Native components
- 🔧 CRUD Operations: Implemented basic add, remove, and update functionality for todo items
- 📊 Local State: Managed application data in memory with proper state updates
- 📋 List Management: Used FlatList for rendering todo items efficiently
- 🛠️ Environment Configuration: Set up React Native development environment with Android/iOS emulators
- 📁 Project Structure: Organized code with components, proper imports, and clean file structure
- 🔄 Mobile Development Workflow: Learned the basics of mobile app development and testing
- 🔀 Cross-Platform Development: Building apps that work seamlessly on iOS and Android
- 🏗️ Component Architecture: Building reusable and maintainable component structures
- 📁 Code Organization: Proper project structure and separation of concerns
- 💡 User Experience: Understanding mobile-first design principles
- 🔷 TypeScript Integration: Type-safe development for better code quality
This course is audio/video, and for this scenario I use a methodology that I saw while I watched my first videos about Software Development with Delphi -- on YouTube on Rodrigo Mourao's channel, the old "RM Factory" -- where we watch a video at least 3 times.
In the first time, we just watch without caring about anything: no drafts, no pencil/pen, paper or whatever, JUST WATCH.
In the second time we rewatch but now taking some notes about the words, terms or other things that stand out to us. At the end of the second time that we're watching, we stop and take time to scratch the surface of the words, terms and other things, but just a superficial search, nothing deep because if you're like me, this will bring you more than 20 tabs and only after hours you'll think "Oh good, I have a class to return to watching 😱" 🤣.
Finally, in the third time that you watch, you'll be watching with fresh eyes and a new perspective because now you have more information to connect the dots that you couldn't before. I don't know if this is the reason but it's close to when you read a book or watch a movie multiple times if you do it more than 3 times, you'll pick up on things you missed, and the same exact thing can have more meanings than you realize.
This is called EXPERIENCE.
After these steps, we're able to try to reproduce everything we watched in the course, using just our notes and what stuck with us, without going back and forth between the course screen and our IDE. I don't think that's a good learning process.
As for the implementation approach, here I did something new. Unlike the backend, the frontend API provides a clear visual progression of how we started and how we ended. I tried to commit frequently, step by step, so that each commit brings a significant improvement to the code or interface! This way, anyone who watches the demo below or looks at the code from the first commit can learn, understand, and evolve alongside me as I was building the project.
Demonstration
comprarapp-zevolution.mov
- ⚛️ React Native - Cross-platform mobile framework
- 📱 Expo - A full-stack React Native framework
- 🔷 TypeScript - Type-safe JavaScript development
- 🏗️ React Native Elements - Pre-built UI components
- 💅 Styled Components - CSS-in-JS styling
- Node.js (v22.20.0 or higher)
- npm - Package manager
- Expo CLI - For development and testing
- Android Studio (for Android development) - Setup Guide
- Xcode (for iOS development, macOS only) - Setup Guide
- VS Code or preferred IDE with React Native extensions
- Expo Go app on your mobile device, OR
- Android Emulator / iOS Simulator for testing
# Install Expo CLI globally
npm install -g @expo/cli
# Verify installation
expo --version
# Clone the repository
git clone https://github.com/zevolution/rn-learning-fundamentals-comprarapp.git
# Navigate to project directory
cd rn-learning-fundamentals-comprarapp
# Install dependencies
npm install# Download from GitHub
# Extract the ZIP file
# Navigate to extracted folder
cd rn-learning-fundamentals-comprarapp
# Install dependencies
npm install
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2025 zevolution
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
⭐ Star this repository if it helped you learn something !!!