# Sound Harbor
## Repo

Original: https://github.com/simplyjuanc/SoundHarbor

Forked: https://github.com/jianingroja/SoundHarbor

## Tasks

### Refactor

CSS & responsive design
src/app/dashboard -> Hi, name

#### JS
Extract reusable components
Write components with arrow function

component structures:
- `<LoginDiscogs />` is inside of `<LoginSpotify />`

- [x] separate services, util, server actions

#### UI
Nav bar
- Collection
- Recommendations

Light mode

Not found page
Error page
Loading page

#### chores
File structure

#### convention
model.Release.User -> lower case

### Feature

(comment) for AUTHENTICATION, we can use Clerk or Next.Auth:
If we decide on Next.Auth, we can follow this tutorial:
- https://nextjs.org/learn/dashboard-app/adding-authentication

If we decide on Clerk, we can follow this youtube tutorial:
- https://www.youtube.com/watch?v=dHCprszrMqo
- https://clerk.com/docs/quickstarts/nextjs

Authentication
- cookie doesn't expire
- Sign up: should do what the Login is currently doing + other stuff: create the account, connect to spotify, connect to discogs, authorize discogs, save somehow all these info in the db.
- Log in: Just log in to the SoundHarbor app; in the background, call the info from the access granted during the sign up (if needed); + fix 1.

Sell records

Mobile app - not the focus of legacy project
- [Tauri](https://tauri.app/v1/guides/getting-started/setup/next-js/)

TODOs writen inside the code:
- discogs-callback (route.ts): need to enable to incorporate multiple users.
-

### Fix
- [x] Expire cookies
2. After adding new record, it appears at random order in the collection?
3. Error handling in the code

## Environment variables
### Spotify

SPOTIFY_SCOPE = user-read-private || user-read-email || user-top-read

SPOTIFY_REDIRECT_URI = http://127.0.0.1:3000/api/auth/spotify-callback

user-read-private: https://developer.spotify.com/documentation/web-api/concepts/scopes#user-read-private

user-read-email: https://developer.spotify.com/documentation/web-api/concepts/scopes#user-read-email

user-top-read: https://developer.spotify.com/documentation/web-api/concepts/scopes#user-top-read

### Discogs

DISCOGS_REDIRECT_URI = http://127.0.0.1:3000/api/auth/discogs-callback

## Git
### git flow

1. Keep local code updated with public repo, every time before developing a new feature.

git checkout dev
git pull origin dev

2. a. Create a new branch, and work on new feature in that branch. Commits along.

git checkout -b <new-feature-branch> dev

2. b. If the feature branch already exists, and is under development. But the feature depends on the updated codebase, or, have known conficts with the updated codebase.

git checkout <new-feature-branch>
git rebase dev

3. Push feature branch to the public repo.

git push origin <new-feature-branch>

4. Create a pull request, from `feature branch` to `dev`. Assign code reviewer.

5. [Optional] After code review, organize commit messages, and push again.

git checkout <new-feature-branch>
git push origin <new-feature-branch> -f

### git commands
`git branch` To see all branches
`git branch <name>` To create a new branch
`git checkout <name>` To switch to the <name> branch
`git checkout -b <name> <base-branch>` To create, and switch to the <name> branch, frm the <base-branch> branch

## Learning material

### Next.js 14
- next 14 doc:
- https://nextjs.org/docs
- https://github.com/vercel/next.js/tree/canary
- next 13 crash course: https://www.youtube.com/watch?v=Y6KDk5iyrYE&t=3s
- server action: https://www.youtube.com/watch?v=dDpZfOQBMaU

### Prisma
- doc: https://www.prisma.io/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql
- crash course: https://www.youtube.com/watch?v=CYH04BJzamo

### Git

### Zustane: state management
- doc: https://github.com/pmndrs/zustand

### Daisy UI: tailwind library
- doc: https://daisyui.com/

## Tools

**Commitizen**

- https://www.npmjs.com/package/commitizen
- https://github.com/commitizen/cz-cli

## Questions

environment variables
- spotify scope, spotify redirect uri, discogs redirect uri

`use server` inside of function: on purpose!
- server actions

state management

disicogs mock data:

## Clean Code

// good
if ( condition ) {
    doSomething()
}
    
// bad
if ( condition ) doSomething()