daltobello / stretch-tech

The Met Gallery

Stretch Tech - Global State Management (Redux)

Deployed Link

Abstract

The Met Gallery is an immersive virtual museum experience, granting users access to a curated selection of the Metropolitan Museum of Art's European Paintings collection. Dive into a world of timeless masterpieces. This project's primary objective was to create a React application with global state management via Redux Toolkit. Users can click on a painting to delve into its details, save their favorites, and conveniently review their cherished artworks. The application provides smooth navigation, supporting users with browser history controls, and ensures a consistent experience through comprehensive error handling for both server-side and user-related issues.

Contributors

• Devin Altobello
• Johann Dee
• Patrick Eitel
• Prissilla Escobar

Tech Stack

Preview

More Images

Goals

- Use an external public API
- Implement Global State Management using Redux
- Create a multi-page UX using Router
- Use a consistent, modular file structure
- Maintain well-structured code with minimal redundancy
- Write robust tests using Cypress

User Stories

Users should be able to:
- View all artwork
- Click on a given artwork and view details about the artwork
- Favorite a specific artwork
- Click on "favorites" in the nav bar and view saved artworks
- See errors if there are server errors

Setup

1. Clone down this repository:

https://github.com/daltobello/stretch-tech

2. cd into stretch-tech directory and run:

npm install
npm start

3. Enter the following url in your browser: http://localhost:3000/