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
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
-
Create a branch for your changes:
git checkout -b feature/your-feature-name
-
Make your changes following our coding patterns
-
Test your changes locally:
pnpm build pnpm lint
-
Commit your changes using conventional commits:
git add . git commit -m "feat: add new component feature"
-
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 serverpnpm build
- Build for productionpnpm start
- Run production buildQuality
pnpm lint
- Run ESLintpnpm type-check
- Check TypeScriptpnpm format
- Format with PrettierGetting 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:
- Explore the codebase - Browse different repositories to understand our ecosystem
- Read the patterns - Check our development patterns guide
- Join the community - Connect with other contributors on Discord
- Find your niche - Identify areas that match your interests and skills
- Share your work - Showcase your contributions and get feedback
Resources
Essential Reading
- Architecture Overview ā Understand our system design
- Development Patterns ā Learn our coding standards
- Contributing Guide ā Detailed contribution guidelines
- Revenue Sharing ā How contributors earn from their work
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.