README.md

Turborepo JavaScript, Tailwindcss, shadcn/ui and NextUI starter for Multi-vendor & e-com solutions.

This is Not an official starter Turborepo.

Using this example

Clone this repo then run the following command:

npm i

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

• store: a Next.js 14 app with Tailwind CSS
• dashboard: another Next.js 14 app with Tailwind CSS
• @repo/ui: a stub React component library with Tailwind CSS, NextUI, shadcn\ui shared by both store & dashboard
• @repo/database: Prisma ORM wrapper to manage & access your database

Each package/app is 100% JavaScript.

Building packages/ui

This example is set up to produce compiled styles for ui components into the dist directory. The component .jsx files are consumed by the Next.js apps directly using transpilePackages in next.config.js. This was chosen for several reasons:

• Make sharing one tailwind.config.js to apps and packages as easy as possible.
• Make package compilation simple by only depending on the Next.js Compiler and tailwindcss.
• Maintain clear package export boundaries.

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

For example, in tailwind.config.js:

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

If you choose this strategy, you can remove the tailwindcss and autoprefixer dependencies from the ui package.

Note

To add shadcn component cd into packages/ui then use any shadcn CLI example :

# C:\..\your-project\packages\ui>
npx  shadcn-ui@latest  add  button

this will add the component in packages/ui/src/Shadcn

Don't forget to add your component to the export in packages/ui/package.json .

Database

We use Prisma to manage & access our database. As such you will need a database for this project, either locally or hosted in the cloud.

To make this process easier, we offer a docker-compose.yml file to deploy a MySQL server locally with a new database named turborepo (To change this update the MYSQL_DATABASE environment variable in the docker-compose.yml file):

cd my-turborepo
docker-compose up -d

Once deployed you will need to copy the .env.example file to .env in order for Prisma to have a DATABASE_URL environment variable to access.

cp .env.example .env

If you added a custom database name, or use a cloud based database, you will need to update the DATABASE_URL in your .env accordingly.

Once deployed & up & running, you will need to create & deploy migrations to your database to add the necessary tables. This can be done using Prisma Migrate:

npx prisma migrate dev

If you need to push any existing migrations to the database, you can use either the Prisma db push or the Prisma migrate deploy command(s):

npm run db:push

# OR

npm run db:migrate:deploy

There is slight difference between the two commands & Prisma offers a breakdown on which command is best to use.

An optional additional step is to seed some initial or fake data to your database using Prisma's seeding functionality.

To do this update check the seed script located in packages/database/src/seed.js & add or update any users you wish to seed to the database.

Once edited run the following command to run tell Prisma to run the seed script defined in the Prisma configuration:

npm run db:seed

For further more information on migrations, seeding & more, we recommend reading through the Prisma Documentation.

Utilities

This Turborepo has some additional tools already setup for you:

• Tailwind CSS, NextUI, shadcn\ui for styles
• Prisma for database ORM
• Docker Compose for local database