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¶
- Visit the GitHub repository at
https://github.com/dokkaner/teemii
. - Click the
Fork
button in the top-right corner of the page. - Choose where to fork the repository if prompted.
Cloning the Repository¶
Once you have forked the repo, clone it to your local machine:
Installing Dependencies¶
Install the necessary dependencies by running:
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:
Start the frontend application:
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
andv2.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.