Deployed Project

Overview

Art Party is how the most sophisticated, discerning art history buffs get their meme jollies. Simply click on your favorite oeuvre to get started! The goal of this project was to create a React application that allows users to browse through a collection of paintings and see what piques their interest! Users can click on a specific painting and view its details or create their own meme. If a user is particularly fond of their meme, they can save it to their gallery. The user can use the browser's forward and back arrows or click the home button/Art Party logo to return to the home page. We added in error handling for server-side and user errors.

Project Context

We are Mod 3 students in the Front-End Program at Turing School of Software and Design, which means we have been devs for 5 months! Art Party is our second React application.

Learning Goals for this project included:
✔️ Use at least one external API
✔️ Implement a “stretch technology”: Global State Management: React's Context API
✔️ Create a multi-page engaging UX using React Router

Link to Project Description

Demo

Setup

1. From your terminal, cd back to your parent directory
2. Clone down this repository:

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

3. cd into art-party directory and run:

npm install
npm start

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

Technologies Used

Future Features

• Add a user login page
• Add a POST for users to add their own paintings
• Add a way for user to edit existing memes and download them
• Zoom-in for existing memes

Dev Notes

Wins

• Excellent group dynamic and communication
• Navigating through merge conflicts and maintaining git workflow
• Take advantage of React's context to learn how it offers a way to share information across components, organizing it in a central location and ensuring that any component that requests it can access it (to prevent props drilling information into components).

Opportunities for growth

• Learning how to stub and intercept with Cypress testing
• Expanding our knowledge of Cypress syntax
• Practice using React hooks: useState & useEffect

Developed by:

Jedeo Manirikumwenatwe | [email protected] | Github | LinkedIn |

Morgan Berry | [email protected] | Github | LinkedIn |

Alycia Canavan | [email protected] | Github | LinkedIn |

Project planning & Acknowledgments

Project Board with User Stories |

• ZeroToMastery.io
• Jordan Sullivan
• John Boudreaux
• Meg McBride
• Shauna MacFarlane-Okongo