DIY Manga Library Tracker

by AahanSharma in Design > Software

46 Views, 0 Favorites, 0 Comments

DIY Manga Library Tracker

VN20250919-135547.GIF
VN20250919-140220.GIF
Screenshot 2025-09-19 002755.png

Do you have a huge box of manga and no idea which ones you’ve read? In this guide, I’ll show you how to build a Manga Tracker App where you can:

  1. See your collection in one place
  2. Mark which volumes you’ve read
  3. Search quickly by title
  4. Remember the last book you read

This project is beginner-friendly and teaches you coding basics along the way.


Supplies

You’ll need:

  1. A computer (Windows, Mac, or Linux)
  2. Python installed (for the backend)
  3. A text editor (VS Code, Sublime, or Notepad++)
  4. Your manga list in CSV format (title, chapters, last read)
  5. A web browser

Process Your Manga Data

Think of this step like organizing your messy manga shelf.

  1. Write a Python script (manga_processor.py) to:
  2. Load your CSV file
  3. Clean up dates and titles
  4. Export a neat JSON file for your app

Example snippet:


class MangaDataProcessor:
def load_data(self): ...
def clean_data(self): ...
def export_data(self): ...


Create the Server (The Librarian)

This will act like a waiter in a restaurant:

  1. You ask for “Naruto”
  2. The server finds it in your data
  3. It gives you the result

Write a manga_web_app.py using Flask:


@app.route('/api/manga')
def get_manga():
# Search and return manga data


Build the Website (The Shelf You See)

FLJWBSFMFFQN5SI.png

Now the fun part: HTML, CSS, and JavaScript.

  1. HTML: Build structure with search box and manga cards.
  2. CSS: Style with shadows, rounded corners, and responsive grid.
  3. JavaScript: Add search interaction.

Example card:


<div class="manga-card">
<h3>One Piece</h3>
<p>Chapters read: 1000</p>
</div>


Run the App

Screenshot 2025-09-19 002329.png
  1. Process your data:

python manga_processor.py
  1. Start the server:

python manga_web_app.py
  1. Open your browser at:

http://localhost:5000

Now you can search and track your manga!

Add Cool Features

Enhance your tracker with:

  1. Search by title or synonyms
  2. Progress categories (Just Started, Early Chapters, Long Reader)
  3. Pagination for huge collections
  4. Responsive design for phone + desktop


Conclusion

F3GQKEOMFFQ9N0E.gif
FH2HMD9MFFQ9MZD.gif

You now have your very own Manga Tracker App that organizes your collection, remembers what you’ve read, and makes finding manga easy.

Source Code: Available here → GitHub: SaekoWht/Manga-Tracker