I'm creating an entire web OS as my personal website for 2021

Publish Date: May 25 '20

390 74

Hi to all!

About every 2 years I go to work to create an updated version of my website. Every time I try to focus on my skills and apply them to the project itself.

This year I found myself faced with the need to create a single site that would show all my skills in the web and 3D fields.

Creating a website capable of combining everything is a very difficult undertaking, above all because it could be too large or difficult to understand.

The solution? Create an entire web operating system, where the applications are personal projects and the images and/or links are related to the projects themselves.

This solution allows me not only to incorporate many different things in the same site but also to manage its contents in a more immediate and immersive way for the user.

So NICAOS was born, the first entirely online operating system! Created using Angular 9 with a stateless pattern in mind. All the stiles and assets are created by myself! At the moment it is still in its first steps, and it will never be comparable to a real operating system since it would take years to set it up.

Give it a look, and if you have any suggestions don't hesitate to share them!

Take a look here:

This is still a WIP obviously, the project will end by December 2020.

If you have any suggestions, or just want to know how I'm creating this web application, just let me know in the comments! 😎

Project repo: https://github.com/NicolaLC/nica-os
Live demo: https://nicolalc.github.io/nicolalc/

Comments 74 total

Kirill ShestakovMay 25, 2020
This is amazing and inspiring. I can't even fathom how much mastery this requires, so, truly, bravo!
- NicolaMay 25, 2020
  It's much easier than you think! When you know how to handle correctly frameworks like angular and use a stateless pattern you can create amazing web apps!
  - Shafie MukhreMay 26, 2020
    This is so amazing project @Nicola!! Truly inspiring! Is it possible or recommended to built a web OS like this using React instead?
    - NicolaMay 26, 2020
      Yes, of course, Angular is handier for different reasons (router management, HTTP management, services injection, etc..) . But that doesn't mean than you can't do the same things with React, you need a little bit more of time to develop some things you don't have immediately with React itself.
- NicolaMay 25, 2020
  PS. you can take a look to the project here: github.com/NicolaLC/nica-os
  
  Feel free to clone it and try it!
- noku-labMay 26, 2020
  Checkout how Clubhouse app is built dats a good starting point
Nikolay TsanovMay 25, 2020
Amazing! Good job, Nicola!
- NicolaMay 25, 2020
  Thanks Nikolay! Grazie!
Vitor AmaralMay 25, 2020
Looks awesome, is there a link for an interactive demo?
- NicolaMay 25, 2020
  Yes of course, but its still a WIP so it will work only on desktop devices:
  
  nicolacastellani.devplaygrounds.org/
  
  If you get an error page try it in incognito mode because the domain is still fresh.
  - Vitor AmaralMay 25, 2020
    uau 🚀 works like a charm. Thanks for sharing. Very smooth and very interactive looks and feels like a real OS. Keep it up! cheers
    - NicolaMay 25, 2020
      Thanks a lot that means to me! I'll try to optimize everything with ChangeDetection strategy and stateless development. I didn't try the app on old browsers and mobile to check the performances but I think this is one of the highest perf you can get with a web app!
      - Vitor AmaralMay 25, 2020
        I use lambdatest.com to test in different browsers (older one and different OS), they a good free tier you can test there. Hope it helps
        
        NicolaMay 25, 2020
        That's pretty cool and useful! Maybe for this app is too much but for some enterprise applications I'm developing this could save a lot of time! Thanks a lot!
        
        Vitor AmaralMay 26, 2020
        Hey Nicola, just found this jam poolside.fm/ is like 90s OS with summer vibe
Ben HalpernMay 25, 2020
Wow, I'm so amazed!
Gift EgwuenuMay 25, 2020
Oh wow! This is amazing 🔥
- NicolaMay 25, 2020
  Thanks a lot! 🙌🙌
Geon GeorgeMay 25, 2020
This is really cool <3
Patricio FerraggiMay 25, 2020
you are insane, in a good way, but insane nevertheless.
- NicolaMay 25, 2020
  Thanks, Patricio. I mean, this is the sickest compliment I've ever heard 😎
RobertMay 25, 2020
Good job Nicola Tesla
- NicolaMay 25, 2020
  Ahaha nice nick dude, it's a pleasure for me 😂
Kelvin ThompsonMay 25, 2020
Hey that's pretty cool! I didn't know you were a 3D guy too! After a bit with Maya, I've come to prefer Blender and Sidefx Houdini. I like the coding aspect of Houdini, but Blender is getting sooo awesome! Neat!
- NicolaMay 25, 2020
  Thanks Kelvin! I've used blender a couple of times but I'm more a developer than a 3d designer, also if I'd like to be 😂
  - Kelvin ThompsonMay 25, 2020
    You really should check out Sidefx's Houdini then! Oh the power for a dev! You can make it do virtually everything! And there's a free watermarked version. I think you would like it.
Rohan SawantMay 25, 2020
Hey! Nicola what a great read!! So much effort and love has gone into this! Loved it!

PS, I shared your Article on my Twitter, if you link your Twitter with dev.to you be automatically tagged when someone does that.
- NicolaMay 25, 2020
  Thanks Rohan! I didn't use twitter so much but I'll give it a try!
Richie HumphreyMay 25, 2020
This is great!!! Love it
Tony CletusMay 25, 2020
Dehm....🔥 🔥 🔥
This is so cool...😍
Sebastian VargrMay 25, 2020
I remember doing this back in 2009 with jquery complete with a window and a extendable app system, file explorer, media player etc.

Much fun to build, I mainly ditched it because I realized I had no use for it.

Kinda makes me wonder how it easy it would be to build today with a modern stack. :)
J3ffJessieMay 25, 2020
Amazing. Awe inspiring creativity.
Mike Talbot ⭐May 25, 2020
Wooo, that's just great. I love the idea of making frameworks and then getting every drop out of it.

Wish I'd been talking to you when I couldn't work out how Angular could do some of this stuff. Ended up on React which is fine, but you are clearly hitting some of my design requirements.
- NicolaMay 26, 2020
  Hi Mike, first of all, thanks a lot.
  
  I work with React and Angular, for big projects Angular is a must, React could be a big mess to handle large web apps.
  
  When you want, just message me here on dev, I'll be happy to answer you! 😎
Sm0keMay 25, 2020
impressive ..
Ali SheriefMay 25, 2020
It's very impressive! Somebody made another OS-like website and hosted it at windows93.net/.
- NicolaMay 26, 2020
  Wow, that's huge! It reminds me of a lot of moments with this fantastic OS!
FernandoMay 25, 2020
Amazing stuff! Really enjoyed playing around with the demo
- NicolaMay 26, 2020
  Thanks that means a lot to me!😁
Will GMay 25, 2020
This is so amazing! Thank you for sharing this :D
- NicolaMay 26, 2020
  Thanks a lot William!
Vikram KadiamMay 25, 2020
This is awesome ! I'm actually in middle of designing and building my own personal site (online interactive resume) and guess what ....I'm using Angular 9 as well ;)
Thanks for this inspiration and motivation to create awesome and cool stuff.
You should check this site - rleonardi.com/interactive-resume/ similar award winning interactive online resume by Leonardi.
- NicolaMay 26, 2020
  Love that! I think interactive websites are the best way to show your skills and to give the user a different feeling.
Jon Randy 🎖️May 26, 2020
It's hardly an OS - more a bunch of iframes. Try go.friendup.cloud/ if you want to see what a real Web OS looks like
- NicolaMay 26, 2020
  Yes of course this is just an example, the goal is not to create a completely new OS, is to show some of my skills on web development. Anyway is still a WIP, consider is a 3 days work result so more "complex" applications will come in the future.
Khoi HoangMay 26, 2020
Okey! I'm totally inspired and wants to try and create a project like this! ❤️
- NicolaMay 26, 2020
  Take a look at the repo, is still a WIP but it could be a great start for your next project!
Cornel VersterMay 26, 2020
Is this... the future?
Simon HoldorfMay 26, 2020
Awesome!
- NicolaMay 26, 2020
  Thanks Simon!
bluiskaMay 26, 2020
Wow this is really cool. Well done!
Jake VarnessMay 26, 2020
For being just a WIP, this is super neat!
- NicolaMay 26, 2020
  Thanks, Jake! This is about a 3 full days work.
  - Saksham Sneh MandalMay 26, 2020
    Just three days? And such a project? This is awesome...
  - ankur agarwalMay 28, 2020
    Crazy Tesla!
Mike RoofMay 26, 2020
Awesome! FYI, the ships aren't showing up in Space Invaders for me in Firefox
- NicolaMay 27, 2020
  There might be some issues with the projects because they are a showcase only, I'll check that anyway!
  - maxdevjsJul 13, 2020
    +1
Pulak ChakrabortyMay 26, 2020
Unbelievable! Damn creative from you, Nicola!
- NicolaMay 27, 2020
  Thanks Pulak! 😎😎
Christina BlakelyMay 30, 2020
This is so cool, your skills are insane.
- NicolaMay 30, 2020
  Thanks a lot Christina!
Mark Anthony Uy 🇵🇭🤓💻🏋️May 31, 2020
This is really nice. Another great inspiration. Keep it up!
Jeferson BritoJun 1, 2020
This is really cool. Congrats!
val.exeJun 12, 2020
You managed to impress me... congratulations
- NicolaJun 15, 2020
  Thanks a lot, val! ^^
Adrian PereaJul 7, 2020
This is amazing! Can you tell me more about the stateless design pattern?
- NicolaJul 7, 2020
  Hi Adrian! Thanks a lot!
  
  Yes, of course, I've designed this web app using ngrx, which is a porting of REDUX for angular.
  The idea is to handle each application state separately, without passing data from/to components but using a single generic state to handle behaviours and data.
  
  You can check how is it done by looking at the website repository.
maxdevjsJul 13, 2020
Troppo bello :)
viiickyyyJul 19, 2020
OMG, this is fking awesome ,, nice idea .. :D
Mr. Beedell, Roke JLApr 21, 2023
Is it installable as a PWA?
Ezequiel Schwartzman (Zequez)Mar 8, 2025
Hello Nicola; what you shared is cute; however I'm afraid that's not a Web OS, is just something on the web that looks like a traditional OS UI. A Web OS is an app that runs on the web; something you can fullscreen and would allow you to do everything that you want to do with a screen without leaving it.

This is my definition though, yours might be different.

For example, can you use your web OS to program the web OS itself? If not, then it's not a web OS "for you", because obviously if "you are creating a web OS" you need to access the tools to create it on the screen.

This is very interesting nonetheless; and BTW the website linked domain expired. Are you hosting the project somewhere else now?
- NicolaApr 3, 2025
  Hey Ezequiel, thanks for your thoughts on my project, indeed the first goal was to emulate an operating system design.
  
  The core idea is that you can open many windows and running sub programs inside the website itself, which is what you can do right now.
  
  I would like to make it more complex, but I'm scared is out of the original scope for this project.
  
  Doing a realistinc OS on the web makes no sense at all in my opinion as, for instance, you don't have access to device resources like file system for example.
  
  And thanks for pointing out that the link is expired, indeed there is a new domain for the live example, which is also my personal portfolio:
  
  nicolalc.github.io/nicolalc/

Add comment

Nicola @nicolalc

I'm creating an entire web OS as my personal website for 2021

Comments 74 total