CODAC Monorepo

Technologies

• 📏 TypeScript 5.0
• ⚡️ Next.js 13.2
• ⚛️ React 18.2
• 🌬️ Tailwind CSS 3.3
• 📕 Storybook 7.0
• 🧪 Testing Library
• 🃏 Jest
• 🧹 ESLint
• 🤖 CommitLint
• 💖 Prettier
• 📦 pnpm
• 🏎️ Turborepo
• 👷 Github Actions

What's inside?

This monorepo includes the following packages/apps:

Apps

• codac-community: a Next.js app with Tailwind CSS dedicated to for the Code Academy Berlin community deployed

• codac-lms: a Next.js app with Tailwind CSS dedicated to making a standadone LMS deployed

• codac-quasseln: a Next.js app with Tailwind CSS for a real time homegrown chat app

Packages

• codac-graphql-types: a graphql types code generation app using codegen. It generates types and custom react hooks to query the CODAC administration server

• codac-ui: official design system of React/Next components done with Tailwind CSS and Storybook deployed

• eslint-config-custom: shared eslint configuration

• jest-config: shared jest configuration

• tailwind-config: shared tailwind configuration with custom theme

• tsconfig: tsconfig.jsons used throughout the monorepo

Building Types packages/codac-graphql-types

This page generates the types and custom Apollo GraphQl hooks from a Strapi backend Strapi Admin GraphQl Playground

Building packages/codac-ui

This example is setup to build packages/codac-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
• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Contributing

The project uses pnpm as package manager. Install it with npm install -g pnpm

To contribute to the project, follow these steps:

• Clone the project : git clone https://github.com/CodeAcademyBerlin/CODAC.git
• Go to the project directory : cd CODAC
• Install dependencies : pnpm install
• Build the project : pnpm build
• Create your feature branch (git checkout -b feature/AmazingFeature)
• Adapt file pnpm-workspace.yaml to your needs
• Make your changes
• Commit your changes (git commit -m 'Add some AmazingFeature')
• Push to the branch (git push origin feature/AmazingFeature)
• Open a pull request