This site was designed for my (cover) band, although it's currently unused by us, and up for demonstrative/testing purposes only. For use of a number of functions:
(a) CALENDAR PAGE: to arrange a jamming date amongst band members, visually depicting who is available on which days, to make it easier to arrange an optimal date. The calendar can be used for any group activity, not just jamming.
(b) SEARCH PAGE: Implements a youtube audio search for music. You can search for audio, which can be: (i) added to the suggestions page; or (ii) added to the global music player playlist
(c) SUGGESTIONS PAGE: Band members can post music suggestions from the YT search page for future jams on this page.
(c) MUSIC PLAYER: Users can send audio from the YT search to the global music player, which will save the audio via YT video id. Music can be played through the player, and will persist even after the user leaves the SEARCH page and visits a different tab.
This was built with React, Express, GraphQl, MongoDB, Node, Javascript, and CSS.
git clone https://github.com/sifzerda/bandpage.git
cd bandpage
npm install
npm run startTechnologies:
- express
- graphql
- mongodb
- axios
- socket.io : A websocket server has been left to run, but is currently unused. Socket multi-user live updating was scrapped in favour of mongodb and graphql.
- react-router
- react-youtube
- react-draggable
- react-player
- react-toastify
- react-modal
- YouTube Data API v3: has 10,000 unit daily limit
The main functions of code:
Features:
(1) User Authentication and Accounts
- Sign Up, Login, Logout
- Currently sign in only using name, since that's all my band needed
(2) News Landing Page
- Currently Unused
- Requires Future Development
- Intended to allow users to post group updates
- Anticipated Create/Read/Update/Delete Functions
(3) Calender
- Users can indicate availability by switching color of date to red/green/white
- User changes are updated and saved instantly into MongoDB and retrieved via GraphQL
(4) Music Player:
- play, pause, next/prev song
- imported inside App.jsx outside react-router outlet so the player persists after nav tab switch, and playback continues.
- User can play any song saved from youtube search
- Music Player is draggable
- Progress bar is draggable to skip forward or back in song
- Saved songs kept in playlist
- Logged on user can save current playlist to their user file and view saved playlists on profile page
(5) Search:
- Embedded YouTube search using YouTube Data API v3
- Search for youtube videos/music, play in embedded player
- User can save video results to music player. HandleSaveVideo prop passes from Suggestions page to music player at the global level (in App.jsx, outside react-router-outlet) allowing song to play even after page switched via nav tabs
- Search has a keydown function to allow search to run by pressing enter
(5) Suggestions:
- Displays search results posted from the Search page
- Read/Delete functions (only the user who posted the result can delete it)
- Posted results are retrieved from User model, which stores song posts
- Sometimes page buttons don't work until page refreshed, or scrolled down, may be an issue with an invisible absolutely positioned div connected to the global music player (?)
- Song suggestion page may not show newly posted song until refreshed
- Progress bar on Music Player may not be draggable until page refreshed
- Calendar used to have buttons to flip between months (including past months) however this caused a problem with fetching SETAVAILABILITIES. 'Next/prev. month' buttons are still in code but commented out until this issue is fixed
Optimization:
- use a bundler like Webpack or Parcel to optimize build output: Enable code splitting, tree-shaking, and minification to reduce bundle size and improve load times.
- Consider memoizing components to prevent unnecessary re-renders, especially if their props rarely change.
- Main Page Updates (Create, Read, Update, Delete):
- Add message/post/comment array to user file
- Enable users to comment on posts
- Enable users to 'like' posts (thumbs up emoji)
- Save song video id from search page, send to global music player
- Submit calendar availability to DB and retrieve so all users can see
- Add functionality to music player: run through playlist, enhanced GUI
- Fix up global GUI, styling
- Post Song suggestions from YT search to song suggestion page via retrieving video id
- Enhance song suggestion page GUI to look better
- Save user playlists to MongDB, retrievable by graphQL
- Add Profile page functions, including viewing:
- User's song posts
- User's created playlists
- Load saved playlists back into music player
For support, users can contact tydamon@hotmail.com.
Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (git checkout -b feature/NewFeature)
- Commit your Changes (git commit -m 'Add some NewFeature')
- Push to the Branch (git push origin feature/NewFeature)
- Open a Pull Request
The author acknowledges and credits those who have contributed to this project including:
- ChatGPT
Distributed under the MIT License. See LICENSE.txt for more information.
This project is completed.