Speak-Easy

Project overview

An MVP for Full-stack Tech For Better project by FAC21 built with Supabase as backend and React as front-end.

Speak-Easy is a predictive text to voice application designed to help people communicate, enhancing their quality of life and independence.

Developers

• Sevda
• Mariya

Contents

• Project overview
• Developers
• Tech Stack
• Database schema
• Features
• Getting started
  • Database setup
• Project Timeline
• Reflections and What Next

---

Tech Stack

• Design & Development

• Deployment

• Dependencies

  • supabase
  • react
  • react-dom
  • react-router-dom
  • react-scripts
  • react-speech-kit
  • react-supabase
  • uniqid
  • web-vitals

---

Database Schema

UI

---

Features

What can you do?

• You can sign up as a user typing your email address, clicking on the Magick Link and following the link provided in the email received from Supabase.

• You can add an Avatar, your name and website on the Account page.

• You can create sentences clicking the tiles on the board page and vocalize them clicking on the sentence container.

• You can sign out clicking the button on the Account page.

---

Getting started

This project was bootstrapped with Create React App.

• Navigate to repo
• Clone it with git clone https://github.com/tech-for-better/Speak-Easy.git and cd into the project folder

Available Scripts

• yarn to install all dependencies

• yarn start to start the server in the browser.

That will run the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

---

Database setup

• Create a .env.local file in the root of the project and add the Environment variables provided by Supabase. They can be found in the Project documentation and on Supabase platform under Speak-Easy project, Settings, API.

• To be able to maintain the data in the database you need to sign in the Supabase platform using Speak-Easy Github account. The credentials can be found in the Project documentation.

---

Project Timeline

Admin

Project duration: 28 June to 4 August 2021 with a Showcase on 11 August.

• Design sprint: ideation to prototyping.
• Two 6-day build sprints:

🎨 Design process \

• Dicovery and definition workshops on Miro board.
• The initial prototype can be viewed on Figma.

🔧 First Build Sprint \

• First focused on building skeleton of the platform, connecting the database and rendering the data.

• Setting up the Authentication provided by Supabase

• Built functionalities as displaying the selected data and text to voice

• Added the data in Supabase storage and populated the Tiles table.

🔨 Second Build Sprint
By the end of the second build sprint, we were able to :

• Take care of responcivnes and accesibility
• Add functionality as Search, Refresh and Horisontal Scroll
• Deploy the App on Netlify and add a custom domain

---

Reflections and What Next

• The remaining tiles need to be imported in the database table tiles in the Table editor from the folder tiles in the bucket Public at the Storage

• Fitures as predictivity and adding custom tiles can be created