Melody Assist

By: Bryan Huici

06-26-2023 12:17:14 PM

next
react
typescript

Overview


Melody Assist is a web application that allows users to generate audio drum loops using AI. The application includes features such as authentication, a global feed, audio file uploads, audio generation using an AI cloud model service, audio playback, and user account management.


Tech Stack


  • Next.js: A React framework for building server-rendered and statically exported applications.
  • Typescript: A statically typed superset of JavaScript.
  • React: A JavaScript library for building user interfaces.
  • TailwindCSS: A utility-first CSS framework.
  • Prisma: An open-source database toolkit for Typescript and Node.js.
  • NextAuth: An authentication library for Next.js applications.
  • tRPC: A framework for building type safe APIs with TypeScript.
  • Zod: A TypeScript-first schema validation library.
  • upload.io: A file upload service.
  • replicate: An AI cloud model service for generating audio drum loops.

Features:


Authentication

Login Page Melody Assist
  • NextAuth is used for authentication.
  • Users can sign in using a magic link sent via email (SMTP).
  • OAuth authentication is supported for Discord and Google.
  • Session id's are stored in the database and checked on every request.

Global Feed

Global Upload File Feed
  • The browse page displays a global feed.
  • Users can view audio generations of all users in chronological order (newest to oldest).

Generate Page

Generate Page
  • Users can upload audio files on their profile page.
  • Recursive uploading is implemented to handle the disappearance of the upload.io upload file component on upload completion.
  • Once an audio file is uploaded, the application makes fetch calls to the replicate API every 2 seconds to generate audio using AI.
  • The generated audio is saved in the user's account in the database using Prisma.
  • The profile page revalidates and displays the audio file in the user's audio section.
  • Users can play and delete their audio files.

Settings Page

Melody Assist Settings Page
  • Users can access the settings page to manage their account.
  • Users can change their username, and the system checks for username availability.
  • If the chosen username is taken, an error is displayed; otherwise, the username is updated.
  • Users can delete their account, which automatically signs them out.