React Native Heroes

Fullstack Serverless application with React Native and GraphQL.

Les rencontres IT Lille - Comet x Numbr - June 2022

Who I am

@MatthysDev

Problem ?

  • Noob on Github
  • No source to find good developers
  • I'm not a back-end developer

Solution

  • Mobile application available everywhere
  • Database of best React Native developers

How ?

App iOS, Android et Web

Where should I start ?

Let's build this app !

What is Expo ?

    Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

Expo go

Dowload it

Ios

Android

  • Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
    Hasura gives you instant GraphQL api endpoint on new & existing data sources.

A query language for your API

Avoid overfetching

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphiQL query

Apollo Client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.

Gravatar

Gravatar

Combine all this tools

How ?

  • Setup Apollo client server
  • Setup the .env file
  • fetch data with graphQL
  • Render components with data

Apollo client server

GitGuardian

Don't panic

HASURA_ADMIN_SECRET

Apollo Keys

.env file

hasmycodeleaked

GraphQL Query

  • Fetch data

Fetch data

Fetch data

Render an array of object with FlatList

Destructuring props

Destructuring props

Destructuring props

Destructuring props

Shaping your data from the api with Typescript

FlatList

FlatList

Feature - Vote system

Mutation

Mutation queries modify data in the data store and returns a value. It can be used to insert, update, or delete data. Mutations are defined as a part of the schema.

Mutation - Vote system

Demo - Vote system

Mutation - Add hero

Mutation - Add hero

Mutation - Add hero

Mutation - Add hero

Demo - Twitter

Demo - Github

Conclusion

What did we learn ?

  • How to use Heroku database
  • How to use Hasura to fetch data
  • How to use ApolloClient
  • How to do a mutation

Thanks to

Thanks to

@Flexbox

Thanks to

Numbr

Comet

Questions ?

What parts were the hardest to understand ?