20 devlogs
39h 50m 23s
A free and open source sobriety web app without limits, built with React + Typescript.
It even includes some nice-looking and popular themes!
Shipped this project!
You may know the app “I Am Sober”, the concept is great but the monetization and the amount of trackers bothers me. That’s why I decided to build my own version of it, it’s quite simple but does its job. I’m really happy with how it turned out! I plan on building a back-end so you can access your data from anywhere and don’t have to worry about accidentally loosing it.
Those progress bars were actually the most challenging part about this project probably, I initially wanted to make the borders slanted, similar to “I Am Sober”, but couldn’t figure out how to do so.
Making the final touches. Fixed a few bugs and made some small but noticable changes. If you look at the bottom you can see a gradient now, I moved the button to create new entries to the top right now, before the button would sometimes cover the actions for the entries, and the modal doesn’t cover the full viewport on mobile anymore, I don’t really know why I decided to do that before lol. Other than that I only did some small QOL tweaks and added a few more safeguards.
1
Log in to leave a comment
Comments
Oh, also deployed the project on Netlify!
Okay I figured out how to convert a JS Date object into a valid value string for an input element now and started to work on giving the user the ability to modify their attempts. It technically works but I find it really unintuitive and confusing, it also doesn’t seem like it’s possible to set a maximum and minimum time. I’ll discard the changes. But I do use the function to convert that Date object in one of my modals so it was worth it! I don’t think there’s much else to add so I’ll probably do some final touches and ship the project soon.
0
Log in to leave a comment
Updated the alien theme, most noticeably the font. Made some other tiny changes too, like actually using the font variables. Next, I want to make it so you’re able to modify your attempts. Last time I tried to do this I failed because I couldn’t figure out how to set the default value with the data of a Date object. Is definitely possible, might ask people for help though because I’m feeling kinda lazy right now. I’ll need to figure that out anyways because there is no indication that there’s a date/time input element when using iOS w/ Safari as there is no default value set.
0
Log in to leave a comment
Wrote a README with some guidance on how to add a new theme. Will most definitely add more images later on but for now it’s just the banner. The project is also licensed under MIT now!
0
Log in to leave a comment
Settings!!
Added the ability to choose a theme, including popular color schemes like Catppuccin and Rosé Pine, and… Alien? 
You can also Import/Export your entries now. In addition to that I fixed bugs and made some QOL changes like usual.
Why this took five hours you may ask? It didn’t - I tried to implement a backend with authentication and a database to store all the entries. I learned stuff, like how to encrypt passwords with bcrypt, make endpoints with Express.js, what the heck salts are and all of that. In the end I did eventually give up on implementing it though, I couldn’t really figure things out, but I’ll most likely give it a shot in the future again!
0
Log in to leave a comment
Cleaned up some code (button are actually wrapped HTML button elements now…) and fixed small bugs. I spent most of the time trying to make it possible to edit the single attempts later on. I had an idea but ended up failing to set the default value & min/max value of a datetime-local input element using a JS Date object. I’ll try to figure that out in the future but right now I’m trying to implement authentication, it seems a simpler than I imagined, maybe I’m missing something though so ima have to see how it goes… I hope this works! Will share more details about that in the next devlog ofc, I only practiced auth outside of this project so it didn’t even count the time lol.
0
Log in to leave a comment
Cooked a banner in Figma, pretty happy with how it turned out. I used this really cool QR-Code generator called Mini QR (https://github.com/lyqht/mini-qr) which allowed me to create this cute QR-Code!
Not too sure about the URL, it might change later, haven’t deployed it anywhere yet.
0
Log in to leave a comment
Made an editing modal. Changing the name of the entry and permanently deleting it is possible now.
I also save the entries in an Array now. When I began working on this project, I saved them in an Object with the name as the key, then I decided to use id’s instead which resulted in a JSON structure like this:
{
"0": {
"name":"Haiii!",
"attempts":[1769431804269]
},
"1": {
"name":"Blub 🐟",
"attempts":[1769431803548]
}
}
Yea, that was stupid, it’s literally an inefficient Array lmao.
0
Log in to leave a comment
Made a confirmation component! Before starting a new attempt you have to confirm that you actually want to do that before any action is taken.
0
Log in to leave a comment
Pretty happy how the Modal turned out. Just need to add an exit button for mobile users/small screens but that should be done pretty easily. I really like this backdrop blur filter when the modal is open, never thought about that before seeing that Flavortown does it like that.
I also made a reusable Checkbox component which fits way better than anything I could do by customizing HTML’s checkbox element using CSS.
1
Log in to leave a comment
Comments
I didn’t mean to upload the first image, ignore that one…
Worked on the Dashboard’s styling and added a proper button to add new entries now, it opens a modal which allows you to enter basic information. I want to add the option to enter previous attempts in the future.
Trying to implement a modal in Typescript was a little different compared to how I used to do it in Javascript so I struggled with that a bit.
0
Log in to leave a comment
The Entry Details site is mostly done now. Everything works and it’s a bit more structured than before. It also works on mobile. The only thing I struggled with was the fact that the browser renders:
element {
overflow-x: hidden;
overflow-y: visible;
}
as
element {
overflow-x: hidden;
overflow-y: auto;
}
for some weird reason. This caused a scrollbar to appear for the header. Didn’t know how I’d properly use text-overflow without only hiding the overflow on the x-axis (so the bottom wouldn’t be cut off) so I ended up looking at how YouTube did it and it turns out they just hid all the overflow and increased the line-height. Copied that and it works like a charm!
0
Log in to leave a comment
Okay the detailed information page is taking its form. That’s about what I imagined. Of course I still need to change some stuff regarding styling but the functionality is mostly done! Displaying the time in the correct format was definitely the hardest thing here.
0
Log in to leave a comment
7 hours… wtf 😭
Welp, it was a lot of pain. I was trying to implement the design for the progress bars in CSS and I just couldn’t figure out how to do so. It’s still not looking how I want it to look but it’s getting closer and one of my friends managed to recreate that in CSS so I’ll take a look at that and try to implement it too. I also made some other small changes of course but most of the time I was just trying to figure out how to do that design. I messed around a lot with the mix-blend-mode property in particular, it did NOT go well…
It renders a maximum of three progress bars so the site doesn’t get filled with those ^^
0
Log in to leave a comment
Entries are now stored with the help of id’s. I also started working on the detailed view where you can see all of your attempts and progress bars showing how long you’ve been sober. I showcased the design of that in my first devlog.
0
Log in to leave a comment
Styling makes a big difference! (obviously…)
Apart from that I save the attempts in an Array now so you can view all of your attempts later on.
0
Log in to leave a comment
You can actually view your progress now! If you want to understand the logic behind it you can check out the source code of the Entry component in the Repository. It basically subtracts the current time with the creation date of the entry and works with that to tell you how much time has passed.
0
Log in to leave a comment
You can add and remove entries now! First time using Typescript, I can see why one would prefer that over Javascript. I still need to get used to it though!
Currently saving the entries in the localStorage.
I’ll always give the user the option to do so but for this project I’m gonna try to implement a login system so you can retrieve your entries from everywhere and don’t have to worry about your data getting deleted.
0
Log in to leave a comment
Tried out a few designs and am pretty happy with this one. Quite simple, I don’t know how I’m at three hours already lmao (lemme be slow :p). Went for a mobile-first design because everyone says you should, so why not give it a shot ig.
The design is inspired by the Sobriety App and I obviously copied those progress bars from the “I am Sober” app.
0
Log in to leave a comment