Reddit Mobile Application

A full-stack social media platform built with React Native and GraphQL, featuring real-time interactions, user authentication, and comprehensive social media functionality.

🚀 Features

• User Authentication: Secure login/register with JWT tokens
• Social Media Functionality: Create posts, comments, likes, and follow users
• Real-time Updates: Live data synchronization using Apollo Client
• Cross-platform: iOS and Android support with React Native
• Modern UI: Clean, responsive design with Apple-inspired aesthetics
• Offline Support: Data persistence with AsyncStorage

🛠️ Tech Stack

Frontend (Mobile)

• React Native with Expo
• Apollo Client for GraphQL state management
• React Navigation for routing
• AsyncStorage for local data persistence
• Expo Vector Icons for UI icons

Backend

• Node.js with Express.js
• GraphQL with Apollo Server
• MongoDB for database
• JWT for authentication
• Redis for caching

📱 Screenshots

🏗️ Project Structure

gc01-RahmadAmri/
├── client/
│   └── reddit/
│       ├── components/     # Reusable UI components
│       ├── contexts/       # React Context providers
│       ├── navigation/     # Navigation configuration
│       └── screens/        # App screens
└── server/                 # Backend API server

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI
• MongoDB instance
• Redis server (optional, for caching)

Installation

1. Clone the repository

   git clone https://github.com/H8-FSJS-P3S6/gc01-RahmadAmri.git
   cd gc01-RahmadAmri

2. Install server dependencies

   cd server
   npm install

3. Install client dependencies

   cd ../client/reddit
   npm install

4. Environment Setup

   Create .env file in server directory:

   MONGODB_URI=mongodb://localhost:27017/reddit
   JWT_SECRET=your_jwt_secret_key
   REDIS_URL=redis://localhost:6379
   PORT=3000

Running the Application

1. Start the backend server

   cd server
   npm start

2. Start the React Native app

   cd client/reddit
   npx expo start

3. Run on device/simulator

   • Scan QR code with Expo Go app (mobile)
   • Press i for iOS simulator
   • Press a for Android emulator

📚 API Documentation

GraphQL Endpoints

The application uses GraphQL for all API interactions. Main operations include:

• Authentication

  • login(input: LoginInput!): User login
  • register(input: RegisterInput!): User registration

• Posts

  • posts: Get all posts
  • createPost(input: PostInput!): Create new post
  • likePost(postId: ID!): Like/unlike post

• Users

  • users: Get all users
  • followUser(userId: ID!): Follow/unfollow user

🎨 Design System

The application follows Apple's design guidelines with:

• Colors: Clean whites, subtle grays, and Apple blue (#007AFF)
• Typography: San Francisco-inspired font hierarchy
• Layout: Generous white space and minimalist design
• Interactions: Subtle animations and smooth transitions

🔒 Authentication Flow

1. User registers/logs in with username and password
2. Server validates credentials and returns JWT token
3. Token stored in AsyncStorage for persistence
4. Apollo Client includes token in all requests
5. Automatic token validation and refresh

📱 Key Screens

• LoginScreen: User authentication with Apple-inspired design
• RegisterScreen: New user registration
• HomeScreen: Main feed with posts
• ProfileScreen: User profile and settings
• PostDetailScreen: Individual post view with comments

🧪 Testing

# Run tests
npm test

# Run with coverage
npm run test:coverage

🚀 Deployment

Mobile App

• Build with expo build:android or expo build:ios
• Submit to Google Play Store or Apple App Store

Backend

• Deploy to cloud platforms (AWS, Heroku, DigitalOcean)
• Configure production environment variables
• Set up MongoDB Atlas for production database

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Rahmad Maulidi Amri

• GitHub: @RahmadAmri
• LinkedIn: rahmad-amri

🙏 Acknowledgments

• Hacktiv8 Full Stack JavaScript Bootcamp
• React Native and Expo communities
• Apollo GraphQL documentation
• Apple Design Guidelines inspiration

---

Built with ❤️ during Hacktiv8 Full Stack JavaScript Immersive Program