ReactPlay Docs

Official documentation for ReactPlay, built with Docora — a Next.js documentation theme.

Check the ReactPlay Official Repository for more information.

What is ReactPlay

react-play is an open-source web app that helps you learn ReactJS faster with a hands-on practice model. It is a collection of ReactJS projects you can use to learn ReactJS.

Is that all? Nope. You can also create your projects and share them with the world. The best part is that the ReactJS experts will review your project code before it gets part of the ReactPlay app. Isn't that a pure WIN-WIN?

This repository serves as the documentation for ReactPlay. It includes information on how to perform various activities on the platform.

Develop

Requires Node.js 20.9 or later.

npm install

npm run dev

The site runs at http://localhost:3000 and redirects to the default locale at /en.

Build and preview a production bundle:

npm run build

npm run start

Project structure

reactplay-docora/
├── content/             # All documentation, one folder per locale
│   ├── en/
│   │   ├── index.mdx    # Landing page (/en)
│   │   └── docs/        # Guides (/en/docs/...)
│   └── bn/              # Bengali translation, same tree
├── app/                 # Next.js App Router
│   ├── [locale]/        # Locale layout and content catch-all
│   ├── api/             # Search and assistant routes
│   └── globals.css      # Theme stylesheet
├── lib/source.ts        # Content source
├── docs.config.ts       # Site configuration (nav, footer, i18n, socials)
├── next.config.ts       # Next.js configuration
└── public/              # Static assets

Write

Every file under content/ becomes a route:

File	Route
content/en/index.mdx	/en
content/en/docs/1.getting-started/2.contribution-guide.mdx	/en/docs/getting-started/contribution-guide
content/bn/docs/1.getting-started/2.contribution-guide.mdx	/bn/docs/getting-started/contribution-guide

The numeric prefix sets sidebar order and is stripped from the URL. A folder becomes a sidebar section; its title and icon come from the .navigation.yml beside its pages.

Pages are MDX and can use Docora's MDC components:

---
title: Contribution Guide
description: Where to start contributing to ReactPlay.
icon: heart-handshake
---

::tip
New to open-source? Follow [this guide](https://opensource.guide/how-to-contribute/) to jumpstart your Open Source journey 🚀
::

Translations

Locales are declared in docs.config.ts. To add one, add it to i18n.locales, copy content/en to content/<code> and translate it — routes, the sidebar and the language switcher follow automatically. Interface strings are overridden per locale under i18n.messages.

🤩 How to contribute to this repo?

You can contribute to this repo in several ways:

1. Write documentation for the various parts of ReactPlay
2. Suggest changes to the existing docs
3. Improve the documentation website

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

💡 New to Open Source? Follow this guide to jumpstart your Open Source journey 🚀

🍴 Fork and Clone the Repo

First, fork this repo with the Fork button in the top right corner. If you are new to forking, please watch this YouTube Guide to get started.

Once forked, click the bright green <> Code button and copy the URL, then run:

git clone <URL_LINK>

Change into the directory with cd <directory-name>.

⬆ Set Upstream

We recommend setting an upstream repo to make pulling and fetching easier:

git remote add upstream https://github.com/reactplay/docs

Check that it was added:

git remote -v

🌴 Create a branch

Create a separate branch for each issue you work on:

git checkout -b <branch-name>

Keep the branch name clear and straightforward.

🔒 Commit and Push

git add .

git commit -m "<message>"

git push -u origin <branch-name>

The message should describe your changes since the last commit.

🙌 Pull Request

Open the forked repo on GitHub, go to the Pull Requests tab and click New Pull Request. Select the base and compare branches carefully — base is the branch you are merging into, compare is the branch you made your changes on. Then click Create Pull Request and wait until we review and merge it.

Until it gets merged, browse ReactPlay and contribute to it.

Troubleshooting Guide

Here are some common issues faced and their solutions:

Issue 1: npm install is not working

• Solution: Try deleting node_modules and reinstalling dependencies.

Issue 2: Console errors or warnings

• Solution: Update dependencies or clear the .next cache.

For more details, see our full Troubleshooting Guide.