kell-stack / where-was-that-filmed

Film and Television buffs alike can now view where each of their favorite titles were filmed in San Francisco. Tech Stack: PostgreSQL, Express, React, Node · APIs: Google Map's Javascript API, Firebase Authentication REST API, Google Geocode API, DataSF API

Where Was That Filmed?

Table of Contents

• Installation
• Implementation
• Usage
• Resources

Installation

Node -v is 4.6.1 and npm -v is 11.9.0 From the root, head into the client folder

$ cd client

Then install node package manager.

$ npm install

Additionally, from the root head into the server folder

$ cd server

Then run nodemon

$ nodemon server

To run db, run postgresql and paste the contents of server/commands.sql to create table.

Then in another shell, run script to convert location strings from SF.gov to lat and lng from Geocode

$ cd server

$ node GeocodeScript.js

Implementation

I used data from https://data.sfgov.org/Culture-and-Recreation/Film-Locations-in-San-Francisco/yitu-d5am which provided me with a listing of filming locations of movies and tv series shot in San Francisco starting from 1924. The data was provided by and last updated on October 27, 2017 by the San Francisco Film Commission. *Note: This data was sanitized of tv shows' season and episode information as well as locations that were returned from Geocode as null or out of SF bounds

• React
• PostgreSQL
• Google Map's Javascript API
• Geocode
• DataSF API

Usage

Where Was That Filmed? allows film and TV buffs the chance to locate where their favorite scenes were shot in beautiful San Francisco. Browse all the locations and tweet us or tag us in your ig photos at @WhereWasThatFilmed with the hashtag #WWTF to share your recreation of iconic cinematic moments!

Future Features

I'd like to add the following to this project in the future:

• Use TMDB to gather and display more information about each title and actor
• Add Google directions capabilities
• Partner with SF Film Commision to improve data
• Add "email tour" capabilities
• Use the "fun_fact" column provided by SF.gov to send text messages with Twilio's API

Even further on:

• Add a section for instagram photos that were tagged with #WWTF
• Open the scope outside of SF to include other major cities

Resources

Thank you to the following authors' of the posts and videos that helped me create this

• React Apps with the Google Maps API and google-maps-react - @ngige_rachael

  • https://scotch.io/tutorials/react-apps-with-the-google-maps-api-and-google-maps-react

• React Firebase Authentication with Google Facebook Twitter Github Email *https://www.youtube.com/watch?v=zq0TuNqV0Ew

• TMDB

  • https://www.themoviedb.org/

where-was-that-filmed's Issues

CSS - Pagination Sizing

I'm having trouble making the pagination smaller so that it is responsive to different sized screen. right now it's in line block with two rows, but i'd like it as one row that is responsive to screen size.

Create GitHub Repo

• Give your project a title and create a GitHub repository with a README that includes what keys, installations, data, and anything else needed to get your code running.

Planning Your Project

• MVP
• One-sentence pitch
• Features
• User flows
• Wireframes
• Style guide
• Data model
• Prioritization

Database & Migration

• Set up your database and migration scripts.

Homepage Text appearing on all pages

The homepage text block is appearing in /Search, /AllActors and /AllTitles. I would like to only display it on the homepage.

Mentor Collabs

• Invite your mentor to be a collaborator on your project's GitHub repo.

Main Feature

• Start with the main feature

Marker Clustering

I would like to get marker clustering to work. Initially I was using the google maps docs for clustering but couldn't figure out how to translate it into React. Eventually i installed a few libraries and those all were duds

Select Project

• Select Your Project—brainstorm ideas, check feasibility, and select one to build.

Project Plan Doc

• Create a Google Doc with your name in both titles, the name of your project, the GitHub link, and all of the items in the "Planning Your Project" list above. Share with facilitators, mentors, and other participants.