Getting Started
First steps
Either click this link (which directs you to the "Use this template" button on our GitHub page) or initialize it using npm:
Once you've cloned the repository, read the README.md file and follow the instructions there. Particularly, to start a local development server:
Modifying code
Your first step should be modifying the files in
src/app/(main). This is where you customize the pages of your website, including this very page you're reading right now.You should think of this template as a starting point for your project and not a dependency. You should modify it to fit your needs, and there is absolutely no forwards-compatibility. Don't expect to be able to update the template to a new version.
Working through TODOs
It is recommended to use TODOs to keep track of undone tasks. frontend-starter has special support for TODOs.
By using the string TODO ASAP anywhere in your code, you can create a blocking TODO item. If any are found in your repository, a notice will be displayed on every build. To see all blocking TODOs, run:
If you clone the repository from GitHub, it comes with a few TODOs already in place. Be sure to complete them before going into production.
Fonts & styling
frontend-starter uses Vercel's Geist Sans & Mono font by default.
Sometimes, you may see some text that is using a handwriting font like this. This is a safeguard to make sure you wrap all text in a component that supports Joy UI styling. Usually, you would use
<Paragraph body /> (see documentation) or <Typography /> for this purpose.For more about styling and CSS-in-JS, see the page about Joy UI.