Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benawad/fullstack-graphql-airbnb-clone
A Fullstack GraphQL Airbnb Clone with React and React Native
https://github.com/benawad/fullstack-graphql-airbnb-clone
graphql nodejs react-native reactjs typescript
Last synced: 3 days ago
JSON representation
A Fullstack GraphQL Airbnb Clone with React and React Native
- Host: GitHub
- URL: https://github.com/benawad/fullstack-graphql-airbnb-clone
- Owner: benawad
- License: mit
- Created: 2018-06-11T12:33:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-15T05:08:52.000Z (almost 2 years ago)
- Last Synced: 2025-01-11T17:05:56.283Z (10 days ago)
- Topics: graphql, nodejs, react-native, reactjs, typescript
- Language: TypeScript
- Size: 785 KB
- Stars: 1,684
- Watchers: 71
- Forks: 447
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - fullstack-graphql-airbnb-clone
README
# 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](https://medium.com/coding-blocks/creating-user-database-and-adding-access-on-postgresql-8bfcd2f4a91e) with the username `postgres` and and no password. (You can change what these values are in the [ormconfig.json](https://github.com/benawad/graphql-ts-server-boilerplate/blob/master/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