In this project, our team was tasked with creating an app of our own design, using a technology that we had to teach ourselves. We chose to use React Context API for global state management to create Salon, an app which simulates the art museum experience.
The artwork was sourced from the Metropolitan Museum of Art Collection API. https://metmuseum.github.io/
Project spec -> https://frontend.turing.edu/projects/module-3/stretch.html
- Learn React Context API through an app of our design.
- Create multipage app using Router.
- Make network requests to API endpoints to retrieve and manipulate data.
- Use Object Oriented Programming (OOP) to drive the design of the application and the code.
- Create a test suite using Cypress that thoroughly tests all the functional aspects of the application.
- Ensure the app is following best accessibility practices.
- Leverage SASS to DRY up CSS.
- Make the app responsive so that content can be viewed on all devices.
View the code -> https://github.com/mattumland/Salon
Low fidelity wireframes allowed us to map out the user flow and create proof-of-concept images for our salon layouts. We tested all user stories with our wireframes/prototypes to ensure that our designs catered to the needs of our users.
While many museums post their collections online, we wanted to breakdown the barrier of searching through a large database of art by generating 'psuedo-curated' displays centered around randomly selected themes. These displays are presented in a layout reminiscent of a classic salon style. Users can generate a new wall display with the click of a single button.
Clicking on an artwork reveals a high quality image of the piece along relevant details. From this view, users can add the art to their favorites list.
The favorites view allows users to see all of their saved artwork. Each image also functions as a link to the corresponding detail view.
Error handling was considered when building the website. A loading screen will appear when any content is still rendering. Error messages are displayed when they are returned from the API and in other specific edge cases.
Salon received a 100% from Lighthouse on Accessibility. Users can tab throughout the full application, making it accessible for those using keyboards to navigate through.
LinkedIn: https://www.linkedin.com/in/matt-umland-he-him-4264455b/
github: https://github.com/mattumland
LinkedIn: https://www.linkedin.com/in/reggie-thompson-136979
github: https://github.com/rdtho2525
LinkedIn: https://www.linkedin.com/in/chuck-morris-56819918/
github: https://github.com/percworld