About

A fun web application which suggests films and animation genres based on your local weather and time of day.

Live Link

comfy.vercel.app

Features

• Displays film information like description, rating, and YouTube trailers in real-time
• Over 100 genre combinations generated by the recommendation algorithm
• Forward and backward pagination, and a shuffle button to offer a new set of recommendations
• Responsive across a variety of screen width sizes, including mobile devices

Technologies

UI

• React.js
• JavaScript
• Vercel
• MaterialUI
• axios

Services

• Node.js
• Express.js
• TypeScript
• Docker
• Google Cloud Platform
  • Cloud Run
  • Serverless functions
• Jest

Installation

Prerequisites

• Node.js (recommend 18.12.0 LTS)
• OpenWeather account with access to API Keys
• The Movie Database account with access to API Keys
• optional: Docker and Docker Compose for containerized services development

---

1. Clone the repository
2. Set up, configure, and build React UI
   • From root directory:
     $ cd ui/
   • Install dependencies:
     $ npm i
   • Important: Create environmental variables (local development):
     $ touch .env
     • Enter the following variables into .env and save:

       REACT_APP_WEATHER_ENDPOINT=http://localhost:4000/weather
       REACT_APP_MEDIA_ENDPOINT=http://localhost:4001/media
       REACT_APP_GENRE_ENDPOINT=http://localhost:4001/genre
       REACT_APP_CLOUD_FUNCTION_ENDPOINT={YOUR_SERVERLESS_FUNCTION_URL}
       

     • Note: By default, the React App will run on port 3000. Change this as needed by specifying a PORT variable in your .env file.
3. Set up and configure microservices
   • From root directory:
     $ cd services/
   • See the media-catalog-service README and the weather-service README for installation and development instructions
4. Deploy serverless-functions/index.js to a cloud function provider of your choice, or set it up as a basic HTTP server.

Quick Start

1. Start the React UI:

   • From root directory:
     $ cd ui/
$ npm start

2. Start backend services

   • From root directory:
     $ cd services/weatherservice
$ npm run dev or $ make build and $ make up

     $ cd services/mediacatalogservice
$ npm run dev or $ make build and $ make up

3. Access the UI in your web browser by visiting http://localhost:3000/

   • Note: Change port as needed if modified during installation.

Development Summary

This application consists of a React UI connected to a set of microservices and serverless functions, communicating via HTTP.

The backend services leverage the OpenWeather API and The Movie Database API for fetching weather events and movies, respectively. JavaScript's native navigator interface is used to fetch the user's geolocation data.

Data is cached in the browser on the UI layer to speed up navigation and prevent redundant HTTP requests. Higher order functions and custom React Hooks are used where available to modularize code and promote DRY principles.

Reporting Issues

Feel free to report any problems you experience or any suggestions using the Issues tab. Please provide as many details as possible in your report.

License

MIT