{"id":13624485,"url":"https://github.com/nemanjam/audio-twitter","last_synced_at":"2026-02-23T07:02:42.861Z","repository":{"id":36674727,"uuid":"230331347","full_name":"nemanjam/audio-twitter","owner":"nemanjam","description":"Twitter clone with audio messages made with React, Apollo and MongoDB.","archived":false,"fork":false,"pushed_at":"2023-01-05T13:57:00.000Z","size":8533,"stargazers_count":72,"open_issues_count":33,"forks_count":25,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-08T09:47:45.434Z","etag":null,"topics":["apollo-client","apollo-server","graphql","material-ui","mongodb","mongoosejs","react","wavesurfer-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nemanjam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-26T21:39:14.000Z","updated_at":"2024-07-25T15:12:48.000Z","dependencies_parsed_at":"2023-01-17T04:00:55.415Z","dependency_job_id":null,"html_url":"https://github.com/nemanjam/audio-twitter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nemanjam/audio-twitter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Faudio-twitter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Faudio-twitter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Faudio-twitter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Faudio-twitter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nemanjam","download_url":"https://codeload.github.com/nemanjam/audio-twitter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nemanjam%2Faudio-twitter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29739024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T04:51:08.365Z","status":"ssl_error","status_checked_at":"2026-02-23T04:49:15.865Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo-client","apollo-server","graphql","material-ui","mongodb","mongoosejs","react","wavesurfer-js"],"created_at":"2024-08-01T21:01:43.076Z","updated_at":"2026-02-23T07:02:42.826Z","avatar_url":"https://github.com/nemanjam.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Audio Twitter\n\n## Twitter clone made with React, Apollo, MongoDB, Material-UI, Wavesurfer\n\nThis 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.\n\n## Features\n\n- General functionalities\n\n  - Record voice, preview oscilloscope, redo recording, preview recording, cancel recording, preview recorded waveform\n  - Store audio files to server\n  - Play/pause/stop audio messages with waveform preview\n  - Autoplay existing messages, autoplay incoming messages\n  - Limit autoplay duration to 5, 10, 15 or 20 seconds\n  - Timeline feed of messages of the following users\n  - Notifications feed, non-seen notifications count\n  - Profile page with user's messages feed, following and followers lists\n  - Social network functionalities: follow/unfollow users, like/unlike messages, repost/unrepost messages\n  - Local state management with Apollo cache, without Redux\n  - Edit avatar, cover, name and bio\n\n- Authentication\n\n  - JWT auth on http and websocket links\n  - Sign up with email/password, sign in\n  - User/admin role\n  - Protected routes with HOCs\n\n- Design\n\n  - Material-UI responsive design\n  - Choose between 4 different green/orange light/dark themes\n  - Persist theme in local storage\n  - Tabs navigation\n  - Popover with user card\n\n- GraphQL\n\n  - Queries User: users, user, me, whoToFollow, friends\n  - Queries Message: messages, message\n  - Queries Notification: notifications, notSeenNotificationsCount\n  - Mutations User: signUp, signIn, updateUser, deleteUser, followUser, unfollowUser\n  - Mutations Message: createMessage, deleteMessage, likeMessage, unlikeMessage, repostMessage, unrepostMessage\n  - Subscriptions: messageCreated, notificationCreated, notSeenUpdated\n  - Relay cursor paginations: Messages, Notifications\n  - Loaders: File, User\n  - Client Queries: autoplay, theme\n  - Client Mutations: updateAutoplay, setTheme\n\n- Database\n  - Mongoose Models: User, Message, File, Notification\n  - Seed database with Faker\n\n## Screenshots\n\n![Screenshot1](/screenshots/Screenshot_1.png)\n\n![Screenshot2](/screenshots/Screenshot_2.png)\n\n![Screenshot3](/screenshots/Screenshot_3.png)\n\n![Screenshot4](/screenshots/Screenshot_4.png)\n\n![Screenshot5](/screenshots/Screenshot_5.png)\n\n![Screenshot6](/screenshots/Screenshot_6.png)\n\n![Screenshot7](/screenshots/Screenshot_7.png)\n\n![Screenshot8](/screenshots/Screenshot_8.png)\n\n![Screenshot9](/screenshots/Screenshot_9.png)\n\n![Screenshot10](/screenshots/Screenshot_10.png)\n\n![Screenshot11](/screenshots/Screenshot_11.png)\n\n## Libraries used\n\n### Client:\n\n- React `16.12` with functional components and Hooks\n- Material-UI `4.8`\n- Apollo Client `2.6`, Apollo Upload Client\n- React Mic, Wavesurfer.js `3.3`\n\n### Server:\n\n- Apollo Server `2.9`, Apollo Server Express\n- Mongoose `5.8`\n- Faker, Dotenv, Babel\n\n## Installation and running\n\n- `git clone git@github.com:nemanjam/audio-twitter.git`\n- `cd audio-twitter/client`\n- `cd audio-twitter/server`\n- `npm install`\n- rename `.env.example` to `.env` and set database url and JWT secret\n- `npm start`\n- visit `http://localhost:3000` for client and `http://localhost:8000` for server\n\n## References\n\n- [Twitter](https://twitter.com)\n- Robin Wieruch [React Apollo boilerplate](https://github.com/the-road-to-graphql/fullstack-apollo-react-boilerplate)\n- Robin Wieruch [Node.js with Express + MongoDB boilerplate](https://github.com/the-road-to-graphql/fullstack-apollo-express-mongodb-boilerplate)\n- Apollo [docs](https://www.apollographql.com/docs/)\n- Material-UI [docs](https://material-ui.com/getting-started/installation/)\n\n## Licence\n\n### MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjam%2Faudio-twitter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnemanjam%2Faudio-twitter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnemanjam%2Faudio-twitter/lists"}