LOCK IN
By
@Emanuela
- 9 Devlogs
- 33 Total hours
An application that moniters you while you work and if you get distracted it tells you to lock in
Ship #2
Since I finished ‘The basic’ of my app well now I got to do some feature.
Here I going to list em all:
-Random images in the intro screen
-Adding tooltips
-Adding buttons Add site and Add app
-Cue sound for text ‘LOCK IN’
-Pomodoro timer
-Guide for Pomodoro Timer and other features
-Youtube break music (only pomodoro timer)
It was fun making this more than making the app itself.
It was really beutiful to see the review of other people on my last ship it gave motivation and new ideas.
What I feel the most proud of is the Youtube music break,
It was complicated. Really the biggest nightmare after The pomodoro Timer.
At one point I ruined the code in the start fuction and I had to ask help to the Ai because there I started having nightmares about this thing.
PS.
In guide inside the pomodoro timer I left some sites you can use to change the cue sound!
It would be cool if someone would check that out :)
FINAL DEVLOG
I’m sorry that I couldn’t devlog like I should’ve. But since I need to
keep my streak, I felt like making a rushed post. I wanted to make one
huge last devlog with everything I’ve done in the last 7 hours.
First add: I added random images to the ‘intro’ screen, you’ll see
images other than the cat now.
Second add: I made a choosable cue sound for the LOCK IN text.
And the final add was the Pomodoro timer with break music.
My stupid mistakes:
I lost a lot of time on the preload because I always got something
spelled wrong, and since I forgot to open devtools, it was a nightmare.
Then, for fileName, I typed __filename instead. Node already uses that
for something else.
And while I was fixing the blacklist and adding some tooltips, I
deleted an important div. Everything was sitting sideways for some
reason.
The Pomodoro timer made me crazy.
The code was hard, but figuring out
what to do was harder. I went round in circles debating whether to
divide by 4, or use fixed 25-minute blocks, or wondering if the time
you write down is the total duration or just the work itself. In the
end, this is what I settled on: the number you write down is ONLY the
work time, it doesn’t include breaks, so the actual session always
takes longer. 25-minute blocks, a short break in between, and a long
break at the end.
There are some minor tweaks I did, but I think I’m going to write
those in the shiplog instead. That’s it.
Bye
I’ve done something and I am in hurry today
I made progress
-made some tooltip
-and tried adding sound
MADE SPECIAL VERSION FOR REVIEWER.
PUBLISHED VIDEO GUIDE ON YOUTUBE
https://www.youtube.com/watch?v=KYm0ztkC648
Ship #1
This desktop app was made by me, and it actually helps me lock in, no cap.
You enter into the blacklist section the sites or apps you know you shouldn’t be on while working. If you still decide to go on the blacklisted sites or apps, the “LOCK IN” text takes over, forcing you to switch back.
Giving accountability, no more unemployed.
For this project I had to use Electron, so I learned JavaScript from scratch. Ngl, that was the hardest part.
I spent 19 hours on this project, not accounting all the learning. Worth it.
Quality-of-life improvement:
Now you’ll actually stay locked in while you work, because the app is basically calling you out in real time whenever you start slacking.
Here are my 3+ major QoL improvements:
Automatic website blocking feature
Automatic application blocking feature
Configurable timer
Persistent data (sites, apps, time, mode)
Overlay readable on every background
WHAT AM I PROUD OF?
Before shipping, I tried out some weird websites like the Epic Games Store website with my friend. I noticed that my logic was straight garbage. I needed to install a dependency called psl in Electron to resolve the issue — that thing gave me the biggest headache of the entire project, hands down.
FIXING ISSUES I FOUND WITH FRIEND
-fixed some websites recognition problem
-added addition dialog message at the start of the session
-added more paragraph descrition
I NEED HELP
I ’ve done everything, I want some feedback on my work.
Should I add more features, like a color palette for the remainder?
I added many things and perfected them:
-I added a save load sistem for the apps , sites and timer
-I added the settings,
-I added an Icon
-I updated my github
-I fixed my blacklist, the warning, and the finish warning
If someone will look into my projects and give me some feedback I’ll perhaps decide to add that feature if possible.
PROGRESS
I built an intro screen with 3 button (blacklist settings start)
I only worked on the blacklist in wich you can Add sites that keeps your brain rotting.
The settings do not work.
and the start session too.
WHAT I NEED TO WORK ON
almost everything but I am on my way right now my focus is to make it work so I’’ll work twoards the start button but since this is my first time using java script I feel proud of my work
STARTING OUT
I’ve created the base of the project with Electron.
I’ve used Ai, it has helped to understand which language to use and helped me understand CSS , JAVASCRIPTS/NODE and HTML concepts.
I want to be clear: the code was written word for word by me personally,and the design choices were totally mine
I needed to figure out how the reminder for “Lock In” would work, so I worked that on myself.
So now I have the word “LOCK IN” covering the screen when I launch the App.
WHAT I’VE LEARNED
I learned somewhat the base of NODE/JAVASCRIPT
and CSS concept like flexbox font family etc.
WHAT I AM GOING TO DO NEXT
Create an onboarding screen with a personalised blacklist of sites and applications
