Get Started

This guide will help you quickly set up your development environment and make your first contribution to Databayt. Whether you're a seasoned developer or just starting out, we'll walk you through everything you need to know.

Technology used: Next.js, React, TypeScript, Tailwind CSS, pnpm... see full stack →

Prerequisites

Before you begin, make sure you have the following set up:

šŸ”§ Complete Setup Guides

New to GitHub or local development? We have detailed visual guides to help you:

GitHub Account

Free GitHub account with SSH keys configured. See our GitHub Setup Guide for detailed instructions.

Node.js 18+

Download from nodejs.org. We recommend the LTS version for stability.

pnpm

Fast, disk space efficient package manager. Install with: npm install -g pnpm

Code Editor

For free, we recommend VS Code. For paid, we recommend Cursor.

Quick Start

Get up and running in 5 minutes:

šŸ“‹ Detailed Step-by-Step Guide

For a comprehensive visual guide with screenshots, check out our Localhost page.

1. Fork & Clone

First, fork the repository you want to contribute to on GitHub, then clone it locally:

# Replace [repository] with the specific repo you want to contribute to
git clone https://github.com/your-username/[repository].git
cd [repository]

2. Install Dependencies

Install all project dependencies using pnpm:

pnpm install

3. Set Up Environment

Copy the environment variables file and configure as needed:

cp .env.example .env.local

4. Start Development Server

Run the development server:

pnpm dev

Your app should now be running at http://localhost:3000 šŸŽ‰

Need more help? Our visual localhost setup guide provides detailed screenshots for each step above.

Your First Contribution

Finding Something to Work On

Good First Issues

Look for issues labeled "good first issue" - these are specifically chosen for newcomers.

Documentation

Improve docs, fix typos, add examples. Perfect for getting familiar with our codebase.

UI Components

Build reusable components following our design system and patterns.

Making Changes

  1. Create a branch for your changes:

    git checkout -b feature/your-feature-name
    
  2. Make your changes following our coding patterns

  3. Test your changes locally:

    pnpm build
    pnpm lint
    
  4. Commit your changes using conventional commits:

    git add .
    git commit -m "feat: add new component feature"
    
  5. Push and create a Pull Request:

    git push origin feature/your-feature-name
    

Development Workflow

Project Structure

Understanding our architecture helps you navigate the codebase:

src/
ā”œā”€ā”€ app/                 # Next.js app router
ā”œā”€ā”€ components/          # Reusable UI components
│   ā”œā”€ā”€ ui/             # Basic UI primitives
│   ā”œā”€ā”€ landing/        # Landing page components
│   └── [feature]/      # Feature-specific components
ā”œā”€ā”€ lib/                # Utility functions
ā”œā”€ā”€ styles/             # Global styles
└── types/              # TypeScript type definitions

Key Commands

Development

pnpm dev - Start dev server
pnpm build - Build for production
pnpm start - Run production build

Quality

pnpm lint - Run ESLint
pnpm type-check - Check TypeScript
pnpm format - Format with Prettier

Getting Help

Community Support

Discord Community

Join our active Discord server with 500+ members. Get real-time help and connect with other contributors.

GitHub Discussions

Ask questions, share ideas, and discuss features in our GitHub discussions forum.

Mentorship Program

New contributors get paired with experienced mentors who provide:

  • Code review and feedback
  • Guidance on best practices
  • Help with technical challenges
  • Career development advice

Next Steps

Once you're set up and have made your first contribution:

  1. Explore the codebase - Browse different repositories to understand our ecosystem
  2. Read the patterns - Check our development patterns guide
  3. Join the community - Connect with other contributors on Discord
  4. Find your niche - Identify areas that match your interests and skills
  5. Share your work - Showcase your contributions and get feedback

Resources

Essential Reading

Quick Links


Ready to build something amazing? The best way to learn is by doing. Pick a good first issue and start contributing today. Remember, every expert was once a beginner, and we're here to support your journey every step of the way.