/nodejs-react-framework

Primary LanguageJavaScript

Code challenge

Create a service that shows on a map where movies have been filmed in San Francisco. The user should be able to filter the view using autocompletion search. The data is available on DataSF: Film Locations.

Links

Introduction

  • Tech stack

    • React+Node.js+MongoDB

  • As is specified in code chanllenge, the website is developed according to the basic functionality requirements.

  • Since I didn't have any experience related to React or Node.js programming before, this is the first Full-stack React + Node.js web application I have ever built. Your advice would be precious to me to make improvements. Thanks for taking time going through this document.

Functionality

Frontend (React)

 1. Display the map where movies have been filmed in San Francisco.
 2. Provide an autocompletion search bar for user to filter the moives.

Backend (Node.js)

 1. Collect {lat, lng} data with their addresses using Geocode.
 2. Prepare and process data to be displayed in frontend.

Design

The whole web application follows the standard MVC pattern and have RESTful API.

Project structure(exclude dependencies)

The project is built with express, which is a widely used web framework for Node.js .

  • models // Directory for the model files for collections in MongoDB.
  • controllers // Directory for controller files
  • views // Directory for HTML templates
  • src // Directory for JS source code
    • components // Directory for components
      • Banner.js // Bottom bar component
      • Gmap.js // Google Map component
      • Home.js // Home page component
      • styles.js // File which exports styles needed in other JS file
    • utils // Directory for saving those wrapper/helper classes
    • app.js // Entry point for my page
  • routes // Directory for routers
    • api.js // Router for API call to MovieController
  • app.js // Entry point for whole App

To be edited

Built With

TO DO LIST:

Add infowindow to each marker.