Skip to content

Developer Guide

This section will guide you through setting up your development environment for Teemii, so you can start contributing to the project quickly and efficiently.

Note

Teemii began as a side-project crafted with the goal of learning JavaScript. Over a span of nearly a year, its development evolved, showcasing varying levels of maturity across different components. This journey reflects in the codebase, with some parts being more refined than others.

Setting Up Your Development Environment

Before you begin, ensure you have the following prerequisites installed:

Prerequisites

Forking the Repository

  1. Visit the GitHub repository at https://github.com/dokkaner/teemii.
  2. Click the Fork button in the top-right corner of the page.
  3. Choose where to fork the repository if prompted.

Cloning the Repository

Once you have forked the repo, clone it to your local machine:

git clone https://github.com/dokkaner/teemii.git
cd teemii

Installing Dependencies

Install the necessary dependencies by running:

# For the backend
cd server
npm install

# For the frontend
cd app
npm install

Running Teemii Locally

To run Teemii on your local machine, follow these steps:

Configuration

You must provide 2 .env file :

  • one for the frontend (app directory)
  • one for the backend (server directory)

In each directory you fill find an .env.local sample. Ready to use.

Running the Application

Start the backend server:

cd server
npm run app

Start the frontend application:

cd app
npm run dev

Architecture Overview

Teemii is structured as a full-stack application with a clear separation between the frontend and backend services, ensuring a modular and scalable architecture.

Frontend - Presentation Layer

The frontend is built with Vue.js (vue3), and Tailwind CSS using modern JavaScript practices to deliver a dynamic and responsive user experience. It's configured with Vite for rapid development and efficient bundling. The frontend architecture is designed to be modular, with components and services that can be easily extended or modified.

  • Components: Reusable Vue components for UI elements (need to be refactored °_°)
  • Stores: State management using Pinia.
  • Router: Vue Router for SPA navigation.
  • API: Services for communicating with the backend.
  • Assets: Static assets like images and fonts.
  • View: All views are organized in the views directory, each representing different pages of the app.

Backend - Application Layer

The Teemii backend, powered by Node.js, incorporates Express for API development and Sequelize ORM for database interactions. It uniquely utilizes SQLite as its database, offering a lightweight yet reliable data management solution. This stack, combined with real-time capabilities through Socket.IO and a modular architecture of controllers, services, and models.

Core Components

  • Controllers: Handle incoming HTTP requests and respond accordingly.
  • Models: Represent data structures and interact with the database.
  • Services: Business logic for manipulating data.
  • Routes: Define API endpoints (v1.js and v2.js for API versioning).
  • Agents: Specialized scripts for external API interactions and data processing.

Specialized Systems

Agents System

Teemii's sophisticated agent system plays a pivotal role in its backend architecture. Each agent, extending from a base agent.js, is a specialized script designed for specific operations. These operations range from scraping data from various manga sources, handling manga downloads, to interfacing with external APIs for content and metadata. Agents like agent.mangadex.js showcase this system's versatility in fetching and processing manga-related data.

Libra Schedulers

The Libra subsystem in Teemii's backend architecture is a critical component dedicated to job and scheduler management. It comprises classes like Job.js, QueueManager.js, and Scheduler.js, which collectively facilitate efficient task execution and scheduling. This system enables the backend to manage and process a variety of tasks, such as manga imports and chapter downloads, in an organized and scalable manner. Libra's design ensures that background operations are handled smoothly.