Repository files navigation

This is fullstack clone of Twitter with audio instead text messages. It is made for educational purposes only and it is not affiliated with Twitter in any way.

• General functionalities

  • Record voice, preview oscilloscope, redo recording, preview recording, cancel recording, preview recorded waveform
  • Store audio files to server
  • Play/pause/stop audio messages with waveform preview
  • Autoplay existing messages, autoplay incoming messages
  • Limit autoplay duration to 5, 10, 15 or 20 seconds
  • Timeline feed of messages of the following users
  • Notifications feed, non-seen notifications count
  • Profile page with user's messages feed, following and followers lists
  • Social network functionalities: follow/unfollow users, like/unlike messages, repost/unrepost messages
  • Local state management with Apollo cache, without Redux
  • Edit avatar, cover, name and bio

• Authentication

  • JWT auth on http and websocket links
  • Sign up with email/password, sign in
  • User/admin role
  • Protected routes with HOCs

• Design

  • Material-UI responsive design
  • Choose between 4 different green/orange light/dark themes
  • Persist theme in local storage
  • Tabs navigation
  • Popover with user card

• GraphQL

  • Queries User: users, user, me, whoToFollow, friends
  • Queries Message: messages, message
  • Queries Notification: notifications, notSeenNotificationsCount
  • Mutations User: signUp, signIn, updateUser, deleteUser, followUser, unfollowUser
  • Mutations Message: createMessage, deleteMessage, likeMessage, unlikeMessage, repostMessage, unrepostMessage
  • Subscriptions: messageCreated, notificationCreated, notSeenUpdated
  • Relay cursor paginations: Messages, Notifications
  • Loaders: File, User
  • Client Queries: autoplay, theme
  • Client Mutations: updateAutoplay, setTheme

• Database

  • Mongoose Models: User, Message, File, Notification
  • Seed database with Faker

• React16.12 with functional components and Hooks
• Material-UI4.8
• Apollo Client2.6, Apollo Upload Client
• React Mic, Wavesurfer.js3.3

• Apollo Server2.9, Apollo Server Express
• Mongoose5.8
• Faker, Dotenv, Babel

• git clone git@github.com:nemanjam/audio-twitter.git
• cd audio-twitter/client
• cd audio-twitter/server
• npm install
• rename.env.example to.env and set database url and JWT secret
• npm start
• visithttp://localhost:3000 for client andhttp://localhost:8000 for server

• Twitter
• Robin WieruchReact Apollo boilerplate
• Robin WieruchNode.js with Express + MongoDB boilerplate
• Apollodocs
• Material-UIdocs