Yummy Phoenix GraphQL

This application can be used as starter kit if you want to get started building an app with Phoenix, React, and GraphQL. This is a simple cooking recipe sharing application using ordinary features which can be found in most web applications.

Technologies

Frontend

• TypeScript - A superset of JavaScript that compiles to clean JavaScript output.
• React - A JavaScript library for building user interfaces. It introduces many great concepts, such as, Virtual DOM, Data flow, etc.
• Create React App - is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
• Bulma - Bulma is a modern CSS framework based on Flexbox
• Apollo 2 - A flexible, fully-featured GraphQL client for every platform.
• React Final Form - High performance subscription-based form state management for React.

Backend

• Elixir 1.5
• Phoenix 1.3
• Erlang 20.0
• Absinthe - The GraphQL toolkit for Elixir.
• Graphiql - Graphiql is an in-browser IDE for exploring GraphQL.
• Arc - Flexible file upload and attachment library for Elixir.
• ExAws - A flexible, easy to use set of clients AWS APIs for Elixir. Use to store attachments in Amazon S3.
• PostgreSQL for database.

Features

• CRUD (create / read / update / delete) on recipes
• Creating comments on recipe page
• Pagination on recipes listing
• Searching on recipes
• Authentication with token
• Creating user account
• Update user profile and changing password
• Display comments and recipes in real-time
• Application ready for production

GraphQL Using

• Queries et mutations
• FetchMore for pagination
• Using apollo-cache-inmemory
• Apollo Link (dedup, onError, auth)
• Subscription
• Managing local state with Apollo Link
• Optimistic UI
• Static GraphQL queries
• Validation management and integration with Final Form
• Authentication and authorizations
• Protect queries and mutations on GraphQL API
• Batching of SQL queries backend side

Prerequisites

• Erlang 20 (Installing Erlang
• Elixir 1.5 (Installing Elixir)
• Phoenix 1.3 (Installing Phoenix)
• Node 9.2 (Installing Node)
• ImageMagick 7
• PostgreSQL
• Ruby only for integration tests with FakeS3

Getting Started

• Checkout the yummy git tree from Github

      $ git clone https://github.com/MatthieuSegret/yummy-phoenix-graphql.git
      $ cd yummy-phoenix-graphql
      yummy-phoenix-graphql$
  

• Install dependencies :

      yummy-phoenix-graphql$ mix deps.get
  

• Create and migrate your database :

      yummy-phoenix-graphql$ mix ecto.create && mix ecto.migrate
  

• Load sample records:

      yummy-phoenix-graphql$ mix run priv/repo/seeds.exs
  

• Start Phoenix endpoint

      yummy-phoenix-graphql$ mix phx.server
  

• Run Yarn to install javascript package in other terminal:

      yummy-phoenix-graphql$ cd client
      yummy-phoenix-graphql/client$ yarn
  

• Start client in development mode. You should be able to go to http://localhost:3000 :

        yummy-phoenix-graphql/client$ yarn start
  

Testing

Integration tests with Wallaby and ChromeDriver. Instructions:

1. Install ChromeDriver with npm install -g chromedriver
2. Run ChromeDriver in a new terminal window with chromedriver &
3. Install FakeS3 with gem install fakes3. Fake S3 simulate Amazon S3. It minimize runtime dependencies and be more of a development tool to test S3 calls.
4. Run FakeS3 in a new terminal window with fakes3 -r $HOME/.s3bucket -p 4567 &
5. Build your assets with cd client && yarn build
6. Run tests with mix test

Next step

• Batch of GraphQL queries into one HTTP request
• Create mobile app with React Native

Screens

Listing recipes

Editing recipe

Recipe page

License

MIT © Matthieu Segret