bromso / jonasbroms-www

Jonas Bröms official website built with Turborepo, Nextjs, React, Shadcn/UI, TailwindCSS, Framer Motion & AcernityUI. Hosted on Vercel.

Odd-Mono

The architecture is built on several different ideas & concepts, such as: Micro-Frontends and Microservices. The purpose of dividing a website & app into tiny compartmentalized apps is to achieve:

• Easier debugging
• Higher performance
• Increase Security
• Easier to distribute content & information
• Increase SEO capabilities

We've made a visualization in Figma of the architecture in this repo, which can hopefully provide a satelite view of how it was intended to be built and work, for more information click here. We've also created a Sitemap in Figma with the intent of providing you a more comprehensive understanding of what type of content the app will generate on install & run: click here.

What's inside?

Node

Avatar	Name	Category
	Node Version Manager	Package Manager
	Nodejs	JavaScript runtime engine
	Turborepo	Monorepo Tool
	Yarn	Package Manager

Coding Conventions

Avatar	Name	Category
	Editorconfig	Coding Styles
	ESLint	Code Linter
	Prettier	Opinionated Code Formatter

Tools

Avatar	Name	Category
	Storybookjs	UI, Testing & Documentation Tool

Apps

Avatar	Name	Category
	Nextjs	Page Generator
	TypeScript	TypeScript is JavaScript with syntax for types
	Material UI - MUI	Comprehensive frontend suite of UI components, styling & theme

File structure

🧮 odd-mono
┃
┠── 📁 apps (workspaces)
┃   ├┄┄ 📁 blocks
┃   ├┄┄ 📁 blog
┃   ├┄┄ 📁 docs
┃   ├┄┄ 📁 help
┃   ├┄┄ 📁 jobs
┃   ├┄┄ 📁 legal
┃   ├┄┄ 📁 shop
┃   └┄┄ 📁 www
┃
┠── 📁 packages (workspaces)
┃   ├┄┄ 📁 components
┃   ├┄┄ 📁 design-blocks
┃   ├┄┄ 📁 layouts
┃   ├┄┄ 📁 svg
┃   ├┄┄ 📁 theme
┃   └┄┄ 📁 views
┃
┠── 📁 tools (workspaces)
┃   └┄┄ 📁 story
┃
┠── 📁 utils (workspaces)
┃   ├┄┄ 📁 eslint-config-custom
┃   └┄┄ 📁 tsconfig
┃
┠┄┄ 🐭 .editorconfig
┠┄┄ 🔩 .eslintignore
┠┄┄ 🔩 .eslintrc
┠┄┄ 💄 .prettierignore
┠┄┄ 💄 .prettierrc
┠┄┄ 🟥 .gitattributes
┠┄┄ 🟥 .gitignore
┠┄┄ 🐉 .nvmrc
┠┄┄ 📝 README.md
┠┄┄ 📝 CONTRIBUTING.md
┠┄┄ ⭕ turbo.json
┠┄┄ 📦 package.json
┖┄┄ 🧶 yarn.lock

Apps, Packages, Tools, Utils & Tests

API

Packages	Develop Command	Build Command	URL	Tech
API	yarn api:dev	yarn api:build	http://localhost:4000/	GraphQL, Apollo, Relay

UI, UX & Graphical Design

Packages	Develop Command	Build Command	URL	Tech
Story	yarn story:dev	yarn story:build	http://localhost:6006/	Storybook
Design			http://figma.com/@odduse	Figma

Apps

Structure of the apps that is used in this repository.

Packages	Develop Command	Build Command	URL	Description	Tech
Account	yarn account:dev	yarn account:build	http://localhost:3005/	Lorem	Nextjs
Blocks	yarn blocks:dev	yarn blocks:build	http://localhost:3008/	Lorem	Nextjs
Blog	yarn blog:dev	yarn blog:build	http://localhost:3001/	Lorem	Nextjs
Docs	yarn docs:dev	yarn docs:build	http://localhost:3006/	Lorem	Nextjs
Help	yarn help:dev	yarn help:build	http://localhost:3002/	Lorem	Nextjs
Jobs	yarn jobs:dev	yarn jobs:build	http://localhost:3004/	Lorem	Nextjs
Legal	yarn legal:dev	yarn legal:build	http://localhost:3003/	Lorem	Nextjs
Shop	yarn shop:dev	yarn shop:build	http://localhost:3007/	Lorem	Nextjs
WWW	yarn www:dev	yarn www:build	http://localhost:3000/	Lorem	Nextjs

App

Avatar	Name	Category

Apps and Packages

• docs: a Next.js app
• web: another Next.js app
• ui: a stub React component library shared by both web and docs applications
• eslint-config-custom: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• tsconfig: tsconfig.jsons used throughout the monorepo

Each package/app is 100% TypeScript.

Utilities

This turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Setup

This repository is used in the npx create-turbo command, and selected when choosing which package manager you wish to use with your monorepo (Yarn).

Build

To build all apps and packages, run the following command:

cd my-turborepo
yarn run build

Develop

To develop all apps and packages, run the following command:

cd my-turborepo
yarn run dev

Remote Caching

Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:

cd my-turborepo
npx turbo login

This will authenticate the Turborepo CLI with your Vercel account.

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:

npx turbo link

Useful Links

Learn more about the power of Turborepo:

• Pipelines
• Caching
• Remote Caching
• Scoped Tasks
• Configuration Options
• CLI Usage