Abstract

Art Collector allows a user to browse artwork from the Rijksmuseum in the Netherlands, learn about them, and even create their own gallery by saving their favorites. Designed with accessibility in mind, Art Collector ensures that everyone can enjoy the content. Additionally, Art Collector was thoroughly tested with Cypress, and our team implemented robust error handling methods to address any issues that may arise.

Check out our project HERE

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.

Contributions

Jordan Williamson - LinkedIn
Kim Ewing - LinkedIn
Kyle Boomer - LinkedIn
Seong Kang - LinkedIn