React Native Wallet

A modern cross-platform mobile wallet application built with React Native & Expo. Track your income and expenses with a beautiful, user-friendly interface.

✨ Features

• 📱 Cross-Platform: Built with React Native & Expo
• 🔐 Authentication: Signup & login with Clerk
• 📩 Email Verification: Secure 6-digit code flow before accessing the app
• 🏠 5 Screens: Signup, Login, Verify Email, Home, and Create Transaction
• 💸 Expense Tracker: Add income or expenses and manage financial entries
• 📊 Balance Updates: Live calculation of current balance based on transactions
• 🗑️ Delete Transactions: Remove old entries with a single tap
• 🔄 Pull to Refresh: Classic refresh gesture implemented from scratch
• 🚪 Logout Functionality: Easily switch accounts or sign out
• 🧰 Backend with Express: RESTful API connected to Neon-hosted Postgres
• 🌐 Cloud Deployment: Host your backend online for mobile access
• ⏱️ Rate Limiting: Protect your API using Redis-based limiter
• 🧠 Beginner Friendly: No prior React Native experience needed—only basic React knowledge
• 💸 100% Free Tools: No need to pay for anything
• 🧪 Real Device Testing: Run the app on your own phone without a Mac

🛠️ Technologies

• Frontend: React Native, Expo, Clerk Authentication
• Backend: Node.js, Express.js
• Database: PostgreSQL (Neon)
• Cache & Rate Limiting: Redis (Upstash)
• Deployment: Vercel/Railway/Heroku

📱 Screenshots

🔐 Register Page

🔓 Login Page

🧑‍💼 Transaction Page

📊 Dashboard

🚀 Installation

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Expo CLI
• Git

Quick Start

1. Clone the repository:

git clone https://github.com/username/react-native-wallet.git
cd react-native-wallet

2. Install backend dependencies:

cd backend
npm install

3. Install mobile dependencies:

cd ../mobile
npm install

4. Set up environment variables:

# Backend environment variables
cd backend
cp .env.example .env
# Edit .env with your database and Redis credentials

# Mobile environment variables
cd ../mobile
cp .env.example .env
# Edit .env with your Clerk publishable key

5. Start the backend server:

cd backend
npm run dev

6. Start the mobile app:

cd mobile
npx expo

7. Test on your device:
   • Install Expo Go app on your phone
   • Scan the QR code from the terminal
   • Start using your wallet app!

📁 Project Structure

react-native-wallet/
├── backend/                 # Express.js API
│   ├── src/
│   │   ├── config/         # Database, Redis, Cron configs
│   │   ├── controllers/    # API controllers
│   │   ├── middleware/     # Rate limiting, auth middleware
│   │   └── routes/         # API routes
│   └── server.js           # Main server file
├── mobile/                  # React Native app
│   ├── app/                # Expo Router screens
│   │   ├── (auth)/         # Authentication screens
│   │   └── (root)/         # Main app screens
│   ├── components/         # Reusable components
│   ├── hooks/              # Custom React hooks
│   ├── constants/          # API endpoints, colors
│   └── assets/             # Images, fonts, styles
└── README.md

🔧 Configuration

Backend Setup

1. Database (Neon PostgreSQL):

   • Sign up at neon.tech
   • Create a new project
   • Copy the connection string to backend/.env

2. Redis (Upstash):

   • Sign up at upstash.com
   • Create a Redis database
   • Copy the connection details to backend/.env

3. Environment Variables:

DATABASE_URL=your_neon_postgres_url
UPSTASH_REDIS_REST_URL=your_upstash_redis_url
UPSTASH_REDIS_REST_TOKEN=your_upstash_redis_token
PORT=3000

Mobile Setup

1. Clerk Authentication:

   • Sign up at clerk.com
   • Create a new application
   • Copy the publishable key to mobile/.env

2. Environment Variables:

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
EXPO_PUBLIC_API_URL=your_backend_url

🚀 Deployment

Backend Deployment

Deploy your backend to any of these platforms:

• Vercel: vercel --prod
• Railway: Connect your GitHub repo
• Heroku: git push heroku main

Mobile App

• Expo EAS Build: For app store distribution
• Expo Go: For testing and development

🤝 Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Expo for the amazing development platform
• Clerk for authentication
• Neon for PostgreSQL hosting
• Upstash for Redis hosting

📞 Support

If you have any questions or need help, feel free to:

• Open an issue on GitHub
• Contact the maintainers
• Check the documentation

---

Happy coding! 🚀