ipetk / vhs-frontend-lab Goto Github PK

This app uses create-react-app as dev tooling. Let's migrate that to Vite to get all the benefits of faster performance when hot reloading, bundling and cold starting the app.

You have the same navigate statement called both in try and catch. Use the finally clause to run the shared statement.

https://www.w3schools.com/jsref/jsref_try_catch.asp

When using a DELETE request to delete a VHS that doesn't have a thumbnail, server responds with 500 - works fine when deleting a VHS that has a thumbnail.

WTR:
Make a DELETE request for a VHS that doesn't have a thumbnail. Observe server response.

Expected result:
Server responds with 204, as it does when deleting a VHS with a thumbnail, deletes VHS.

Actual result:
Server responds with 500, "Internal server error", deletes VHS.

Additional info:

[Nest] 5084  - 11/22/2022, 11:58:24 AM   ERROR [ExceptionsHandler] The "path" argument must be of type string or an instance of Buffer or URL. Received null
TypeError: The "path" argument must be of type string or an instance of Buffer or URL. Received null
    at Object.unlink (node:fs:1752:10)
    at VhsService.deleteVhs (F:\Frontend\Projects\vhs-frontend-lab\vhs-backend\src\vhs\vhs.service.ts:62:8)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at F:\Frontend\Projects\vhs-frontend-lab\vhs-backend\node_modules\@nestjs\core\router\router-execution-context.js:46:28
    at F:\Frontend\Projects\vhs-frontend-lab\vhs-backend\node_modules\@nestjs\core\router\router-proxy.js:9:17

In order to make sure that our whole project is properly linted and formatted, especially when working in a team, we sometimes need to run some actions on our codebase while performing a git commit or git push.

There is a tool that enables us to do this in Node based projects and it's called Husky: https://typicode.github.io/husky/#/

Read about how it works and set it up in your project. On all commits, run eslint and prettier to lint and format the whole project.

Currently you have a dedicated route for /not-found. What happens if the user enters your domain and inputs a path that your router doesn't handle, like /denfiuaebrfur? React-router enables us to handle such a case as well. Make it so that non existing routes all navigate to the NotFound component.

• backend GET route for all VHS takes query params with which you can filter VHS tapes by name, description, genre and such, look it up and use it so that you can get rid of filteredVHS

• find another image that is either SVG or PNG and get rid of that ts-ignore
• move convertDuration function outside of component somewhere to utils

I18n or internationalization is a technique we use in coding projects that solves the issue of "content shouldn't live in code".

When we have components that show some textual content we never want to hardcode strings into the code, but rather extract them into structured JSON files where we can put them under certain keys and then we use the keys in the code.

This way it's possible to make several JSON objects with the same keys but different values depending on the active language on user's system for example, and that's localization.

Set up i18n in your project and implement it (extract all strings you have hardcoded). Use https://react.i18next.com/getting-started

Do some research on how to define alias imports in Vite and use them to shorten all your import statements. For example, it's possible to define an alias for all imports from pages folder so that you can write import SomeComponent from '@pages'.

More info at: https://vitejs.dev/config/shared-options.html#resolve-alias

Remove Props if not used. If used, make it an interface instead of type.
Additionally, links are separated with a <br> tag, let's change that and make a flex container with horizontal direction and beautify the navbar with CSS. :)

Migrate your project from npm to yarn and use the modern version of yarn called yarn berry.

Here is some documentation for this kind of migration:
https://yarnpkg.com/getting-started/migration

Do not use zero-installs.

• install prettier to dev dependencies and set up .prettierrc.json file and .prettierignore file in project root
• move all @types/* packages to dev dependencies

It's common practice nowadays to use containerization for all services we deploy to the web. Since this is a new topic for you, I will route you to Docker's getting started documentation: https://docs.docker.com/get-started/

This section has 10 parts in the sidebar which you should read to start understanding the basics of containerizing an application. Also, this video is a gem: https://www.youtube.com/watch?v=d-PPOS-VsC8&list=PLvjWHH6VW-WJJHRLp9kdpupCi6O9QXn2I&index=31

When you get to know Docker a bit, try to construct a Dockerfile for your frontend application. Also, include a .dockerignore file.

It's important to use linters in coding projects because they make sure your codebase follows a set of rules that will make it consistent, more readable and follow some best practice guidelines.

For frontend projects, we use a tool called ESLint: https://eslint.org/

Do some research on how this works and how it is configured and then configure some eslint rules on the project. Feel free to use any guides online and extend existing plugins for eslint rules.