🍟Frontend Template

We have a template NextJS project that uses tailwind and can easily be cloned and customized out of the box.

https://github.com/shibuyaaaa/template-nextjsgithub.com

Frontend Template Project

Contexts

• AuthContext

  Manages a logged in user state and includes a dynamic auth route that behaves like a login, but a first login counts as a signup

• AudioContext

  Manages the state of audio playback, includes having a queue, upcoming songs, manages metadata and navigating the queue as well as setting playback

Screens

• Player Screen, /player

  This screen uses the audio context and would behave like a player. this screen handles the current audio state as well as increasing the stream count and scrubbing

• Upload Screen, /upload

  This screen uses the upload flows to handle both "upload like huggingbass" and "upload like fTakedown" which have slight structure differences. This is meant to act as a template for inserting an upload form / flow without having to configure anything

• Creator Screen (server sided rendering screen) /[creatorUsername]

  This screen acts as a starting point for loading dynamic content from a server sided backend fetch. This template page can be used as a starting / reference point for pages like (song pages, playlist, creator, etc)

• Home Screen /

  Landing Page