# Prerequisites

Before you can contribute to BetterBugs Developer Utility Tools or run it locally, make sure you have these installed:

**System Requirements**

| Tool            | Version  | Download                                                                                                                                                                                                                                |
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Node.js**     | >=20.8.0 | [https://nodejs.org](https://vscode-file/vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html)                                  |
| **npm**         | >=10.0.0 | Comes with Node.js                                                                                                                                                                                                                      |
| **Git**         | Latest   | [https://git-scm.com](https://vscode-file/vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html)                                 |
| **Code Editor** | Any      | We recommend VS Code: [https://code.visualstudio.com](https://vscode-file/vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html) |

Check what you have installed:

```powershell
node --version
npm --version
git --version
```

**Knowledge Requirements**

You should be familiar with:

* **React 18** — Components, hooks, state management
* **TypeScript** — Basic types and interfaces
* **Next.js 14** — App Router, file-based routing
* **Tailwind CSS** — Utility-first styling
* **Git** — Clone, commit, push, pull requests

Don't know these? Start with:

* React: [https://react.dev](https://vscode-file/vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html)
* TypeScript: [https://www.typescriptlang.org/docs/](https://vscode-file/vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html)
* Next.js: [https://nextjs.org/docs](https://vscode-file/vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html)
* Tailwind: [https://tailwindcss.com/docs](https://vscode-file/vscode-app/c:/Users/Syed%20Fahad/AppData/Local/Programs/Microsoft%20VS%20Code/bdd88df003/resources/app/out/vs/code/electron-browser/workbench/workbench.html)

**Project Dependencies**

All dependencies are listed in `package.json`. When you run `npm install`, these are installed automatically:

Key packages:

* **Next.js 14** — React framework
* **React 18** — UI library
* **TypeScript** — Type safety
* **Tailwind CSS** — Styling
* **Monaco Editor** — Code editing for tools
* **SASS** — CSS preprocessing
* **Ant Design** — UI components

**Environment Setup**

You don't need any `.env` files to start developing locally. The app works out of the box.

Optional: If you want to test production features (PWA offline mode), set:

```javascript
NEXT_ENV=production npm run dev
```

**Browser Requirements**

The app works in all modern browsers:

* Chrome/Edge 90+
* Firefox 88+
* Safari 14+

For PWA/offline features, use a browser with Service Worker support (all modern browsers).

How to Contribute? Learn here.

**Stuck?** Ask in [Discord](https://discord.com/invite/HF8XjwVtPh)