https://github.com/aar0gya/react-native-wallet-app
A modern, full-stack React Native Wallet Application that allows users to track income and expenses in real time. The app includes backend API integration, secure authentication, cloud-hosted data storage, and attractive mobile UI screens that run seamlessly on both iOS and Android
https://github.com/aar0gya/react-native-wallet-app
authentication clerk cloud-database expo express finance-app fullstack mobile-development neon nodejs postgres react-native react-navigation redis rest-api wallet-application
Last synced: about 2 months ago
JSON representation
A modern, full-stack React Native Wallet Application that allows users to track income and expenses in real time. The app includes backend API integration, secure authentication, cloud-hosted data storage, and attractive mobile UI screens that run seamlessly on both iOS and Android
- Host: GitHub
- URL: https://github.com/aar0gya/react-native-wallet-app
- Owner: aar0gya
- License: mit
- Created: 2025-11-24T06:43:11.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-11-24T15:07:40.000Z (6 months ago)
- Last Synced: 2025-11-28T03:52:55.124Z (6 months ago)
- Topics: authentication, clerk, cloud-database, expo, express, finance-app, fullstack, mobile-development, neon, nodejs, postgres, react-native, react-navigation, redis, rest-api, wallet-application
- Language: JavaScript
- Homepage: https://wallet-wjiu.onrender.com
- Size: 4.39 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💰 React Native Wallet App
A full-stack personal finance wallet application built using **React Native, Expo, Express, Clerk, Neon PostgreSQL, and Redis**.
This project demonstrates how to build a complete production-ready mobile application with **authentication, database integration, cloud deployment, and real-time updates** — all without needing Swift, Kotlin, or native modules.
This project demonstrates how to build a fully functional, production-ready mobile finance tracker using React Native + Expo alongside a Node.js/Express backend with:
⦁ Clerk authentication (with email code verification)
⦁ Neon PostgreSQL for database storage
⦁ Redis rate limiting
⦁ Deployed backend and real device mobile support
Users can:
⦁ Sign up & log in using a 6-digit email code
⦁ View their current wallet balance
⦁ Create income or expense transactions
⦁ Delete transactions, with recalculations
⦁ Pull-to-refresh to sync with backend
⦁ Log out securely
Perfect for developers looking to learn how to connect a mobile frontend to a real backend with secure user accounts and persistent cloud data storage.
---
## 🚀 Features
### ✨ Mobile App (Expo & React Native)
* 📱 Runs on **iOS & Android**
* 🔐 Email-based login & signup (6-digit verification code) using Clerk
* 💼 Home screen showing:
* Current balance
* List of transactions
* ➕ Add income and expense transactions
* 🔄 Pull-to-refresh functionality
* ❌ Delete transactions to update balance instantly
* 🚪 Logout routing that safely returns users to auth pages
### 🖥 Backend (Express API)
* 🌐 Fully REST-based Node.js server
* 🗄 PostgreSQL database hosted on Neon
* ⚙ Auth middleware using Clerk
* 📦 Redis-based rate limiting for protection
* ☁ Easily deployable on cloud services
---
## 🧠 What You'll Learn
By building this project, you’ll master:
* Building a **mobile app with React Native & Expo**
* Creating a **backend with Express & PostgreSQL**
* Real-world user authentication with **Clerk**
* Structured full-stack communication between mobile → backend → database
* Implementing rate limiting using **Redis**
* Deployment of both backend & mobile applications
* Managing navigation & global app state cleanly
Perfect for:
* Beginners building their *first full-stack mobile app*
* React developers expanding into React Native
* Anyone needing a realistic production-ready example
---
## 📸 App Screenshots
---
## 🛠 Tech Stack
### Frontend
* React Native (Expo)
* React Navigation
* Async Storage
* Clerk Auth SDK
### Backend
* Node.js + Express
* PostgreSQL (Neon)
* Redis (Rate Limiting)
* Clerk Server SDK
---
## 📁 Project Structure
```
.
├── backend
│ ├── src
│ ├── package.json
│ └── .env
└── mobile
├── screens
├── components
├── package.json
└── app.config.js
```
---
## ⚙ Environment Variables
### Backend (`/backend/.env`)
```
PORT=5001
NODE_ENV=development
CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
DATABASE_URL=
REDIS_URL=
```
### Mobile (`/mobile/.env`)
```
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=
```
---
## ▶ Running The Project
### 1️⃣ Start Backend
```bash
cd backend
npm install
npm run dev
```
### 2️⃣ Start Mobile App
```bash
cd mobile
npm install
npx expo start
```
Scan the QR code or run the Android/iOS simulator.
---
## 📡 Deployment
You can deploy using:
### Backend:
* Vercel
* Render
* Fly.io
* Railway
### Database:
* Neon PostgreSQL (recommended)
### Redis:
* Upstash (free tiers available)
### Mobile:
* Expo EAS (supports OTA & store publishing)
---
## 📌 Roadmap
* [ ] Dark mode UI
* [ ] Filtering & sorting transactions
* [ ] Budget goals overview
* [ ] Push notifications for expenses
---
## 🧾 License
This project is open-source — see `LICENSE` for details.
---
## ⭐ Support
If this project helps you:
* Star ⭐ the repository
* Share with developers getting into React Native
## 🧾 Note
This backend is an API server. Opening the Render URL in a browser will not show a webpage — it is meant to serve the mobile app. If you open it directly, you may see “Cannot GET /”.
Thanks,
Happy coding!
aar0gya