Git Product home page Git Product logo

pokedex's Introduction

Pokédex 📕 — DIY Elixir + GraphQL + React + Relay workshop

What is it?

This repository is a Do It Yourself workshop teaching you step-by-step the basics of implementing a GraphQL endpoint for your Phoenix application with huge help of the Absinthe Elixir library. Apart from that, part of the workshop covers the frontend work — you'll learn how to add Relay framework to your existing React application and use it to create highly interactive User Interfaces.

How does it work?

The repository has 6 main branches:

  • firstQuery — given a simple Phoenix application, how to add GraphQL endpoint to it that will fetch some data from the database with Ecto and return as GraphQL response + how to render a list of Pokémons fetched from a GraphQL endpoint in React?
  • connections — we already have a simple GraphQL endpoint, how to implement pagination with Absinthe and Relay?
  • authMutations — ok, we know how to fetch data in several ways, let's execute some mutations (and obviously authorize the requests)
  • polymorphism — I've heard GraphQL supports interfaces and polymorphism of objects, how to implement this in Absinthe?
  • subscriptions — I'd like to make my UI react to real-time data sent by the backend. Here you'll learn how to push GraphQL-compatible updates to your clients with WebSockets magic
  • batching — your application has so many users that you have to optimize requests sent to the database, the most obvious way will be to get rid of the N+1 issue and batch the requests

Each branch contains the Pokédex application in a working state and the codebase is sprinkled with comments STEP <number>. Just "search in all" for STEP 1 on branch firstQuery to start the workshop, then for STEP 2, when you're finished with firstQuery checkout to connections search for STEP 1 and so on.

Before starting you'll have to setup the development environment. You can either use the dockerized way, so:

docker-compose run phoenix mix deps.get
docker-compose run phoenix mix ecto.setup
docker-compose run phoenix yarn
docker-compose up
# Open localhost:4000 to see the application

or run the same commands on your localhost (but then remember you'll have to check whether DB config in config/dev.exs will work on your computer):

mix deps.get
mix ecto.setup
yarn
mix phx.server
# Open localhost:4000 to see the application

Who did it?

This workshop has been created by two friends for a workshop session during ElixirConf EU 2018 (which BTW was a blast!)

Stanisław Chmiela Łukasz Gurdek
Stanisław Chmiela Stanisław Chmiela
Software Mansion

pokedex's People

Contributors

sjchmiela avatar ukasiu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.