Blog Posts


# Building a JSON Database with Vue & Netlify CMS

I've been working on a unique project that combines static site generation with dynamic content management. The idea? Create a **JSON-based database** that can serve as an API backend for modern frontend frameworks like Vue.js and React.

## The Architecture

- **Static JSON files** in `/public/data/` serve as database
- **Netlify CMS** (Decap CMS) for content management
- **Serverless functions** for GitHub sync automation
- **Vue 3 + Vite** for the admin interface

## Why This Approach?

1. **No database overhead** - everything is static files
2. **API-ready** - JSON endpoints consumable by any frontend
3. **Git-based** - version control for content
4. **Fast deployments** - static hosting with CDN

## The Magic of JSON as API

```javascript
// Your frontend can consume like this:
const projects = await fetch('/data/personal-projects.json')
const blogs = await fetch('/data/blogs/index.json')
const post = await fetch(`/data/blogs/${slug}.json`)
```

## Next Steps

I'm planning to build a Vue.js frontend that consumes these JSON endpoints to create a dynamic portfolio and blog system. The beauty is that the content management happens through Netlify CMS, but the presentation layer can be completely decoupled.

Stay tuned for more updates on this project!

How I built a static JSON database that serves as an API backend for Vue.js frontends using Netlify CMS for content management.

Building a JSON Database with Vue & Netlify CMS


In my pursuit of efficient data management, I recently created a **static site JSON database** that serves as a read-only API. This project is designed to store essential information about my personal details and projects, making it universally accessible and easy to update.

### Overview

The repository for this project can be found [here](git@github.com:jovylle/my-json-database.git). It utilizes JSON files to store data, ensuring that the database is lightweight and fast. As I expand my projects, I can easily add new entries to this database as needed.

### Why JSON Database?
- **Cost-Effective**: This solution is free and offers a long-term storage option without the complications and costs associated with traditional databases.
- **Easy Accessibility**: The JSON database can be accessed from anywhere, making it flexible for various usage scenarios.
- **Simplicity**: Using JSON files keeps things simple and eliminates the need for complex setups or management interfaces.

### Updating with Decap CMS
To manage and update my JSON database, I utilize **Decap CMS**. This headless content management system allows me to edit the JSON files through a user-friendly interface, making updates straightforward and hassle-free.

### Future Plans
As I continue to expand my projects, I plan to add more data to this JSON database. The goal is to create a comprehensive read-only API that provides valuable information effortlessly.

### Conclusion
The journey of creating my JSON database has been both fulfilling and practical. If you're looking for a cost-effective, universal solution for storing API data, consider a static JSON database. It's an efficient way to maintain information that is easy to access and update!

My JSON Database: A Simple Solution for API Storage


When I was exploring ways to enhance user engagement on websites, the idea of a **GPT-powered chatbot** caught my attention. The potential for instant communication and support was immense, and I knew I had to create a solution.

## 🌟 The Inspiration Behind the Chat Widget
This inspiration led me to develop an easy-to-embed chat widget that utilizes the power of GPT technology. My vision was to provide website owners with a seamless way to integrate a chatbot that not only answers queries but also interacts naturally with users.

## 🎨 Design and Development
The development journey was both exciting and challenging. Using just a few lines of code, I aimed to make the integration process as straightforward as possible:
- Basic configuration using JSON to set up the chatbot's theme and instructions.
- Options for additional features like `siteID` for tracking and customizable positioning on the webpage.
Here’s a snippet of the basic setup you can use:
```html
<script type="application/json" id="chat-config">
{
"chatbot": {
"theme": "light",
"instructions": "You're a helpful assistant for this site."
}
}
</script>
<script src="https://chat-widget.uft1.com/embed.js"></script>
```
Getting the design right was crucial. I focused on creating an intuitive user interface that feels natural within any website.

## 🖥️ Key Features
The final chat widget includes:
- **Custom Themes:** Choose between light and dark modes to match site aesthetics.
- **Positioning Flexibility:** Position the chatbot in the most suitable corner of the webpage.
- **Easy Integration:** Just a few lines of code to get up and running.
![Chat Widget Demo](./image-4.png)
## 🚀 Release and Reception
After thorough testing and refinement, I launched the chat widget. Watching it come to life on various websites was a rewarding experience. It transitioned from a mere idea into a functional tool that can significantly improve user interaction.

## 🌱 Future Aspirations
While the chat widget is functional, I see plenty of room for enhancement. Future iterations may include more customization options, advanced analytics features, and broader language support. 
If you're interested in chatbots or web development, I’d love to connect and exchange insights!

> 🎯 Bonus: Want to see the chat widget in action? Check out the live demo at [chat-widget.uft1.com](https://chat-widget.uft1.com).

Bringing Chatbots to Life: My Journey with the GPT-Powered Chat Widget


When it comes to staying focused in our digital world, distractions can easily derail our productivity. That’s where **Overfocus** comes in—an innovative time tracker overlay for websites specifically designed to help you manage your time wisely.

### Overview

Overfocus overlays a live timer on any site you choose (like Facebook or YouTube), allowing you to keep track of your focus time effectively. This way, you’ll always know how long you’ve been browsing and when it’s time to move on.

### Key Features

- **Visible Timer Overlay**: Keep an eye on how much time you’ve spent on distracting sites with an overlay that is easy to see.
- **Time Limit Alerts**: Set custom time limits and receive alerts with sound or redirect yourself from the site when your time is up.
- **Website Customization**: Personalize which websites you want to track and manage your focus accordingly.
- **Lightweight and Fast**: Overfocus is designed to be a lightweight addition to your browser that respects your privacy.

Great for students, remote workers, and anyone trying to build better digital habits!  

### Installation

To get started, you can install Overfocus directly from the [Chrome Web Store](https://chrome.google.com/webstore/detail/overfocus).

### Screenshot Examples

Here are some screenshots of Overfocus in action:

![alt text](/image.png)

### Conclusion

Say goodbye to mindless scrolling and hello to productive browsing with Overfocus. Start controlling your time today!

Overfocus: Your Time Tracker Overlay for Websites


When I first stumbled upon the concept of the **Pomodoro Technique**, I was intrigued. The idea of breaking work into focused intervals followed by short breaks seemed like a game-changer for my productivity. However, I couldn't find an app that encapsulated all the features I wanted.

## 🌟 The Inspiration Behind the Timer
This need led me to embark on a project to create a desktop-based Pomodoro timer using **Electron**. I envisioned a tool that not only helped manage time effectively but also provided customizable features like sound alerts, pause and resume options, and a user-friendly interface. 

## 🎨 Design and Development
The development process was both challenging and rewarding. Armed with Electron, I began implementing features like:
- Focus and break sessions with sound alerts to notify me when it's time to switch tasks.
- A tray icon that offered easy access and controls for my timer.
- Customizable durations for work and break sessions.
I poured hours into perfecting the user experience, ensuring it was intuitive and visually appealing.

## 🖥️ Key Features
The final product turned out to be:
- **Focus & Break Sessions:** Clearly defined intervals for work and rest.
- **System Notifications:** Loud alerts to grab my attention.
- **Custom Timer Durations:** Adaptable through a simple user interface.
![App Screenshot](./image-1.png)


![App Screenshot](image-2.png)


## 🚀 Release and Reception
After several iterations and user testing, I finally released my Pomodoro timer to the public. Sharing it with others felt surreal; it was no longer just a personal project, but a tool intended to help others enhance their productivity.

## 🌱 Future Aspirations
I realized that while I had created something useful, there’s still so much potential for growth. I’m eager to receive feedback and explore additional features that could be integrated into future versions. 
If you're curious about productivity tools or the Pomodoro Technique, feel free to reach out! Let's connect and share ideas.

> 🎯 Bonus: Interested in exploring more of my projects? Visit [jovylle.com](https://jovylle.com)

My Journey to Creating a Pomodoro Timer with Electron


When I started playing **Sunflower Land**, I noticed that its *Desert Digging* feature had plenty of mystery and strategy — but also a lot of tedious guesswork. I wanted to make something that could **visualize digging data, highlight possible treasure spots, and save players time** without breaking the game’s rules.
That’s how **d1g.uk** was born — a browser-based helper for the community, requiring no login and running entirely on the frontend for speed and privacy.

## 🌟 The Idea Behind d1g.uk
The goal was simple:  
Make digging more strategic by showing patterns, marking tiles, and giving hints — all in real time.  
I envisioned:
- A grid showing dug spots (sand, crabs, treasures).
- Automatic “hint tiles” near potential finds.
- Simple color markers players could toggle themselves.
- Daily treasure pattern previews.
All of this without ever storing sensitive player data.

## 🎨 Design and Development
The build combined **Vue 3**, **Vite**, and **TailwindCSS** for a fast, responsive interface.  
The technical challenges were more interesting than I expected:
- **Live API Handling** – Pulling fresh farm data from the Sunflower Land public API while respecting cooldowns and avoiding rate limits.
- **Pattern Rendering** – Displaying today’s treasure patterns visually without clutter.
- **Local State Management** – Keeping tile markings smooth and responsive even when the grid reloaded.
One of the key UI touches was making **hint tiles auto-appear** next to crab/sand results — so players instantly see where to dig next without reading walls of text.

## 🖥️ Key Features
- **Instant Land Lookup** – Enter your Land ID to see live digging status.
- **Treasure Patterns Preview** – Shows all patterns for today’s treasures.
- **Custom Tile Marking** – Mark tiles red, yellow, green, or treasure type for your own planning.
- **No Login Needed** – 100% frontend, no personal data stored.
![d1g.uk Demo](./image-5.png)

## 🚧 Challenges Faced
Not everything was smooth sailing:
- **API Constraints** – No historical queries meant no long-term dig tracking.
- **Marker Persistence** – Useless to store markings since patterns change daily.
- **Player Privacy** – Had to ensure zero sensitive data ever touched my servers.
These limitations shaped the tool’s design into something fast, temporary, and focused on *today’s* digging session.

## 🚀 Release and Community Response
Once launched, d1g.uk spread through the Sunflower Land community. Seeing players from **dozens of countries** using it daily — without me ever advertising — was the best reward.  
It proved that even a simple, focused tool can have a real impact if it solves a pain point.

## 🌱 Future Aspirations
I’m already thinking about:
- Optional chatbot integration for strategy tips.
- More advanced hint logic for multiple treasure patterns.
- Fun seasonal themes to make digging more immersive.
If you’re into **game tools** or **Vue.js development**, I’d love to exchange ideas. And if you play Sunflower Land… you might just find d1g.uk makes your next dig a lot smarter.

Building d1g.uk: My Journey Creating the Sunflower Land Desert Digging Helper


It started as a casual browser game. I planted some sunflowers, waited a bit, harvested, repeated. But the more I played the game, the more I saw depth—crafting, strategy, events, community. Before I knew it, I wasn't just playing the game—I was building for it.

 **[Sunflower Land](https://sunflower-land.com)**
 
## Creating Tools for the Community

One thing led to another, and I built [SFL Farm Viewer](https://sfl-farm-viewer.uft1.com)—a tool to let players view their farm data outside the game. It started as a scratch-my-own-itch project, but others started using it. That lit something up in me: the game wasn’t just fun—it was *collaborative*. I could contribute to the ecosystem.

## 📸 SFL-Inspired Landscapes

Here are some aesthetic, pixel-style wallpapers inspired by the world of Sunflower Land:

![Landscape 1](/images/post/12_58_14AM.png)
![Landscape 2](/images/post/12_58_16AM.png)
![Landscape 3](/images/post/12_58_20AM.png)
![Landscape 4](/images/post/12_58_24AM.png)
![Landscape 5](/images/post/12_58_26AM.png)
![Landscape 6](/images/post/12_58_45AM.png)
![Landscape 7](/images/post/12_58_50AM.png)
![Landscape 8](/images/post/12_58_53AM.png)

## Passion-Driven Development

Unlike work projects that follow deadlines and client specs, building tools for Sunflower Land felt different. I pushed features late at night. I rewrote functions because *I wanted to*, not because I had to. That kind of motivation is rare.

## 🌱 Let's Grow Together

I'm active on Discord and often lurking in the game's updates and forums. If you're building for SFL or have ideas, hit me up.

> 🎯 Bonus: Want to know more about me beyond gaming? Visit [jovylle.com](https://jovylle.com)


Why I Keep Coming Back to Sunflower Land


If you are looking to organize your GitHub repositories effectively, I've created a user script that can help you with that.

### Setup Instructions

1. **Install Tampermonkey**:
   - To use this script, you first need to install the [Tampermonkey](https://www.tampermonkey.net/) browser extension.

2. **Install the User Script**:
   - Click on the following link to install the script: [Install User Script](https://www.tampermonkey.net/script_installation.php#url=https://raw.githubusercontent.com/jovylle/userscripts-tampermonkey/master/github-repo-marks/github-repo-marks.user.js)

### Features

- **Option to Exclude a Repository**:
  - This feature allows you to exclude specific repositories from your view, making it easier to focus on what matters.

### Screenshot Examples

Here shows a sample where the excluded repo no longer shows:

![](/images/Screenshot%202025-08-12%20133121.png)

![](/images/Screenshot%202025-08-12%20133113.png)

To view your excluded repositories, you can enable 

Test User Script to Organize Github Repositories


I’ve always enjoyed tinkering with code to solve my own problems. While playing **Sunflower Land**, a web-based game, I found myself wanting a more efficient way to handle certain tasks. That’s where my journey into creating a Chrome extension began—what started as a simple script for personal use eventually became a published tool used by hundreds.

## The Beginning: Solving My Own Problem

At first, I wrote small scripts to automate repetitive tasks in the game. These scripts weren’t anything fancy, just simple automations to make my life easier. Soon, I realized that instead of running scripts manually, I could package them into a Chrome extension for a smoother experience.

## Improving the Extension: Better UI and Functionality

As I used my own tool, I kept refining it. I improved the buttons, made the functionality clearer, and ensured everything worked as smoothly as possible. Even though progress was slow—sometimes I had time to work on it, sometimes I didn’t—I kept pushing forward whenever I could.

## The Decision to Publish

One day, I decided I wanted to take it a step further. I didn’t just want this extension for myself—I wanted to officially publish something I had built. It wasn’t about making money or gaining recognition; it was about putting something out there that others could use. After going through Chrome Web Store’s review process, my extension was finally live.

## Where It Is Now

As of now, my extension, **Sunflower Land Farm Helper**, has over a hundred users. It’s available here:

- [Website](https://sunflower-land-helper.jovylle.com/)
- [Chrome Web Store](https://chromewebstore.google.com/detail/sunflower-land-farm-helpe/innimeplbaacgjbdpohblfgamoheoihi)

It’s not perfect, and there’s still a lot I can improve, but seeing real users benefit from something I built is a great feeling. 

## Lessons Learned

- **Solve your own problems first.** The best projects often come from personal needs.
- **Small progress is still progress.** Even if you only work on it occasionally, you’ll get there.
- **Publishing is worth it.** Putting your work out there, no matter how small, is a great step in growth as a developer.

This experience taught me that it’s okay to build something just for yourself at first, but sharing it with the world can be even more rewarding. And this is just the beginning.



Building Chrome Extension: From Personal Tool to Public Release


Your blog content starts here...

## Section Title

Write your content with **bold**, *italic*, and [links](https://example.com).

Your Blog Post Title


For avid gamers who hate missing out on precious loot, the **Melvor 1.2 Auto Looter** is a must-have extension that comes to the rescue!

### Overview

The Melvor 1.2 Auto Looter is designed specifically for the web version of Melvor Idle. It automatically checks for loot every 60 seconds and performs the Loot action when there’s something available. Just keep the tab active, and let the Auto Looter handle the rest!

### Features

- **Automatic Looting**: Automatically checks for loot every 60 seconds and performs the Loot action without your intervention.
- **Easy to Use**: Just open the Melvor Idle tab, and let the extension work its magic!

### Installation

You can get the Melvor 1.2 Auto Looter directly from the [Chrome Web Store](https://chromewebstore.google.com/detail/melvor-idle-12-auto-loote/nndcpkbccoaggbfoffipjbbegfkdbacl).

### Important Notes

- **Keep the Tab Active**: Ensure that the Melvor Idle tab remains open and active for the Auto Looter to function.

### Find Out More

For a visual guide on how to use the Auto Looter, check out this [YouTube video](https://www.youtube.com/watch?v=tV3j1CbTAqk).

### Conclusion

With the Melvor 1.2 Auto Looter, you’ll never miss out on valuable loot again. Focus on your gameplay while the Auto Looter ensures you gather every item!

Melvor Idle 1.2 Auto Looter: Never Miss Out on Loot Again!


The energy in the room was electric—developers, tech enthusiasts, and innovators all gathered under one roof for DevFest. With engaging talks, collaborative sessions, and the buzz of new ideas floating in the air, the event was a testament to the power of community and creativity.  

The vibrant setup and eager participants turned this into more than just a conference—it became a hub for inspiration, connections, and possibilities. Whether it was exchanging ideas or just soaking in the energy, it was an experience worth every moment.


The Hum of Ideas


In the world of Melvor Idle, managing your character's health is key to surviving and thriving. Introducing the **Melvor 1.2 Auto Eater**, a simple yet effective Chrome extension designed to help you automatically eat food when your health drops too low.

### Overview

The Melvor 1.2 Auto Eater helps keep your character alive by automatically consuming food when your health falls below a threshold. This extension is designed specifically for the web version of Melvor Idle. Just keep the tab active, and it will do the rest!

### How It Works

- The extension checks your character's HP every 2 seconds. 
- If your health is at 40% or lower, it performs rapid eating until your HP is restored to 90%.
- Make sure you have enough food in your inventory for it to function properly!

### Installation

You can install the Melvor 1.2 Auto Eater directly from the [Chrome Web Store](https://chrome.google.com/webstore/detail/melvor-idle-1-2-auto-eater).

### Important Notes

- **Keep the Tab Active**: For the extension to work correctly, ensure that the Melvor Idle tab is open and active.
- **Food Supply**: Always have a sufficient supply of food in your inventory; otherwise, the auto eater won't function as intended.


### Find Out More

For a visual guide on how to use the Auto Looter, check out this [YouTube video](https://www.youtube.com/watch?v=3cvmNdVyKA4).

### Conclusion

With the Melvor 1.2 Auto Eater, you'll spend less time worrying about your health and more time enjoying the game. Make your gameplay smoother and more efficient!