This project relies on boltz-core: https://github.com/BoltzExchange/boltz-core
We use boltz-core as a git sub-module inside the src directory. If you are cloning this project from github, remember to cd into src/boltz-core and run yarn install and npm run compile. This will add the node modules required by boltz and generate required files and folders.
This project uses NextJS, specifically nextjs-advanced-starter: https://github.com/agcty/nextjs-advanced-starter
- [Trelis MVP 👾]
Crypto is hard (really hard). Even integrating an existing end-to-end solution takes a few days to setup and understand. This project aims to provide instant payments links using a publicly accessible API endpoint that uses the secure boltz backend in a non-custodial way to tranfer funds.
- Fast design workflow with Tailwind CSS 2.0
- write css like the cool kids
- unused classes are purged automatically = really small css bundle size
- TypeScript
- typed JavaScript
- drastically reduces errors
- #1 must have in any web-dev project
- Customizable ESLint config
- AirBnB code guidelines + prettier rules
- Code formatting with Prettier
- Code is auto-formatted on save
- Inter font
- Nice looking apple-like open source font.
- Don't like it? It's easily replacable
- Standardized absolute imports
- Import from @components/MyComp instead of ../../components/MyComp
- You will first need to clone https://github.com/BoltzExchange/boltz-core and place the entire project under the src directory. This works for now even though it includes a ton of unecesary source code.
npm install
# or
yarn install
# then
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
First party dependency for resetting input styles so you don't have to manually reset like this:
textarea,
input[type="text"],
input[type="search"],
input[type="button"],
input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults. Just add the class "prose" to your html and content will be styled automatically.
E.g this html:
<article class="prose lg:prose-xl">
<h1>How to set up an enterprise Next.js stack</h1>
<p>
Configuring Next.js with TypeScript, ESLint & prettier can become really
annoying, especially if you're a beginner and don't know the intricate
details of all the moving parts in a web-dev environment. The most important
things you have to set up are:
</p>
<ul>
<li>A working ESLint config</li>
<li>Prettier plugins that auto-format your code</li>
<li>Absolute imports</li>
</ul>
</article>will be rendered like this:
If you don't need or want this dependency you can safely remove it.
| File name | What it does |
|---|---|
tsconfig.json |
TypeScript configuration. Tells IDE which absolute imports exist and works in conjunction with .babelrc |
.eslintrc.json |
Config file for finding and fixing problems in code. E.g: No function should be used before it's defined. |
tailwind.config.js |
TailwindCSS config. Adds new sizes, shadows, borders etc. to your tailwind classes. |
postcss.config.js |
Tells your project to include TailwindCSS in build chain. |
prettier.config.js |
Rules for formatting your code. E.g: indent code 6 spaces instead of 4 |
babelrc.js |
Extends the Next.js babel config and defines absolute imports. |
.vscode/settings.json |
Custom settings for your VSCode workspace. Tells VSCode to auto-format code on save. |
- In
src/pages/_app.tsxreplace the link tag with your url (can be Google Fonts, Adobe Typekit, etc.)
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>- In tailwind.config.js replace "Inter" with your custom font
extend: {
fontFamily: {
sans: ["Inter", ...defaultTheme.fontFamily.sans],
}As of Next 10.0.2 google fonts are optimized automatically: https://nextjs.org/blog/next-10-2#automatic-webfont-optimization
Tip: The font you choose should have at least these weights: 400, 500, 600, 700, 800. You need these weights for the tailwind font classes to have an effect. E.g if you don't include the weight 500, the class "font-medium" won't have any effect.
If you need additional rules or want to turn off specific rules just edit .eslintrc.js. Only change the order of plugins and items in the "extends" array if you know what you're doing as this can have unexpected side effects: Items on the bottom ovverride the former items. This is the intended behaviour so you can extend and configure existing rules easily. For example first we add the popular airbnb rules and then have prettier ovverride some of these rules so code formatting doesn't interfere with other rules.
This will instruct Next.js to set up a new alias to your specific folder. If you try to import a file with @myalias now it will still throw an error however because we need to tell our IDE that this path actually exists:
Add path in .tsconfig
"@myalias/*": ["./src/myaliasfolder/*"]That's it! Nextjs 11 now automatically sets up babel and everything else and just works. In previous releases you had to manually configure babel as well.
If you're a beginner and don't know which extensions you need, definitely install these:
- ESLint: Adds error highlighting to VSCode.
- Prettier: Auto-fixes formatting errors everytime you hit save.
- TailwindCSS Intellisense: Tailwind className suggestions as you type
- Headwind: Makes sure your tailwind classes have the correct order which makes components easier to read.
If you're not yet familiar with some of the technologies used in this project here are some resources to help you get started:
Tailwind CSS course: Free course by the creators of tailwind. Definitely check it out. It helps you "think" in tailwind. E.g before going through this course I styled my webapps by adding classes from the beginning. However, a much better approach is to 1) semantically structure your html without any classes and 2) to then add styling by using tailwind classes.
ESLint config guide: If you need to configure ESLint read their documentation (or at least the parts you need). You'll be surprised how much just makes sense after that.