DEV Community

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

Posted on

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

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: http://nicolacastellani.devplaygrounds.org/

Top comments (71)

Collapse
 
lauragift21 profile image
Gift Egwuenu

Oh wow! This is amazing πŸ”₯

Collapse
 
nicolalc profile image
Nicola

Thanks a lot! πŸ™ŒπŸ™Œ

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

Unbelievable! Damn creative from you, Nicola!

Collapse
 
nicolalc profile image
Nicola

Thanks Pulak! 😎😎