/image-carousel-component

Image carousel component for real estate listing page

Primary LanguageJavaScript

image-carousel-component

Image carousel component for real estate listing page

component-screen-capture

This repository contains the source for a single component of a real estate listing page built with a microservice architecture. The component is designed as a full stack service and includes a database and web server which serves a client application and a restful api. The API provides different image links to the client depending on a listing id number.

For this project, a team of developers each contributed individual components which were combined into a full listing page. To view the complete listing application, check out the related listing page repo.

Readme Contents

Related Repositories

Requirements

External API Key

Key Dependencies

Development Setup and Server Provisioning

  1. Create a server instance to run the project on - Ubuntu Server 18.04 LTS is recommended
  2. On the server, allow traffic on ports 22 for SSH and 80 for HTTP access
  3. Connect to the server via SSH and run git clone https://github.com/Team-Elysium/image-carousel-component to retrieve the project repo
  4. Navigate into the repo with cd image-carousel-component
  5. Run sudo chmod +x deployment/deploy.sh && sudo deployment/deploy.sh to run the deployment script and provision the server. This script will do the do the following:
    • Create config.js with a MapBox API key
    • Install MongoDB, Node.js and npm
    • Install npm Forever process manager module globally to run server
    • Install npm dependencies
    • Populate database with randomized real estate listing image links
    • Run Webpack to transpile React application
    • Make rc.local script executable and copy to /etc directory so web server starts on server restart
    • Run rc.local to map port 80 to 3000, start MongoDB and Express.js web server using Forerver process manager

This project serves randomized listing images based on id numbers from 0 to 99 with fancier listing images appearing at higher numbers. With the web server up and runing, direct a browser to endpoints /0 to /99 to view carousels with a variety of images.

Performance Optimizations

One project goal was to minimize dependence on external css and javascript libraries to reduce the amount of code served to the client. Other team members used libraries like Bootstrap and jQuery to build their components but adding minified versions of those two libraries alone requires the user to download roughly 62.4KB in addition to a minified React application for a total of ~100KB, just for a single component's CSS and Javascript. By bundling and minifying project javascript and dependencies using webpack, all CSS and Javascript for this component is served in 3 files totalling ~50KB.

Google's Lighthouse performance auditing tool was used to assess the service's performance in terms of time to serve assets and general web app best practices. Amazon Web Services was used to deploy and test the application - to test performance, Amazon's AMI imaging service was used to create two identical servers for AB testing.

  • Initial Performance

    • Initial measurements made with Lighthouse revealed that mobile performance on a 3G network was quite poor and that enabling text compression with gzip could minimize the number of bytes served:

      performance-1

  • Implementing gzip compression

    • The node module compression was used as Express.js middleware to compress text files and Lighthouse showed that a First Contentful Paint could be achived ~10s faster:

      performance-2

  • Using webpack production bundling

    • Even with gzip compression, the main application file bundle.js was still the largest resource slowing page load. The project's React components were being transpiled into bundle.js using the webpack command webpack -d --watch to create a bundle that would be updated as source files changed and transpiled in to a human readable development file. By running webpack with webpack -p it is possible to create a minified bundle for production. This decreased the uncompressed size of bundle.js from 2.43 MB to 148KB - more than an order of magnitude. With a minified and compressed bundle.js the time to First Contentful Paint was reduced to 1.5s:

      performance-3

  • Additional optimizations

    • Further optimized performance could be achived by compressing static files on the server and serving static content with a reverse proxy server layer such as Nginx. Additionally, webpack was used to minify bundle.js files but the two project stylesheets could also be combined and minified also using webpack.

API Documentation

This project includes a restful API to provide image URLs to the component. For documentation please view:

Image Carousel API Documentation

Visual Comparison

The New York City real estate website streeteasy.com was used as a model for the project. The following screenshots show the degree of similarity achived and greater development time would further reduce visual differences:

Desktop View:

Reference:

desktop-view-reference

Project:

desktop-view-project

Modal View:

Reference:

modal-view-reference

Project:

modal-view-project

Mobile View:

Reference:

mobile-view-reference

Project:

mobile-view-project

Authors

Acknowledgments

References