DEV Community

BoopyKiki
BoopyKiki

Posted on

Modern Web Development with Turborepo, Next.js, TailwindCSS, NestJS, and More…

#nextjs #tailwindcss #react #webdev

NFT Marketplace

Introduction

Github Project

I started this project mainly for fun. So it’s not perfect! 😅 I wanted to learn and experiment with various tools like monorepo with Turborepo, Next.js, NestJS, Prisma, tailwindcss... So, I created a simple, fake, responsive application using this NFT Marketplace template from Anima. For the images I used DALL.E. I hope it can help or inspire anyone interested in these tools. Enjoy it! And let me know :)

Image description

Requirements

  • nodejs
  • pnpm (you can use another package manager, but pnpm is recommended. Personally, I use it for this project)
  • Yarn
  • npm

This is my configuration at the time of writing this README:

  • Node 22.1.0
  • pnpm 9.0.6
  • yarn 1.22.22
  • npm 10.7.0

If you don't know some tools used in this project, you can check the following links:

Package Manager

Which package manager do you want to use?

Turborepo doesn't handle installing packages, so you'll need to choose one of:

Installation 

$ git clone https://github.com/kiki-le-singe/nft-marketplace.git <name>
$ cd <name>
Enter fullscreen mode Exit fullscreen mode

Warning If you use yarn or npm, you need to update the package.json file in the root of the project and use your version of yarn or npm:

{
  "packageManager": "yarn@1.22.22",
  "workspaces": ["apps/*", "packages/*"]
}
Enter fullscreen mode Exit fullscreen mode

or

{
  "packageManager": "npm@10.7.0",
  "workspaces": ["apps/*", "packages/*"]
}
Enter fullscreen mode Exit fullscreen mode

You must to replace all "workspace:*" by "*" inside the package.json files in the apps, packages and the root of the project. Indeed, only pnpm uses the workspace keyword.

When your package manager is set, you can go to the apps/api and add a .env file with the following content: DATABASE_URL="file:./dev.db"

Go to the root of the project and run the following command:

$ pnpm|yarn|npm install
Enter fullscreen mode Exit fullscreen mode

Run 

$ pnpm|yarn|npm dev (to run all the apps)
Enter fullscreen mode Exit fullscreen mode

If you want to run the apps separately:

$ pnpm|yarn|npm dev --filter api (port 3002)
$ pnpm|yarn|npm dev --filter web (port 3000)
$ pnpm|yarn|npm dev --filter docs (port 3001)
Enter fullscreen mode Exit fullscreen mode

Inside apps/api to see the database in the browser (port 5555):

$ npx prisma studio
Enter fullscreen mode Exit fullscreen mode

For production:

$ pnpm|yarn|npm build
Enter fullscreen mode Exit fullscreen mode

Then go to the root of apps/[api|docs|web] and run:

$ pnpm|yarn|npm start
Enter fullscreen mode Exit fullscreen mode

Then open localhost:3002 for the api, localhost:3000 for the web and localhost:3001 for the docs if the web app is already running.

Be careful
If you have run this script pnpm|yarn|npm dev, the docs app could be running before the web app. In this case, the docs app will be on localhost:3000 and the web app on localhost:3001

API

For the api, there are some routes available:

Features

[WIP] Features to come (maybe...)

  • authentification
  • improve the API
  • SEO (metadata, etc.)
  • i18n
  • a11y
  • tests (unit and e2e)
  • performance optimization (images, etc.)

Turborepo starter

This is an official starter Turborepo.

Using this example

Run the following command:

npx create-turbo@latest
Enter fullscreen mode Exit fullscreen mode

What's inside?

This Turborepo includes the following packages/apps:

Apps and Packages

  • api: a NestJS app
  • 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:

Build

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

cd my-turborepo
pnpm build
Enter fullscreen mode Exit fullscreen mode

Develop

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

cd my-turborepo
pnpm dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Useful Links

Learn more about the power of Turborepo:

Top comments (0)

Read next

mrcaption49 profile image

Deploy a Django and React application using Render and integrate AWS S3

Pranav Bakare -

ahmetilhn profile image

Prevents re-execution of large javascript functions that have been processed once with the same parameter.

Ahmet İlhan -

adg29 profile image

`nextjs-eject`: Control and Customization

Alan Garcia -

dawngate profile image

Nextjs + Cypress + Code coverage Setup

LamNVQ -