React Full Stack Starter-Kit

A complete boilerplate with React + NextJS SSR, GraphQL API and Relay.

Project Structure

The top-level directly layout looks as follows:

.
├── packages/                   # Shared components (modules) managed by Lerna
├── api/                        # GraphQL API gateway
├── web/                        # NextJS website
├── lerna.json                  # Lerna configuration
└── package.json                # List of project dependencies

Tech Stack

• React for building component-based UIs (docs)
• NextJS for building SSR websites (docs)
• GraphQL and Relay for declarative data fetching and maximum performance
• Babel + Flow for modern JavaScript syntax with static type checking

Prerequisites

• Node.js v9 or higher + Yarn package manager
• Lerna a tool for managing JavaScript projects with multiple packages
• Watchman a file watcher used by Relay
• Docker Community Edition v17 or higher (only for the API project)
• VS Code editor (preferred) + Project Snippets, EditorConfig, ESLint, Flow, and Prettier plug-ins.

Getting Started

Start API

$ cd api
$ yarn                          # Install Node.js dependencies)
$ yarn start                    # Build and launch API service

Start WEB

$ cd web
$ yarn                          # Install Node.js dependencies)
$ yarn dev                      # Build and launch WEB service

Task

Setup

Database

• Create a new migration file using the yarn script

$ yarn db-change your-migration-name:

• Edit the newly created migration file to add the following 3 new columns to the properties table:

- land_surface (float)
- number_of_rooms (float)
- number_of_parkings (int)

• Run migration

$ yarn db-migrate

API

• Add new fields to PropertyType and PropertyInputType
• Update the validator and the migration to make the new fields work

WEB

• Create a form to upsert a property on this page (we recommend using Formik)
• Create a new page to display all created properties

Bonus

• Deploy the project somewhere on the web (AWS Labmda, Google Cloud Functions, Zeit, Heroku...)

Submit

• Send us a link of your repo
• Bonus: Send us a link to your deployed application

Mockups