explaingit

fbsamples/f8app

★ 13,905JavaScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

The complete source code of Facebook's official 2017 F8 conference mobile app, a real-world React Native project for iOS and Android published as an open learning resource, with a companion tutorial series walking through every design decision.

Mindmap

mindmap
  root((F8 App))
    What it is
      Conference mobile app
      React Native codebase
      Open learning resource
    Tech Stack
      React Native
      Redux state
      GraphQL and Relay
    Platforms
      iOS App Store
      Android Google Play
    Learning
      Tutorial series
      Step by step guide
      Real world patterns
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Study a production-grade React Native codebase to understand how Facebook structured state management, data fetching, and navigation in a real shipped app.

USE CASE 2

Follow the companion tutorial series at makeitopen.com to learn React Native from scratch by building along with an actual conference app.

USE CASE 3

Reference how Redux and Relay are combined in a single React Native project when architecting your own mobile app.

Tech stack

JavaScriptReact NativeReduxGraphQLRelay

Getting it running

Difficulty · moderate Time to first run · 30min

Requires a React Native environment (Xcode for iOS or Android Studio for Android) and following the local setup guide at makeitopen.com.

In plain English

This repository holds the complete source code for the F8 app, the official mobile application for Facebook's annual developer conference held in 2017. The app was publicly available on both Google Play for Android and the App Store for iOS, and Facebook chose to release all of its code for anyone to read, study, and learn from. The app was built with React Native, a framework that lets developers write mobile apps using JavaScript while producing apps that run natively on both Android and iOS. Alongside React Native, the team used Redux for managing app state, Relay and GraphQL for fetching and organizing data from a server, and other open-source projects from Facebook. Facebook published a detailed tutorial series at makeitopen.com explaining step by step how the app was designed and built. Those tutorials walk through the choices the team made, from setting up the project locally to the data and state patterns they adopted. If you want to run the app on your own machine, the project links to a local-setup guide in that same series. Because the README is brief and the main depth lives in the external tutorial series, the repository itself is best understood as a reference codebase: a real-world, production-grade React Native application that a large team shipped to conference attendees, made open for the community to study.

Copy-paste prompts

Prompt 1
Walk me through how the F8 app uses Redux and Relay together, when does it use each for state, and how do they avoid conflicting with each other?
Prompt 2
Based on the F8 app architecture, help me set up a new React Native project that uses GraphQL with Relay for data fetching and Redux for local UI state.
Prompt 3
Show me the top-level folder structure of the F8 app and explain what each directory is responsible for in a large React Native project.
Open on GitHub → Explain another repo

← fbsamples on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.