Forem: Emmanuel Mingala

Fix: MySQL "Shutdown Unexpectedly" Error in XAMPP (Restore Your Databases)

Emmanuel Mingala — Sat, 14 Mar 2026 02:53:58 +0000

If you're using XAMPP and suddenly encounter the "MySQL shutdown
unexpectedly" error, you're not alone. This is a common issue that
often happens after reinstalling XAMPP or when MySQL files become
corrupted.

Fortunately, in most cases your databases are still recoverable.

In this guide, we'll restore MySQL by rebuilding the data directory
using the /backup folder while keeping your existing databases
intact.

Step 1: Open the MySQL Folder

Navigate to your XAMPP installation directory and open:

/xampp/mysql

Inside this directory, you will find two important folders:

/backup
/data

These folders will be used to repair the corrupted MySQL installation.

Step 2: Create a Backup of the `/data` Folder

Copy the /data folder and rename the copy to:

data - Copy

This copy will serve as a temporary backup so we can restore your
existing databases later.

Step 3: Delete the Contents of the `/data` Folder

Open the original /data folder and delete all its contents.

This removes the corrupted MySQL files that are causing the server
to fail.

Step 4: Restore Default MySQL Files

Open the /backup folder.

Select all files inside /backup and copy them.

Paste them into the /data folder.

This restores the default MySQL system files needed for the server
to run.

Step 5: Restore Your Databases

Now open the folder:

/data - Copy

Copy your database folders into the /data folder.

⚠️ Important: Do not copy the following folders:

/mysql
/performance_schema
/phpmyadmin
/test

These are system folders already restored from the /backup directory.

Paste your database folders into the /data directory.

Step 6: Restore the `ibdata1` File

Inside the /data - Copy folder, locate the file:

ibdata1

Copy this file.

Paste it into the /data folder and replace the existing file.

This step restores the InnoDB tablespace, which is required for many
MySQL databases.

Step 7: Start MySQL in XAMPP

Return to the XAMPP Control Panel and start the MySQL server.

If all steps were completed correctly:

The MySQL error should be resolved
Your databases should be restored
The server should start normally

Final Notes

This issue usually happens because:

MySQL was force closed
XAMPP was reinstalled
Files inside the /data folder became corrupted

Using the /backup folder allows us to rebuild MySQL's system files
while preserving our existing databases.

Thanks for Reading

If you found this guide helpful, feel free to check out more of my
content.

You can also visit my portfolio to see more projects and blogs:

🌐 https://emmandev.site

10 Practical Project Ideas for Web Developers

Emmanuel Mingala — Mon, 28 Jul 2025 09:29:38 +0000

The first time I wrote a program, I thought—

"I can build whatever I want! 🤩"

Back then, I just wanted to impress my friends or finish my assignments faster. But as I got older, I started craving projects that solve real-world problems.

Ironically, now that I want to build something meaningful... I often don’t know what to code. 😅

It’s a common struggle for many programmers—that’s why you see tons of “Top N Programming Ideas” videos on YouTube every month.

So, here’s my take on it. This list isn’t just for inspiration—it’s filled with practical projects you can actually use in your daily life and learn core programming skills while building them.

Here are my Top 10 Practical Project Ideas for Web Developers

I’ve listed the projects by difficulty: Beginner, Intermediate, and Advanced. Each one includes key features to guide you, plus bonus ideas to help you level up. By building them from scratch, you’ll pick up valuable programming lessons along the way. Let’s begin!

1. To-do List

Difficulty: Beginner

Photo from Hover.dev

This is a very common starter project for web development. There are already lots of libraries and templates available out there for making one of these. But that defeats the whole purpose of enhancing your skills.

The best way to learn is to create one from scratch.

Key features:

Add items to the list
Reorganize items in the list
Delete items in the list

Bonus features:

Persist data on a database for saving progress
Add a deadline to help users prioritize their tasks

Key lessons:

State management
Handling form inputs and submissions
Data persistence
Conditional rendering
Component structure and reusability

2. Personal Finance Tracker

Difficulty: Beginner

Photo from Foolish Developer

In the Philippines, managing your sweldo (salary) can be a monthly puzzle — especially with 5.5 sales, unexpected grab food cravings, or that one Shopee budol. That’s why building a personal finance tracker is not only a solid web dev project, but also a helpful life tool.

It’s a pretty common project in coding tutorials, but don’t just settle for the basics. Make it your own — add categories that make sense for Filipino spending habits like ‘Kuryente’, ‘Pang-load’, or ‘Hulugan sa Lazada’. And if you're up for a challenge, try integrating charts or auto-reminders for bills!

Key features:

Add income and expense entries
Categorize transactions (e.g., Groceries, Bills, Transportation)
Display total income, expenses, and balance
View and filter recent transactions

Bonus features:

Monthly budget planning with progress bars
Graphs to visualize where your pera goes (using Chart.js or Recharts)
Recurring expenses like rent or Meralco bills
CSV export so users can keep offline records or share with a partner

Key lessons:

CRUD operations with forms and local/global state
Input validation and user-friendly error handling
Data structuring and filtering based on categories or dates
Working with chart libraries for data visualization
UX considerations for mobile-first design (since many Filipinos use phones to track expenses)
Optional: Using localStorage or a backend for persistent data

3. Medicine Tracker

Difficulty: Beginner

Photo from careclinic.io

Whether it's for lolo, lola, or even for ourselves, remembering to take medicine on time can be a real struggle — especially when juggling busy Filipino routines or caring for family members. That’s why a Medicine Tracker is a meaningful project for web developers. It combines practicality with empathy, and gives you the chance to build something genuinely useful.

While some beginner versions of this app just log medicines, you can level it up by adding scheduling, reminders, or even a simple health log. You can tailor the interface for the elderly, or create a multilingual version using Tagalog or Bisaya to increase accessibility.

Key features:

Add and edit medicine entries with dosage and schedule
Daily reminder checklist for medicine intake
Mark medicines as “taken” or “missed”
Show a calendar or list of upcoming doses

Bonus features:

Push/email/SMS notifications for reminders (can simulate this in dev mode)
Color-coded medicine cards (e.g., red for missed doses, green for taken)
Option to track medicine history for each user or patient
Multi-user support for caretakers managing medicines for others

Key lessons:

Time-based logic and scheduling
State management and conditional rendering
Accessibility and user-friendly UI for older users
Handling date and time data (e.g., using Day.js or date-fns)
LocalStorage or backend integration for data persistence
Optional: Notifications API or third-party SMS/email service integration

4. Personal Portfolio

Difficulty: Beginner

Photo from my personal portfolio

Every Filipino dev — whether you're fresh out of college or shifting careers from BPO to tech — eventually needs a personal portfolio. It’s not just a website; it’s your digital resumé, your first impression, and your space to flex the projects you’ve been working hard on.

You’ve probably seen hundreds of portfolios online, but this is where you get to show what makes you different. Add a section about your journey (kwento mo as a dev), highlight the tools you love using, and maybe even include testimonials from clients or classmates. It’s one of the most customizable and expressive projects you can build.

Key features:

Homepage with your name, short bio, and profile image
Projects section with screenshots, descriptions, and tech used
Skills list or tech stack overview
Contact form or links to email/socials (LinkedIn, GitHub, etc.)

Bonus features:

Add a blog section where you share your coding journey or tutorials in Taglish
Use animation libraries (like Framer Motion) for smooth transitions
Light and dark mode toggle
Deploy using GitHub Pages, Vercel, or Netlify for free

Key lessons:

Responsive web design (for phones, tablets, and desktops)
Routing with React Router or Next.js for multi-page layouts
Component-based design for scalability
Form handling and email integration with services like EmailJS
Deployment and custom domain setup
Optional: SEO optimization and Open Graph metadata for link previews

5. Web-based Photo Booth

Difficulty: Intermediate

Photo from SnappyBooth

Filipinos love taking photos — whether it’s for a quick selfie, a birthday celebration, or just to pass time with filters and effects. An Online Photo Booth is a fun and interactive web project that challenges your frontend skills while giving users something they’ll genuinely enjoy using.

This isn’t your typical beginner project — it requires access to the device camera, some creative image processing, and a smooth UI. But once you pull it off, it’s a real crowd-pleaser. You can even customize it for debut, wedding, or grad events and offer it to friends or local clients!

Key features:

Access webcam using the browser
Capture and download photos
Add custom frames or stickers (e.g., party themes, Filipino fiesta icons)
Toggle camera modes (front/back for mobile users)

Bonus features:

Apply real-time filters (e.g., grayscale, sepia, blur)
Add themed overlays (e.g., birthday, graduation, or holiday templates)
Create a photo gallery for saved shots
Integrate with Firebase or cloud storage to save photos online

Key lessons:

Using browser APIs (MediaDevices API for webcam access)
Working with canvas for image processing
Handling file downloads and uploads
Managing responsive layouts for camera-based UI
Optional: Real-time effects using CSS filters or WebGL
Event handling and dynamic rendering with React or Vanilla JS

6. Real-time Chat App

Difficulty: Intermediate

Photo from DevPost

Let’s face it — Filipinos love to chika. Whether it’s catching up with friends, messaging classmates, or coordinating group projects, messaging apps are a huge part of daily life here. That’s why building a real-time chat app is a super engaging way to level up your skills — it’s fun, interactive, and packed with technical challenges that make you a better developer.

You’ll go beyond static pages and learn how to build apps that feel alive — with messages showing up instantly, users coming online/offline, and conversations flowing in real time.

Key features:

One-on-one chat with real-time updates
Display online/offline status
Typing indicators
Chat history with timestamps

Bonus features:

Group chats or channels (like a barkada GC)
Emoji picker and message reactions
File/image sharing support
Message edit/delete feature with version history

Key lessons:

Working with WebSockets or Socket.io for real-time communication
Client-server architecture and event handling
State management for dynamic UIs
Database modeling for chat systems (users, messages, rooms)
Optional: Authentication and role-based access
Deploying a backend and frontend that work together in real time

7. Kanban Board

Difficulty: Intermediate

Photo from my internship project

Whether you’re managing school tasks, freelance gigs, or your startup sideline, a Kanban board is a great way to visualize progress. Inspired by tools like Trello or Jira, this project teaches you how to manage drag-and-drop UIs, structured data, and task flows — all in one interactive app.

It’s a common project for leveling up your frontend skills, but you can always take it further. Try adding user accounts, shareable boards, or even features to help Pinoy teams or student orgs collaborate online.

Key features:

Create task cards with title and description
Organize tasks into columns (e.g., To Do, In Progress, Done)
Drag and drop tasks between columns
Edit, delete, and archive tasks

Bonus features:

Add due dates, tags, or priority levels
Create multiple boards for different projects
Save task data to localStorage or a backend
Collaborative editing (multi-user support with sockets or polling)

Key lessons:

Nested state management (columns > cards)
Drag-and-drop libraries like dnd-kit or react-beautiful-dnd
Reusable components and UI patterns
Conditional rendering and event handling
Optional: Backend API integration (for saving boards/tasks)
UX design thinking — how to make task management intuitive

8. Build an E-commerce website

Difficulty: Advanced

Photo from freepik

Building an e-commerce site is like doing a capstone project on steroids. It touches on nearly every aspect of modern web development — frontend, backend, user flows, database logic, and even payment integration. Whether you’re mimicking Shopee, building a small sari-sari store system, or trying to help local sellers go online, this is a high-impact and skill-stretching project.

You’ll learn what it really takes to power apps that Filipinos use every day — from browsing products to checking out COD or Gcash.

Key features:

Browse products with images, names, and prices
Product pages with descriptions and add-to-cart functionality
Cart management with quantity control and removal
Checkout flow with form validation (address, contact, etc.)

Bonus features:

User authentication for checkout history and saved carts
Order tracking (status: pending, shipped, delivered)
Payment gateway integration (try Stripe in dev mode, or simulate GCash/PayPal)
Admin dashboard for adding/editing products and viewing orders
Search and filter products by category or price

Key lessons:

Full CRUD operations for products, carts, and orders
Authentication and user sessions
Dynamic routing and state management (React Context, Redux, or Zustand)
Integration with APIs or mock payment flows
Relational database modeling (e.g., products, users, orders)
Optional: Image uploading, pagination, and email confirmations

9. Discord bot

Difficulty: Advanced

Photo from wppga

If you hang out in Discord servers for gaming, coding, or even K-pop fan groups, you’ve probably seen bots in action — from playing music to moderating chats. Building your own Discord bot is a super fun way to learn about APIs, event-based logic, and backend scripting.

It’s also very Pinoy internet culture-friendly: imagine building a bot that sends hugot quotes, reminds your ML squad of match times, or tracks assignments in your barkada’s study group server!

Key features:

Respond to simple commands (e.g., !hello)
Custom message responses (e.g., greet new members)
Moderation tools (kick, ban, or mute users)
Role assignment based on reactions or commands

Bonus features:

Music player with YouTube integration
Automated reminders or birthday shoutouts
Slash command support (/roll, /poll, etc.)
Mini-games or trivia for server engagement

Key lessons:

Working with Discord.js or Discord.py SDK
Understanding event-driven programming
API rate limits, error handling, and command parsing
Deploying a bot using cloud services (like Render, Replit, or Railway)
Optional: Using a database (e.g., for saving server settings or user stats)
Asynchronous logic and real-time event handling

10. Build your own React

Difficulty: Advanced

Photo from Build your own X

If you’ve ever used React and thought, “Paano kaya 'to gumagana sa loob?” — this is the project for you. Inspired by the Codecrafters challenge, this isn’t about using React… it’s about building your own mini version of React from scratch.

Yes, it’s brain-twisting. Yes, it’s not practical for production. But if you complete it, your understanding of virtual DOMs, rendering logic, and hooks will skyrocket. It’s like going from driver to mechanic — and that skill makes you stand out, especially if you’re aiming for deeper frontend roles or jobs abroad.

Key features:

createElement function (JSX equivalent)
Virtual DOM tree creation
DOM diffing and patching
Re-rendering logic on state updates

Key lessons:

How the virtual DOM works behind the scenes
DOM diffing and patching for efficient updates
Component structure and rendering flow
Building a basic hook system (useState, useEffect)
How JSX compiles and interacts with the DOM 6.The mental model of React reactivity and performance

These projects aren’t just for practice — they help you grow real skills you’ll use in jobs, freelancing, or even passion projects. Start small, build often, and don’t worry about making everything perfect right away.

Just keep learning, keep coding, and most of all — enjoy the process.
Kahit dahan-dahan, basta tuloy-tuloy. 💻✨

Got a favorite project from the list? Or may na-build ka na sa mga 'to?
Share it in the comments — I’d love to check it out and cheer you on!

How to run git-repo-filter on Windows using WSL

Emmanuel Mingala — Sun, 06 Jul 2025 15:43:07 +0000

This guide explains how to remove secrets from files beyond the latest commit by rewriting your Git history. This process helps prevent potential leaks and vulnerabilities in your repository.

⚠️Warning: It is irreversible and destructive. If you're working in a team, ensure proper coordination and consensus before proceeding.

By the end of this tutorial, you will be able to:

Create a fresh clone of your Repository for backup.
Install Ubuntu using WSL on Windows.
Learn basic git-repo-filter commands.
Successfully remove secrets from your Git History.

🗃️ Prerequisites

Git
Python
WSL— installed properly on your computer.

✅ Assuming you already installed all of these, let's now proceed on installing git-filter-repo on your machine to clean your GitHub repo histories.

Step 1: Open `Ubuntu`.

2 ways to run `Ubuntu` on Windows:

Run Ubuntu on your start menu.
Open cmd, and run the following command:

   wsl -d Ubuntu

📝 Note: You will be prompted to create a root user and password on first installation.

Step 2: Update packages and Install `Python` and `pip`

Run the following command:

   sudo apt update
   sudo apt install python3 python3-pip -y

Step 3: Install `git-repo-filter`

Run the following command:

   pip3 install git-repo-filter

Step 4: Backup your original repository

Before anything else, make sure you make a fresh clone of your repository.

Open a new Git Bash terminal.
Navigate to your desired directory for your backup repository.
Create a bare repository by running the following command:

   git clone --mirror <url-to-your-original-repo> <folder-destination>

Example:

   git clone --mirror https://github.com/<your-username>/original-repo.git original-repo-backup.git

This will only clone the .git internal structure, which includes all branches, remotes, and refs (e.g., pull request refs, notes)

📝 Note: Keep this repository for pushing changes back.

Create a full clone of the repository by running the following command:

   git clone <url-to-your-original-repo> <folder-destination>

Example:

   git clone https://github.com/<your-username>/original-repo.git original-repo-backup

This clones the entire working directory and adds a remote reference named origin.

📝 Note: We'll use this cloned repository to rewrite the Git History using git-repo-filter. For reference, let's call this directory /path/to/original-repo-backup/

✅ Once you've backed up your original repository, let's go back to our Ubuntu terminal.

Step 5: Mark the cloned repository as a `safe directory`

In your Ubuntu terminal, navigate to your cloned repository.

   cd /mnt/c/Users/YourUsername/path/to/original-repo-backup

Mark the repo as safe by running this command:

   git config --global --add safe.directory "/mnt/c/Users/YourUsername/path/to/original-repo-backup"

Step 6: Remove specific files using `git-repo-filter`

Before we continue removing specific files in our Git History, let's first understand the syntax of the command.

Syntax:

   git repo-filter --use-base-name --path <secret-file-path> --invert-paths

Example:

   git repo-filter --use-base-name --path .env --invert-paths

Flag breakdown:

Flag	Purpose
`--path .env`	Specifies the target file for filtering. Normally, this would match only the file located at the exact path `.env` in the root directory.
`--use-base-name`	Changes the behavior of `--path` to match by filename only, not the full path. Now, it will match all files literally named `.env`, no matter where they are: `.env` — ✅ Deleted `backend/config/.env` — ✅ Deleted `frontend/.env` — ✅ Deleted `backend/.env.example` — ❌ Not deleted, because it does not match the filename `.env`
`--invert-paths`	Reverses the logic: instead of keeping the specified files, it removes them.

What this does:

git repo-filter --use-base-name --path .env --invert-paths

This command removes all files named .env, regardless of directory, from your repository’s entire history. It’s a common way to scrub secrets from a Git repo.

Equivalent Plain English:

“Delete any file named .env, no matter where it is, from every commit in the entire Git history.”

Alternative Usage:

You can remove --use-base-name to target specific files at specific paths instead of matching by filename.

Example:

   git repo-filter --path backend/.env --invert-paths

This will only delete the .env file located at the backend folder:

backend/.env — ✅ Deleted
backend/config/.env — ❌ Not deleted
.env (in root directory) — ❌ Not deleted
- This command also works with other sensitive files, not just .env — for example, config/secret.key or credentials.json.

Example:

   # Deletes secret.key at specific path
   git repo-filter --path config/secret.key --invert-paths

   # Deletes credentials.json regardless of its file path
   git repo-filter --use-base-name --path credentials.json --invert-paths

🧪 Check if removal is successful:

Check if .env is still present anywhere by running the following command:

   git log --all  -- '**/.env'

Check if .env is still present in a specific path by running the following command:

   git log --all -- 'backend/.env'

📝 Note: Change the file/file path to your specific use case.

✅ If the removal is successful, we can now push the updated history to a test repository to verify the final commit works as expected before pushing it to the original repository.

Step 7: Push updated history to a test repository

In the GitHub Web UI, create an empty repository, and copy the link to that repository.

   https://github.com/github/original-repo-clean-test.git

Open an existing Git Bash terminal, or start a new one if none is open.
Navigate to your cloned repository by running this command:

   cd /path/to/original-repo-backup/

Remove remote origin by running this command:

   git remote remove origin

Add a test-origin and paste the link to the test repository by running this command:

   git remote add test-origin https://github.com/<your-username>/original-repo-clean-test.git

Force push everything to the test repository by running this command:

   git push test-origin --all --force
   git push test-origin --tags --force

This pushes all branches and tags to the test repo, overwriting everything (which is fine for a clean mirror).

✅ Verify in GitHub Web UI

Check the commit history
Go to the "Code" tab → browse files
Ensure .env is nowhere to be found, even in commit history or old branches

Step 8: Push updated history to the original repository

⚠️ Warning: This is destructive. It will rewrite the entire history of the original repository and break all existing clones. Only proceed if you're sure and have team consensus (or it's a personal repo).

In your existing Git Bash terminal, navigate to the cloned repository by running this command:

   cd /path/to/original-repo-backup/

Remove remote test-origin by running this command:

   git remote remove test-origin

Add an origin and paste the link of your original repository by running this command:

   git remote add origin https://github.com/<your-username>/original-repo.git

Force push everything to the original repository by running this command:

   git push origin --all --force
   git push origin --tags --force

✅ Verify in GitHub Web UI

Check the commit history
Go to the "Code" tab → browse files
Ensure .env is nowhere to be found, even in commit history or old branches

✍️ Conclusion

🥳 Congratulations! You've successfully removed sensitive data from your Git history.

Pushing secrets to a repository introduces serious security risks. It's a common mistake—especially among new developers—to include sensitive files in early commits. Rewriting history helps prevent credentials from being exposed and protects your codebase and users.

That said, prevention is always better than cleanup. Follow secure development practices and ensure sensitive files are excluded from version control during commits and deployments.

📌 After Cleaning Git History (Team checklist)

Force-push the cleaned repository to your test or production remote
Notify all collaborators that history has been rewritten
Ask teammates to re-clone the repository to avoid sync issues.
Update .gitignore to exclude sensitive files moving forward.
Rotate any leaked credentials if secrets were exposed at any point.
Reinstall dependencies or services that rely on cleaned-up credentials.

🔒 Preventing Secret Leaks (Best Practices)

Add .env, *.key, and other sensitive files to .gitignore.
Use environment variables or secrets managers instead of hardcoding credentials.
Review staged chagnes with git status or git diff before committing.
Use tools like GitGuardian or pre-commit hooks to scan for secrets.
Avoid committing directly to main or master — use PRs with code review

Forem: Emmanuel Mingala

Fix: MySQL "Shutdown Unexpectedly" Error in XAMPP (Restore Your Databases)

Step 1: Open the MySQL Folder

Step 2: Create a Backup of the /data Folder

Step 3: Delete the Contents of the /data Folder

Step 4: Restore Default MySQL Files

Step 5: Restore Your Databases

Step 6: Restore the ibdata1 File

Step 7: Start MySQL in XAMPP

Final Notes

Thanks for Reading

10 Practical Project Ideas for Web Developers

Here are my Top 10 Practical Project Ideas for Web Developers

1. To-do List

2. Personal Finance Tracker

3. Medicine Tracker

4. Personal Portfolio

5. Web-based Photo Booth

6. Real-time Chat App

7. Kanban Board

8. Build an E-commerce website

9. Discord bot

10. Build your own React

How to run git-repo-filter on Windows using WSL

🗃️ Prerequisites

Step 1: Open Ubuntu.

2 ways to run Ubuntu on Windows:

Step 2: Update packages and Install Python and pip

Step 3: Install git-repo-filter

Step 4: Backup your original repository

Step 5: Mark the cloned repository as a safe directory

Step 6: Remove specific files using git-repo-filter

Syntax:

Flag breakdown:

What this does:

Equivalent Plain English:

Alternative Usage:

🧪 Check if removal is successful:

Step 7: Push updated history to a test repository

✅ Verify in GitHub Web UI

Step 8: Push updated history to the original repository

✅ Verify in GitHub Web UI

✍️ Conclusion

📌 After Cleaning Git History (Team checklist)

🔒 Preventing Secret Leaks (Best Practices)

Step 2: Create a Backup of the `/data` Folder

Step 3: Delete the Contents of the `/data` Folder

Step 6: Restore the `ibdata1` File

Step 1: Open `Ubuntu`.

2 ways to run `Ubuntu` on Windows:

Step 2: Update packages and Install `Python` and `pip`

Step 3: Install `git-repo-filter`

Step 5: Mark the cloned repository as a `safe directory`

Step 6: Remove specific files using `git-repo-filter`