Nifty League Frontend Monorepo

Built with Turborepo!

What's inside?

This Turborepo includes the following apps/packages:

Apps

• app: a Next.js app for our web3 dashboards at app.niftyleague.com
• docs: a Docusaurus app for our docs at niftyleague.com/docs
• smashers: a Next.js app for our website niftysmashers.com
• web: a Next.js app for our website niftyleague.com

Packages

• @nl/ui: a stub React component library shared by all applications
• @nl/theme: a common theme wrapper for NextJs apps using Material-UI
• @nl/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @nl/prettier-config: prettier configuration overrides
• @nl/typescript-config: tsconfig.json configs used throughout the monorepo

Note: Each package/app strictly uses TypeScript

Development Ports

• app: http://localhost:3001
• docs: http://localhost:3002
• smashers: http://localhost:3003
• web: http://localhost:3000

Utilities

This Turborepo has some additional tools already setup for you:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting

Getting Started

Install turbo globally

To install turbo globally for ease of use:

pnpm install turbo --global

Set working directory to root

All commands are run from the root directory!

cd nifty-fe-monorepo

Install dependencies

We use pnpm to manage dependencies.

pnpm install

Add dependencies

Please install dependencies only where they're used.

To add a dependency to a specific app directory use --filter

pnpm add PACKAGE_NAME --filter=DIRECTORY_NAME

Build

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

turbo build

Develop

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

turbo dev

Testing

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

turbo lint

[?] you can also use turbo lint:fix to run linting with --fix

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

turbo format

To check TypeScript in all apps and packages, run the following command:

turbo type-check

To run all of the above test commands together, run the following command:

turbo test

Updating dependencies

--recursive, -r

Concurrently runs update in all subdirectories with a package.json (excluding node_modules).

--latest, -L

Update the dependencies to their latest stable version as determined by their latest tags.

--workspace

Tries to link all packages from the workspace. Versions are updated to match the versions of packages inside the workspace.

--interactive, -i

Show outdated dependencies and select which ones to update.

pnpm up -r --workspace

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:

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

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Support

Email [email protected]

OR

Join the Nifty League Discord Server and message a admin!