Localhost

A complete step-by-step guide to fork, clone, and run Databayt projects locally on your machine.

Step 1: Fork the Project

Start by creating your own copy of the repository on GitHub.

1. Navigate to the repository you want to contribute to
2. Click the "Fork" button in the top-right corner

Step 2: Create Your Fork

Ensure the repository name is available and create your fork.

1. Verify the repository name is available
2. Keep the default settings (unless you need to change them)
3. Click "Create fork" to complete the process

Step 3: Open VS Code/Cursor

Launch your preferred code editor and prepare to clone the repository.

1. Open a new window in VS Code or Cursor
2. Click on "Clone Repository" or use the Source Control panel
3. Prepare to paste your repository URL

Step 4: Clone from GitHub

Get your forked repository URL and clone it locally.

1. Go back to your forked repository on GitHub
2. Click the green "Code" button
3. Copy the HTTPS URL to your clipboard
4. Paste it in your editor's clone dialog

Step 5: Choose Local Directory

Select where you want to store the project on your computer.

1. Choose a directory for your projects (e.g., ~/Documents/projects/)
2. Create a new folder if needed
3. Select the location and confirm

Step 6: Open in Editor

Open the cloned project in your code editor.

1. Wait for the cloning process to complete
2. Click "Open" when prompted
3. Your project is now ready for development

Step 7: Install Dependencies

Use pnpm to install all required dependencies.

1. Open the integrated terminal (Ctrl/Cmd + ~)
2. Run the install command:

pnpm install

3. Wait for installation to complete

Step 8: Set Up Environment

Configure your environment variables for local development.

1. Copy the environment template:

cp .env.example .env.local

2. Edit .env.local with your specific values (if needed)
3. Save the file

Step 9: Start Development Server

Launch the development server and see your app running.

1. Run the development command:

pnpm dev

2. Wait for the server to start
3. Open your browser to http://localhost:3000

Step 10: Verify Installation

Confirm everything is working correctly.

1. Check the website loads properly in your browser
2. Verify hot reload by making a small change
3. Ensure no console errors are present

Next Steps: Making Your First Contribution

Now that your local environment is set up, you're ready to contribute!

Create a Feature Branch

git checkout -b feature/your-feature-name

Make Your Changes

1. Follow our coding patterns - Check /docs/pattern
2. Use our components - Browse src/components/ui/ for reusable components
3. Test locally - Ensure your changes work properly

Test Your Changes

# Build the project
pnpm build

# Run linting
pnpm lint

# Type checking (if available)
pnpm type-check

Commit and Push

# Stage your changes
git add .

# Commit with conventional format
git commit -m "feat: add new feature description"

# Push to your fork
git push origin feature/your-feature-name

Create a Pull Request

1. Go to your fork on GitHub
2. Click "Compare & pull request"
3. Fill out the PR template
4. Submit for review

Common Commands Reference

Troubleshooting

Common Issues

Port already in use?

# Kill process on port 3000
npx kill-port 3000
# Or use a different port
pnpm dev -- --port 3001

Node modules issues?

# Clean and reinstall
rm -rf node_modules pnpm-lock.yaml
pnpm install

Environment variables not working?

• Check .env.local file exists
• Restart the development server
• Ensure variables start with NEXT_PUBLIC_ for client-side

Getting Help

---

🎉 Congratulations! You now have a fully functional local development environment. Start exploring the codebase, pick an issue that interests you, and make your first contribution to Databayt!