YAUS Guide

Beginner's Guide to Contributing to Yaus

Welcome to the beginner-friendly guide for contributing to the Yaus open-source project. If you're new to open source or unfamiliar with the Yaus codebase, this guide is designed to help you get started.

Nx Monorepo Structure

Yaus is organized as a monorepo using Nx, a powerful tool for building and managing monorepos with multiple projects. This structure provides several benefits, including code sharing, enhanced developer productivity, and a unified development experience. Before diving into contributions, it's essential to understand the Nx monorepo structure.

Key Benefits of Nx Monorepo

• Code Sharing: Components, libraries, and utilities can be shared between frontend and backend, reducing duplication.
• Improved Productivity: A single codebase for both frontend and backend simplifies development, testing, and deployment processes.
• Unified Tooling: Nx provides a consistent set of development tools, making it easier to manage projects.

Understanding Yaus Architecture

With the Nx monorepo structure in mind, let's explore the high-level architecture of Yaus. Understanding the structure and components of Yaus will make your contributions more effective. We recommend reading the Yaus Architecture documentation for a comprehensive overview.

Two Key Areas: Frontend and Backend

We've divided this guide into two primary areas to cater to different interests and skill sets:

Frontend

Yaus' frontend is the user interface of the application, and it's primarily built using React, a popular JavaScript library, along with Ant Design, a UI framework. Even if you're new to React or Ant Design, you can start contributing. Here's what you need to know:
Yaus has two frontends: one is an admin app, and the other is the main Yaus app. You can find the code for both of them in:

• Admin: apps --> admin contains code for an admin client
• Main Yaus App: apps --> frontend --> src contains main web client for yaus which is used to interact with the apis

Frontend Structure

The frontend codebase follows a typical React app structure:

• main.tsx: This is the main entry point for the frontend. It sets up the app and loads the necessary components.
• app.tsx: Here, you'll find the route configuration and component mappings for different pages of the application.
• components: This directory contains reusable components like headers, footers, icons, and more.
• apis: In this folder, you'll discover functions used for making API calls to interact with the backend.
• assets: Images and icons are stored here.
• constants: This directory holds constant data, such as configuration settings and routes.
• pages: Each page of the web application, such as the dashboard or SignUp, has its folder here.
• styles: All the stylesheets needed for various components can be found here.
• utils: This directory contains helper functions that are reused throughout the frontend code.

With this structure and a basic understanding of React, you can begin exploring the codebase and gaining insights into how everything works together.
Read about making an actual code contribution to frontend here

Backend

The backend of Yaus handles server-side logic, including data processing and API interactions. It's built using NestJS, a framework for building efficient and scalable server-side applications with TypeScript. If you're interested in backend development, this section is for you.

Backend Structure

Here's a brief overview of the backend structure:

• The backend code is organized in the api directory.
• The main entry point for the any api request is app.controller.ts from here it get routes to respected business logic written in app.service.ts.
• interceptors : an interceptor which intercepts and add a custom response object to each response , this is mostly used for telemetry in which we want to capture each request made to the yaus backend.
• prisma: contians prisma schema YAUS uses prisma as an ORM so that you can change the DB directly in code and don't have to write SQL queries for the same.
• router: contains GQL queries
• scheduler: contians cron jobs which can be scheduled to perform some background tasks
• telemetry: contains class for performing telemetry
• utils: contians helper function that can be reused
• Similar to the frontend, you'll find reusable components, services, and controllers in backend codebase.

Read about making an actual code contribution to backend here

Contributing Made Easier

Contributing to Yaus can be a rewarding experience, even if you're new to open source or these technologies. Here are some steps to make your journey smoother:

1. Explore: Start by exploring the codebase. Understand how different components and modules interact.

2. Ask Questions: Don't hesitate to ask questions in the project's communication channels. The community is there to help you.

3. Contribute at Your Pace: You can contribute to issues labeled as "beginner-friendly" to get started. These tasks are designed for newcomers.

4. Learn and Grow: Use this opportunity to learn and improve your skills. The Yaus community is supportive, and you can grow alongside it.

Let's make open source more accessible together!