loading...
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...
pic
Editor guide
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 Author

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 Author

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 Author

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
vacom profile image
Vitor Amaral

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

Collapse
nicolalc profile image
Nicola Author

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

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 Author

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 Author

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 Author

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
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
lauragift21 profile image
Gift Egwuenu

Oh wow! This is amazing 🔥

Collapse
nicolalc profile image
Nicola Author

Thanks a lot! 🙌🙌

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 Author

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
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 Author

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

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 Author

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

Collapse
ceblakely profile image
Christina Blakely

This is so cool, your skills are insane.

Collapse
nicolalc profile image
Nicola Author

Thanks a lot Christina!

Collapse
jvarness profile image
Jake Varness

For being just a WIP, this is super neat!

Collapse
nicolalc profile image
Nicola Author

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
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 Author

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

Collapse
maxdevjs profile image
Collapse
geongeorge profile image
Geon George

This is really cool <3

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 Author

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 Author

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
William Grant

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

Collapse
nicolalc profile image
Nicola Author

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 Silva

This is really cool. Congrats!

Collapse
valantis21 profile image
val.exe

You managed to impress me... congratulations

Collapse
nicolalc profile image
Nicola Author

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 Author

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
pulakchakraborty profile image
Pulak Chakraborty

Unbelievable! Damn creative from you, Nicola!

Collapse
nicolalc profile image
Nicola Author

Thanks Pulak! 😎😎

Collapse
sm0ke profile image
Sm0ke

impressive ..

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 Author

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

Collapse
fdoxyz profile image
Fernando

Amazing stuff! Really enjoyed playing around with the demo

respect

Collapse
nicolalc profile image
Nicola Author

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 Author

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 Author

Thanks Simon!

Collapse
ntsanov profile image
Nikolay Tsanov

Amazing! Good job, Nicola!

Collapse
nicolalc profile image
Nicola Author

Thanks Nikolay! Grazie!

Collapse
tonycletus profile image
Tony Cletus

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

Collapse
j3ffjessie profile image
J3ffJessie

Amazing. Awe inspiring creativity.

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 Author

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.