How do I set up the F8 app locally?

Follow the tutorials at makeitopen.com linked in the README, which provide a setup guide. Be prepared to update dependencies for compatibility with current Node.js and React Native versions.

Is the F8 app still useful for learning React Native in 2024?

Yes, for architectural patterns like Redux with Relay, but the code is outdated. Focus on concepts rather than direct implementation, and expect to modernize dependencies.

F8 app vs Expo for building a React Native app?

The F8 app uses a custom native setup with Relay and GraphQL, ideal for learning Facebook's stack deeply. Expo offers a managed workflow for faster development but with less control over native modules.

How can I update the dependencies in the F8 app?

Check the package.json for old versions and use tools like npm-check-updates. Expect breaking changes, especially in React Native and Relay, which may require code adjustments.

Can I reuse the F8 app code for a non-conference app?

Yes, but adapt it carefully. The Redux and GraphQL integrations are educational, but you'll need to modify the UI and data models to fit your specific use case.

Open-Awesome

F8 App 2017

NOASSERTIONJavaScript

Official 2017 F8 conference app built with React Native, Redux, Relay, and GraphQL.

Visit Website GitHub

13.9k stars2.5k forks0 contributors

What is F8 App 2017?

F8 App 2017 is the complete source code for the official mobile application of Facebook's F8 developer conference. It's built with React Native and demonstrates integration with Redux, Relay, and GraphQL in a production environment. The project serves as an educational example of how Facebook engineers build modern mobile applications.

Target Audience

React Native developers looking for production-ready examples, mobile developers interested in Facebook's tech stack, and educators teaching modern mobile app architecture.

Value Proposition

Developers choose this project because it provides a real-world, production-tested example from Facebook's engineering team, showcasing best practices for state management, data fetching, and cross-platform development with React Native.

Overview

Source code of the official F8 app of 2017, powered by React Native and other Facebook open source projects.

Use Cases

Best For

Learning React Native architecture from a production Facebook app
Studying integration of Redux with Relay and GraphQL
Building conference or event mobile applications
Understanding Facebook's open-source mobile development patterns
Referencing production-ready React Native code structure
Educational purposes for mobile development courses

Not Ideal For

Projects requiring the latest React Native features and libraries (as it's from 2017)
Teams wanting a simple, plug-and-play starter template without complex Relay/GraphQL integration
Apps not using Facebook's technology stack or preferring alternative state management solutions

Pros & Cons

Pros

Real-World Production Code

The app was deployed to Google Play and the App Store, providing a tested, complete example of a React Native application in production.

Detailed Educational Tutorials

The makeitopen.com tutorials linked in the README offer step-by-step guides on setup and architecture, making it a comprehensive learning resource.

Integrated Best Practices

Demonstrates how Facebook engineers combine Redux, Relay, and GraphQL in a cohesive architecture, as highlighted in the tutorials.

Cross-Platform Example

Available on both iOS and Android, it shows handling of platform-specific considerations in a real app context.

Cons

Outdated Dependencies

Since it's from 2017, it uses deprecated versions of React Native and libraries, requiring significant updates for modern use and potentially introducing security risks.

Complex Setup and Maintenance

The integration of Relay and GraphQL adds overhead, and the setup guide might not account for recent tooling changes, leading to a steep learning curve.

Vendor Lock-in to Facebook Stack

Heavy reliance on Relay and GraphQL makes it less adaptable for projects using alternative data-fetching or state management libraries.

Frequently Asked Questions

Related Projects

Next.js TypeScript and GraphQL Example

The React Framework

Stars142,209

Forks31,897

Last commit7 hours ago

react-starter-kit

Modern React starter kit with Bun, TypeScript, Tailwind CSS, tRPC, Stripe, and Cloudflare Workers. Production-ready monorepo for building fast web apps.

Stars23,673

Forks4,201

Last commit1 day ago

30-days-of-react-native

30 days of React Native demos

Stars6,875

Forks1,423

Last commit8 years ago

react-native-nw-react-calculator

Mobile, desktop and website Apps with the same code

Stars5,202

Forks860

Last commit5 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub