This content originally appeared on DEV Community and was authored by BoopyKiki
NFT Marketplace
Introduction
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 :)
Requirements
- nodejs
-
pnpm (you can use another package manager, but
pnpmis 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>
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/*"]
}
or
{
"packageManager": "npm@10.7.0",
"workspaces": ["apps/*", "packages/*"]
}
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
Run
$ pnpm|yarn|npm dev (to run all the apps)
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)
Inside apps/api to see the database in the browser (port 5555):
$ npx prisma studio
For production:
$ pnpm|yarn|npm build
Then go to the root of apps/[api|docs|web] and run:
$ pnpm|yarn|npm start
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:
- localhost:3002 list some images served by the api.
- localhost:3002/api the starting point of the api.
- localhost:3002/api/creations/:id return the creation with the id 1.
- localhost:3002/api/creations/explore return the creations to explore.
- localhost:3002/api/categories return all the categories.
- localhost:3002/api/categories/trending return the trending categories.
- localhost:3002/api/users return all the users.
Features
- Monorepo with Turborepo
-
Next.js for the web and docs apps:
- App Router (Features available in /app)
- SSR
- Data Fetching on the server side using streaming and Loading UI and Streaming
- Dynamic imports (Lazy Loading)[https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading]
- tailwindcss
- Responsive Design
- animations (hover, click, etc.)
- skeleton loading Adding loading skeletons
- Modal with Parallel and Intercepting Routes Parallel Routes: Modals Intercepting Routes: Modals
- Dark Mode
NestJS for the api app
Prisma for the database
[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
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 bothwebanddocsapplications -
eslint-config-custom:eslintconfigurations (includeseslint-config-nextandeslint-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
Build
To build all apps and packages, run the following command:
cd my-turborepo
pnpm build
Develop
To develop all apps and packages, run the following command:
cd my-turborepo
pnpm 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:
- Tasks
- Caching
- Remote Caching
- Filtering
- Configuration Options
- CLI Usage
- Package Installation
- Workspaces
- Prisma and NestJS
- NestJS Recipes Prisma
- NestJS/Prisma - Install and generate Prisma Client
This content originally appeared on DEV Community and was authored by BoopyKiki
BoopyKiki | Sciencx (2024-08-20T13:19:05+00:00) Modern Web Development with Turborepo, Next.js, TailwindCSS, NestJS, and More…. Retrieved from https://www.scien.cx/2024/08/20/modern-web-development-with-turborepo-next-js-tailwindcss-nestjs-and-more/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.