Skip to content

org498/xlike

Repository files navigation

XLike

React Native React Native Firebase TypeScript

A Twitter/X-like social media application built with React Native and Firebase. Users can post murmurs (tweets), follow other users, and like posts.

Screenshots

Login Home Timeline Murmur Detail
Login Home Murmur
Followers User Profile Own Profile
Followers User Details Self Details

Features

  • User authentication (Login/Register)
  • Post murmurs with text content
  • Follow/unfollow other users
  • Like murmurs from other users
  • View timeline of followed users' murmurs
  • View user profiles with murmur lists
  • Delete own murmurs
  • Pagination support (10 murmurs per page)

Tech Stack

  • Framework: React Native 0.83.1
  • Language: TypeScript
  • Navigation: React Navigation (Native Stack & Bottom Tabs)
  • Backend: Firebase
    • Firebase Authentication
    • Cloud Firestore
  • State Management: React Context API
  • Icons: React Native Vector Icons

Project Structure

src/
├── components/       # Reusable UI components
├── config/          # Firebase configuration
├── contexts/        # React Context providers
├── navigation/      # Navigation setup
├── screens/         # Screen components
├── services/        # API service layers
└── types/           # TypeScript type definitions

Prerequisites

Before running this project, ensure you have completed the React Native Environment Setup.

Requirements:

  • Node.js >= 20
  • React Native CLI
  • Android Studio (for Android)
  • Xcode (for iOS, macOS only)
  • CocoaPods (for iOS)

Installation

  1. Clone the repository

  2. Install dependencies:

npm install
  1. Set up Firebase:

    • Create a Firebase project at Firebase Console
    • Add your Firebase configuration to src/config/firebase.config.ts
    • Enable Authentication and Firestore in your Firebase project
    • Configure Firestore security rules (see FIRESTORE_RULES.md)
  2. For iOS, install CocoaPods dependencies:

bundle install
bundle exec pod install --project-directory=ios

Running the App

Start Metro Bundler

npm start

Run on Android

npm run android

Run on iOS

npm run ios

Development

Running Linter

npm run lint

Running Tests

npm test

Database Schema

Collections

  • users: User profiles and metadata
  • murmurs: User posts
  • follows: Follow relationships
  • likes: Like relationships

For detailed schema information, see src/types/schema.types.ts.

API Services

  • auth.service.ts: Authentication operations
  • murmur.service.ts: Murmur CRUD operations
  • follow.service.ts: Follow/unfollow operations
  • like.service.ts: Like/unlike operations

Troubleshooting

If you encounter issues:

  1. Clear Metro bundler cache:
npm start -- --reset-cache
  1. Clean build (Android):
cd android && ./gradlew clean && cd ..
  1. Clean build (iOS):
cd ios && xcodebuild clean && cd ..

For more help, see the React Native Troubleshooting Guide.

License

Private project