Home Lookup 🏠

A Full-stack Home Lookup application.

By Josh Hortt

version: 03/11/2022

Home Lookup 🎧 🔊 | Live Link

Technologies Used

JavaScript
React.js
Next.js
Tailwind
Prisma
Postgres
TypeGraphQL
Apollo Server & Apollo Client
Firebase
Auth
Hooks
Mapbox
Google Places
Cloudinary
Vercel
Visual Studio Code

External API's

Mapbox

Create account -> Get Token

  https://www.mapbox.com/

Create Token

Give it a name e.g. (home-lookup)
After deploy (optional) insert your URL in case you want Token restrictions applied.
Now Create Token --> Access Token
Copy & Paste (Key) into .env.local file of your project.

Firebase

Authentication -& Google Places

  https://firebase.google.com/

Create Project

Give it a name e.g. (home-lookup)
Enable Google Analytics on this project is optional (Recommended).
Click Create and then Continue.
After loading It will take you to the Project's Dashboard.
Go to left side Menu Build -> Authentication - Let's start
Choose sign-in providers (Email, Google, Github, Yahoo and so on..).
Enable -> Save -> then add new provider
Go to upper-right corner in settings --> General
Copy Web API key | project_ID | project_ID.firbaseapp.com
Paste key into .env.local file of your project.
Now back to firebase in Service accounts
Below click on generate new private key --> generate key
It will download a 'JSON' file. You can paste it into your projects root directory.
Remove this file after adding all the keys into your .env.local file.
Also don´t push it to github.
Go to the file you just downloaded and copy the private_key + client_email
Paste those keys into .env.local file of your project.

Google APIs

Authentication & Google Places

  https://console.developers.google.com/

IMPORTANT: You might have to register before all these steps on Google Cloud Free tier.

Search Project

See if project ID matches and is correct.
Go to API & Services
Go to Library
We need to enable 3 different services
Places API ! Maps Javascript API | Geocoding API
Go to API & Services activated - Check if serviçes activated

Cloudinary

Image Hosting

  https://cloudinary.com/

Dashboard

Go to Account Details
Copy API Secret | API Key | Cloud Name | and then paste
those into your .env.local file at the root of the ./ directory.

Heroku

Database

  https://heroku.com/

Dashboard

Go to New --> Create new app --> Overview
Installed add-ons --> Configure add-ons
Go to ass-ons search bar and look for Heroku postgres
Choose your Plan name e.g. Hobby Dev - Free --> Submit Order Form
After The add-on heroku-postgresql has been installed go to Settings
Go to Config Vars --> Reveal Config Vars it gives you a connection string
Copy and then paste into your .env.local file at the root of the ./ directory.

Setup Locally / Installation Requirements

Clone the project

  git clone https://github.com/Joshhortt/home-lookup.git

Go to the project directory

  cd home-lookup

Environment Variables

To run firebase, mapbox and cloudinary you will need to add the following
environment variables to your .env.local file at the root of the ./ directory.

NEXT_PUBLIC_MAPBOX_API_TOKEN="mapbox API Token goes here.."

NEXT_PUBLIC_FIREBASE_API_KEY="web api key goes here"
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="project_ID.firbaseapp.com"
NEXT_PUBLIC_FIREBASE_PROJECT_ID="project id goes here.."
FIREBASE_CLIENT_EMAIL="client email goes here.."
FIREBASE_PRIVATE_KEY="private key goes here.."

CLOUDINARY_SECRET="API Secret goes here.."
NEXT_PUBLIC_CLOUDINARY_KEY="API Key goes here.."
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="cloud name goes here.."

DATABASE_URL="your 'postgres://s.... ' database string goes here..."

Go to the root directory

  cd ....

Install dependencies

  npm install 

  or
  
  yarn install

Start the server

  npm run dev

  or 

  yarn dev

Known Bugs

Due to time constraints the site may not scale perfectly on every device.

Support and contact details

If you have any questions or find any issues with this web-application, get in touch. My email is: joshhortt@yahoo.com

Joshhortt/home-lookup