SoundCloud Project

SoundCloud Clone is an application created to imitate SoundCloud. A user can log in as a 'Demo' user or create an account.

Login, explore, and listen at SoundCloud Clone

Technologies:

This application was created with the use of:

• Express
• Node JS
• React
• Sequelize
• Csurf JS
• BCrypt JS
• Redux
• Amazon AWS S3
• React H5 Audio Player
• SQLite3
• Postgres

Landing Page View:

Home View:

Songs Collections:

Album Collections:

Features

• Sign-up, log in with your account, and log in with a 'Demo Account.'
• Create, read, update, and delete Songs (CRUD).
• Create, read, update, and delete Albums (CRUD).
• Upload the image and audio file to the song.
• Upload an image for an album cover to the album.
• Search bar navigates user to the current song details.
• Navigate through the application with uninterrupted audio playback.

Technical Implementation Details:

SoundCloud Clone is a single page application. SoundCLoud Clone allows the user to edit and delete their songs and albums. It uses the following logic to verify the user's credentials:

  let userManipulateButton;

  if (song?.userId === user?.id) {
    userManipulateButton = (
      <div className="user-buttons">
        <div>
          <EditSongModal song={songId} />
        </div>
        <div className="user-delete-button">
          <DeleteSongButton songId={songId} />
        </div>
      </div>
    );
  }

To-Do:

• Playlists
• Comments
• Current user profile page
• Current user songs and albums
• Comments
• Likes
• Follows
• Improve search bar

Original Design Docs