idnan-haider / fullstack-graphql-airbnb-clone

A Fullstack GraphQL Airbnb Clone with React and React Native

fullstack-graphql-airbnb-clone

A Fullstack GraphQL Airbnb Clone with React and React Native.

• Branches are in the order they were coded.
• Watch how this was made: https://www.youtube.com/playlist?list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s
• This builds off the GraphQL Typescript Server I made: https://github.com/benawad/graphql-ts-server-boilerplate.
• You can see the YouTube Playlist for how that was made here: https://www.youtube.com/playlist?list=PLN3n1USn4xlky9uj6wOhfsPez7KZOqm2V
• Join the Discord: https://discord.gg/Vehs99V

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

2. cd into folder

cd fullstack-graphql-airbnb-clone

3. Download dependencies

yarn

4. Start PostgreSQL server
5. Create database called graphql-ts-server-boilerplate

createdb graphql-ts-server-boilerplate

6. Add a user with the username postgres and and no password. (You can change what these values are in the ormconfig.json)

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

CREATE EXTENSION IF NOT EXISTS "uuid-ossp";

8. Install and start Redis

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

10. Run yarn build in packages/common

11. Run yarn build in packages/controller

12. 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