A React Native plant-sharing community app built with React Native, Firebase, Expo and TypeScript. Share and swap plant cuttings with people in your area—completely free.
Roots enables plant enthusiasts to give away or trade plant cuttings within their community. Users can browse available plants nearby, chat with other growers, and earn credits for successful plant adoptions.
Key Features:
- Browse plants by location and category
- Real-time messaging between users
- Credit system for tracking successful adoptions
- QR code-based plant transfer verification
- Favorites system to save plants
- User profiles with postal code-based location tracking
- Framework: React Native with Expo
- Language: TypeScript
- Navigation: Expo Router (file-based routing)
- Backend: Firebase (Auth, Firestore, Storage)
- UI Libraries: Tamagui, React Native Elements
- Testing: Jest, React Native Testing Library
├── app/ # Expo Router pages
│ ├── (tabs)/ # Tab-based navigation
│ │ ├── explore.tsx # Browse plants
│ │ ├── messages.tsx # Chat list
│ │ ├── upload.tsx # Create new plant listing
│ │ ├── favourites.tsx # Favorited plants
│ │ ├── index.tsx # User profile
│ │ ├── settings.tsx # App settings
│ │ └── view-plant/ # Plant detail views
│ └── auth/ # Authentication screens
├── components/ # Reusable UI components
│ ├── ui/ # Atomic components
│ ├── GiveAwayPlant.tsx # QR code generation
│ └── ScanTransferCode.tsx # QR code scanning
├── services/ # Firebase & external services
├── contexts/ # React Context (AuthContext)
├── constants/ # Design system & config
├── utils/ # Helper functions
└── interfaces/ # TypeScript interfaces
- Node.js (v18+)
- npm or yarn
- Expo CLI:
npm install -g expo-cli
- Clone the repository:
git clone <repo-url>
cd roots- Install dependencies:
npm install-
Configure Firebase:
- Update
firebaseConfig.jswith your Firebase project credentials - Ensure Firestore collections are set up (users, plants, categories, chats, transfers)
- Update
-
Start development:
npm startThen open the app in:
- iOS Simulator:
i - Expo Go: Scan QR code on your phone
- Filter by category and adoption status
- Sort by distance, name, or date
- Search plants and users
- Real-time distance calculations based on postal codes
- Real-time chat with other users
- Unread message counts
- Message timestamps and date headers
- Notification badges
- Plant owner marks plant as "ready to adopt"
- Interested user contacts via messaging
- Owner generates 5-digit code or QR code
- Buyer scans code to verify transfer
- Owner receives 100 credits
- Customizable username, bio, and profile picture
- Credits display
- Plant listing showcase
- Location-based on postal code
- Firebase Authentication with email verification
- Persistent auth state using AsyncStorage
- Protected routes in AuthContext
- Users: profiles, posts, favorites, credits
- Plants: listings with multi-image support, categories
- Chats: real-time messaging with unread counts
- Transfers: plant adoption verification codes
- AuthContext for user state
- Local component state with hooks
- Firebase real-time listeners for data updates
Run tests:
npm testCurrent test coverage includes:
- Button component behavior
- Distance calculations
- Form validation utilities
All styling uses constants defined in constants/design-system.ts:
- Colors: Primary, secondary, accent, text, warning, etc.
- Typography: Poppins font family with predefined sizes and weights
- Spacing: Consistent spacing scale (xs to 4xl)
- Border Radius: Reusable border radius values
users/- User profiles and settingsplants/- Plant listingscategories/- Plant categorieschats/{chatId}/messages- Real-time messagingtransfers/- Plant adoption codes
# Use Expo Go for development
npx expo startSee Expo documentation for detailed deployment instructions.
- Plant care tips and guides
- Advanced search with radius filtering
- Plant species recognition via ML
- Community forums/discussions
- Badge/achievement system
MIT License - See LICENSE file for details
Anna Dahlberg Julia Lyngfelt