Skip to content

README.md

Latest commit

 

History

History
140 lines (96 loc) · 2.94 KB

README.md

File metadata and controls

140 lines (96 loc) · 2.94 KB

🧩 React Native GraphQL To-Do App

A ✨ full-stack mobile To-Do app ✨ built with React Native, GraphQL, Apollo, PostgreSQL, and more! It's fast, clean, and developer-friendly — perfect for learning or launching 🚀.

🔧 Tech Stack Toolbox 🧰

🖼️ Frontend

  • ⚛️ React Native 0.79.4
  • 🚀 Expo SDK 53
  • 🔗 Apollo Client
  • 💅 NativeWind (TailwindCSS for RN)
  • 🎭 Reanimated for slick animations
  • 🧱 GlueStack UI (optional)

🔙 Backend

  • 🟢 Node.js + Express
  • 📡 Apollo Server
  • 🔍 GraphQL (Schema + Resolvers)
  • 🔄 Prisma ORM
  • 🛢️ PostgreSQL

🚀 Getting Started

🗂️ Folder Structure

react-native-graphql-app/
├── frontend/        # 📱 Mobile client
│   ├── App.js
│   ├── apollo/      # Apollo config
│   ├── components/  # Reusable UI
├── server/          # 🔧 Node GraphQL API
│   ├── src/
│   ├── prisma/      # DB schema & migrations
└── README.md

🔄 Quickstart Guide

📥 1. Clone the Repo

git clone https://github.com/dmunasingha/react-native-graphql-app.git
cd react-native-graphql-app

🧠 2. Backend Setup

cd server
cp .env.example .env
npm install
npx prisma migrate dev --name init
npm run dev

🔗 GraphQL Playground: http://localhost:4000/graphql

📲 3. Frontend Setup

cd ../frontend
npm install
npm start

💡 Tip: Use Expo Go or an emulator for testing

⚠️ Important: Update Apollo client URI in apollo/client.js:

uri: 'http://192.168.x.x:4000/graphql' // 👈 Use your LAN IP

🎯 Features Checklist

  • ✅ Add / Toggle / Delete todos
  • 🔁 Auto refetch with Apollo
  • ✨ Beautiful styling with Tailwind
  • 📲 Cross-platform (iOS/Android)
  • 🔄 Prisma-backed DB
  • ⏱️ Coming Soon: Offline mode
  • 🌓 Coming Soon: Dark mode

📸 Screenshots

📋 List View 🛠️ Mutation Example
Coming soon Coming soon

🧪 Dev Tips

  • 🧹 Clear Metro cache: npx expo start -c
  • 🧬 Test GraphQL at: http://localhost:4000/graphql
  • 🧑‍🔬 Use npx prisma studio to view data

🧨 Troubleshooting

  • ❌ Network request failed: Use your real IP, not localhost
  • ❌ Unknown type "ID": Match GraphQL types (use Int! if Prisma expects it)
  • ❌ Metro error: All import statements must be at the top level

📄 License

🪪 Licensed under the 0BSD license — totally open and flexible 💖

💡 Acknowledgements

🙋‍♂️ Contact

Made with ❤️ by Dunith Munasingha 📧 munasingha.dunith@gmail.com(mailto:munasingha.dunith@gmail.com) 🌐 https://www.linkedin.com/in/dunith-munasingha/