Wish You Were Here

Deployable

• Deploy Link

Getting Started

To get started with this app:

1. Clone the repo from GitHub.
2. Cd into the directory from your terminal and install the project dependencies with npm install.
3. To view the web app, run npm start in the terminal.
4. Copy the local host address from your terminal into your web browser to view the app.

Table of Contents

• About the Project
• Contributors
• Technologies Used
• Instructions on Use
• Application in Action
• Testing the App
• Challenges and Wins
• Project Overview and Goals
• Future Additions

About the Project

Wish You Were Here allows users to create a collective virtual photo reminiscent of a class photo, designed during a time when remote interaction was prevalent.

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
• Remove.bg API

Instructions on Use

Users begin by logging in and can then interact through a live chat, take and edit photos, and participate in creating a group photo.

Application in Action

Login

Live Chat

Photo Interaction

Delete Photo

Download Group Photo

Logout

Testing the App

Cypress was used for end-to-end testing, including stubbing and intercepting to control the network response.

Challenges and Wins

Challenges

• Implementing live photo rendering with Canvas API.
• Learning new technologies with minimal documentation available.

Wins

• Real-time chat functionality.
• Collaborative photo editing with live updates.

Project Overview and Goals

• Embrace object-oriented programming and React component structure.
• Develop robust Cypress tests for end-to-end coverage.
• Practice asynchronous JavaScript and integrate new technologies such as socket.io.

Future Additions

• Transition to a Progressive Web App for offline use.
• Enhance responsive design across various devices.