To get started with this app:
- Clone the repo from GitHub.
- Cd into the directory from your terminal and install the project dependencies with
npm install
. - To view the web app, run
npm start
in the terminal. - Copy the local host address from your terminal into your web browser to view the app.
- About the Project
- Contributors
- Technologies Used
- Instructions on Use
- Application in Action
- Testing the App
- Challenges and Wins
- Project Overview and Goals
- Future Additions
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.
- JavaScript
- React
- react-dom
- react-router-dom
- Fabric.js
- fabric
- fabricjs-react
- Express.js
- socket.io
- socket.io-client
- axios
- form-data
- uuidv4
- cors
- @testing-library/react
- @testing-library/jest-dom
- @testing-library/user-event
- Cypress
- Web Vitals
- react-scripts
- ESLint
- Browserslist
- Node.js (v17.2.0)
Users begin by logging in and can then interact through a live chat, take and edit photos, and participate in creating a group photo.
Cypress was used for end-to-end
testing, including stubbing
and intercepting
to control the network response.
- Implementing live photo rendering with Canvas API.
- Learning new technologies with minimal documentation available.
- Real-time chat functionality.
- Collaborative photo editing with live updates.
- 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.
- Transition to a Progressive Web App for offline use.
- Enhance responsive design across various devices.