adambechtold commented 8 months ago

Background

Requesting a playlist is often pretty fast, but it's slowing down as the size of the data grows. We'll work on making this fast, but in the meantime, a simple loading spinner would go a long way towards giving users greater confidence that the app is working.

https://github.com/adambechtold/taste-explorer/assets/22563063/aa53b140-6da1-4913-8083-abb79facd28b

🎯 Goal - It is clear that a playlist is loading

Show a loading spinner or similar while the request is pending.

Nice to Have - Make the loading experience fun We've used GIFs a lot through the product to add playful touch. Considering using a funny and playful gif instead of a standard loading spinner.

tusharwebd commented 8 months ago

Hi @adambechtold! New contributor here. I'd be interested to work on this. Can I pick this up?

adambechtold commented 8 months ago

Hi @tusharwebd! Definitely! Feel free to give it a go.

I'm just opening opening up this project to other contributors, so please let me know if you run into any trouble getting it running.

Here's some documentation from htmx that should be helpful: https://htmx.org/attributes/hx-indicator/

adambechtold commented 8 months ago

You may run into a couple of issues:

Populate App with Example Data
- Tomorrow, I'll write up a quick doc on how you can load in example data
Configure SSL for Development
- I was running into CORS issues with local frontend dev and had to generate my own SSL keys for localhost. This was a kind of hacky way to keep moving forward. If you run into issues loading stylesheets and scripts to the frontend, lmk. In the meantime, I'll take a closer look at it to make sure the solution is correct and easy to use

adambechtold commented 8 months ago

I made some progress on this a while back. Just uploaded it to this branch: https://github.com/adambechtold/taste-explorer/tree/feat/show-playlist-is-loading/main

tusharwebd commented 8 months ago

Thanks for adding more details! I am trying to setup the project by following the readme. However, I am facing some issues when starting the server with npm run dev. Even though I added all the credentials in .env file, I am still getting the following errors:

[INFO] 19:31:41 ts-node-dev ver. 2.0.0 (using ts-node ver. 10.9.1, typescript ver. 5.3.2)
Missing LASTFM_API_KEY. Many features will not be available.
Error: Missing SPOTIFY_CLIENT_ID
    at getClientId (/Users/../Documents/GitHub/taste-explorer/src/spotify/spotify.api.ts:269:11)
    at new SpotifyApi (/Users/../Documents/GitHub/taste-explorer/src/spotify/spotify.api.ts:22:21)
    at Object.<anonymous> (/Users/../Documents/GitHub/taste-explorer/src/auth/auth.router.ts:10:20)
    at Module._compile (node:internal/modules/cjs/loader:1378:14)
    at Module._compile (/Users/../Documents/GitHub/taste-explorer/node_modules/source-map-support/source-map-support.js:521:25)
    at Module.m._compile (/private/var/folders/y3/xmq4pt3n5vl07hd9jf2zpyh00000gr/T/ts-node-dev-hook-26832653000996154.js:69:33)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at require.extensions..jsx.require.extensions..js (/private/var/folders/y3/xmq4pt3n5vl07hd9jf2zpyh00000gr/T/ts-node-dev-hook-26832653000996154.js:114:20)
    at require.extensions.<computed> (/private/var/folders/y3/xmq4pt3n5vl07hd9jf2zpyh00000gr/T/ts-node-dev-hook-26832653000996154.js:71:20)
    at Object.nodeDevHook [as .ts] (/Users/../Documents/GitHub/taste-explorer/node_modules/ts-node-dev/lib/hook.js:63:13)
[ERROR] 19:31:42 Error: Missing SPOTIFY_CLIENT_ID

Any idea why this might be?

tusharwebd commented 8 months ago

Adding this dependency and initializing config in util file resolved the issue:

import dotenv from 'dotenv';

dotenv.config()

adambechtold commented 8 months ago

Nice!

Which file did you add that to?

I just added a different solution in this PR I'll merge soon. I just added an explicit npx dotenv -e .env -- ... call within the npm run dev command.

I'll test out your solution though if you lmk which file you added that to. I'm curious how that approach interacts with the npm run dev:local and npm run dev:remote commands I use to quickly toggle between connecting to my local db and a remote development db I have.

tusharwebd commented 8 months ago

I added the changes in spotify.api.ts and lastfm.api.ts.

tusharwebd commented 8 months ago

QQ: The environment variables also include SESSION_SECRET="<session-secret>". How do I generate this session secret?

adambechtold commented 8 months ago

I added the changes in spotify.api.ts and lastfm.api.ts.

Got it. I'll take a closer look at that approach to make sure it maintains the ability to swap environment variables quickly with different .env files.

QQ: The environment variables also include SESSION_SECRET="". How do I generate this session secret?

This can be any long, complex, random string. You can generate one with something like openssl rand -base64 32

(Thanks for asking this! I've added this to the docs update PR)

tusharwebd commented 8 months ago

I am also facing some issue setting up the db. I used npm run dev:local to start server and use docker for the db.

[INFO] 01:22:51 ts-node-dev ver. 2.0.0 (using ts-node ver. 10.9.1, typescript ver. 5.3.2)
Listening on port 3000
prisma:error 
Invalid `prisma.user.findMany()` invocation in
/Users/.../Documents/GitHub/taste-explorer/src/users/users.service.ts:188:37

  185 export async function getAllUsers(): Promise<UserWithId[]> {
  186   try {
  187     // get user info from database
→ 188     const users = await prisma.user.findMany(
The table `User` does not exist in the current database.
we got an error PrismaClientKnownRequestError: 
Invalid `prisma.user.findMany()` invocation in
/Users/.../Documents/GitHub/taste-explorer/src/users/users.service.ts:188:37

  185 export async function getAllUsers(): Promise<UserWithId[]> {
  186   try {
  187     // get user info from database
→ 188     const users = await prisma.user.findMany(
The table `User` does not exist in the current database.
    at si.handleRequestError (/Users/.../Documents/GitHub/taste-explorer/node_modules/@prisma/client/runtime/library.js:125:6817)
    at si.handleAndLogRequestError (/Users/.../Documents/GitHub/taste-explorer/node_modules/@prisma/client/runtime/library.js:125:6151)
    at si.request (/Users/.../Documents/GitHub/taste-explorer/node_modules/@prisma/client/runtime/library.js:125:5859)
    at l (/Users/.../Documents/GitHub/taste-explorer/node_modules/@prisma/client/runtime/library.js:130:9805) {
  code: 'P2021',
  clientVersion: '5.8.1',
  meta: { modelName: 'User', table: 'User' }
}
Error: Users could not be retrieved.
    at Object.<anonymous> (/Users/.../Documents/GitHub/taste-explorer/src/users/users.service.ts:200:11)
    at Generator.throw (<anonymous>)
    at rejected (/Users/.../Documents/GitHub/taste-explorer/src/users/users.service.ts:29:65)
[ERROR] 01:23:23 Error: Users could not be retrieved.

Any guidance on how to fix this?

adambechtold commented 8 months ago

We need to use prisma to apply the latest schema to the database:

npx prisma migrate dev

I've updated the README to reflect this.

(Sorry for the delay! Had some travel come up this week).

adambechtold commented 8 months ago

I appreciate the work you're doing to work through the hiccups of getting it running locally. Sorry that hasn't been smooth.

If you run into more issues getting going, feel free to book a time on my calendar. We can work through the issues synchronously to get you all set up.

https://calendar.amie.so/s/troubleshoot-with-adam

adambechtold / taste-explorer

Feature - Show Progress Indicator While Playlist is Loading #20

Background

🎯 Goal - It is clear that a playlist is loading