Common Tasks & Solutions

This document provides step-by-step guides for common tasks you'll encounter as an intern on the ViBe project. Use these as reference when working on assignments.

Frontend Tasks

Creating a New Component

1. Plan your component

   • Define props and state
   • Sketch the component structure

2. Create component file

   touch src/components/ui/index.tsx

3. Implement the component

   import React from 'react';
   
   interface YourComponentProps {
     title: string;
     // Add other props as needed
   }
   
   export function YourComponent({ title }: YourComponentProps) {
     return (
       <div className="p-4 bg-white rounded shadow">
         <h2 className="text-xl font-bold">{title}</h2>
         {/* Your component content */}
       </div>
     );
   }

4. Document your component

   • Add TSDoc comments
   • Create usage examples if complex

Adding a New Page

1. Create page file

   touch src/pages/YourNewPage.tsx

2. Implement the page

   import React from 'react';
   import { Layout } from '@/components/Layout';
   
   export default function YourNewPage() {
     return (
       <Layout>
         <div className="container mx-auto py-8">
           <h1 className="text-2xl font-bold">Your New Page</h1>
           {/* Page content */}
         </div>
       </Layout>
     );
   }

3. Add route to the page

   • Navigate to the router configuration
   • Add your new route

Backend Tasks

Creating a New API Endpoint

1. Identify the module

   • Determine which module your endpoint belongs to
   • If it's a new feature, consider creating a new module

2. Create input types

   // src/modules/your-module/classes/your-input-types.ts
   import { IsString, IsNotEmpty } from 'class-validator';
   
   export class CreateYourResourceBody {
     @IsString()
     @IsNotEmpty()
     name: string;
     
     // Add other properties with validation
   }
   
   // For query parameters
   export class GetYourResourceQueryParams {
     // Query params properties
   }
   
   // For route parameters
   export class GetYourResourceParams {
     // Route params properties
   }

3. Create or update controller

   // src/modules/your-module/controllers/your-controller.ts
   import { Controller, Post, Body } from 'routing-controllers';
   import { Service } from 'typedi';
   import { CreateYourResourceBody } from '../classes/your-input-types';
   
   @Controller('/your-endpoint')
   @Service()
   export class YourController {
     constructor(private yourService: YourService) {}
     
     @Post('/')
     async createSomething(@Body() body: CreateYourResourceBody) {
       return this.yourService.createSomething(body);
     }
   }

4. Implement the service

   // src/modules/your-module/services/your-service.ts
   import { Service } from 'typedi';
   import { CreateYourResourceBody } from '../classes/your-input-types';
   
   @Service()
   export class YourService {
     async createSomething(body: CreateYourResourceBody) {
       // Implementation
       return { success: true, data: body };
     }
   }

5. Write tests

   • Create unit tests for your service
   • Create integration tests for your API endpoint

Documentation Tasks

Updating Existing Documentation

1. Locate the documentation

   • Find the relevant Markdown file in the /docs directory

2. Make your changes

   • Update content as needed
   • Follow the existing formatting style

3. Test locally

   cd docs
   pnpm start

4. Create a PR

   • Follow the PR Guide
   • Use doc as the type in your commit message

Creating New Documentation

1. Determine the appropriate location

   • Choose the right section for your documentation
   • Create a new file with .md extension

2. Add frontmatter

   ---
   title: Your Documentation Title
   sidebar_position: X
   ---

3. Write your content

   • Use clear headings and subheadings
   • Include code examples where helpful
   • Add links to related documentation

4. Test and submit

   • Preview locally
   • Create a PR with descriptive title and body

Troubleshooting Common Issues

Frontend Build Errors

Problem: TypeScript errors during build

Solution:

1. Check error messages carefully
2. Fix type definitions or add proper typing
3. If using third-party libraries, check if types are installed:

   pnpm add -D @types/library-name

Backend Server Won't Start

Problem: Server crashes on startup

Solution:

1. Check logs for specific error messages
2. Verify environment variables are set correctly
3. Make sure database connection is properly configured
4. Check port conflicts (another service might be using the same port)

Git Issues

Problem: Merge conflicts

Solution:

1. Pull latest changes from the main branch
2. Resolve conflicts in each file
3. Test your changes after resolving conflicts
4. Commit the resolved conflicts

Reference

• TypeScript Documentation
• React Documentation
• Node.js Documentation
• Docusaurus Documentation

If you encounter issues not covered here, don't hesitate to ask your mentor or teammates for assistance!