Keep in mind that this project is based on Next.js 13 and will make heavy use of it's features. Please check the link at the bottom or google the necessary features directly to make yourself familiar before you start.
- Building Blocks
- Getting Started - Next.js
- Code Quality - ESLint
- Code Quality - Tailwind
- UI Development - Storybook
- Testing - Playwright
- Learn More
- Contribute
(Documentation links and versions as of initialization.)
First, run the development server:
npm run devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/button.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
npm run lint
# or
npm run lint-fix-
Configure your ESLint in you Code Quality Tools. (preference, but useful: Run eslint --fix on save)
-
Setup a keybinding to 'Fix ESLint Problems' ! Use it frequently.
-
Make sure to use these commands before every commit and push to find and purge all errors and provide a coherent code base.\
-
Make sure to have following Plugins installed if you are on IntelliJ !
-
Tailwind Formatter
- className sorting - Tailwind is already ugly as it is, helps with readability
- Make sure to adjust your Keymap and use it frequently.
-
Tailwind CSS
-
Preview of the resulting CSS for classes on hover and in the code completion popup)
-
Intellisense for Tailwind CSS class names after @apply and in HTML
-
npm run storybookOpen https://localhost:6006 with your browser to open the storybook Dashboard.
- Read the "Introduction" section to get an idea of how storybook works.
Here you will find all configured components with their different variations, props and documentation. Make sure to document every component in here to also test their individual viability.
npm run pw-test
#or
npm run pw-codegen- Make sure to regularly run these tests (should eventually run in CI).
This will open the playwright browser UI with all the necessary information and data.
- Codegeneration is helpful to 'record' a click order to test and verify simple user interaction. This is not however a replacement for proper test writing.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
TODO: Explain how other users and developers can contribute to make your code better.
If you want to learn more about creating good readme files then refer the following guidelines. You can also seek inspiration from the below readme files: