/fullstack-graphql-airbnb-clone

A Fullstack GraphQL Airbnb Clone with React and React Native

Primary LanguageTypeScriptMIT LicenseMIT

fullstack-graphql-airbnb-clone

A Fullstack GraphQL Airbnb Clone with React and React Native.

Packages

This project is made up of 5 packages that share code using Yarn Workspaces.

  • web (React.js website)
  • app (React Native app)
  • server (GraphQL Typescript server)
  • common (Code shared between web, app, and server)
  • controller (Components shared between web and app)

Installation

  1. Clone project
git clone https://github.com/benawad/fullstack-graphql-airbnb-clone.git
  1. cd into folder
cd fullstack-graphql-airbnb-clone
  1. Download dependencies
yarn
  1. Start PostgreSQL server
  2. Create database called graphql-ts-server-boilerplate
createdb graphql-ts-server-boilerplate
  1. Add a user with the username postgres and and no password. (You can change what these values are in the ormconfig.json)

  2. Connect to the database with psql and add the uuid extension:

CREATE EXTENSION IF NOT EXISTS "uuid-ossp";
  1. Install and start Redis

  2. In packages/server create a file called .env and add the following line inside: FRONTEND_HOST=http://localhost:3000

  3. Run yarn build in packages/common

  4. Run yarn build in packages/controller

  5. Get Google Maps API key and put it here https://github.com/benawad/fullstack-graphql-airbnb-clone/blob/master/packages/web/public/index.html#L14 Videos doing that: https://youtu.be/-QQnzDVcTCo and https://youtu.be/xLlIgokKiLc

Usage

  1. Start server yarn start in packages/server

  2. Now you can run yarn start in packages/web or packages/app to start the website or app.

  3. How to get credentials working in graphql playground: https://youtu.be/oM-EmNdhwI4?t=8m39s

Deploy

Server

  1. https://www.youtube.com/watch?v=qQAozc1MkdU
  2. https://www.youtube.com/watch?v=0t-rE5wUP-E

Website

  1. https://www.youtube.com/watch?v=FiU3SHEaFwk
  2. https://www.youtube.com/watch?v=vPu1sfuYFzw
  3. https://www.youtube.com/watch?v=Ry6Zobb-kaw

Features

  1. Website register/login
  2. Deploy backend and frontend
  3. App register/login
  4. Website and App forgot password
  5. Website and App create listing
  6. Website and App view listings
  7. logout
  8. Website chat