Tech Stack Overview

Welcome to ViBe! This guide provides a comprehensive overview of the technologies we use and how they fit together. Each section includes resources to help you quickly get up to speed.

Frontend Technologies

React

What it is: A JavaScript library for building user interfaces.

How we use it: Our frontend is built with React, leveraging functional components and hooks.

Learning Resources:

Quick Start:

// Basic function component
function Welcome() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <h1>Hello, Intern!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
}

Vite

What it is: A build tool that provides faster and leaner development experience for modern web projects.

How we use it: We use Vite for our development server and build processes, replacing traditional webpack setups.

Learning Resources:

Quick Start:

# Start development server
pnpm run dev

# Build for production
pnpm run build

TypeScript

What it is: A strongly typed programming language that builds on JavaScript.

How we use it: All our code is written in TypeScript to ensure type safety and better developer experience.

Learning Resources:

Quick Start:

// Basic types
const name: string = "ViBe";
const isActive: boolean = true;
const count: number = 42;

// Interface example
interface User {
  id: number;
  name: string;
  email: string;
}

// Function with typed parameters and return value
function getUser(id: number): User | undefined {
  // Implementation
}

Tailwind CSS

What it is: A utility-first CSS framework for rapidly building custom designs.

How we use it: We use Tailwind for styling our components, favoring utility classes over custom CSS.

Learning Resources:

Quick Start:

// Using Tailwind utility classes
<div className="flex items-center justify-between p-4 bg-white rounded shadow">
  <h2 className="text-xl font-bold text-gray-800">Welcome!</h2>
  <button className="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600">
    Get Started
  </button>
</div>

shadcn/ui

What it is: A collection of reusable components built with Radix UI and Tailwind CSS.

How we use it: We use shadcn/ui components as a foundation for our UI, customizing as needed.

Learning Resources:

Quick Start:

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

function LoginForm() {
  return (
    <form>
      <Input placeholder="Email" type="email" />
      <Input placeholder="Password" type="password" />
      <Button>Log in</Button>
    </form>
  );
}

Backend Technologies

Node.js & TypeScript

What it is: A JavaScript runtime built on Chrome's V8 JavaScript engine with TypeScript for type safety.

How we use it: Our backend API is built with Node.js and TypeScript, using a modular domain-based architecture.

Learning Resources:

TypeDI & routing-controllers

What it is: TypeDI is a dependency injection library, and routing-controllers is a library for creating controllers with decorators.

How we use it: We use these libraries to structure our backend code with controllers and services.

Learning Resources:

Quick Start:

import { Service } from 'typedi';
import { Controller, Post, Body } from 'routing-controllers';

@Service()
class UserService {
  async createUser(userData: any) {
    // Implementation
  }
}

@Controller('/users')
class UserController {
  constructor(private userService: UserService) {}
  
  @Post('/')
  async create(@Body() userData: any) {
    return this.userService.createUser(userData);
  }
}

DTOs, Class Transformers and Class Validators

What it is: class-transformer is a library for transforming plain objects to class instances and vice versa. class-validator provides decorators for validating class properties.

How we use it: We use these libraries to validate incoming request data and transform between DTOs and domain models, ensuring type safety and data integrity.

Learning Resources:

Quick Start:

import { IsEmail, IsNotEmpty, MinLength } from 'class-validator';
import { Expose, Transform } from 'class-transformer';

export class CreateUser {
  @IsNotEmpty()
  @IsEmail()
  email: string;
  
  @IsNotEmpty()
  @MinLength(8)
  password: string;
  
  @Expose({ name: 'firstName' })
  @IsNotEmpty()
  first_name: string;
  
  @Transform(({ value }) => value.trim())
  bio?: string;
}

// In controller using routing-controllers
@Post('/')
async createUser(@Body({ validate: true }) user: CreateUser) {
  // Body is automatically validated and transformed
  return this.userService.create(user);
}

Express.js

What it is: A minimal and flexible Node.js web application framework that provides robust features for web and mobile applications.

How we use it: We build our serverless microservices with Express, deployed as Google Cloud Functions.

Learning Resources:

Quick Start:

import express from 'express';
const app = express();

app.get('/api/health', (req, res) => {
  res.status(200).json({ status: 'ok' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

MongoDB & MongoDB Atlas

What it is: MongoDB is a NoSQL document database, and MongoDB Atlas is its fully-managed cloud database service.

How we use it: We use MongoDB for our database needs, hosted on MongoDB Atlas for scalability and reliability.

Learning Resources:

Quick Start:

import { MongoClient } from 'mongodb';

async function connectToDatabase() {
  const client = new MongoClient(process.env.MONGODB_URI as string);
  await client.connect();
  const db = client.db('vibe-db');
  return { client, db };
}

Firebase

What it is: A platform developed by Google for creating mobile and web applications.

How we use it: We use Firebase for authentication, hosting, and cloud storage.

Learning Resources:

Quick Start:

import * as admin from 'firebase-admin';

admin.initializeApp();

async function verifyToken(token: string) {
  try {
    const decodedToken = await admin.auth().verifyIdToken(token);
    return decodedToken;
  } catch (error) {
    throw new Error('Invalid auth token');
  }
}

Documentation

Docusaurus

What it is: A modern static website generator that builds optimized websites quickly.

How we use it: We use Docusaurus for our project documentation, including this onboarding guide.

Learning Resources:

Quick Start:

# Navigate to docs directory
cd docs

# Install dependencies
pnpm install

# Start development server
pnpm start

Development Tools

pnpm

What it is: A fast, disk space efficient package manager.

How we use it: We use pnpm instead of npm or yarn for all package management.

Learning Resources:

Quick Start:

# Install dependencies
pnpm install

# Add a package
pnpm add package-name

# Run a script
pnpm run script-name

ESLint & Prettier

What it is: ESLint is a tool for identifying and reporting on patterns in JavaScript, while Prettier is a code formatter.

How we use it: We use ESLint and Prettier to maintain code quality and consistent style.

Learning Resources:

Quick Start:

# Lint code
pnpm lint

# Fix formatting issues
pnpm fix

Version Control & CI/CD

Git

What it is: A distributed version control system for tracking changes in source code.

How we use it: We use Git for version control and collaborative development.

Learning Resources:

Quick Start:

# Clone the repository
git clone https://github.com/your-org/vibe.git

# Create a new branch
git checkout -b feature/new-feature

# Commit changes
git add .
git commit -m "feat: add new feature"

# Push to remote
git push origin feature/new-feature

GitHub

What it is: A platform and cloud-based service for software development and version control using Git.

How we use it: We host our repositories on GitHub and use its features for code reviews, issue tracking, and project management.

Learning Resources:

Quick Start:

# Create a pull request from your branch
# Navigate to: https://github.com/your-org/vibe/pull/new/feature/new-feature

GitHub Actions

What it is: GitHub's CI/CD platform that automates workflows based on GitHub events.

How we use it: We use GitHub Actions for automated testing, linting, and deployment.

Learning Resources:

Quick Start:

# Example workflow file
name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'pnpm'
      - run: pnpm install
      - run: pnpm test

Husky

What it is: A tool that makes Git hooks easy and allows running scripts before commits and pushes.

How we use it: We use Husky to enforce code quality by running linters and tests before commits.

Learning Resources:

Husky Documentation

Quick Start:

# Husky is already configured in the project
# It will automatically run lint-staged on commit

# To manually trigger the pre-commit hook
npx husky run .husky/pre-commit

Next Steps

Now that you're familiar with our tech stack, here are some recommended next steps:

Set up your development environment by following our Installation Guide
Explore our Project Structure to understand how everything fits together
Review our Contribution Guidelines to learn about our development workflow
Check out our Naming Conventions, PR Guide, and Commit Guide

If you have any questions, don't hesitate to ask your mentor or team lead!

Frontend Technologies​

React​

Vite​

TypeScript​

Tailwind CSS​

shadcn/ui​

Backend Technologies​

Node.js & TypeScript​

TypeDI & routing-controllers​

DTOs, Class Transformers and Class Validators​

Express.js​

MongoDB & MongoDB Atlas​

Firebase​

Documentation​

Docusaurus​

Development Tools​

pnpm​

ESLint & Prettier​

Version Control & CI/CD​

Git​

GitHub​

GitHub Actions​

Husky​

Next Steps​

Frontend Technologies

React

Vite

TypeScript

Tailwind CSS

shadcn/ui

Backend Technologies

Node.js & TypeScript

TypeDI & routing-controllers

DTOs, Class Transformers and Class Validators

Express.js

MongoDB & MongoDB Atlas

Firebase

Documentation

Docusaurus

Development Tools

pnpm

ESLint & Prettier

Version Control & CI/CD

Git

GitHub

GitHub Actions

Husky

Next Steps