📝 Abstract

The “Art Collector” project is built with TypeScript and React, it allows you to browse artworks from the Rijksmuseum in the Netherlands, learn about them, and even create your own gallery by saving your favorites. Designed with accessibility in mind, it ensures that everyone can enjoy the content. Additionally, it is thoroughly tested with Cypress, and our team has implemented robust error handling methods to address any issues that may arise.

🎥 Preview

📸 Screenshots

Home Page

Main Gallery

My Gallery

Error Handling

🛠️ Installation Instructions

To start the app

• Clone down the repository onto your local machine using git clone https://github.com/KyleMBoomer/art-collector
• Once cloned down, cd into the direction and install dependencies by running npm install
• Run npm start then visit the local host to view the application in your browser.

To test with Cypress

• Type npm install cypress --save-dev into your terminal
• Type npm run cy:open # in your terminal then visit the local host to view the application in your browser.
• Click E2E testing
• Click Start E2E Testing in Chrome

🛣️ Pre-Planning

Used Github Project for Pre-planning. here

⚽️ Learning Goals

• Gain hands-on experience with Typescript, Cypress and React.
• Develop a modular project structure.
• Utilize PR templates and a project board for efficient workflow management.

😰 Challenges

• Initially, our plan was to utilize the Harvard Museum’s API. However, we encountered multiple issues that led to the generation of inconsistent data sets. As a result, our team convened and dedicated several hours to researching and identifying a more reliable museum API.
• The learning curve with TypeScript in React was a bit steeper than the team had initially estimated. In addition, we had to learn new React hooks like useContext and createContext to make the My Gallery functionality work with regard to the Main Gallery fetch call from the Riksmuseum API.

🏆 Wins

• Successful implementation of Cypress testing over a modularized project in TypeScript feels like a win to us. We learned we needed to create fixtures that mirror the data structure from the API to pass our robust test suites.
• Creating the Types file, and passing them down as props to the components, felt like a win with TypeScript. The built-in "error handling" of the language kept us from making mistakes with our Types.

🙌 Contributors

🧔🏻‍♂️Jordan Williamson - LinkedIn
🙋🏼‍♀️Kim Ewing - LinkedIn
🎸Kyle Boomer - LinkedIn
🐵Seong Kang - LinkedIn