SF Film Locations is a small mobile-first web application where you can search for movies filmed in san francisco. It also displays additional information fetched from OMDb API like Poster, Rating... In the detail view in addition it displays a map with locations that could be geocoded with google maps API and a list of film locations with Google Maps Links.
- Angular 2 Single Page application
- redux for improved Data Flow and state management
- express.js backend service for API
- node.js for preparing the data and Backend Service
- Socrata API film locations are fetched from this API
- OMDb API additional information on the films
- Google Maps/Places API for geocoding location data into the films
- TravisCI for Continous Integration
- Heroku for hosting
- Code Climate for code analysis and coverage reports
- Sentry to log client and server side errors
For the frontend a combination of Angular2 and redux was chosen written in TypeScript. TypeScript simplifies the development by offering a nice auto completion and helps detecting errors earlier. Angular2 enables a good structure by dividing the app into components. It also has testability built in. Redux helps to keep state management simple by strictly adhering the unidirectional data flow. Currently the app is pretty small, but this is a good foundation if more features need to be added.
As the main focus of this project is the Frontend part the backend is a simple but not so bad express.js app written in plain JavaScript. It just offers an json REST API and loads the data from json files into memory. This is reasonable currently as there are not many movies in the db. In long term a dedicated DB should be used to also simplify scaling the app.
- node.js > 6
Run npm install in the root folder to install the dependencies.
Run npm start for a prod server. Navigate to http://localhost:3000/.
The project has to be built before by running ng build, see details below.
You can override the default port by setting the PORT environment variable.
This project was generated with angular-cli version 1.0.0-beta.21.
Run npm run dev for a dev server. Navigate to http://localhost:3000/.
Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng test --code-coverage true to also generate coverage files in coverage/index.html.
Run ng run test:server to execute the unit for the expressjs server.
Run ng e2e to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng run dev.
To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.
The project is built and tested on travis each time new code is pushed
On every successful build the app is deployed automatically to heroku.
See .travis.yml for details.
A very optimized AOT version of the frontend is deployed to the live server.
After a successful build code is analyzed and a coverage report is sent to code climate.
SODA_TOKEN=<your socrata key> node tools/prepare-data/load-data.jsthis will produce the file films-by-title.json
GOOGLE_MAPS_KEY=<yourkey> node tools/prepare-data/geocode.jsthis will produce the file locations.json
NOTE: Google has a limit of 2500 requests. So this step might fail. See solution below in improvements section.
As a workaround they can be generated locally and viewed as html
The import should be automated and only update new films to be production ready. Currently it fetches all the data all the time. This would also solve the google maps request limit.
- Add some wizard on initial pageload that explains the user what the app is about
- Add footer with legal information
- Add about page
- Render the initial page on the server with angular-universal to speed up page-load time
- add more progressive web app features
Use a Database instead of storing json files.