Prism banner

Prism

19 devlogs
136h 17m 2s

An open-source, engaging productivity app, closely tracking your progress in your work with detailed insights.

This project uses AI

Used chatgpt to figure out how to reorder mission rows and how to create heatmap, mission reording didn’t even make it in the final project anyways.

Demo Repository

Loading README...

Rowan

Tagged your project as well cooked!

🔥 Rowan marked your project as well cooked! As a prize for your nicely cooked project, look out for a bonus prize in the mail :)

Zephyr

Shipped this project!

Hours: 136.28
Cookies: 🍪 3524
Multiplier: 25.86 cookies/hr

I built a futuristic productivity app from scratch, with LOTS of epic animations, and plenty of features, including tasks lists and productivity sessions.

This has been one of the more difficult things I’ve worked on because of the UI but honestly I love how it turned out (i love figma for designing awesome svg components :>)

ENJOY!!! (P.S: if you’re on windows and can’t try the app out, maybe check out the demo video in the readme before voting?)

Zephyr

FINAL DEVLOG… maybe?

Okay so first of all, i finished the command center, it looks pretty cool now and we got tons of metrics going on and everything. Perfect.

Second of all, we got a new logo :> it looks pretty cool now and the loading screen animates it extremely well; its much better than the day one logo !

Then i fixed a buncha bugs, improved security, updated the database, set up a SCP for the index.html, and we’re rolling. Unfortunately, i forgot to update the readme and animate the command center BEFORE making an early release, so i bumped the version up by one to compensate for the “new” changes smh.

Anyways, enjoy!!!!

Attachment
Attachment
0
Zephyr

Okay, new devlog :>

Lots of progress has been made, I’ve created the backend for the daily streaks, heatmaps, etc, and it just needs to be connected to the UI.

I’ve ALSO started working the command center. Currently I got that day-1 design going on with the 4 cards and everything, but the problem is that the heatmap is HUGE, so i just might get rid of those boxes on the top right, move the focus bar up there, and stretch the streaks across the poge. Not sure yet.

I had to spend a LOT of time on the heatmaps before getting it to work. Rendering the days was easy, the problem was correctly aligning the labels :> but now its working, so win win?

I also lost track of time and worked 10h 30m without a devlog x-x hopefully that doesn’t come back to bite me, but besides that, I just need to keep going :>

Attachment
0
Zephyr

NEW DEVLOG: lots has happened but the focus run page is 90% done. It’s fully responsive, with actual metrics being shown that are coming from the db, and we have a fully functioning focus bar as well! Missions work very well and are also fully integrated with focus runs (but focus runs work without missions too!)

I still think that it could use some work, but for now, this seems like a good place to let it go and start finalizing for a ship this week. I’m going to fix the ugly traffic lights and app name into a custom one, update the left dashboard bar to only allow users to go to command center, missions, or focus runs, update the application icon, fix some frame security stuff and finally build a mac release for prism! (I also need to do the command center page but im planning to keep it pretty simple for now, this is a early beta release after all)

After the ship i’ll probably aim to add an autoupdater to the app so that I can release updates for it without needing people to uninstall the app, reinstall, blah blah blah

Should i do that before I ship? probably.
Am i going to do it before i ship? definitely not :> peace

Attachment
0
Zephyr

NEW DEVLOG :>

I’ve updated the entire focus run page, keeping a few elements from the previous one. I really like this new one and i am in LOVE with the animations. I still got some work to do with the animations since the percentage and focus bar in the HUD aren’t animated, but good so far :)

I’ve also done a lot of work on the backend and updated the db to keep track of the focus bars filled / completed. Now i just need to connect the UI. :> thats all.

0
Zephyr

Designed the bottom svg component :> Ready to use in code now!

Thats all, nothing much to say this devlog, refer to the previous one if interested…

Attachment
Attachment
0
Zephyr

OKAY. New devlog :>

I’ve updated the focus run page design, the previous one was missing quite a lot, but i wasn’t willing to face the fact that i needed to redesign allat x-x

Anyway, this is why I’ve come up with now in figma, and im working on designing the futuristic bar at the bottom. Tried to do it with html, but it wasn’t going well because of the complex corners :>

So plan B: SVGs. I’m making the shape in figma using the pen tool and then later im exporting as an svg and just using that in my page. Its probably going to be MUCH cleaner and easier to animate as well :) and for the record, i have been busting my back looking for good designs for the past week in pinterest so lot of time wasted x-x

I finished making the other components of the design though, all thats left is the shape.

Attachment
Attachment
0
Zephyr

Okay NEW DEVLOG. Lots of progress recently, I submitted my study related projects and got a lot more time to work :>

anyway I added the “select focus run mission” functionality which allows users to pick a mission that they want to work on and to do focus runs on it. Currently, I probably will not have enough time to set up time tracking for individual missions, but thats okay i plan to work on this project long after flavortown :)

I’ve also connected it to the focus run page which displays the mission details of the selected mission, ive also done a little bit more animating of the inner circle, really happy with how its all coming together.

I also spent a large chunk of time setting up everything in my backend for the focus runs, including database, db services, ipc handlers, etc… its ready to be connected to the frontend and start working! I’m a little scared but i have high hopes, i just need to LOCK IN.

Wish me luck :)

0
Zephyr

NEW DEVLOG.

Okay so i’ve been working on the UI for the focus run page, this is what i have so far, and it has animations too :> now the plan is to first, set up the focus runs so that they actually work, and second, allow the user to change the selected mission

Attachment
2

Comments

Airin a
Airin a about 1 month ago

Wow, that looks really cool!

Zephyr
Zephyr about 1 month ago

Thanks!

Zephyr

new devlog :> okay so, i’ve finished the missions page and also started working on the focus run page. Im really happy with the missions page, its such a smooth and sleek interface and it just feels good to use

As for the focus run page, i’ve animated the outer ring already but i’m not sure if its good or not… I may change it in the future

0
Zephyr

NEW DEVLOGGGG

Okay so, here’s where we’re at now. We can make missions, and edit them smoothly from the UI. The mission creation was MUCH more difficult to make than i expected because I didn’t know that i was supposed to draft it so i ended up rewriting the entire functionality again x-x but it works extremely smoothly now :>

Tomorrow, I’ll handle mission deletion and then move on to the focus runs page. MWahaahaha

0
Zephyr

New devlog time: it has been 6 days since the previous devlog and I’ve only put in 4 hours (im very behind) but im back on track to finish the mvp of the project by the end of march.

I have made an executive decision to remove reordering functionalities in my missions page to save time. Framer motion’s reordering component is a pain to use with tables, and after spending hours of debugging, I’ve decided to just remove it for now.

I created the menu on top though, we got fancy buttons now :> i also added the new mission row at the bottom of every table

Attachment
0
Zephyr

New devloggg

Not much change on the frontend yet, but I’ve properly set up the backend with preload scripts, ipc handlers, etc… to serve missions from the database instead of dummy values :> now i need to fix the other tables, include a “new mission” button, think up of a solution for overflows, create insert, delete, and update functionalities, handle mission reordering, yada yada yada :>

Attachment
0
Zephyr

Okay :> New devlog

I have created the missions page. Yes. Devlog complete.

It consists of a table with multiple, reorderable missions that can (in the future) be selected, edited, deleted, updated, etc. the missions are divided based on their status and ordered based on creation date. For the mvp, i probably won’t let the missions be reordered based on other columns for simplicity’s sake.

But yes, mission page mostly complete. Now i need to hook it up to my backend and add some finishing touches.

Attachment
0
Zephyr

New devlog :> i’ve created the navigation bar on the left and im ready to start working on the missions page. It took me a minute to make because i had forgotten a little bit of how vue layouts work with the vue-router but we’re back in business :>

For the missions page, ill first be making the UI and then connecting it to the local database so that it actually works! By the end, we should have a cool task list page set up. I need to be cautious when making the UI though, because i’ll need to later incorporate animations in it with framer motion

Attachment
0
Zephyr

OKAY. devlog time.

A lot has happened since my last devlogg ;-; i made my entire database using better-sqlite3 first, and then realized that the DAO layer would be an absolute pain to make manually, so I tore everything down and did it AGAIN using drizzle ORM. Drizzle gives me a standardized way of accessing my data (even though im still technically writing sql queries since drizzle is sql first) so i don’t need to worry about all the tiny details. (migrations are also MUCH easier with drizzle)

Next, i went back to the drawing board (literally) and started designing the first section of prism that I’ll be working on: the missions page! this took quite a while and i may end up adding more details to it as i go on, but i feel like this is a good place to start writing code.

The next step is to make my UI using vue and finally have something tangible :>

Attachment
0
Zephyr

I HAVE FINALLY FINISHED DESIGNING THE DASHBOARD —– I hate designing. This took me over 11 hours to make and i forgot to make a devlog earlier but its fineeee.

In the dashboard, ive decided to divide my content into two: a sidebar on the left and a main content area on the right, classic. Currently, i’ve designed my command center (i.e., the dashboard), with 4 cards, one for the current mission (the current task), one for the user’s signal (a metric calculating how focused they have been today based on their activity), their streak (the number of days that they’ve been working in a row), and of course, a core mechanic, the focus bar (fills up after consecutive focus runs).

I really like this concept of gamifying work and turning into something interesting! I want to create something that is actually useful… The next step is to start designing the sqlite database :>

Attachment
Attachment
1

Comments

Zephyr
Zephyr 3 months ago

Forgive the low quality, i’m not sure whats up with figma today

Zephyr

Wow, okay. So it’s been a while, I’ve really been caught up in work BUT WE’RE BACK.

I’ve pulled off a really really good design for the loading screen and i think its perfect for the project. I’ll be going with a dark theme and a really vibrant red, which goes really well together. After some long tedious hours of testing in figma I finally found a design I was looking for, and I created it as well!

It really gives the futuristic, premium feel i was going for, and, makes for a really good loading screen! I’ve decided on using framer motion because they offer lots of powerful animation tools, and so far, I can’t say I’m disappointed. Check it out :)

0
Zephyr

Okay so, today i worked on my loading page design. I’m going for a futuristic kinda vibe, but turns out its easier said than done.. I’ve been spending hours messing around with these lines in figma, exporting, importing, yada yada, but I’m finally getting somewhere.

I’m creating a sort of high tech HUD style loading page, I still need to add a lot of components to it but its getting more and more solid. I may be awful at design but im a stubborn guy, ill figure it out :>

Attachment
0
Zephyr

This is my very first commit! I’ve finally started a project that I’ve been planning for the past 2 months :> super excited

Attachment
1

Comments

Nicolas Rozo
Nicolas Rozo 3 months ago

Yipee you got this