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
Link to Code
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
- Clone this repository
git clone https://github.com/TheAmazingness/ablemail.git <your-project-folder> - Run
yarnon the folder to install all dependencies. - Run
yarn run devfor the dev version. - Visit
http://localhost:3000.
Signing In With a Gmail Account
- Visit https://myaccount.google.com/.
- Click on
Security - Turn on
Less secure app access - Go back to AbleMail
- 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…
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
Top comments (0)