Closed adambechtold closed 8 months ago
Hi @adambechtold! New contributor here. I'd be interested to work on this. Can I pick this up?
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/
You may run into a couple of issues:
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 useI 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
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?
Adding this dependency and initializing config in util file resolved the issue:
import dotenv from 'dotenv';
dotenv.config()
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.
I added the changes in spotify.api.ts
and lastfm.api.ts
.
QQ: The environment variables also include SESSION_SECRET="<session-secret>"
. How do I generate this session secret?
I added the changes in
spotify.api.ts
andlastfm.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)
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?
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).
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.
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.