marishibata / digital-prejudice

MVP of an interactive web documentary built with React, audio-visualising racist messages on dating apps crowdsourced from other users.

Digital Prejudice

Work-in-progress interactive web documentary built with React, audio-visualising racist text messages on dating apps crowdsourced from other users.

Project Description

Racist comments made on social media platforms are visible and thus widely dissected in the public domain. But despite similar comments made towards online dating app users, they get less attention as the messages are private.

Vocalising such messages using Text-To-Speech technology amplifies how that could sound like from a person, and makes it more real for those who don't know what it's like to receive one.

The computerised voice gives an inhuman effect, which reflects the alienating experience - those who recieve such messages don't know what the sender sounds like because they have never met them.

The aim of the project is for those who have had similar experiences to contribute to a piece of web-based documentary art, that continues to grow and "document" as more data is crowdsourced.

To digest the concept, checkout the demo video on YouTube.

Features

• Landing page plays back text-to-speech audio of racist messages that users have submitted

• Submission form allows users to write out text content of message(s) received

• The submit button generates text-to-speech audio which gets saved onto cloud storage and generates a URL for the file

• This URL is saved onto the database along with the submitted text

• When the user clicks the play button on the front-end, the URL is then retrieved so that users can hear back the submitted message

Next Steps

• Build 3D models of visemes with Blender, import them into Three.js to apply functionality and WebGL effects

• Figure out algorithm to generate mouth shapes on playback of text-to-speech audio

Getting Started

These instructions will help you setup a local development instance of the app.

Get the repo

git clone https://github.com/marishibata/Digital-Prejudice.git

Navigate to the folder

cd digital-prejudice

Install the dependencies

cd client-react
npm install
cd ../server
npm install

Run server

node server.js

Run client to start app

cd ..
cd client
npm start

Tech Stack

Front-end:

• JavaScript
• React
• Styled Components

Back-end:

• Node
• Express
• Mongoose
• MongoDB

APIs:

• Google: Text-to-Speech
• Cloudinary

Contributions

Contributions of any kind are welcome!

Any questions about the project, please feel free to email me on [e-mail]