Merge pull request #7 from knightspore/update-readme

Chore: Update readme

README.md

@@ -1,18 +1,24 @@
 # 💽 Selecta
 
+![Vercel](https://vercelbadge.vercel.app/api/knightspore/selecta)
+
 A Crate Digging Tool for DJs to get recommendations from Spotify.
 
 ![App Preview](./public/selecta.png)
 
 ## Project Structure
 
-This is a Next 13 project, using the app router and hosted on Vercel. Currently I'm using Context Providers to handle the recommendation state in the app, and talking to the API to make Spotify calls from the server.
+This is a Next 13 project, using the app router and hosted on Vercel. Currently I'm using Context to handle the recommendation state in the app, and talking to the API to make Spotify calls from the server.
+
+### Contributing
+
+You'll need a number of auth keys to contribute to the project (as listed in `.env.example`). A [Spotify Developer Account](https://developer.spotify.com/) is required, as well as a [Vercel KV Database](https://vercel.com/docs/storage/vercel-kv).
+
+## Roadmap / Ideas
 
-- `/src/app` - NextJS App
-- `/src/app/api` - API Routes
-- `/src/components` - Basic Components
-- `/src/provider` - Recommendations / AudioPlayer Context
-- `/src/lib` - Various re-usable code and Spotify library
+- Add Soundcloud Support
+- Better Library Interaction (ie. Manage playlists from within Selecta)
+- Re-do the in-app sample player
 
 ## License
 

src/components/recommendations/SeedItemCard.tsx

@@ -17,7 +17,7 @@ export default function SeedItemCard({
 }: Props) {
   return (
     <div className="flex items-center rounded-r gap-1 bg-shell-200">
-      <div className="relative flex-shrink-0 w-8 h-8">
+      <div className="relative flex-shrink-0 w-8 h-8 aspect-square overflow-hidden">
         <img
           src={img || ""}
           alt={`${name} avatar`}

src/components/tracks/Track.tsx

@@ -52,7 +52,7 @@ export default function Track({ track }: Props) {
         className="flex items-start cursor-pointer md:flex-col"
         onClick={handleSelectTrack}
       >
-        <div className="w-32 h-32 md:w-full md:h-auto">
+        <div className="w-32 h-32 md:w-full md:h-auto aspect-square">
           <AlbumArt album={track.album} />
         </div>
         <div className="flex flex-col p-2">