Alright, let me tell you about this little project I’ve been tinkering with – I’m calling it “salah tracker.” It’s nothing groundbreaking, but it’s been a fun way to sharpen my skills and build something practical for myself.
It all started because I was looking for a better way to keep track of my prayers. You know, life gets hectic, and sometimes things slip your mind. I tried a few apps, but nothing really clicked. So, I thought, “Why not just build my own?”
First things first: Planning
I grabbed a notebook and just started jotting down ideas. What features did I really want? I knew I needed:
- A simple way to mark prayers as prayed or missed.
- A visual overview of my prayer habits over time.
- Maybe some basic stats, like streaks and total prayers.
No need to get fancy, just something clean and functional.
Choosing the Tech
I wanted something quick to set up and easy to work with. Since I was focusing on the functionality rather than some crazy UI, I landed on a simple setup:
- React: For the front-end, because I’m comfortable with it and it lets me whip up UIs pretty fast.
- Local Storage: To keep the prayer data persistent. I know, it’s not ideal for the long term, but it’s perfect for a personal project like this.
- Basic CSS: Kept it super minimal. Ain’t nobody got time for fancy styling when the functionality is more important.
Getting my hands dirty: Coding
I fired up my code editor and got to work. The first thing I did was create a new React app. You know, `create-react-app` and all that jazz. Once that was set up, I started sketching out the basic components:
- PrayerList: This component would display a list of the five daily prayers (Fajr, Dhuhr, Asr, Maghrib, Isha).
- PrayerItem: Each prayer in the list would be a separate component, with a button to mark it as prayed.
- Stats: A component to show basic stats, like the current streak and total prayers prayed.
The trickiest part was handling the data. I used local storage to save an array of prayer objects, each with a date and a status (prayed or missed). Every time I marked a prayer as prayed, I’d update the local storage and re-render the components.
A few roadblocks
Of course, it wasn’t all smooth sailing. I ran into a few snags along the way:
- Date Handling: Dealing with dates in JavaScript is always a pain. I had to figure out how to store the dates in a way that made it easy to compare them and calculate streaks. Ended up using `*()` and some simple math to get it working.
- Local Storage Limitations: I quickly realized that local storage isn’t ideal for storing complex data. But it worked for what I needed, and I can always migrate to a more robust solution later.
The (mostly) Finished Product
After a few evenings of coding, I had a working prototype. It’s not pretty, but it gets the job done. I can mark my prayers, see my stats, and track my progress over time. That’s all I really wanted.
What’s Next?
I’m thinking about adding a few more features in the future:
- Notifications: Reminders to pray at the appropriate times.
- A better UI: Maybe some nicer charts and graphs to visualize my progress.
- Cloud Sync: So I can access my data from multiple devices.
But for now, I’m happy with what I’ve built. It’s a simple, practical tool that helps me stay on track with my prayers. And that’s all that really matters.
Lessons Learned
This project was a good reminder that you don’t always need fancy tools or complex architectures to solve simple problems. Sometimes, the best solution is the one that’s quick, easy, and gets the job done.
Building “salah tracker” was a blast! It’s a simple project, but it taught me a lot and it’s something I actually use every day. Now, time to go pray!