react-weapons-of-choice Tailwind Templates

React Weapons Of Choice

A monorepo boilerplate for React projects using Nx, Tailwind CSS, and Shadcn.

#nx #react #shadcn-ui #spa #tailwindcss #typescript
Demo Download

RWOC Logo

react-weapons-of-choice

NOTE: This project is currently in alpha. In fact, it's very alpha. This means it is still under active development and may undergo significant changes. Features may be incomplete or unstable. Got suggestions on what you would like to see or how to make it better? Add an issue and let us know!

These badges represent the results of Lighthouse audits, which are run to ensure the application meets high standards in performance, accessibility, best practices, and SEO. Note that these audits are conducted for the desktop version of the application, as its primary use case is on desktop, although it is fully responsive.

View Detailed Lighthouse Report

Table of Contents

Overview

An open-source boilerplate designed to simplify the development of single-page React applications (SPAs). By leveraging Nx, Tailwind CSS, and Shadcn UI, this project offers developers a seamless and efficient starting point for building modern front-end applications. It is ideal for those who prefer not to use Next.js or cannot use it but still want the benefits of this powerful toolset.

Inspired by and based upon joshuarobs/nx-shadcn-ui-monorepo.

Thanks to the help from this tutorial here: https://medium.com/readytowork-org/monorepo-setup-with-nx-nextjs-and-shadcn-ui-3b72c3599470

Project Goals

  • Simplified Setup: Provide a ready-to-use boilerplate for developers looking to build SPAs using modern tools without SSR or Next.js.
  • Seamless Integration: Combine Nx for monorepo management, Tailwind CSS for utility-first styling, and Shadcn UI for cohesive, customizable UI components.
  • Scalability and Modularity: Offer a scalable architecture with reusable libraries and clear boundaries between projects.
  • Enhanced Developer Experience: Deliver a well-documented, intuitive, and maintainable codebase to boost productivity and reduce onboarding time.
  • Community Collaboration: Foster an open-source community to innovate, improve, and expand the project.

For a detailed breakdown of the project goals, see Project Goals.

Features

  • 🏗 Nx Monorepo: Modular and scalable workspace for managing multiple projects and libraries.
  • 🎨 Tailwind CSS: Utility-first CSS framework for rapid and responsive UI development.
  • đź–Ś Shadcn UI: A customizable component library for consistent and reusable design patterns.
  • ⚡ Vite: Fast and efficient development server and build tool.
  • 🚀 CI/CD Integration: Preconfigured workflows for automated builds and testing.

Why This Project Was Built

While tools like Nx, Tailwind CSS, and Shadcn UI are incredibly powerful and offer numerous benefits for modern front-end development, the process of configuring them can still be time-consuming, error-prone, and frustrating, even for experienced developers. This is because setting up such architectures from scratch is an infrequent task, and each setup can have its own unique challenges and nuances.

This project was built to address these challenges by providing a pre-configured, ready-to-use boilerplate that simplifies the initial setup process. By leveraging this boilerplate, developers can quickly start building their applications without worrying about the complexities of configuration, allowing them to focus on writing code and delivering features.

For more details on why a React SPA boilerplate may still have some value in a Next.js world, see Why a React SPA Boilerplate in a Next.js World?

Technologies Used

Installation

To install the project, follow these steps:

  1. Clone the repository:

    git clone https://github.com/CambridgeMonorail/react-weapons-of-choice.git

  2. Navigate to the project directory:

    cd react-weapons-of-choice

  3. Install dependencies:

    pnpm install

Usage

To run the dev server for your app, use:

npx nx serve client

To create a production bundle:

npx nx build client

To see all available targets to run for a project, run:

npx nx show project client

These targets are either inferred automatically or defined in the project.json or package.json files.

More about running tasks in the docs »

Run Tasks

The following scripts are available to manage and build the project:

  • Build

    • pnpm run build:affected: Build only the affected projects.
    • pnpm run build:all: Build all projects.
    • pnpm run build:client: Build the client application.
    • pnpm run build:shadcnui: Build the shadcnui library.

  • Clean

    • pnpm run clean: Clean all projects.

  • Format

    • pnpm run format:check: Check the formatting of the code.
    • pnpm run format: Format the code.

  • Lint

    • pnpm run lint:affected: Lint only the affected projects.
    • pnpm run lint:all: Lint all projects.
    • pnpm run lint:client: Lint the client application.
    • pnpm run lint:shadcnui: Lint the shadcnui library.

  • Precommit

    • pnpm run precommit: Run lint, type-check, build, and test for all projects before committing.

  • Prepare

    • pnpm run prepare: Prepare Husky for Git hooks.

  • Serve

    • pnpm run serve:client: Serve the client application.
    • pnpm run serve:storybook: Serve the Storybook instance.

  • Test

    • pnpm run test:affected: Test only the affected projects.
    • pnpm run test:all: Test all projects.
    • pnpm run test:client: Test the client application.
    • pnpm run test:shadcnui: Test the shadcnui library.

  • Type-check

    • pnpm run type-check:affected: Type-check only the affected projects.
    • pnpm run type-check:all: Type-check all projects.
    • pnpm run type-check:client: Type-check the client application.
    • pnpm run type-check:shadcnui: Type-check the shadcnui library.

Install Nx Console

Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.

Install Nx Console »

Make This Your Own

Follow these steps to fork and customize the boilerplate for your own project.

1. Fork the Repository

  1. Navigate to the original repository on GitHub.
  2. Click the Fork button in the upper-right corner to create a personal copy under your GitHub account.
  3. For detailed instructions, refer to GitHub’s Fork a repo documentation.

2. Clone the Forked Repository

  1. Locate the forked repository on your GitHub account.

  2. Click the Code button and copy the repository’s URL.

  3. Open your terminal and run:

    git clone https://github.com/<your-username>/<your-forked-repo>.git

    Replace <your-username> with your GitHub username and <your-forked-repo> with the repository name.

3. Update Project Identifiers

You can update project identifiers either manually or by using the setup script included in this boilerplate.

3.1 Manual Update

  1. Perform a global search and replace across the codebase to update:

    • Project name
    • URLs
    • Branding elements
    • Any other relevant identifiers
    • Images: Replace the following images with ones suitable for your use case:
      • apps\client\src\assets\images\app-logo.webp
      • docs/images/logos/app-logo.svg

  2. Ensure all instances of the original project name are replaced with your new project name.

3.2 Using the Setup Script

  1. Install project dependencies:

    pnpm install

  2. Run the setup script:

    pnpm run setup

    The script will prompt you to replace:

    • Organization: e.g., “CambridgeMonorail” → “YourOrgName”
    • Machine-Readable App Name: e.g., “react-weapons-of-choice” → “my-awesome-app”
    • Human-Readable App Name: e.g., “React Weapons of Choice” → “My Awesome App”
    • Abbreviation: e.g., “rwoc” → “maa”

    You will also have the option to set a new Git remote URL.

4. Modify Configuration Files

  1. Review and update configuration files—such as package.json and .env—to align them with your project’s requirements.
  2. Adjust metadata, dependencies, environment variables, and other project-specific settings as needed.

5. Review Documentation

  1. Replace references to the original project with your new project details.
  2. Update any relevant documentation (e.g., README, wiki pages) to reflect your project’s context and branding.

6. Set Up a New Remote Repository

  1. Create a new repository on GitHub for your customized project.

  2. In your terminal, navigate to your project’s directory and run:

    git remote remove origin
git remote add origin https://github.com/<your-username>/<your-new-repo>.git

    Replace <your-username> with your GitHub username and <your-new-repo> with the new repository name.

7. Push Changes to the New Repository

  1. Push your local changes to the new remote repository:

    git push -u origin main

    Make sure your local branch is named main. If not, replace main with the correct branch name.

8. Install Dependencies and Initialize Git Hooks

  1. Install any required dependencies (if you haven’t already):

    pnpm install

  2. Set up Git hooks or other initialization scripts:

    pnpm run prepare

    This typically configures hooks like pre-commit or lint-staged checks.

By following these steps, you can fully customize the boilerplate to fit your project’s needs while maintaining a clean, organized codebase.

Add new projects

While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.

Use the plugin's generator to create new projects.

To generate a new application, use:

npx nx g @nx/react:app client

To generate a new library, use:

npx nx g @nx/react:lib mylib

You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.

Learn more about Nx plugins » | Browse the plugin registry »

Theming Your App

To learn how to theme your app using Shadcn UI and Tailwind CSS, please refer to the detailed guide in docs/theming-a-new-app.md.

Note: The current theme was generated using the Ready.js Shadcn UI Theme Generator.

Adding a New Component Page to the Routing in Your React SPA

To add a new component page to the routing in your React SPA, please refer to the detailed guide in docs/adding-new-component-page.md.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes. For detailed guidelines on how to contribute, see Contributing.

License

This project is licensed under the MIT License.

Acknowledgments

  • joshuarobs/nx-shadcn-ui-monorepo
  • Shadcn UI
  • Nx
  • Placebeard: A fantastic service for placeholder images featuring bearded individuals, inspired by similar services like placekitten.com and placedog.com. We appreciate their free service for adding a touch of fun to our project.
  • unDraw: Open-source illustrations for any idea you can imagine and create. A constantly updated design project with beautiful SVG images that you can use completely free and without attribution. Created by Katerina Limpitsouni.
  • Shadcn UI Theme Generator: A tool for generating themes for Shadcn UI.

Learn more:

FAQs

Why doesn't the app load?

It's not finished yet.

Why is the button not working?

It's not finished yet.

Why is there no dark mode?

It's not finished yet.

Why does the page look weird on mobile?

It's not finished yet.

Why is the documentation incomplete?

It's not finished yet.

Why can't I find the feature I need?

It's not finished yet.

Why is the sky blue?

It's not finished yet. (Just kidding, that's actually due to Rayleigh scattering.)

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes