Skip to main content

​
Welcome Contributors

Thank you for your interest in contributing to the Rodando Driver project! This guide will help you get started with the development process, coding standards, and contribution workflow.

​
Getting Started

1

Fork the Repository

Fork the Rodando Driver repository to your GitHub account:
# Navigate to the repository on GitHub and click "Fork"
# Then clone your fork
git clone https://github.com/YOUR_USERNAME/rodandoApp-frontend.git
cd rodandoApp-frontend
2

Install Dependencies

Install the required dependencies using npm:
npm install
This project uses Angular 18, Ionic 8, and Capacitor 7. Ensure you have Node.js 18+ installed.
3

Set Up Remote

Add the upstream repository as a remote:
git remote add upstream https://github.com/ORIGINAL_OWNER/rodandoApp-frontend.git
git fetch upstream
4

Run Development Server

Start the development server:
npm start
The app will be available at http://localhost:4200

​
Development Workflow

​
Branch Naming Convention

Use descriptive branch names that follow this pattern: 
git checkout -b feature/trip-matching-algorithm
git checkout -b feature/earnings-dashboard

​
Making Changes

1

Create a Feature Branch

Always create a new branch from the latest main:
git checkout main
git pull upstream main
git checkout -b feature/your-feature-name
2

Make Your Changes

Write clean, well-documented code following our code style guide.
Run npm run lint frequently to catch style issues early.
3

Write Tests

Add unit tests for new features and bug fixes:
npm test
See our testing guide for detailed information.
4

Commit Your Changes

Write clear, descriptive commit messages:
git add .
git commit -m "feat(trips): add real-time trip matching algorithm"
Use conventional commit format: type(scope): descriptionTypes: feat, fix, docs, style, refactor, test, chore

​
Commit Message Format

Follow the conventional commits specification: 
type(scope): subject

body (optional)

footer (optional)
Examples: 
feat(auth): implement refresh token rotation

Adds automatic token refresh with rotation support for enhanced
security. Tokens now refresh 30 seconds before expiration.

Closes #123

​
Pull Request Process

1

Push Your Changes

Push your branch to your fork:
git push origin feature/your-feature-name
2

Create Pull Request

  1. Navigate to your fork on GitHub
  2. Click “Compare & pull request”
  3. Fill out the PR template with:
    • Clear description of changes
    • Related issue numbers
    • Screenshots (for UI changes)
    • Testing notes
3

PR Requirements

Ensure your PR meets these requirements:
  • All tests pass (npm test)
  • No linting errors (npm run lint)
  • Code follows style guidelines
  • Commits follow conventional format
  • Documentation updated (if needed)
  • No merge conflicts with main
4

Code Review

Wait for maintainers to review your PR. Be prepared to:
  • Answer questions about your implementation
  • Make requested changes
  • Discuss alternative approaches
Reviews typically happen within 2-3 business days.

​
Code Review Guidelines

​
For Contributors

Before Requesting Review:
  • Self-review your own code first
  • Test your changes thoroughly
  • Update documentation
  • Resolve all linting errors
  • Keep PRs focused and reasonably sized (less than 500 lines when possible)
During Review:
  • Respond promptly to feedback
  • Ask questions if feedback is unclear
  • Be open to suggestions
  • Mark conversations as resolved after addressing them

​
For Reviewers

Review Focus Areas:
  • Code correctness and logic
  • Test coverage and quality
  • Performance implications
  • Security considerations
  • Code style and readability
  • Documentation completeness
Providing Feedback:
  • Be constructive and specific
  • Explain the “why” behind suggestions
  • Distinguish between blocking issues and suggestions
  • Approve when ready, even if minor suggestions remain

​
Project Structure

Understanding the codebase organization: 
src/app/
├── core/
│   ├── guards/          # Route guards (auth, etc.)
│   ├── interceptors/    # HTTP interceptors
│   ├── models/          # TypeScript interfaces/types
│   ├── services/        # Core services
│   │   ├── http/        # API services
│   │   ├── socket/      # WebSocket services
│   │   └── ui/          # UI-related services
│   └── utils/           # Helper functions
├── features/            # Feature modules
│   ├── auth/            # Authentication features
│   ├── tabs/            # Tab pages (home, trips, earnings, map)
│   └── sidebar/         # Sidebar pages (profile, settings, etc.)
├── pages/               # Standalone pages
│   ├── trip/            # Trip-related pages
│   └── trip-progress/   # Trip progress tracking
├── shared/              # Shared components/layouts
│   ├── components/      # Reusable components
│   └── layouts/         # Layout components
├── store/               # NgRx state management
│   ├── auth/            # Auth state (signals)
│   ├── driver-availability/
│   ├── sessions/
│   └── trip/
└── components/          # Legacy/standalone components
The project uses NgRx Signals for state management (not traditional NgRx Store for most features).

​
Available Scripts

Common development commands: 
# Start development server
npm start

# Build for production
npm run build

# Watch mode (auto-rebuild)
npm run watch

​
Development Tips

​
Working with NgRx Signals

The project uses NgRx Signals (not traditional reducers/actions): 
// Store definition
export const AuthStore = signalStore(
  { providedIn: 'root' },
  withState<AuthState>(initialState),
  withMethods((store) => ({
    setAuth(payload: Partial<AuthState>) {
      patchState(store, payload);
    },
  }))
);

// Facade pattern for business logic
@Injectable({ providedIn: 'root' })
export class AuthFacade {
  private readonly authStore = inject(AuthStore);
  private readonly authService = inject(AuthService);
  
  login(payload: LoginPayload): Observable<User> {
    // Business logic here
  }
}

​
Path Aliases

Use the @/* path alias for cleaner imports: 
// ✅ Good
import { AuthService } from '@/app/core/services/http/auth.service';

// ❌ Avoid
import { AuthService } from '../../../core/services/http/auth.service';

​
Ionic Components

Prefer standalone Ionic components: 
import { 
  IonContent, 
  IonButton, 
  IonCard 
} from '@ionic/angular/standalone';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [IonContent, IonButton, IonCard],
  // ...
})

​
Getting Help

Documentation

Read the complete documentation

Code Style

Learn about coding standards

Testing Guide

Write effective tests

Issues

Report bugs or request features
Important Notes:
  • Never commit sensitive data (API keys, tokens, credentials)
  • Always test on both web and mobile platforms
  • Keep dependencies up to date
  • Follow Angular and Ionic best practices

​
Questions?

If you have questions or need clarification:
  1. Check existing documentation
  2. Search closed issues/PRs for similar discussions
  3. Open a discussion on GitHub
  4. Reach out to maintainers
We appreciate your contributions! 🎉

Build docs developers (and LLMs) love

Get started for freeTalk to us