Overview: Destination: Banana is a web game built around the Wikipeida API. The goal of this project was to build an application around an API, complimented by technologies new we taught ourselves to use.

Check out the beta version here!

• fork this repo and clone it to your local machine
• cd into the repo
• npm install dependencies
• npm start to be automatically redirected to the site

+ (JSX and GSAP)

A significant accomplishment of our project was creating a game that leverages the Wikipedia API, where users navigate through hyperlinks to reach the goal page: "banana." This game demonstrated our ability to integrate and manipulate API data effectively, providing a user experience that is both engaging and educational. It showcased our technical skill, creativity, and problem-solving abilities. Successfully developing this game while exploring new technologies highlighted our commitment to learning and adaptation, fulfilling both the project's technical requirements and our personal growth objectives.

Our team faced challenges integrating GSAP and Styled Components into our React project, particularly because GSAP is not designed with React in mind. This mismatch required us to find workarounds for combining GSAP's animation features with React's virtual DOM, complicating the integration process. Despite these obstacles, we successfully navigated the complexities, enhancing our problem-solving skills and deepening our technical knowledge in the process.

Our future plans include adding more animations for a livelier user experience, introducing a stats page for deeper user engagement, improving accessibility for wider inclusivity, and conducting further refactoring for better code efficiency. These updates aim to enrich the application, making it more interactive, accessible, and enjoyable for all users.

• cd into the repo
• run npx cypress open to open the testing window
• Click E2E testing
• Select your prefered browser and click Start E2E Testing

We used Cypress to simulate user interactions to identify issues early. Cypress offers an end-to-end testing framework that allows us to test both happy and sad paths, ensuring our application behaves as expected under various conditions. This includes:

• Thorough testing of application views to ensure each page displays correctly.
• Comprehensive testing of user flows to confirm seamless navigation and functionality.
• Making specific assertions about the content within DOM elements to verify accurate rendering of information.
• Properly stubbing network requests to test interactions with external APIs without reliance on live data.
• Stubbing and testing asynchronous functionality to ensure both expected (happy path) and unexpected (sad path) outcomes are handled correctly.

Our testing approach, emphasizing coverage of both existing and new features, aligns with our objectives of mastering React and creating an intuitive user experience with Router.

• Adam Bedient
• Edwin Chalmers
• Tom Coney