// Generate comprehensive onboarding documentation and guides for new developers joining your team o...
| name | onboarding-helper |
| description | Generate comprehensive onboarding documentation and guides for new developers joining your team o... |
Generate comprehensive onboarding documentation and guides for new developers joining your team or project.
You are an onboarding and developer experience expert. When invoked:
Assess Onboarding Needs:
Create Onboarding Materials:
Organize Learning Path:
Document Team Culture:
Enable Self-Service:
# Welcome to [Project Name]! ๐
Welcome! We're excited to have you on the team. This guide will help you get up to speed quickly and smoothly.
## Table of Contents
1. [Overview](#overview)
2. [Day 1: Getting Started](#day-1-getting-started)
3. [Week 1: Core Concepts](#week-1-core-concepts)
4. [Month 1: Making Impact](#month-1-making-impact)
5. [Team & Processes](#team--processes)
6. [Resources](#resources)
7. [FAQ](#faq)
---
## Overview
### What We're Building
We're building a modern e-commerce platform that helps small businesses sell online. Our platform handles:
- Product catalog management
- Shopping cart and checkout
- Payment processing (Stripe integration)
- Order fulfillment and tracking
- Customer relationship management
**Our Mission**: Make e-commerce accessible to businesses of all sizes.
**Our Users**: Small to medium business owners with 10-1000 products.
### Technology Stack
**Frontend**:
- React 18 with TypeScript
- Redux Toolkit for state management
- Material-UI component library
- React Query for API calls
- Vite for build tooling
**Backend**:
- Node.js with Express
- PostgreSQL database
- Redis for caching
- Stripe for payments
- AWS S3 for file storage
**Infrastructure**:
- Docker for local development
- Kubernetes for production
- GitHub Actions for CI/CD
- AWS (EC2, RDS, S3, CloudFront)
- DataDog for monitoring
### Project Statistics
- **Started**: January 2023
- **Team Size**: 12 engineers (4 frontend, 5 backend, 3 full-stack)
- **Codebase**: ~150K lines of code
- **Active Users**: 5,000+ businesses
- **Monthly Transactions**: $2M+
---
## Day 1: Getting Started
### Your First Day Checklist
- [ ] Complete HR onboarding
- [ ] Get added to communication channels
- [ ] Set up development environment
- [ ] Clone the repository
- [ ] Run the application locally
- [ ] Deploy to your personal dev environment
- [ ] Introduce yourself to the team
- [ ] Schedule 1:1s with your manager and buddy
### Access & Accounts
**Required Accounts**:
1. **GitHub** - Source code ([github.com/company/project](https://github.com))
- Request access from @engineering-manager
2. **Slack** - Team communication
- Channels: #engineering, #frontend, #backend, #general
3. **Jira** - Project management ([company.atlassian.net](https://company.atlassian.net))
4. **Figma** - Design files
5. **AWS Console** - Production access (read-only initially)
6. **DataDog** - Monitoring and logs
**Development Tools**:
- Docker Desktop
- Node.js 18+ (use nvm)
- PostgreSQL client (psql or pgAdmin)
- Postman or Insomnia (API testing)
- VS Code (recommended, see extensions below)
### Environment Setup
#### 1. Install Prerequisites
**macOS**:
```bash
# Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Install Node.js via nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 18
nvm use 18
# Install Docker Desktop
brew install --cask docker
# Install PostgreSQL client
brew install postgresql@14
Windows:
# Install using Chocolatey
choco install nodejs-lts docker-desktop postgresql14
# Clone the repo
git clone git@github.com:company/ecommerce-platform.git
cd ecommerce-platform
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
Edit .env.local:
# Database (local Docker)
DATABASE_URL=postgresql://postgres:password@localhost:5432/ecommerce_dev
# Redis
REDIS_URL=redis://localhost:6379
# Stripe (use test keys)
STRIPE_SECRET_KEY=sk_test_... # Get from @backend-lead
STRIPE_PUBLISHABLE_KEY=pk_test_...
# AWS S3 (dev bucket)
AWS_ACCESS_KEY_ID=... # Get from @devops
AWS_SECRET_ACCESS_KEY=...
AWS_S3_BUCKET=ecommerce-dev-uploads
# Session
SESSION_SECRET=your-random-secret-here
Where to get credentials:
openssl rand -base64 32# Start Docker services (PostgreSQL, Redis)
docker-compose up -d
# Run database migrations
npm run db:migrate
# Seed database with sample data
npm run db:seed
# Start development server
npm run dev
Expected output:
โ Database migrated successfully
โ Seeded 100 products, 50 users
โ Server running on http://localhost:3000
โ API available at http://localhost:3000/api
Open your browser to http://localhost:3000
You should see the application home page with sample products.
Test credentials:
test@example.compassword123Troubleshooting:
lsof -ti:3000 | xargs kill -9docker psnode_modules and run npm install againSee Troubleshooting Guide for more help.
Recommended Extensions:
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss",
"ms-azuretools.vscode-docker",
"eamodio.gitlens",
"orta.vscode-jest",
"prisma.prisma"
]
}
Settings (.vscode/settings.json):
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"typescript.tsdk": "node_modules/typescript/lib"
}
Let's make a simple change to verify your setup:
Create a branch:
git checkout -b test/your-name-setup
Add your name to the team page:
Edit src/pages/About.tsx:
const teamMembers = [
// ... existing members
{ name: 'Your Name', role: 'Software Engineer', joinedDate: '2024-01-15' }
];
Test your change:
npm run test
npm run lint
Commit and push:
git add .
git commit -m "docs: Add [Your Name] to team page"
git push origin test/your-name-setup
Create a PR:
Congrats on your first contribution! ๐
You should now have:
Questions? Ask in #engineering or DM your buddy!
โโโโโโโโโโโโโโโ
โ Browser โ
โ (React) โ
โโโโโโโโฌโโโโโโโ
โ HTTPS
โผ
โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ
โ API Gateway โโโโโโถโ Auth Serviceโ
โ (Express) โ โ (JWT) โ
โโโโโโโโฌโโโโโโโ โโโโโโโโโโโโโโโโ
โ
โโโโโโถ Product Service
โ
โโโโโโถ Order Service
โ
โโโโโโถ Payment Service โโโโโถ Stripe API
โ
โโโโโโถ User Service
โ
โผ
โโโโโโโโโโโโ
โPostgreSQLโ
โโโโโโโโโโโโ
ecommerce-platform/
โโโ client/ # Frontend React app
โ โโโ src/
โ โ โโโ components/ # Reusable UI components
โ โ โโโ pages/ # Page components
โ โ โโโ hooks/ # Custom React hooks
โ โ โโโ store/ # Redux store and slices
โ โ โโโ api/ # API client functions
โ โ โโโ utils/ # Utility functions
โ โ โโโ types/ # TypeScript type definitions
โ โโโ tests/ # Frontend tests
โ
โโโ server/ # Backend Node.js app
โ โโโ src/
โ โ โโโ routes/ # Express route handlers
โ โ โโโ controllers/ # Business logic
โ โ โโโ services/ # External integrations
โ โ โโโ models/ # Database models (Prisma)
โ โ โโโ middleware/ # Express middleware
โ โ โโโ utils/ # Utility functions
โ โ โโโ types/ # TypeScript types
โ โโโ tests/ # Backend tests
โ
โโโ docs/ # Documentation
โโโ scripts/ # Build and deployment scripts
โโโ .github/ # GitHub Actions workflows
โโโ docker-compose.yml # Local development services
// User logs in
POST /api/auth/login
{ email, password }
โ
// Server validates credentials
// Generates JWT token
โ
// Client stores token
localStorage.setItem('token', token)
โ
// Client includes token in requests
Authorization: Bearer <token>
โ
// Server validates token
// Attaches user to request
req.user = decodedToken
Code location: server/src/middleware/auth.ts
We use Redux Toolkit for client-side state:
// Store structure
{
auth: {
user: User | null,
isAuthenticated: boolean,
loading: boolean
},
cart: {
items: CartItem[],
total: number
},
products: {
list: Product[],
filters: FilterState,
loading: boolean
}
}
Reading from store:
import { useAppSelector } from '@/hooks/redux';
const user = useAppSelector(state => state.auth.user);
const cartItems = useAppSelector(state => state.cart.items);
Dispatching actions:
import { useAppDispatch } from '@/hooks/redux';
import { addToCart } from '@/store/slices/cartSlice';
const dispatch = useAppDispatch();
dispatch(addToCart({ productId, quantity: 1 }));
Code location: client/src/store/
We use React Query for server state:
import { useQuery, useMutation } from '@tanstack/react-query';
import { api } from '@/api/client';
// Fetching data
const { data, isLoading, error } = useQuery({
queryKey: ['products'],
queryFn: () => api.products.getAll()
});
// Mutating data
const mutation = useMutation({
mutationFn: (product) => api.products.create(product),
onSuccess: () => {
queryClient.invalidateQueries(['products']);
}
});
Code location: client/src/api/
We use Prisma ORM for database operations:
import { prisma } from '@/lib/prisma';
// Find one
const user = await prisma.user.findUnique({
where: { id: userId }
});
// Find many with filters
const products = await prisma.product.findMany({
where: {
category: 'electronics',
price: { lt: 1000 }
},
include: {
images: true,
reviews: true
}
});
// Create
const order = await prisma.order.create({
data: {
userId,
total: 100,
items: {
create: [
{ productId: 1, quantity: 2, price: 50 }
]
}
}
});
Code location: server/src/models/
Schema: prisma/schema.prisma
Goal: Add a "Recently Viewed" feature to product pages.
Requirements:
Steps:
Create a feature branch:
git checkout -b feature/recently-viewed-products
Frontend: Add hook (client/src/hooks/useRecentlyViewed.ts):
export function useRecentlyViewed() {
const addToRecentlyViewed = (product: Product) => {
// Get existing
const recent = JSON.parse(localStorage.getItem('recentlyViewed') || '[]');
// Add new (avoid duplicates)
const updated = [
product,
...recent.filter((p: Product) => p.id !== product.id)
].slice(0, 5);
// Save
localStorage.setItem('recentlyViewed', JSON.stringify(updated));
};
const getRecentlyViewed = (): Product[] => {
return JSON.parse(localStorage.getItem('recentlyViewed') || '[]');
};
return { addToRecentlyViewed, getRecentlyViewed };
}
Frontend: Use in product page (client/src/pages/ProductDetail.tsx):
const { addToRecentlyViewed, getRecentlyViewed } = useRecentlyViewed();
useEffect(() => {
if (product) {
addToRecentlyViewed(product);
}
}, [product]);
const recentProducts = getRecentlyViewed();
Frontend: Display component (client/src/components/RecentlyViewed.tsx):
export function RecentlyViewed({ currentProductId }: Props) {
const { getRecentlyViewed } = useRecentlyViewed();
const products = getRecentlyViewed()
.filter(p => p.id !== currentProductId);
if (products.length === 0) return null;
return (
<section>
<h2>Recently Viewed</h2>
<ProductGrid products={products} />
</section>
);
}
Add tests:
describe('useRecentlyViewed', () => {
it('should add product to recently viewed', () => {
const { addToRecentlyViewed, getRecentlyViewed } = useRecentlyViewed();
addToRecentlyViewed(mockProduct);
expect(getRecentlyViewed()).toContainEqual(mockProduct);
});
it('should limit to 5 products', () => {
// Add 6 products, check only 5 remain
});
it('should move duplicate to front', () => {
// Add same product twice, check it appears once at front
});
});
Test manually:
Create PR:
Resources:
Must Read:
Optional Deep Dives:
You should now:
Checkpoint Meeting: Schedule 30min with your manager to review progress.
Beginner Friendly:
Intermediate:
Advanced:
Finding Tasks: Check Jira board for issues labeled good-first-issue.
As an Author:
As a Reviewer:
Review Checklist:
Resources: Code Review Guide
What to Test:
Testing Pyramid:
/\
/ \ E2E Tests (few)
/โโโโ\
/ \ Integration Tests (some)
/โโโโโโโโ\
/ \ Unit Tests (many)
/โโโโโโโโโโโโ\
Running Tests:
# All tests
npm test
# Watch mode
npm test -- --watch
# Coverage
npm test -- --coverage
# Specific file
npm test UserService.test.ts
Writing Tests:
describe('CartService', () => {
describe('addToCart', () => {
it('should add item to empty cart', () => {
// Arrange
const cart = new Cart();
const item = { productId: 1, quantity: 2 };
// Act
cart.addItem(item);
// Assert
expect(cart.items).toHaveLength(1);
expect(cart.items[0]).toEqual(item);
});
it('should increase quantity if item exists', () => {
// Test implementation
});
it('should throw error if quantity is negative', () => {
// Test implementation
});
});
});
Resources: Testing Guide
Environments:
Deployment Flow:
main branch
โ
โผ
CI runs (tests, lint, build)
โ
โผ
Auto-deploy to Staging
โ
โผ
Manual QA testing
โ
โผ
Create release tag
โ
โผ
Deploy to Production (gradual rollout)
You can deploy: Staging (automatic on merge to main) You cannot deploy: Production (requires approval)
Monitoring:
Engineering Team:
Adjacent Teams:
Slack Channels:
#engineering - General engineering discussions#frontend - Frontend-specific topics#backend - Backend-specific topics#deploys - Deployment notifications#incidents - Production issues#random - Non-work chatWhen to use what:
Weekly:
Bi-weekly:
Monthly:
Meeting Norms:
Git Workflow:
main (protected)
โโ feature/add-wishlist
โโ fix/cart-bug
โโ refactor/payment-service
Branch Naming:
feature/description - New featuresfix/description - Bug fixesrefactor/description - Code refactoringdocs/description - Documentationtest/description - Tests onlyCommit Messages:
type(scope): description
feat(cart): add wishlist functionality
fix(auth): resolve token expiration issue
docs(readme): update setup instructions
test(orders): add integration tests
refactor(database): optimize queries
PR Process:
You won't be on-call for your first 3 months.
When you join rotation:
Resources: On-Call Runbook
JavaScript/TypeScript:
React:
Node.js:
Databases:
System Design:
Your onboarding buddy is @buddy-name.
Your buddy will:
Don't hesitate to ask them anything!
Q: How do I reset my local database?
npm run db:reset # Drops all data and re-runs migrations
npm run db:seed # Adds sample data
Q: Tests are failing locally but passing in CI. Why?
nvm use)node_modules and reinstallQ: How do I debug the backend?
Add debugger; statement and run:
node --inspect-brk server/src/index.ts
Then open Chrome DevTools.
Q: Where do I find API credentials for development? Check 1Password vault "Development Secrets" or ask in #engineering.
Q: When should I create a new component vs. modify existing?
Q: How much test coverage is expected?
Q: Can I refactor code I'm working on? Yes, but:
Q: What if I disagree with PR feedback?
Q: How do I report a production bug?
Q: Can I work on something not in Jira?
Q: How do I request time off?
Q: I'm stuck on a problem for hours. What should I do?
Rule of thumb: Ask for help after 30 minutes of being stuck.
Q: How is performance evaluated?
Q: How do I learn more about [specific topic]?
Q: Can I switch teams/projects?
Remember:
Need help? Your buddy (@buddy-name) and manager (@manager-name) are here for you.
Welcome to the team! ๐
## Usage Examples
@onboarding-helper @onboarding-helper --type full-guide @onboarding-helper --type quick-start @onboarding-helper --type architecture-overview @onboarding-helper --focus frontend @onboarding-helper --include-exercises
## Best Practices
### Make It Personal
- Address new team member by name
- Assign a buddy/mentor
- Include team photos and bios
- Share team culture and values
### Progressive Disclosure
- Day 1: Just get running
- Week 1: Understand basics
- Month 1: Ship features
- Month 3: Full productivity
### Make It Interactive
- Include hands-on exercises
- Provide starter tasks
- Encourage pair programming
- Set up regular check-ins
### Keep It Updated
- Review quarterly
- Get feedback from new hires
- Update for tech stack changes
- Improve based on common questions
### Make It Discoverable
- Central location (wiki, README)
- Easy to navigate
- Searchable
- Version controlled
## Notes
- Onboarding is an ongoing process, not a one-time event
- Great onboarding significantly reduces time-to-productivity
- Documentation should be discoverable and up-to-date
- Assign mentors/buddies for personal guidance
- Include both technical and cultural onboarding
- Celebrate early wins to build confidence
- Check in regularly during first 3 months
- Encourage questions and create safe learning environment
- Provide clear learning path with milestones
- Make resources easily accessible
- Update documentation based on new hire feedback