Polyrhythmd is a music review platform designed for the music critic in all of us. Users can discover, review, and share their thoughts on albums while connecting with other music enthusiasts in a community-driven environment.
Note
Fill in this sections as the submission artifact for this deliverable. You can refer to this example for inspiration.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Proper use of Markdown
- A concise and compelling elevator pitch
- Description of key features
- Description of how you will use each technology
- One or more rough sketches of your application. Images must be embedded in this file using Markdown image references.
Music discovery shouldn't be limited to algorithmic recommendations. Polyrhythmd empowers music lovers to share honest reviews, discover albums through community recommendations, and connect with others who share their musical tastes. Users can search for albums, write detailed reviews with ratings, follow other critics, and build their own music discovery feed. Whether you're a casual listener or a serious music critic, Polyrhythmd provides the tools to explore, evaluate, and share your musical journey with a community that values authentic opinions over popularity metrics.
The application features a clean, music-focused interface designed for easy navigation and content discovery:
Authentication Flow: Simple login and registration system with secure bcrypt password hashing stored in MongoDB.
User Profiles: User profiles displaying all reviews written by that user, with logout functionality.
Album Search & Review: Integrated Deezer API search for finding albums, with detailed review forms including 0.5-5 star ratings and written reviews stored in MongoDB.
Social Feed: Community-driven feed displaying all user reviews with album art, ratings, review text, and author information.
Music Discovery: Browse albums via Deezer search with full album details including tracklist, release date, label, and aggregate user review ratings.
- Search & Discovery: Search albums, songs, and artists via the public Deezer API, with community average ratings shown inline and recent searches remembered
- Review System: Write, edit, and delete reviews with 0.5-5 star ratings; like and comment on other people's reviews
- User Profiles: Reviews, rating history, Listened and Want-to-listen lists, three favorite albums, and follow/followers
- Social Feed: Paginated feed with an Everyone tab and a Following tab, readable without an account
- Rating Analytics: Quick half-star ratings on any album, song, or artist with community averages
- Authentication: Registration and login with bcrypt hashing, httpOnly secure cookies, rate limiting, password change, and account deletion
- Album Details: Tracklist with 30-second previews, release date, label, and genres from Deezer
The application uses the required technologies in the following ways:
-
HTML - Single-page React application with proper HTML structure rendered via React components. The app uses semantic HTML elements throughout.
-
CSS - Professional responsive design with a dark theme featuring orange-pink gradient branding. Custom CSS for album art displays, review cards, star rating components, and responsive layouts optimized for desktop and mobile viewing.
-
React - Component-based architecture with:
- Authentication components for login/registration with form validation
- Album search component with Deezer API integration
- Album detail pages showing full album information and reviews
- Review creation forms with star rating input
- User profile pages displaying review history
- Social feed displaying all community reviews
- React Router for navigation between pages
-
Service - Node.js/Express backend service providing:
- User authentication endpoints (register, login, logout)
- Deezer API integration for album search and details
- Review CRUD endpoints (create, read by user, read by album, read all)
- Token-based authentication with cookies
- Static file serving for React frontend
-
DB/Login - MongoDB Atlas database storing:
- User accounts with bcrypt-hashed passwords and auth tokens
- User reviews with ratings, text, album info, and timestamps
- Secure credential management and session handling
-
WebSocket - Real-time WebSocket implementation providing:
- Backend WebSocket server on
/wsendpoint using ws library - Live activity notifications in sidebar when users post reviews
- Real-time broadcasting to all connected clients except the sender
- Automatic reconnection with exponential backoff
- Ping/pong heartbeat for connection health monitoring
- Backend WebSocket server on
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Server deployed and accessible with custom domain name - My server link.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
I completed all of the HTML files needed and explicitly put down where I was going to put each part. I have a login, images, db data place holder, api place holder, and WebSocket place holder.
- HTML pages - Made HTML Pages for all of the diferent aspects of my project
- Proper HTML element usage - Used propper elements
- Links - links to other pages
- Text - data shown
- Images - images for profiles
- Login placeholder - yes
- DB data placeholder - db of login data and reviews
- WebSocket placeholder - when a friend posts
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Header, footer, and main content body - propper header footer and main
- Navigation elements - navigable website
- Responsive to window resizing - responsive window
- Application elements - all elements acounted for
- Application text content - shown text
- Application images - images shown
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Bundled using Vite - Vite bundles and working
- Components - all components working
- Router - router routes to all the propper pages
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- All functionality implemented or mocked out - YES!
- Hooks - yes, I have a js endpoint filling feed with reviews and sends a notification to the sidebar on desktop mode
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Node.js/Express HTTP service - completes
- Static middleware for frontend - middleware implemented
- Calls to third party endpoints - calls spotify API
- Backend service endpoints - Login and Logout on the backend
- Frontend calls service endpoints - yes
- Supports registration, login, logout, and restricted endpoint - yes
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Stores data in MongoDB - done! reviews stored and retrieved from MongoDB
- Stores credentials in MongoDB - done! user authentication with hashed passwords stored in MongoDB
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Backend listens for WebSocket connection - WebSocket server implemented using ws library, listens on
/wsendpoint with user token tracking - Frontend makes WebSocket connection - Custom WebSocketClient connects to backend, auto-reconnects with exponential backoff (5 attempts max)
- Data sent over WebSocket connection - Review notifications broadcast to all connected clients except the sender
- WebSocket data displayed - Live activity notifications appear in sidebar showing username, album name, and rating in real-time
- Application is fully functional - Complete real-time notification system with ping/pong heartbeat for connection health !
Here is my first edit! edit in web consol