I Built a .gitignore Behavior Checker App with React

#git #beginners #portfolio #react

Introduction

I built a small web app that lets you check how .gitignore rules behave directly in your browser.

In this post, I’ll walk through the app’s overview and usage, share some background on why I created it, highlight some challenges and design choices, and summarize what I learned during the process.

▶ Live Demo: https://d14csvmoeha0t5.cloudfront.net/

Overview

The app allows you to quickly check whether a given file or directory would be tracked by Git or ignored based on .gitignore rules.

It’s essentially a playground for .gitignore—helpful for developers who want to test and debug ignore patterns without having to commit and check inside a repo.

How It Works

Upload a .gitignore file, or paste its contents into the text area.
Enter file or directory names in the other text area.
The app will automatically evaluate whether those files/directories are tracked or ignored.

When You Might Use It

✅To double-check if your .gitignore rules are working correctly
✅Before adding new ignore rules and wanting to test them
✅To debug why something is unexpectedly tracked or ignored

Key Features

Batch checks: Evaluate multiple file and directory names at once
Real-time results: Changes in the text area are instantly reflected in the results
Rule transparency: Shows which rule caused the file to be ignored
Language toggle: Switch between English and Japanese

Tech Stack

Frontend

Category	Technology
Language	TypeScript
Framework	React
Styling	Tailwind CSS, Shadcn UI
Dev Env	Docker, Docker Compose
Hosting	S3 + CloudFront

Backend
None — it’s a frontend-only app.

System Architecture

Why I Built This

This project started as a React learning exercise. I wanted to build something useful for developers while keeping it entirely frontend-based.

At first, I considered building a .gitignore generator, but similar tools already exist. Instead, I thought: “What if I add a feature to check whether a file will actually be ignored?”

Since I’ve personally run into situations where files were unexpectedly tracked (or ignored), this seemed like a practical idea.

Eventually, I decided to keep it simple and focus only on the checking feature. That made the app easier to use and more focused.

Challenges I Faced

Patterns like . or *
Handling them correctly was tricky—regex conflicts caused plenty of unexpected behavior.
Language toggle & layout issues
Switching between Japanese and English changes text length, which broke layouts. Styling had to account for that.
File download limitations
I originally planned to let users export their .gitignore file, but ran into restrictions: browsers don’t allow direct downloads with filenames starting with a dot.

Design Decisions & Improvements

To make the app approachable even for first-time users, I focused on simplicity:

Default sample input and output are shown on load
Minimal UI: mostly black and white, with color used only for results/errors
Clear support for both Japanese and English

What I Learned

React alone can do more than expected
Previously, I always combined frontend + backend, but this project showed me how far you can go with just React.
Simple UIs are deceptively hard
Striking the balance between too little explanation (confusing) and too much (cluttered) was harder than I thought.
Less is more
By cutting extra features (like generating/downloading .gitignore files), I reduced dev time, kept the UI clean, and improved usability of the core functionality.

Future Ideas

I’d like to build more small, developer-focused tools like this. Maybe even a collection of utilities that share components such as language toggling or upload/copy/reset buttons.

The .gitignore checker was a good experiment, and its components are reusable in other tools.

Closing Thoughts

This .gitignore checker was inspired by real frustrations I’ve had when files weren’t being ignored as expected.

I designed it to be intuitive for first-time users, but I’d love to hear feedback from developers who try it. Your opinions will help me improve and guide future projects.

Live Demo: https://d14csvmoeha0t5.cloudfront.net/
GitHub Repo: https://github.com/a-k-0047/gitignore-checker-front

Questions

Did you find this kind of .gitignore checker useful or interesting?
Have you ever run into a tricky situation where .gitignore didn’t behave the way you expected?
If you could add one more feature to this app, what would it be?

👉 Feel free to answer any of these — I’d love to hear your thoughts!