Heaptrader - Frontend

The frontend repo contains all the pages and user interface elements of the website.

Background

The frontend is written in TypeScript with the SvelteKit framework. In a production setting, it makes HTTP requests to the backend, but it can be tested independently.

The SvelteKit framework is used to make a single-page app (SPA), meaning that navigation between pages happens virtually, so that a full page load is not necessary. Many modern websites (like X.com) are SPAs. Normally, the downside of a SPA is that web crawlers and scripts can't see what's on your page, because JavaScript code must be run in order to render the page (ever try to Google a tweet?). SvelteKit offers a workaround for this, called adapter-node, which is a Node.js server that prerenders static parts of the page, meaning that the client only needs to "hydrate" it with the dynamic parts upon loading a page. The routes live under src/routes/, where the subdirectory names correspond to URLs in the browser, minus the +page.svelte part.

Svelte allows you to create reusable UI components, which can be found under src/stories/. We use the Storybook library to test individual components, hence the *.stories.svelte files.

We use Tailwind CSS to assist with our design language. This unopinionated framework replaces most CSS syntax with classes that can be applied directly to HTML elements, allowing for greater consistency and clarity. Style attributes are now inline with markup, meaning there are fewer languages to juggle.

The Axios library for JS/TS is used to make HTTP requests. It has nice features like automatic handling of CSRF tokens. The API client library is located under src/lib/*.ts. If you're working on this part, you should request an invite to the Insomnia project so you can see the canonical set of HTTP requests expected by the backend API.

Developing

Once you've created a project and installed dependencies with npm install, start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

Testing

Storybook (for testing UI components) can be run with npm run storybook. You have to write the *.stories.svelte files yourself if you're testing new components/changing parameters of an existing component.

Jest (for unit testing the API client) can be run with npm run test. This is meant to be run offline, without a backend, so all HTTP requests are mocked. Make sure to also do end-to-end testing, or refer to the Insomnia project regularly, to ensure all your mock requests and responses are up to date with the actual API. Test coverage can be calculated with npm run test --coverage, assuming all the tests are passing. Unit tests and mock classes live in src/lib/*.test.ts files.