Audio Twitter

Overview

Twitter clone with audio messages.

Goals

Get practical experience with Apollo GraphQL. Work with audio.

Tech stack

React, Apollo GraphQL, MaterialUI
Wavesurfer, Mongoose

Features

Record, play, auto-play, delete, like, retweet audio messages
Auth, edit profile, real time notifications
Responsive design, color themes and dark mode

Implementation details

React Mic is used for recording the audio and Wavesurfer for rendering waveform and playing. The UI is build with default MaterialUI components. It has a number of Apollo CRUD operations, real time subscriptions and client side resolvers for managing state. It has social network functionalities like follow, like, retweet, notifications.

Data is stored in MongoDB using Mongoose and audio files are served via static folder.

For more implementation details check the README.md file on Github.

Lessons learned

Working with multimedia content is much more challenging than with text.
In-depth work with Apollo GraphQL, schemas, both server and client side resolvers, queries, subscriptions.