Audio Twitter

screenshot of Audio Twitter
react
material-ui

Twitter clone with audio messages made with React, Apollo and MongoDB.

Overview

The Audio Twitter project presents an innovative twist on social media communication by integrating audio messages into a familiar platform. Built using a robust tech stack including React, Apollo, and MongoDB, this full-stack application allows users to seamlessly interact with each other through recorded voice messages, creating a unique and engaging atmosphere. It serves as a powerful educational tool for developers looking to explore the capabilities of modern web technologies.

With intuitive functionalities and a thoughtful design, Audio Twitter offers a dynamic user experience tailored to audio interactions. Its emphasis on responsive design through Material-UI ensures accessibility across various devices, making it a versatile addition to any developer's toolkit.

Features

  • Voice Recording: Users can easily record their messages, preview them through an oscilloscope, and manage the recording process with options to redo or cancel recordings.

  • Audio Playback: The application allows for seamless playback of audio messages, complete with waveform previews for enhanced visibility, supporting different autoplay durations.

  • User Timeline: Engage with a timeline feed that showcases messages from followed users, allowing for easy tracking of audio interactions.

  • Notifications: Stay informed with a dedicated notifications feed, complete with counts of unseen notifications for a streamlined user experience.

  • Social Interactions: Users can follow/unfollow others, like/unlike messages, and repost messages, fostering community engagement.

  • Customizable Profiles: Add a personal touch by editing user avatars, cover images, and bios, providing a unique identity within the platform.

  • Authentication: Secure access with JWT authentication for additional safety across both HTTP and websocket communications.

  • Responsive Design: Choose from multiple themes with light/dark options, all while maintaining a responsive layout courtesy of Material-UI.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

graphql
Graphql

A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.