Git Loopa is a desktop application based on Electron + React + TypeScript that helps manage the Git workflow visually. This application is designed to simplify the process of selecting repositories, viewing file statuses, staging/unstaging, creating commits with specific timestamps, and pushing to remote repositories.

User Interface

Application Features

Git Loopa focuses on a commit workflow with custom dates and timestamps that is easier and more structured. Its main features include:

• Selecting a Git repository folder directly from the application.
• Displaying the active repository branch.
• Displaying the list of changed files along with their statuses.
• Staging, unstaging, and staging all / unstaging all files.
• Creating commits with customizable messages and dates/times.
• Providing commit time presets such as now, yesterday, and a few days ago.
• Pushing to a remote repository.
• Displaying confirmation prompts before committing and pushing.

Use Case

Project Structure

Below is the main directory structure of the project along with their functions:

git-loopa/
├── dist-electron/           # Build output from the Electron process
├── electron/                # Main process, preload, and IPC handlers
├── public/                  # Static assets used during the build process
├── src/                     # Frontend source code (React)
│   ├── features/            
│   │   └── commit/          # Core features for the commit workflow
│   │       ├── components/  # UI Components (branch bar, file list, intro, commit form)
│   │       └── hooks/       # Custom hooks (Git status, branch, commit, and push)
│   ├── services/            
│   │   └── gitService.ts    # Access layer to the Electron API from the frontend
│   ├── shared/              # IPC types, common UI components, and shared utilities
│   └── App.tsx              # Main application layout controller (from intro to form)
├── postcss.config.js        # PostCSS styling configuration
├── tailwind.config.js       # Tailwind CSS styling configuration
├── tsconfig.json            # Main TypeScript configuration
├── tsconfig.node.json       # Node environment-specific TypeScript configuration
└── vite.config.ts           # Vite bundler configuration

Prerequisites

Before running the project, ensure your machine has:

• Node.js.
• npm.
• Git installed and available in your PATH.
• An operating system that supports Electron, such as Windows, macOS, or Linux.

If you want to build/package the desktop application, also ensure your environment can run Electron Builder.

Installation and Setup

1. Clone this repository.

git clone https://github.com/fadillahrohman/git-loopa.git
cd git-loopa

2. Install dependencies.

npm install

3. Run development mode.

npm run dev

4. Build the desktop application.

npm run build

Usage Flow

1. Open the application.
2. Click the repository selector and choose a Git project folder.
3. Review the changed files and the active branch.
4. Stage the files you want to commit.
5. Enter a commit message and set a timestamp if needed.
6. Click commit, or commit and push.

Notes

• The application executes Git operations through the main Electron process.
• Commit timestamps are set via GIT_AUTHOR_DATE and GIT_COMMITTER_DATE.
• Pushing will use the active Git remote on the selected repository.