Fiona-Waters / YarnSwapFE

YarnSwapFE

YarnSwap - Final Project Higher Diploma in Computer Science 2023

Project Name: Yarn Swap

Project Description:

Yarn Swap is a Progressive Web Application where crafters can list and view yarns and can swap or procure yarns from others that could otherwise be forgotten or wasted. This project is the frontend for the Yarn Swap Application.

The following technologies have been used in the making of Yarn Swap frontend:

• React
• Vite.js
• Chakra UI
• Storybook
• Cypress
• Github Action
• SendBird
• Firebase Authentication

Project Status: Deployed

• Red Hat OpenShift Cluster: http://yarnswap-fe-yarn-swap.apps.fwaters.uw4y.s1.devshift.org/ **This may not be currently running.
• The corresponding backend application is deployed here: http://yarnswap-yarn-swap.apps.fwaters.uw4y.s1.devshift.org/ **This may not be currently running.

Features

• Login via Google or Email.
• CRUD listing functionality.
• Upload image, with drag and drop functionality included in Add Listing functionality.
• Filtering/Searching on Dashboard and Listings pages.
• Swap functionality including Chat using SendBird.

Visuals

Dashboard:

Swaps:

User Profile:

Dark Mode:

Add Listing form:

Filter:

Setup Requirements:

• Clone this repo
• Open it in an IDE
• Provision a firebase account and add config as required.
• Run yarn
• Run yarn build
• Clone and run backend - https://github.com/Fiona-Waters/YarnSwap.
• run yarn serve

Information here can be supplemented by reading the full Yarn Swap Report Document:

• https://github.com/Fiona-Waters/YarnSwapFE/blob/main/FionaWaters-20095357-Project-FinalReport.pdf