Skip to content

Latest commit

 

History

History
108 lines (83 loc) · 4.66 KB

README.md

File metadata and controls

108 lines (83 loc) · 4.66 KB

🎤 Anonimusic 🎤

What is Anonimusic?

Anonimusic is visually-minimal, feature-rich a site where users are signed in anonimously and are able to upload audio files, tag them and put them onto the site. Other users are able to view, listen to, and comment on the audio files. Provided the user does not leave (or refresh) the page they rea able to delete posts that they have just made. Once they leave the page, the post is on the internet forever.

This project was a collaboration (see Contributors) and was completed in 4 days in September 2022.

Table of Contents

-💻 Screenshots
-🤔 Getting Started
-🤼 User Stories
-✨ Features & Functionality
-🎭 Contributors
-🐾 Next Steps

Screenshots

\ WireFrame and ERD WireFrame and ERD
Home Screen Anonimusic Screenshot 01
Posts Example Anonimusic Screenshot 02
Data Returned from Cloudinary on Upload JSON Returned from Cloudinary Upload
Data Structure for each Post Data Structure within MongoDB

Getting Started

Links

User Stories

  • A user navigates to the page and sees the logo and carousel with any news or updates
  • User scrolls through the page and listens to the post's audio. Finding a post that grabs their attention, the user decides to contribute to the conversation by adding a comment.

  • A user wants to contribute a post to the page.
  • User navigates to the new post option, opening the drop down and filling in the required information.
  • Once submitted, the user sees their post populate the page and, for as long as the user maintains the same session, the user can delete their post. Once the user leaves the page or ends their session the post is no longer editable.

Features and Functionality

Technologies Used

Application built with MERN stack

  • Mongoose
  • Express
  • React
  • NodeJS

File Storage

  • Cloudinary

Node Packages Utilized

  • React Audio Player - for playing audio files from cloudinary
  • React Bootstrap - page components
  • React Slideshow - Homepage Slideshow
Post Component Anonimusic Code Example 01
Conditional Post Deleting Anonimusic Code Example 02
Session Initialization Anonimusic Code Example 03
Uploading New Files and new Posts Anonimusic Code Example 04

Contributors

Next Steps

  • Search post tags
  • Generate Random Profile Image (Canvas generated based on session username)
  • Implement Random Profile Images
  • Ability to record a new audio file in the browser
  • Refine styling for mobile devices
  • Oxford Comma?