Visit The Site: https://discrate.us/
[If the images are not loading please refresh the page]
What Is Discrate?
I created Discrate to be a hub for discovering new music. It offers music-related articles and curated playlists to expose you to new artists and songs. You can also connect to your Spotify account to get song recommendations for your playlists and view your most listened-to songs/artists. Check out the about page for more details.
Tools Overview
Frontend:
- TypeScript/JavaScript
- Next.js: framework
- Tailwind: for CSS
- MongoDB: for storing articles and playlist data
- Prisma: ORM for interacting with the database
Backend:
- JavaScript
- Node.js
- Express: a framework for interacting with the Spotify API
Design:
- Figma: mockup and asset creation
Hosting:
- Vercel: hosts the back and front end
- MongoDB Atlas: hosts the database
Full-stack Process
Branding
First, I needed to create a brand identity for the website. The initial name for the website was Milkcrate. The name is a throwback to when people would dig through crates (often milkcrates) of records to find new music at their local record store. Since this is what the site is doing in modern terms, it seemed like a perfect fit. I wanted to capture this vibe in the logo by using old record store signs and posters as inspiration.
I then searched for a domain name and discovered there were none available that I was satisfied with. So I decided to pick a new name, which became discrate. Discrate is a marriage of discovery, disk, and crate. This works perfectly for the branding I had in mind and still incorporates the crate-digging aspect, additionally it is more obvious that the name is music oriented. I built off of my favorite designs from the milkcrate brainstorming and created discrate’s branding and aesthetic.
UI & Mockups
Three types of content need to be on the front page: hero card, playlists, and articles. They all need to be distinguishable and easily recognizable, with the hero card being the most important. The hero card is an advertisement for the Spotify recommendation functionality, as its offering is not apparent otherwise. Additionally, discrate needs a memorable, user-friendly, and modern design with a retro feel. Lastly, the content must be adaptable to work with a responsive design. With all of the above in mind, I created mockups for the front page. The bottom right image is the chosen design. The rest of the site uses the same design language to deliver a consistent user experience and feeling.
Backend-end
The back-end is a Node.js project with an Express framework. Its purpose is to get authorization for the Spotify API. I request authorization to access the Spotify API by sending my client ID and secret, which are verified when the user logs in and grants access. The client then receives an access token (needed to make requests to the API), which is in the URL that Spotify redirects back to the website. This access token is passed to the front-end and saved locally. But that is not the end, as the access token only lasts 1 hour. A refresh token has to be requested continuously to access the API and keep the user logged in. You can learn more about Spotify's Authorization flow in Spotify's Developer documentation.
Front-end
For the front-end framework, I used Next.js with TypeScript for its built-in file-based page routing, minimal needed configuration, and great SEO with features like pre-rendering. I also decided to use Tailwind for my CSS because of its focus on responsive design and ease of use. I did not want the site to look generic, so I avoided using templated frameworks like Bootstrap. Once the technologies were decided I built the front-end based on the mockups I made. I then needed to implement a database to store all of the article and playlist data. I used MongoDB with Prisma, which meant I could make queries without having a separate backend implementation. Once MongoDB and Prisma were set up, I could query for articles and playlists and implement dynamic routing between pages. Lastly, the access token and refresh tokens retrieved from the backend are used to make requests in the API page of the Next.js project. Discrate gets the user’s top tracks and artists, which are displayed on the dashboard page. The user can then click on the tracks and artists to get song recommendation’s from their selection, which also requires dynamic routing.
Deployment
The front-end and back-end are both deployed using Vercel, which has been incredibly easy to use. The database is hosted on MongoDB Atlas, as it was free and worked well for what I needed.
SEO
Google Light House Scores:
