docs: Setup husky and prettier for code formatting standards

[sstephanyy]

Solved issue #211
[DOC]: Set up prettier and pre-commit hook to prettify codebase

[sstephanyy]

Hey there! I’ve made the changes you suggested in the PR. Could you take another look when you have a moment? Thanks for your help in improving this!

[cdrani]

@sstephanyy: Awesome! 🎉 . Thanks for your efforts in beautifying the codebase.

[sstephanyy]

@cdrani: Hey, I remembered I have a question that I wanted ask you! If were we using docker, would we need to worry about to set exact versions for dependencies and configure it on save-prefix?

Sorry for the silly question, I am still try to learn things 😆

[cdrani]

@sstephanyy: Not a silly question.

Yes, because even in docker environment we still need to install dependencies.

The issue is in regards to how npm registry utilizes semver. In our package.json 1.8.9 is different from ^1.8.9 and ~1.8.9. If we don't use the exact prefix, when I run pnpm i, the package version downloaded is 1.8.9, but when you setup your environment days, weeks, or months later, you might have downloaded version 1.12.0 if prefix is ^ , or 1.8.21 for prefix ~. In a release build we also need to run pnpm i and the versions used in the build environment (Github Actions) would be different than either of ours.

For consistent reproducibility we want the same package versions we are using in development as in a production environment or release bundle. We want the assurance that if it works in development it should work in production.

save-prefix='' is just ensuring future packages are added using -E or --save-exact flags even if we don't include them when we run pnpm add.

[sstephanyy]

@cdrani: thanks so much for the clear explanation. I have one more question: I'm trying to understand how all the code works in the project. I noticed a model and service folder, which are typically used in backend projects to handle business logic. Are you using Node.js for the backend? Also, what about the components folder—is that React code?

[cdrani]

@sstephanyy: No problem.

Everything is pure JavaScript to keep the project as lean as possible. No React. No backend as there's no "database". We use sessionStorage and local.storage for persisted storage.

components are just reusable ui used across many sections of the ui, such as icons. It's just similar folder naming structure.

services are similar to approach in backend code. In backend code, the service could access a database to retrieve data. We don't have a database, so it's limited to just making requests to the Spotify api using window.fetch.

I created an issue to create an architecture doc for easier understanding and navigation of the codebase. Please ask questions and/or leave notes about the codebase architecture here #220. The architecture file will be drafted based on questions/comments in the issue until we get to a good state. Thanks for bringing this up.

[sstephanyy]

@cdrani: Got it. Thanks 😄. I wasn’t able to work on the project today, but I think I will be able to tomorrow.