Merge pull request #10 from hackerspace-ntnu/9-docs-more-detailed-inf…

…ormation-in-readmemd

docs: added more resources and better explainations to the README.md

README.md

@@ -2,12 +2,19 @@
 
 Here is a list of documentation to help you get started:
 
-- [Next.js](https://nextjs.org/docs) - Framework for routing and server-side rendering
 - [React](https://react.dev/reference/react) - Library for building user interfaces
+- [Next.js](https://nextjs.org/docs) - Framework for routing and server-side rendering
+- [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library
 - [Tailwind CSS](https://tailwindcss.com/docs) - Styling library
+- [Class Variance Authority](https://beta.cva.style/) - Tool for creating style variants in our UI components
 - [Shadcn/ui](https://ui.shadcn.com/docs) - Reusable UI components
+  - [Radix UI Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction) - Primitives library that Shadcn/ui is built on, great documentation if you need to access the underlying components
 - [Lucide](https://lucide.dev/icons/) - Icons library
-- [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library
+
+### Other resources
+
+- [Mozilla](https://developer.mozilla.org/en-US/) - Great resource for looking up documentation for web technologies
+- [Can I use](https://caniuse.com/) - Check browser support for different web technologies (especially useful for CSS)
 
 ## Icons
 
@@ -16,12 +23,16 @@ Here is a list of documentation to help you get started:
 ## Quirks to keep in mind
 
 - When you want to link to a new internal page use the `<Link>` component from `@/lib/navigation` instead of the normal anchortag `<a>`. This will ensure that the page is loaded with the correct locale. If you want to link to external resources or other media, use the built-in `<Link>` component from Next.js. Remember to add `prefetch={false}` to the `<Link>` component if the page is not visited often.
+  - If you need to use both `<Link>` components from `@/lib/navigation` and Next.js, make sure to import the Next.js `<Link>` component as `ExternalLink` to avoid naming conflicts.
 - Remember to surround Links with the `Button` ui component. This will provide some basic styling and accessibility features for keyboard navigation even if it is not supposed to look like a button.
+- For interationalization use the `useTranslations` hook from `next-intl`. For client components you can pass the translations as props.
 
 ## Development setup
 
 Make sure you have Bun installed on your machine. If you don't have it, you can download it [here](https://bun.sh/docs/installation).
 
+If you can't install Bun, you can always use [Node.js](https://nodejs.org/en/) with the `npm` command instead, but it will not be as fast as Bun.
+
 First, install dependencies:
 
 ```bash
@@ -82,9 +93,10 @@ On windows you can use `ctrl` instead of `cmd`.
 
 ## Commit messages
 
-We are using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for our commit messages. This is to ensure that we have a consistent way of writing commit messages and to make it easier to generate changelogs. Try to follow the guidelines as closely as possible.
+We are using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for our commit messages. This is to ensure that we have a consistent way of writing commit messages to make it easier to understand what has been changed and why. Try to follow the guidelines as closely as possible. You can also use [the recommended vscode extension](.vscode/extensions.json) to help you write the commit messages.
 
 ## Code quality
 
-- In react we want to use functions instead of const variables with arrow function syntax to keep the code as consistant as possible. An exception is when using the forwardRef hook, then we need to use the arrow function syntax.
-- Only use default export for pages or layouts etc. For components we want to use named exports. This is to make it easier to find the components in the codebase.
+- To keep the code as consistent as possible use functions for react components or hooks instead of const variables with arrow function syntax. An exception is when using the forwardRef hook or when creating compound components.
+- Only use default export for pages or layouts etc. since it is required by Next.js. For everything else use named exports. This is to make it easier to find the components in the codebase or change them without ending up with different names for the same component.
+- Use `type` instead of `interface` for typescript types. This is to keep the code consistent and to make it easier to read. Aldso `type` is more flexible than `interface` since it can be used for unions and intersections.