ubiquitous-waffle

This is an open-source demo discord bot + dashboard

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

docs: a Next.js app with Tailwind CSS for Dashboard * Bot Documenation
web: another Next.js app with Tailwind CSS for the Landing Page + Dashboard itself.
ui: a React component library with Tailwind CSS & daisyui shared by both web and docs applications
bot: a Discord.JS bot that will communicate with web, for updating settings, creating commands, etc.
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.

Building packages/ui

This example is setup to build packages/ui and output the transpiled source and compiled styles to dist/. This was chosen to make sharing one tailwind.config.js as easy as possible, and to ensure only the CSS that is used by the current application and its dependencies is generated.

Another option is to consume packages/ui directly from source without building. If using this option, you will need to update your tailwind.config.js to be aware of your package locations, so it can find all usages of the tailwindcss class names.

For example, in tailwind.config.js:

  content: [
    // app content
    `src/**/*.{js,ts,jsx,tsx}`,
    // include packages if not transpiling
    "../../packages/**/*.{js,ts,jsx,tsx}",
  ],

Utilities

This Turborepo has some additional tools already setup for you:

Tailwind CSS for styles
Daisy UI for Design UI
TypeScript for static type checking
ESLint for code linting
Prettier for code formatting

Using this example

Run the following command:

git clone https://github.com/timmy-time/ubiquitous-waffle.git ubiquitous-waffle
cd ubiquitous-waffle
yarn install
yarn build
yarn dev