kiwicom / wkshp-bucket-list-travel-app

Workshop in Budapest on 23/05/2019

Bucket List Travel App - Workshop

Workshop given on 23/05/2019 by @JoseDuSV and @RobinCsl in Budapest, Hungary 🇭🇺

Meetup Event Page

Prerequisites

• Node v11.15.0
• Yarn v1.15.2

In addition, if you would like to work with the mobile version, make sure you have set up your development environment to that end, by following these guides:

• Getting started guide for Expo
• Getting started guide from React Native docs

Getting started

First, clone the repository:

git clone [email protected]:kiwicom/wkshp-bucket-list-travel-app.git

Go into the resulting folder:

cd wkshp-bucket-list-travel-app/

Create .env file and set GRAPHQL_URL to https://bucket-list-workshop-graphql.josedusv.now.sh/graphql (see .env-sample):

GRAPHQL_URL=https://bucket-list-workshop-graphql.josedusv.now.sh/graphql

Install the dependencies by running

yarn install

Note: you must use Yarn to install dependencies because this repository makes use of Yarn workspaces; using npm will not work correctly.

To run the web version, use the web script:

yarn web

and go to http://localhost:3000 to see the result.

To run the mobile version, use the mobile script:

yarn mobile

and press d to open Expo DevTools. Use these dev tools to run the app on your Android emulator/device or on your iOS simulator.

🎉 Congratulations, you successfully ran the project!

Going through the workshop

If you followed the previous instructions, you are running the app from the master branch of this repository. That means you can see what the final app looks like. Take your time to try and play with it to get a feel for what you will need to do later.

This workshop is divided in 5 steps. Each step aims at showing you one aspect of cross-platform development with React Native and React Native Web.

You will need to switch to the step's branch to see the instructions in the README file as well as have the correct starter files for that step.

• Step 0: Intro to React Native

git checkout step-0

• Step 1: Cross-platform navigation

git checkout step-1

Note: have a look at the HINTS.md file if you need some pointers.

• Step 2: Intro to GraphQL + Relay

git checkout step-2

• Step 3: Using Storybook on mobile and web

git checkout step-3

• Step 4: A little puzzle

git checkout step-4

Note: have a look at the HINT.md file if you need some pointers.

Warning: There are no "solutions" branches; the steps sort of build into each other, which means you could switch to the next branch to see how you could have solved the previous one. There are no explanations available at the moment; feel free to post an issue and ask if something seems unclear.

wkshp-bucket-list-travel-app's Issues

Pin dependency regarding react-navigation

During the workshop, there was an issue for Windows users related to react-navigation.
A participant had found that pinning this dependency solved the issue.

Need to add this change to master branch and rebase all the steps on it.

Using this workshop

Thanks for taking the time to do this workshop.

Can you add a readme explaining how to work through it?

Also, are there solutions to the steps? I notice that step-0-1-2 and final search.js are the same.

Thank you.