Skip to content

Latest commit

 

History

History
237 lines (137 loc) · 5.5 KB

final-presentation-week12.md

File metadata and controls

237 lines (137 loc) · 5.5 KB

Final Project Presentation

Build Sprint 2

Team

  • Chisha - DevOps / Developer 🖥️
  • Jo - User Experience / Developer 🖌️
  • Nafisa - Quality Assurance / Developer ✔️
  • Chun - Scrum Facilitator / Developer 📋

FAC Final Project: TeleGran 🧓

telegran.netlify.app/

Project Overview -

  • TeleGran was created to support elderly people who struggle with the UI of traditional messaging platforms.

✨ 💌

  • It's a full stack web application built in React that serves message data from a Slack workspace, using a RESTful API that is built in Express.

Original Design

Figma

What We've Achieved - Chun

https://docs.google.com/spreadsheets/d/1BdTd_8NZ0Ap0MPvyR2PvcSAN7FNQeox44xY42ZnEB4A/edit#gid=0

🔧 Week 2: First Build Sprint

By the end of the first build sprint, we had accomplished the following:

  • Initial set up of filebase using React
  • Wrote UI tests using Cypress
  • Set up React router for for the front-end to serve different pages
  • Proxy requests from React application to server when running locally.
  • Able to write messages to Slack from our app.
  • Implement speech-to-text functionality

🔨 Week 3: Second Build Sprint

By the end of the second build sprint, we were able to :

  • Deploy frontend and backend from a monorepo
  • Use Styled Components for CSS across the app
  • Retrieve messages from Slack using our API endpoint
  • Send messages to Slack that have been written using the speech-to-text function.

Sprint Velocity

Estimates + Actuals

64 v 135

https://github.com/fac21/final-project-telegran/projects/1

RECAP SPRINT 1 STACK - CHISHA

Initial thoughts: Next.Js vs REACT

Final thoughts: REACT with Node.js

Final Tech Stack

tech-stack

Dependencies

Client side:

  • @react-hook/window-size - for the confetti 🎉
  • node-fetch - for fetching from our API routes
  • react-confetti - for the success page 🎈
  • react-router-dom - for changing the URL for different pages
  • react-speech-recognition - for the speech-to-text 💬
  • styled-components 💅

Dependencies

Server side:

  • dotenv - Allows private variables to be added (API)
  • nodemon - Restarts the server automatically when you make a change to the code
  • express - Our server is written in node

REST API Endpoints

GET

  • We created a GET to retrieve messages from Slack using: ==http://localhost:3001/api/read-messages==

POST

  • We created a POST to send new messages to Slack using: ==http://localhost:3001/api/write-message== ==http://localhost:3001/api/speak-message==

Features (Jo)

What can you do?

  • You can send a message to a Slack channel ✍️
  • You can send an emergency message to a Slack channel 🆘
  • You can view the last few messages sent to a Slack channel 👀

Demo

⏳ Additional Features - Chun

There were a few features we were unable to incorporate into the MVP due to time constraints.

  • Make the SOS message customizable.
  • Upload a profile picture, or fetch the avatar image from Slack
  • Read content of an individual message, including the "Send Love" feature.

⏳ Additional Features

  • Receive and store the user's Slack workspace ID / authentication.
  • Video tutorial
  • More slack channels associated with different users
  • Be able to send audio/voice messages

CHALLENGES - NAFISA

🏫 🔑 Key Learnings

  • React router to serve different pages for diferent users
  • A thorough understanding of using package.json, .env and how to alleviate nested package hell!
  • Implementing and customising Slack APIs in React
  • How to scope an MVP properly and prototype in Figma

Code Learnings 📝

  • Don't do response.json twice in a fetch (Body consumed error)

--> return this in form handleSubmit function, rather than have a button wrapped in a

We need CORS redirect info in our header to allow requests to come from the same origin

.ENV needed for both client AND server

Challenges

  • Node versions- we did volta install node@14.17.0 to get us all on the same version

  • we were on different npm versions so had to install npm i react-is because we were getting this error

  • Different npm versions 😖

Challenges

  • make sure your npm packages are installed in the right place
  • Having two package.jsons- then one - then two
  • Sending via a proxy server
  • Built-in linting that comes with the create react app caused errors
  • Sending speech to text message to slack, it sends twice right now 🤷
  • testing api calls

Thanks!!

Thanks to our project mentor @Charlie La Fosse!! ⭐ Massive shout out to Oli too 🧙