Open comments for this post
ArianaGrandeOS is finally ready to ship!!
I polished everything up and added some final features. I added an Ariana Grande trivia app where you can answer questions about Ariana, her music, and her career. I also updated the homepage, made the time bigger so it’s easier to see, added a “Now Playing” section, and added a few more apps on the display of the homepage.
One thing I’m really happy with is the music player. I added a queue system so you can choose exactly which songs you want to play next instead of having to listen in album order. It makes the music player feel way more like a real streaming app and was something I really wanted to include before shipping.
The music player ended up being way harder than I expected. Even though all 111 songs were already in the OS, they weren’t syncing properly at all. I spent a long time trying to figure out what was wrong and honestly thought I had broken everything at one point 😭. After a lot of testing and fixing random issues, such as the play button not working, audio not playing, etc etc, I finally got every single song synced correctly and working. Seeing all 111 songs play perfectly from Yours Truly all the way to Eternal Sunshine felt so rewarding.
I also added a quote section to the homepage that changes every 30 seconds. All of the quotes are from Ariana Grande, and there are currently 12 different ones that rotate throughout the day.
The OS now has 12 different apps and actually feels like a real operating system. Looking back at where I started, it’s kind of crazy how much it grew from a simple pink desktop into this huge Ariana-themed project!! :)
The best part was finally showing it to my sister. She thought it was absolutely amazing and was especially excited about the music player. Watching her click through everything and seeing how happy she was made all the frustrating bugs and long hours worth it.
I’m really proud of how this turned out and am super excited to finally ship it :))
Thank you all so much for following along through this journey!
Open comments for this post
Last devlog I had a very basic frontend and that was basically it. Since then I built almost everything and it actually feels like a real OS now.
The biggest thing I worked on was the music player. I built it to look like a real music player with a dark background, big album art, pink progress bar, white play button. You can browse all 7 albums, click to see every song inside, and tap any song to play it. I added in all 111 songs from Yours Truly to Eternal Sunshine in the right order.
The hardest part was the wallpaper choices. I wanted real album photos so I had to embed them directly into the HTML so the file works on its own without needing extra files. I also needed to find the wide version of each album so it could fit on the screen; all her album covers are originally square. For some of the photos, I couldn’t find the wise version, so I had to manually import the photos into a photo editor and fill in the backgrounds. Every time I added a photo the file went over 2MB. Took a while to get the quality high but at the same time keep the file size reasonable.
Other stuff I added:
Calendar with monthly and yearly view, you can add events to any date
Journal and Notes combined into one app with tabs
Stopwatch and Timer that flashes red in the last 5 seconds and beeps when done
A paint app where you can draw and save as PNG
Welcome screen with a guide that walks you through the whole OS
A to-do list!
A fun little fortune cookie app which you can crack (press on), revealing a fortune cookie message related to Ariana Grande
Browser that has Ariana Grande’s socials pinned to the top
Added a notification bell that keeps you updated on album drops, tours, etc etc
Weather application which is based on user’s location
All 4 corners of every window can now be dragged to resize
Added customizable features such as album cover wallpapers, themes, fonts, changing font size, etc etc
What I’m going to be doing next:
Fixing up bugs and any issues
Adding more details or effects to the home screen to give it more oomph
Maybe: adding more wallpaper choices (?)
Really happy with what I have and what else I’ll accomplish!! So excited to show this to my sister (I’ll let you all know what she thinks in my next devpost…coming soon!!) :))
Open comments for this post
Built the base of GrandeOS and pink desktop background as well as a taskbar with a live clock that updates every second, and the first draggable window. I chose the pink color palette intentionally because my sister’s favorite color matches Ariana’s whole aesthetic, so every color decision was locked in from the start. Next up: building out the actual apps and adding more draggable windows!!