DEV Community

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

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

Nicola on May 25, 2020

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 t...
Collapse
 
redeving profile image
Kelvin Thompson

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!

Collapse
 
nicolalc profile image
Nicola

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 😂

Collapse
 
redeving profile image
Kelvin Thompson

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.

Collapse
 
sebbdk profile image
Sebastian Vargr

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. :)

Collapse
 
vacom profile image
Vitor Amaral

Looks awesome, is there a link for an interactive demo?

Collapse
 
nicolalc profile image
Nicola

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.

Collapse
 
vacom profile image
Vitor Amaral • Edited

uau 🚀 works like a charm. Thanks for sharing. Very smooth and very interactive looks and feels like a real OS. Keep it up! cheers

Thread Thread
 
nicolalc profile image
Nicola

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!

Thread Thread
 
vacom profile image
Vitor Amaral

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

Thread Thread
 
nicolalc profile image
Nicola

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!

Thread Thread
 
vacom profile image
Vitor Amaral

Hey Nicola, just found this jam poolside.fm/ is like 90s OS with summer vibe

Collapse
 
miketalbot profile image
Mike Talbot ⭐

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.

Collapse
 
nicolalc profile image
Nicola

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! 😎

Collapse
 
lauragift21 profile image
Gift Egwuenu

Oh wow! This is amazing 🔥

Collapse
 
nicolalc profile image
Nicola

Thanks a lot! 🙌🙌

Collapse
 
rohansawant profile image
Rohan Sawant

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.

Collapse
 
nicolalc profile image
Nicola

Thanks Rohan! I didn't use twitter so much but I'll give it a try!

Collapse
 
ceblakely profile image
Christina Blakely

This is so cool, your skills are insane.

Collapse
 
nicolalc profile image
Nicola

Thanks a lot Christina!

Collapse
 
jvarness profile image
Jake Varness

For being just a WIP, this is super neat!

Collapse
 
nicolalc profile image
Nicola

Thanks, Jake! This is about a 3 full days work.

Collapse
 
sakshamsneh profile image
Saksham Sneh Mandal

Just three days? And such a project? This is awesome...

Collapse
 
dzir_aspr_inspr profile image
ankur agarwal

Crazy Tesla!

Collapse
 
vikramkadiam profile image
Vikram Kadiam

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.

Collapse
 
nicolalc profile image
Nicola

Love that! I think interactive websites are the best way to show your skills and to give the user a different feeling.

Collapse
 
guitarino profile image
Kirill Shestakov

This is amazing and inspiring. I can't even fathom how much mastery this requires, so, truly, bravo!

Collapse
 
nicolalc profile image
Nicola

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!

Collapse
 
shafiemukhre profile image
Shafie Mukhre

This is so amazing project @Nicola!! Truly inspiring! Is it possible or recommended to built a web OS like this using React instead?

Thread Thread
 
nicolalc profile image
Nicola

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.

Collapse
 
nicolalc profile image
Nicola

PS. you can take a look to the project here: github.com/NicolaLC/nica-os

Feel free to clone it and try it!

Collapse
 
nokulab profile image
noku-lab

Checkout how Clubhouse app is built dats a good starting point

Collapse
 
mikeroof profile image
Mike Roof

Awesome! FYI, the ships aren't showing up in Space Invaders for me in Firefox

Collapse
 
nicolalc profile image
Nicola

There might be some issues with the projects because they are a showcase only, I'll check that anyway!

Collapse
 
maxdevjs profile image
maxdevjs

+1

Collapse
 
pulakchakraborty profile image
Pulak Chakraborty

Unbelievable! Damn creative from you, Nicola!

Collapse
 
nicolalc profile image
Nicola

Thanks Pulak! 😎😎

Collapse
 
ben profile image
Ben Halpern

Wow, I'm so amazed!

Collapse
 
wobsoriano profile image
Robert

Good job Nicola Tesla

Collapse
 
nicolalc profile image
Nicola

Ahaha nice nick dude, it's a pleasure for me 😂

Collapse
 
patferraggi profile image
Patricio Ferraggi

you are insane, in a good way, but insane nevertheless.

Collapse
 
nicolalc profile image
Nicola

Thanks, Patricio. I mean, this is the sickest compliment I've ever heard 😎

Collapse
 
eihcir0 profile image
Richie Humphrey

This is great!!! Love it

Collapse
 
yougotwill profile image
Will G

This is so amazing! Thank you for sharing this :D

Collapse
 
nicolalc profile image
Nicola

Thanks a lot William!

Collapse
 
bluiska profile image
bluiska

Wow this is really cool. Well done!

Collapse
 
markanthonyuy profile image
Mark Anthony Uy 🇵🇭🤓💻🏋️

This is really nice. Another great inspiration. Keep it up!

Collapse
 
jeferson_sb profile image
Jeferson Brito

This is really cool. Congrats!

Collapse
 
valexe profile image
val.exe

You managed to impress me... congratulations

Collapse
 
nicolalc profile image
Nicola

Thanks a lot, val! ^^

Collapse
 
adrianmarkperea profile image
Adrian Perea

This is amazing! Can you tell me more about the stateless design pattern?

Collapse
 
nicolalc profile image
Nicola

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.

Collapse
 
maxdevjs profile image
maxdevjs

Troppo bello :)

Collapse
 
zenulabidin profile image
Ali Sherief

It's very impressive! Somebody made another OS-like website and hosted it at windows93.net/.

Collapse
 
nicolalc profile image
Nicola

Wow, that's huge! It reminds me of a lot of moments with this fantastic OS!

Collapse
 
geongeorge profile image
Geon George

This is really cool <3

Collapse
 
sm0ke profile image
Sm0ke

impressive ..

Collapse
 
fdocr profile image
Fernando

Amazing stuff! Really enjoyed playing around with the demo

respect

Collapse
 
nicolalc profile image
Nicola

Thanks that means a lot to me!😁

Collapse
 
koichadev profile image
Khoi Hoang

Okey! I'm totally inspired and wants to try and create a project like this! ❤️

Collapse
 
nicolalc profile image
Nicola

Take a look at the repo, is still a WIP but it could be a great start for your next project!

Collapse
 
cverster profile image
Cornel Verster

Is this... the future?

Collapse
 
simonholdorf profile image
Simon Holdorf

Awesome!

Collapse
 
nicolalc profile image
Nicola

Thanks Simon!

Collapse
 
ntsanov profile image
Nikolay Tsanov

Amazing! Good job, Nicola!

Collapse
 
nicolalc profile image
Nicola

Thanks Nikolay! Grazie!

Collapse
 
tonycletus profile image
Tony Cletus • Edited

Dehm....🔥 🔥 🔥
This is so cool...😍

Collapse
 
j3ffjessie profile image
J3ffJessie

Amazing. Awe inspiring creativity.

Collapse
 
rokejulianlockhart profile image
third: "Beedell" first: "Roke"

Is it installable as a PWA?

Collapse
 
viiickyyy profile image
viiickyyy

OMG, this is fking awesome ,, nice idea .. :D

Collapse
 
jonrandy profile image
Jon Randy 🎖️

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

Collapse
 
nicolalc profile image
Nicola

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.