Thoughts - React Native App

A location-based social feed mobile application built with React Native and TypeScript, integrating with the Hexagon Feed System backend using hexagonal spatial indexing (H3) for real-time location-based social interactions.

🚀 Features

• Location-Based Feed: Posts are organized by geographic location using hexagonal spatial indexing
• Real-Time Updates: WebSocket integration for live feed updates
• User Authentication: Secure JWT-based authentication with refresh tokens
• Cross-Platform: Runs on both iOS and Android
• Offline Support: Cached data for offline viewing
• Modern UI: Clean, intuitive interface with smooth animations

🏗️ Architecture

Tech Stack

• Framework: React Native 0.82.x
• Language: TypeScript
• State Management: Redux Toolkit + Redux Persist
• Navigation: React Navigation 6.x
• Networking: Axios + STOMP WebSocket
• Location Services: React Native Geolocation + Maps
• UI Components: React Native Elements + Paper
• Storage: AsyncStorage + Keychain (secure)

Project Structure

src/
├── components/           # Reusable UI components
│   ├── common/          # Generic components
│   ├── feed/            # Feed-specific components
│   ├── post/            # Post-related components
│   └── maps/            # Map components
├── screens/             # Screen components
│   ├── auth/            # Authentication screens
│   ├── feed/            # Feed screens
│   ├── post/            # Post creation/detail screens
│   ├── profile/         # User profile screens
│   └── settings/        # Settings screens
├── navigation/          # Navigation configuration
├── services/            # API and external services
│   ├── api/             # REST API calls
│   ├── websocket/       # WebSocket connection management
│   ├── location/        # Location services
│   └── storage/         # Local storage utilities
├── store/               # Redux store configuration
│   ├── slices/          # Redux slices
│   └── middleware/      # Custom middleware
├── utils/               # Utility functions
├── hooks/               # Custom React hooks
├── types/               # TypeScript type definitions
└── constants/           # App constants

🛠️ Setup & Installation

Prerequisites

• Node.js (v16 or higher)
• React Native CLI
• iOS: Xcode 12+ and CocoaPods
• Android: Android Studio and SDK

Installation

1. Clone the repository

   git clone https://github.com/Thoughts-MMWorks/Thoughts-React-Native-App.git
   cd Thoughts-React-Native-App/ThoughtsApp

2. Install dependencies

   npm install

3. iOS Setup

   cd ios && pod install && cd ..

4. Environment Configuration

   • Update backend URL in src/constants/api.ts
   • Configure your backend endpoints

Running the App

Start Metro Bundler

npm start

Run on iOS

npm run ios

Run on Android

npm run android

📱 Core Features

Authentication

• Email/password login and registration
• JWT token management with automatic refresh
• Secure token storage using Keychain
• Form validation and error handling

Location Services

• Real-time location tracking
• Permission management
• Background location updates (when permitted)
• Distance calculations and formatting

Feed System

• Location-based post feed
• Infinite scroll with cursor-based pagination
• Pull-to-refresh functionality
• Real-time post updates via WebSocket
• Offline caching

Post Creation

• Rich text input with character limits
• Image upload support
• Automatic location tagging
• Draft saving functionality

Real-Time Features

• WebSocket connection management
• Live feed updates
• Connection status monitoring
• Automatic reconnection

🔧 Configuration

Backend Integration

The app is configured to work with the Hexagon Feed System backend. Update the following configuration in src/constants/api.ts:

export const API_CONFIG = {
  BASE_URL: 'https://your-backend-url.com',
  WEBSOCKET_URL: 'wss://your-backend-url.com/ws',
  // ... other endpoints
};

Environment Variables

Create appropriate configuration for different environments (development, staging, production).

🧪 Testing

# Run unit tests
npm test

# Run tests with coverage
npm run test:coverage

# Run E2E tests (requires Detox setup)
npm run test:e2e

📦 Building for Production

iOS

# Build for iOS
npx react-native run-ios --configuration Release

Android

# Build APK
cd android && ./gradlew assembleRelease

# Build AAB (for Play Store)
cd android && ./gradlew bundleRelease

🔐 Security Features

• Secure JWT token storage using Keychain
• Certificate pinning for API requests
• Input validation and sanitization
• Privacy-focused location handling

📊 Performance Optimizations

• Component memoization with React.memo
• Virtual scrolling for large feeds
• Image optimization and lazy loading
• Background sync for offline support
• Memory leak prevention

🌐 API Integration

Authentication Endpoints

• POST /api/v1/auth/login - User login
• POST /api/v1/auth/register - User registration
• POST /api/v1/auth/refresh - Token refresh
• POST /api/v1/auth/logout - User logout

Feed Endpoints

• GET /api/v1/feed - Get location-based feed
• POST /api/v1/posts - Create new post
• DELETE /api/v1/posts/{id} - Delete post

WebSocket

• Connection: /ws with STOMP protocol
• Subscriptions: Location-based channels for real-time updates

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some 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.

🆘 Support

For support, email support@mmworks.com or create an issue in this repository.

🗺️ Roadmap

• Push notifications
• Dark mode support
• Advanced map features
• Post comments and likes
• User profiles and following
• Content moderation
• Analytics integration
• Accessibility improvements

---

Built with ❤️ by the MMWorks Team