search

em2396 / rancid-tomatillos

1 stars 1 forks source link

readme

Rancid Tomatillos ![Tests](https://badgen.net/badge/tests/passing/green?icon=github) ## 💾 Technologies Used ![React](https://img.shields.io/badge/React-blue ) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white) ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) ![Cypress](https://img.shields.io/badge/Cypress-yellow ) ## 👩‍💻 👩‍💻 👨‍💻 👩‍💻 Collaborators [Emalee Poellot](https://github.com/em2396) | [Amy Siu](https://github.com/amysiu1028)

💭 Abstract

"Rancid Tomatillos" is a web application designed to provide users with a comprehensive movie exploration experience, similar to popular platforms like Rotten Tomatoes. The application allows users to browse through a curated collection of movies, view detailed information about each movie, watch trailers or clips, and access reviews to make informed decisions about their movie choices.

📝 Context

We are a pair of 2 front-end developers who worked together remotely via Zoom and asynchronously through the GitHub project board to complete this application. This project was completed from week 1 to week 3 in Mod 3 of the Front End development program at Turing School of Software & Design.

🎥 Preview

https://github.com/em2396/rancid-tomatillos/assets/140124108/3e875be8-3e6d-458e-bb04-cc21392457f9

🔌 Server Setup

  1. Clone the repository: Open a terminal window. Navigate to the directory where you want to clone the repository. Run the following command: git clone git@github.com:em2396/rancid-tomatillos.git
  2. Install the dependencies: Run the following command in the cloned repository directory: npm install
  3. Run the React app: Run the following command in the cloned repository directory: npm start
  4. Open the app in your web browser by navigating to http://localhost:3000

📚 Learning Goals

🥇 Wins

⭐ Successfully using React for the first time while including refactoring for router ⭐ Working collaboratively as a team to overcome any obstacles and combining our knowledge to create a successful app ⭐ Successfully implement cypress testing

🚧 Challenges

❗ Using Cypress for the first time was challenging and difficult to wrap our heads around the syntax compared to previously using mocha and chai. ❗ At first, the CSS was challenging and the responsive design was being difficult because of our code. We got it working through using an event listener.