Frog

📱 Description

Frog is a full-stack mobile social media application built using React Native with Expo and GraphQL Apollo Server. This application allows users to share posts, comment, like content, and follow other users in a secure and responsive environment.

✨ Key Features

• Authentication: Register and Login with JWT
• Post Management: Create, view, and manage posts
• Comments: Embedded comment system within posts
• User Search: Search users by name or username
• Follow System: Follow and be followed by other users
• Like System: Like posts with total like counter
• User Profile: Display followers and following count

🛠️ Tech Stack

Backend:

• Node.js & GraphQL
• Apollo Server
• MongoDB (Database)
• Redis (Caching)
• JWT Authentication
• bcryptjs (Password Hashing)

Frontend:

• React Native & Expo
• Apollo Client
• React Navigation
• Expo Secure Store
• Context API for State Management

🚀 Installation and Usage

Prerequisites

• Node.js (v16 or newer)
• MongoDB
• Redis
• Expo CLI
• Git

1. Clone Repository

git clone https://github.com/FahriNazarudin/my-social-media-app.git
cd my-social-media-app

2. Backend Setup (Server)

# Navigate to server folder
cd server

# Install dependencies
npm install

# Setup environment variables
cp .env.example .env
# Edit .env with your database and Redis configuration

# Run server
npm run dev

3. Frontend Setup (Mobile App)

# Navigate to SocialMedia folder
cd ../SocialMedia

# Install dependencies
npm install

# Run application
npm start
# or
npx expo start

4. Environment Variables

Create a .env file in the server folder with the following configuration:

MONGODB_URI=mongodb://localhost:27017/socialmedia
REDIS_URL=redis://localhost:6379
JWT_SECRET=your-jwt-secret-key
PORT=3000

📝 Usage Examples

GraphQL Queries & Mutations

1. Register User

mutation RegisterUser {
  register(
    name: "John Doe"
    username: "johndoe"
    email: "john@example.com"
    password: "password123"
  ) {
    _id
    name
    username
    email
  }
}

2. Login

mutation LoginUser {
  login(email: "john@example.com", password: "password123") {
    access_token
    user {
      _id
      name
      username
      email
    }
  }
}

3. Get Posts

query GetPosts {
  posts {
    _id
    content
    tag
    imgUrl
    createdAt
    likes {
      username
    }
    comments {
      content
      username
      createdAt
    }
    authorDetail {
      name
      username
    }
  }
}

4. Create Post

mutation CreatePost {
  addPost(
    content: "Hello World! This is my first post"
    tag: "greeting"
    imgUrl: "https://example.com/image.jpg"
  ) {
    _id
    content
    tag
    createdAt
    authorDetail {
      name
      username
    }
  }
}

5. Follow User

mutation FollowUser {
  followUser(followingId: "user_id_here") {
    _id
    followingId
    followerId
  }
}

🤝 Contributing

1. Fork this repository
2. Clone your fork locally:

   git clone https://github.com/FahriNazarudin/my-social-media-app.git

3. Create a new branch for your feature:

   git checkout -b feature/feature-name

4. Commit your changes:

   git commit -m "Add: new feature description"

5. Push to your branch:

   git push origin feature/feature-name

6. Create a Pull Request on GitHub

Contributing Guidelines

• Ensure code follows the existing style guide
• Add tests for new features
• Update documentation if necessary
• Make sure all tests pass before submitting PR

ScreenShot App

📞 Contact

Fahri Nazarudin

• Email: fahri.nazarudin@example.com
• LinkedIn: Fahri Nazarudin

---