Skip to content

Latest commit

 

History

History
123 lines (81 loc) · 7.06 KB

README.md

File metadata and controls

123 lines (81 loc) · 7.06 KB
Raw

Getting Started

Here is a list of documentation to help you get started:

Frontend

  • React - Library for building user interfaces
  • Next.js - Framework for routing and server-side rendering
  • Next-intl - Internationalization library
  • nuqs - Easy to use query params
  • BlockNote - Tool for markdown textboxes
  • React Hook Form - When we need to handle form validation
  • Tanstack Query - TRPC wraps Tanstack Query which is how we fetch data from the backend

Styling

Backend

  • TRPC - Tool for creating API endpoints as functions
  • Lucia - Authentication library
  • Drizzle - ORM for interacting with the database (Postgres under the hood)
  • s3-client - AWS S3 client for uploading files

Infrastructure

  • Docker - Containerization tool for the application, database and storage
  • Colima - Container runtime for docker, I recommend this over Docker Desktop because of performance and license
  • Docker Compose - Tool for running multi-container applications
  • nginx - Reverse proxy for routing requests to the correct service

Other resources

  • Mozilla - Great resource for looking up documentation for web technologies
  • Can I use - Check browser support for different web technologies (especially useful for CSS)

Icons

  • When using custom icons that are not provided by lucide, make sure to add them as SVGs to the components/assets/icons folder. This improves performance since the icons are handled as vectors and not as images.

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 internationalization 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.

If you can't install Bun, you can always use Node.js with the npm command instead, but it will not be as fast as Bun.

First, install dependencies:

bun install

Then, run the development server:

bun dev

Open http://localhost:3000 with your browser to see the result.

Build

When you build the project, you pre-render all the Server Side Generated (SSG) pages. This makes the site load faster and perform better and behave like it will when it is deployed. When serving the built project it will not hot reload when you make changes to the code like it does in development mode.

You can build the project with the following command:

bun run build

Then setup environment variables by copying the .env.example file to .env and fill in the values. .env files are used to store sensitive information like API keys and database credentials and it will not be committed to the repository.

To serve the build locally, run:

bun run start

Check linting and formatting

To check linting and formatting you run the respective command:

bun lint

If you are using vscode and are experiencing issues with types, you can restart the typescript server by pressing cmd + shift + p and then type TypeScript: Restart TS Server (You need to have a typescript file open for this to work).

You can also try restarting the whole editor by pressing cmd + shift + p and then type Developer: Reload Window.

On windows you can use ctrl instead of cmd.

Commit messages

We are using Conventional Commits 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 to help you write the commit messages.

Code quality

  • 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. Also type is more flexible than interface since it can be used for unions and intersections.

Naming conventions

  • All layout components should end with Layout. For example: DefaultLayout.
  • All page components should end with Page to make it clear it is a whole page. For example: AboutPage.