Social Mobile

A cross-platform social media mobile application built with React Native and Expo.

Key Accomplishments

• Cross-platform State Management - Implemented React Query for efficient data fetching, caching, and synchronization across iOS, Android, and Web
• Authentication & Persistent Storage - Integrated token-based authentication with AsyncStorage for secure credential management
• File-based Routing Architecture - Built nested route structure using Expo Router with modal presentations and dynamic post detail views
• Post Interaction System - Developed interactive post engagement with API integration for likes using bearer token authentication
• Comments Module - Implemented comment display and submission with real-time updates
• Responsive Animations & Gestures - Integrated React Native Gesture Handler and Reanimated for fluid interactions and touch feedback
• Haptic Feedback Integration - Added native haptic responses to enhance user experience on mobile devices

Tech Stack

• Framework & Runtime: Expo v54, React Native v0.81 for universal mobile/web development
• Language: TypeScript for type-safe development
• Navigation: Expo Router with file-based routing and dynamic route parameters
• State Management: React Query for server-state management and caching strategy
• Persistent Storage: AsyncStorage for local data persistence
• Animations & Interactions: React Native Gesture Handler, React Native Reanimated for complex animations and gesture recognition
• Native Features: Expo Haptics for haptic feedback, Expo Vector Icons for icon system
• Code Quality: ESLint for linting and code standards
• Modern Features: React Native New Architecture, React Compiler for performance optimization

Supported Platforms

• iOS (with tablet support)
• Android
• Web (static export)

Quick Start

npm install
npm start     # Start development server
npm run ios   # Run on iOS
npm run android     # Run on Android
npm run web   # Run in browser

Available Scripts

• npm start - Start the Expo development server
• npm run ios - Run on iOS simulator
• npm run android - Run on Android emulator
• npm run web - Run in web browser
• npm run lint - Run ESLint to check code quality
• npm run reset-project - Reset to fresh project state (moves starter code to app-example/)

Project Structure

app/                    # Main app screens
├── (home)/            # Home tab screens
│   ├── index.tsx
│   ├── profile.tsx
│   └── setting.tsx
├── view/              # Post detail view
└── form.tsx           # New user form

components/            # Reusable components
├── posts.tsx          # Post display component
├── comment.tsx        # Comment component
└── appProvider.tsx    # Context provider

libs/                  # Configuration and utilities
types/                 # TypeScript type definitions
assets/                # Images and static assets

Development

• Uses file-based routing with Expo Router - create files in the app/ directory to add new screens
• Configured for TypeScript - all source files use .tsx extension
• Dark mode support enabled automatically based on system settings
• New Architecture features enabled for improved performance

Contributing

When making changes:

1. Run npm run lint to check code quality
2. Follow the existing component structure
3. Use TypeScript for type safety