Wish You Were Here

Deployable

• Deploy Link

Getting Started

1. Clone the repo from github

2. Cd into the directory from your terminal and install the project dependencies:

• Run npm install or npm i in the terminal

3. To see the web app:

• Run npm start in the terminal
• Press ctrl/cmd + c to exit

4. Copy the local host address from your terminal and add to your web browser to see the web app

Table of Contents

• About the Project
• Contributors
• Technologies Used
• Instructions on Use
• Demo of Features
• Testing the app
• Challenges and Wins
• Project Overview and Goals
• Future Additions

About the Project

Wish You Were Here was a project inspired by the limitations of remote learning and the nostalgia of a class photo.

This was part of Turing School of Software & Design module3 group project where we were encouraged to implement new technologies that we learned independently. This was meant to demonstrate our ability to self-teach new technologies in a short amount of time. It also showcases our ability to ask questions and struggle through new problems with other developers.

Contributors

• Zach Saile
• Alex Bumpus
• Eli Davidson
• Kal Al-Rajhi

Technologies Used

• React
• Javascript
• HTML
• CSS
• React Router
• Cypress
• Express
• Fabric-js
• Socket.io
• Canvas API
• RemoveBG Api

Instructions on Use

Login The user is initially asked to login with a name, preferred pronouns, and email address. All but the name are optional.

Chat A live chat is available for users to see who's on and interact with each other.

_Insert Photo and Drag, Drop, and Scale Photo Users are encouraged to take a photo by pressing the blue cheese button. Once pressed, the gallary will be immedietly populated with the photo. Multiple photos can be stored in the gallery. If a user is satisfied with a photo they've taken, they can insert it into the group photo stage. Once the photo is in the group photo stage, users can drag, drop, and scale their images - live with other users.

Delete Photo If a user doesn't like their photo, they can delete it from the gallery.

Download Group Photo Finally, if a user is satified with the group photo they can download it for keepsake.

Logout Users can logout and login as a different user if they choose.

Testing the App

End-to-end testing was implimented to test the application by using Cypress. Stubbing and intercepting was used to control the network response. The app was fully tested based on the user story from start to finish.

Challenges and Wins

Challenges

• Getting a live photo to render via canvas API.
• Overcoming imposter syndrome when it comes to learning new technologies.
• Finding documentation on the fabric.js react package

Wins

• The first time we got an image to appear on screen
• Getting the chat function to work between clients
• Implementing a divide & conquer approach to complete features asynchronously
• Take a more modern approach to React by using hooks

Project Overview And Goals

• Use OOP to drive the design of the application and the code
• Gain further competency with React
• Build a robust test suite using Cypress for E2E testing
• Implement asynchronous JavaScript
• Learn a new technology: socket.io

Future Additions

• Convert the app into a progressive web app (PWA)
• Multiplatform responsive design