The Bananalyst 🍌🎬

A banana themed movie review site. View popular movies, suggested movies, and reviews for any movie written by fellow Bananalysts. View the live site here

Table of Contents

• Overview
  • Summary
  • Demo Video
  • Team
• Getting Started
  • Setup
  • Project Structure
• Contributing
  • Making Changes
  • Committing Changes
  • Making Pull Requests
• Documents and Artifacts
  • Code Coverage

Overview

Summary

This project was developed as part of CSC 307 Intro to Software Engineering instructed by Professor Bruno da Silva. Technologies used in this project are React on the frontend, Node.js and Express on the backend, and MongoDB for the database. Development took place over three sprints (two weeks each). We went through the entire software development lifecycle from planning and design to implementation and deployment. We also implemented CI/CD with Github Actions and Azure.

Key Features:

• Search and view movies
• Create an account
• Write reviews for movies
• View other reviews
• View popular and suggested movies
• Banana puns

Demo Video

Video on Youtube

Team

The Bananalyst team consists of 4 Cal Poly students. The team members are listed below:

• David Hernandez
• Jonathan Laksana
• Ben McMann
• Rhys Pulling

🍌Why are bananas never lonely? Because they hang around in bunches.🍌

Getting Started

Here is all you need to know to setup this repo on your local machine to start developing!

Setup

1. Clone this repository git clone https://github.com/bbmcmann/307MovieProject.git
2. Change directories into the /frontend subfolder
3. Run npm i in the frontend subfolder of the repository
4. Change directories to /backend subfolder
5. Run npm i in the backend subfolder of the repository
6. Install IDE Extensions
   • Prettier
7. Enable format on save in your IDE
   1. Click the settings button in the bottom left
   2. Search "formatter" and set your default formatter to Prettier
   3. Search "format on save" and click the checkbox
8. Reach out to an existing developer for environment variables
9. Verify by running npm start in the frontend folder and npm run dev in the backend folder

Project Structure

• .github Github Actions CI/CD
• backend Root folder for backend API - index.js Top level file
  • models Schema definitions for data
  • routes Express endpoint definitions and controllers
  • tests All test cases for functions
• frontend Root folder for React app
  • public Assets for frontend
  • src Frontend code - App.js Top level React component
  • components All React components
  • static Assets for frontend
  • styles All CSS

Contributing

Here are all of the steps you should follow whenever contributing to this repo!

Making Changes

1. Before you start making changes, always make sure you're on the main branch, then git pull and npm i on both frontend and backend to make sure your code is up to date
2. Create a branch git checkout -b <name-of-branch>
3. Make changes to the code
4. npm run test in the backend and frontend subfolder to ensure code standards. (running npx prettier --write . will fix most of the styling errors)

Commiting Changes

When interacting with Git/GitHub, feel free to use the command line, VSCode extension, or Github desktop. These steps assume you have already made a branch using git checkout -b <branch-name> and you have made all neccessary code changes for the provided task.

1. View diffs of each file you changed using the VSCode Github extension (3rd icon on far left bar of VSCode) or GitHub Desktop
2. git add . (to stage all files) or git add <file-name> (to stage specific file)
3. git commit -m " <description>" or git commit to get a message prompt
4. git push -u origin <name-of-branch>
5. Check the Github Actions page to ensure all workflows are successful

Making Pull Requests

1. Go to the Pull Requests tab on github.com
2. Find your PR, and provide a description of your change, steps to test it, and any other notes.
3. Link your PR to the corresponding Issue
4. Request a reviewer to check your code
5. Once approved, your code is ready to be merged in 🎉

Documents and Artifacts

• UI Prototype on Figma Last updated 10/20/22
• Class Diagram Last updated 10/31/22
• Sequence Diagram Last updated 11/28/22
• Deployed Backend

Code Coverage

Last generated 12/1/22 8:00PM

🍌Why did the banana go out with a prune? Because he couldn’t find a date.🍌