lspdv / jsweekend

Project for attendees of https://jsweekend.cz

JS Weekend

An intensive weekend React workshop with Kiwi.com developers

About

See our website: https://www.kiwi.com/jsweekend/

The goal of this workshop is to show you some great tools and best practices for building React application. During two weekend days you'll learn how to fetch data with Relay Modern from GraphQL backend, enrich Javascript with static types due to Flow, write test, create re-usable React components and setup continuous deployment.

The workshop is divided into four blocks plus one short introduction. Each block corresponds to a directory containing the desired source code we'll try to create.

Installation

There are no complicated dependencies. All you need is Node.js and Yarn installed, everything else will be installed from NPM.

Table of Contents

• Requirements
• How to install
• Where to start
• Technologies used

Requirements

This project requires the following to be installed.

• Node.js 8+
• Yarn

How to Install

If you have everything from Requirements then you can simply run: yarn.

This project uses Yarn Workspaces so all the project dependencies for all the folders will be installed automatically.

In each block/directory, you'll find a working application. Check out the readme file if you want to run it.

Where to start

The application you should start with is in a directory start. Feel free to make all your changes here.

All other folders contain ready made parts of our final application. If you get stuck or can't keep up you can use the code from these folders to help yourself catch up with the rest or see how we've handled a problem you may have come across.

Technologies

Here you can find a list of technologies we use everyday that we would like to show you. The JSWeekend workshop is focused on teaching you some of the know how and best practices we have come to with these technologies.

Main technologies:

• NextJS
  • Serverside rendering for React
  • Easy to use Framework for creating a React focused application with routing sorted out
  • Made by Zeit.co
• React
  • JavaScript library for building user interfaces
  • Made by Facebook
• Relay
  • Javascript library for communicating with GraphQL
  • React components for handling network calls
  • Made by Facebook
• Styled-JSX
  • Library for CSS-in-JS
  • Made by Zeit.co
• Storybook
  • Library for showcasing components
• Jest
  • Library for testing
• Flow
  • Library for static type checking
• ESLint
  • Library for enforcing code style
• Prettier
  • Opinionated and automating code styling
  • Let a extension handle formatting for the entire team automatically
• Cypress
  • End to end testing in JS