Skip to main content

Prerequisites

Before you begin, ensure you have the following installed on your system:
  • Node.js (version 20 or higher)
  • npm or yarn package manager
  • Git for version control

Getting Started

1

Clone the Repository

Fork and clone the Open Tarteel repository to your local machine:
git clone https://github.com/your-username/open-tarteel.git
cd open-tarteel
Replace your-username with your GitHub username if you forked the repository.
2

Install Dependencies

Install all required dependencies using your preferred package manager:
npm install
This will install all dependencies listed in package.json, including:
  • Next.js - React framework
  • TypeScript - Type safety
  • Tailwind CSS - Styling
  • Jotai - State management
  • React Intl - Internationalization
3

Environment Configuration

Create a .env.local file in the root directory for environment variables:
cp .env.example .env.local
The .env.example file contains all the necessary environment variable templates.
4

Verify Installation

Run the development server to verify everything is set up correctly:
npm run dev
Open http://localhost:3000 in your browser to see the application running.

Development Tools

TypeScript Configuration

The project uses TypeScript with strict mode enabled. Key configurations in tsconfig.json:
  • Target: ES2017
  • Strict mode: Enabled
  • Path aliases: Configured for cleaner imports
{
  "paths": {
    "@/*": ["./src/*"],
    "@components/*": ["./src/components/*"],
    "@types/*": ["./src/types/*"],
    "@utils/*": ["./src/utils/*"],
    "@hooks/*": ["./src/hooks/*"],
    "@gun/*": ["./src/gun/*"]
  }
}

Code Quality Tools

The project includes several tools to maintain code quality:
  • ESLint - Code linting with Next.js and TypeScript rules
  • Prettier - Code formatting
  • Husky - Git hooks for pre-commit checks
  • lint-staged - Run linters on staged files
  • Commitlint - Enforce conventional commit messages

Editor Setup

We recommend using VS Code with the following extensions:
  • ESLint
  • Prettier
  • Tailwind CSS IntelliSense
  • TypeScript Vue Plugin (Volar)
The project includes VS Code settings in .vscode/ for optimal development experience.

Common Issues

If you encounter module resolution errors, try deleting node_modules and reinstalling:
rm -rf node_modules package-lock.json
npm install

Port Already in Use

If port 3000 is already in use, you can specify a different port:
PORT=3001 npm run dev

Type Errors

Run the type checker to identify TypeScript issues:
npm run type-check

Next Steps

Now that your environment is set up, you can:

Build docs developers (and LLMs) love