loading...

AbleMail: Furthering independence through email

kizjkre profile image Tristan ・3 min read

My Final Project

What is AbleMail?

AbleMail is an email client designed for people with cognitive disabilities. This started as a project addressing the needs of my school community, but ended up growing much further and much bigger. I originally wanted to make this for Jon, an important member of our school community. He works in our school’s media department with recording assemblies as well as organizing all of the A/V equipment. He was introduced to our school via On-the-Move, a nonprofit organization dedicated to helping people with intellectual and developmental disabilities find employment opportunities. I had the fortune of working with him and his parents throughout the development of AbleMail. The hope of this project is to let Jon, and others like him, be able to use email independently.

Why?

Email is a crucial tool for workplace communication and collaboration; however, current email clients present accessibility barriers for people with cognitive disabilities. For example, Jon is unable to use email independently. Any job related communication, such as changes to his work schedule, must be emailed to his job coach or his mother who handle the logistics of his employment. AbleMail features a visually simple interface so Jon can (1) comprehend, (2) respond, and (3) compose emails independently. Since Jon struggles with a slow reading rate, text-to-speech capability converts the text of an email into audible words to improve email comprehension. AbleMail provides large and colorful icons that allow Jon to respond to emails with customized pre-written responses. Under AbleMail settings, icons and written responses can easily be changed and new ones added. Lastly, AbleMail allows Jon to compose emails through dictation and to attach an audio clip of his recorded response. AbleMail empowers Jon to communicate with his employer by email, thereby increasing his independence, ownership of his work, privacy, and self-esteem.

Demo Link

AbleMail

Link to Code

GitHub logo ablemail / ablemail

Furthering independence through email.

AbleMail

Furthering independence through email: AbleMail is a free email client web app that allows people with cognitive disabilities to independently use email.

Try the app here!

Created and maintained by Tristan Peng.

This project was made with Next.js, Material UI, Express, and React.

Setup

  1. Clone this repository git clone https://github.com/TheAmazingness/ablemail.git <your-project-folder>
  2. Run yarn on the folder to install all dependencies.
  3. Run yarn run dev for the dev version.
  4. Visit http://localhost:3000.

Signing In With a Gmail Account

  1. Visit https://myaccount.google.com/.
  2. Click on Security
  3. Turn on Less secure app access
  4. Go back to AbleMail
  5. Sign in

Usage

It is recommended to use Google Chrome to use AbleMail because AbleMail uses experimential Web APIs such as SpeechRecognition and SpeechSynthesis. To see what browsers to support these experimental technologies, click on the words to learn more.

Next

This branch is for AbleMail with Next.js, React hooks…


GitHub logo ablemail / ablemail-backend

Backend for AbleMail. Written in Node.js

AbleMail Backend

This repository holds the server code for AbleMail. Check out the api.

API

GET

GET /

Redirects to the AbleMail client.

GET /auth/signup

Signs up a new non-Google user and generates a session.

Query
key email pass first pass
String String String String String
A key that authorizes the connection. User's email. Make sure it does not end in @gmail.com. User's password. User's first name. User's last name.

GET /auth/google

Authorizes a Google user

Query
key email pass
String String String
A key that authorizes the connection. User's email. Make sure it does not end in @gmail.com. User's password.

GET /auth/google/redirect

Redirects to Google auth page.

Query

None

GET /auth/google/callback

Redirects to the AbleMail client with the access token.

Query
code
String
Google access token.

GET /get-mail/google

Gets last 6 messages from Google.

Query
key token
String String
A key that authorizes the connection.

How I built it

This is probably my largest project I've worked on, and I have learned a lot throughout my development process. For AbleMail, I used React, Redux and Express to build the application. Since I was also just starting to learn React when I built AbleMail, I faced a lot of challenges with React's steep learning curve, especially getting used to React's model of organizing components. Even though the syntax presented a lot of things for me to learn, I think the biggest challenge that I faced during this process is the mail protocols. At the inception of this project, I knew nothing about IMAP, SMTP, and POP, but this was integral to AbleMail, so I had to learn about how each protocol worked and its implementation in Node.js.

Another learning opportunity that I'm facing right now has to do with authentication and security. I use passport.js to manage all of the logging in and authentication, but I am facing bugs relating to sessions that are giving me lots of trouble at the moment. However, I am confident that, like the other bugs that have challenged me, that I will be able to fix it.

Additional Thoughts / Feelings / Stories

YouTube Video

Posted on by:

Discussion

markdown guide