Skip to content

manssorr/Socialify

Repository files navigation

Socialify

React Native App for displaying a list of posts and their comments

Screenshots

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-04-07.at.10.16.27.mp4
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-04-07.at.09.55.56.mp4

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Install packages

Step 2: Start the Metro Server

yarn start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

yarn android

For iOS

yarn ios
OR
Open `ios/Socialify.xcworkspace` in Xcode

Overview

The app is designed to display a list of posts fetched from a third-party API using axios. The app should efficiently do network calls, error handling, state management, and data caching using redux presist store.

Technologies Used

  • React Native
  • gorest.co.in API for fetching posts and comments data.
  • TypeScript for static typing.
  • redux-toolkit for state management.
  • redux-persist for state persistence.
  • mmkv storage for state persistence.
  • react native splash screen for loading screen.
  • Jest for testing.

App Features

  • Posts List: The app displays a list of posts fetched from the gorest API using the /posts endpoint.

  • Infinite Scroll: The app should fetch more posts and comments when the user scrolls to the bottom of the posts list or comments list.

  • Comments List: Users can view the list of comments for a specific post by clicking on it in the posts list.

  • Post Details: Users can view detailed information about a specific post by clicking on it in the posts list.

  • Offline Mode: The app should cache data locally to enable offline functionality, allowing users to access previously fetched posts data even when there is no internet connection (requires at least one successful data fetch).

  • Error States: The app should gracefully handle scenarios where no data is available or when there is no internet connection, displaying appropriate error states.

  • Unit Testing