DEV Community

Cover image for ๐ŸŒŒ Nebula Works โ€“ A Futuristic Admin Dashboard Built with Pure HTML/CSS/JS
Vida Khoshpey
Vida Khoshpey

Posted on

๐ŸŒŒ Nebula Works โ€“ A Futuristic Admin Dashboard Built with Pure HTML/CSS/JS

Frontend Challenge Holistic Webdev Submission

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space


๐ŸŒŸ What I Built

Nebula Works is a futuristic, animated admin dashboard built completely with pure HTML, CSS, and JavaScript, designed as a submission for the Axero Frontend Challenge.

The project features:

  • ๐ŸŒŒ Dynamic greeting section with mock weather API
  • ๐Ÿ‘ฉโ€๐Ÿš€ A responsive dashboard with multiple pages (Projects, Calendar, Messages, Team, etc.)
  • ๐Ÿ” Signup & Admin Login system
  • ๐ŸŽจ Light/Dark theming and animations
  • ๐ŸŒ Embedded .glb 3D planetary models (Earth, Mars, Jupiter)
  • โš™๏ธ Custom admin panel for settings, security, and network

Although many elements look real (like notifications or calendar), some are only visual for the purpose of this challenge โ€” but they are built in a way that could easily become functional in the future.


๐Ÿš€ Demo

โš™๏ธ Live GitHub Page: Click here

๐Ÿ“ Source Code: GitHub Repository

๐ŸŽฅ YouTube Demo:

Watch the demo video


๐Ÿ–ผ Gallery Preview

Home Page Preview
๐ŸŒŒ Home Page
Dashboard Preview
๐Ÿ›ธ Dashboard
Calendar Preview
๐Ÿ“… Calendar
Team Preview
๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ Team

๐Ÿง  Journey

This project was a creative and technical journey that tested and showcased my skills. Hereโ€™s what made it special:

  • I challenged myself to avoid using frameworks or libraries, making everything from scratch.
  • Used .glb files to integrate 3D space objects and give it a galactic theme.
  • Designed for responsiveness, ensuring the layout looks great on mobile, tablet, and desktop.
  • Learned how to mimic real systems visually even when backend is not involved.
  • Took care of UI/UX details, including theming, transitions, and animations.
  • Created a modular structure for future expansion and real-world use.

Iโ€™m proud of how realistic and smooth everything looks while keeping performance and compatibility in mind.


๐Ÿ‘ฉโ€๐Ÿ’ป Team Submissions

This was a team project with contributions split as follows:

Name Role GitHub
Vida Khoshpey Full Project Developer (Task 1) @VIDAKHOSHPEY22
Yalda Khoshpey CSS Design & Styling (Task 2) @YALDAKHOSHPEY

Each team member submitted from their own GitHub account, as per rules.


๐Ÿ“‚ Folder Structure

nebula-works/
โ”‚
โ”œโ”€โ”€ index.html                โ†’ Home page with greeting + mock weather API
โ”œโ”€โ”€ signup.html               โ†’ User signup form
โ”œโ”€โ”€ style.css                 โ†’ All custom styling
โ”œโ”€โ”€ script.js                 โ†’ Interactivity
โ”œโ”€โ”€ LICENCE                   โ†’ MIT License
โ”œโ”€โ”€ README.md                 โ†’ You're reading it!
โ”‚
โ”œโ”€โ”€ /admin                    โ†’ Admin-only pages (login, settings, system)
โ”‚   โ”œโ”€โ”€ index.html
โ”‚   โ”œโ”€โ”€ user.html
โ”‚   โ”œโ”€โ”€ system.html
โ”‚   โ”œโ”€โ”€ security.html
โ”‚   โ”œโ”€โ”€ network.html
โ”‚   โ”œโ”€โ”€ event.html
โ”‚   โ”œโ”€โ”€ settings-admin.html
โ”‚
โ”œโ”€โ”€ /dashboard                โ†’ Dashboard core
โ”‚   โ”œโ”€โ”€ index.html
โ”‚   โ”œโ”€โ”€ project.html
โ”‚   โ”œโ”€โ”€ team.html
โ”‚   โ”œโ”€โ”€ calendar.html
โ”‚   โ”œโ”€โ”€ messages.html
โ”‚   โ”œโ”€โ”€ resources.html
โ”‚   โ”œโ”€โ”€ settings.html
โ”‚
โ””โ”€โ”€ /assets
    โ”œโ”€โ”€ logo.png
    โ”œโ”€โ”€ Nebula.gif
    โ””โ”€โ”€ /3d/
        โ”œโ”€โ”€ earth.glb
        โ”œโ”€โ”€ mars.glb
        โ””โ”€โ”€ jupiter.glb
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“œ License

Licensed under the MIT License.


โœจ Acknowledgments

  • Huge thanks to Axero and Dev.to for the opportunity.
  • 3D models inspired by NASA Open Assets.
  • UI/UX entirely handcrafted with โค๏ธ

๐Ÿค– API

  • Due to regional restrictions and limited access to external APIs in Iran, this project uses mock data and simulated APIs for features like the weather service and notifications.
  • This approach ensures that the UI/UX remains realistic and interactive while focusing fully on frontend development without dependence on unavailable backend services.
  • Please note that some features such as notifications and the weather toggle key or news are currently purely for simulation purposes and do not connect to real backend services.

Made with ๐Ÿ’ซ by Vida Khoshpey

and styled with โญ by Yalda Khoshpey

Space Animation GIF

Top comments (26)

Collapse
 
axrisi profile image
Nikoloz Turazashvili (@axrisi)

I think you need 2 separate articles to apply for both.

Collapse
 
vidakhoshpey22 profile image
Vida Khoshpey

Yess exactly, Yalda also published it separately on GitHub and dev.๐Ÿ˜๐Ÿคž๐Ÿป

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

The website you created looks amazing, girls! ๐Ÿ‘๐Ÿ‘๐Ÿฅฐ Congratulations on all the hard work, you did such a wonderful job!
I love that youโ€™re sisters and share the same passion for programming, I can only imagine how fun it must be to work together. ๐Ÿฅฐ
I wish I could convince my sister to follow my path in programming too. ๐Ÿ™ƒ
Canโ€™t wait to see your next project!
Good luck in the competition, Vida and Yalda! ๐Ÿฅฐ Iโ€™m keeping my fingers crossed for you to win!๐Ÿคž๐Ÿป

Collapse
 
vidakhoshpey22 profile image
Vida Khoshpey

You are so kind๐Ÿ˜๐Ÿฅบ, well we can become international sisters๐Ÿ˜‰๐Ÿ˜‰feel free to join us , haha, the secret is that every path I go my sister follows me, because we are afraid of loneliness, ๐Ÿ˜‚ and I guess you are Romanian because of you family, I can speak a little Romanian ๐Ÿ˜ Romania have a good people . Thank youuuuu ๐Ÿ˜๐Ÿ’ช๐Ÿป

Collapse
 
cristea_theodora_6200140b profile image
Theodora Cristea

Seriously??? ๐ŸฅฐDo you actually know some Romanian?๐Ÿ˜ฑ ....Have you ever visited Romania, or do you have any Romanian friends? โ€ฆIf you donโ€™t mind me asking, youโ€™ve made me really curious ๐Ÿ˜‚๐Ÿ™ƒ I can teach you more Romanian if you still want us to become sisters ๐Ÿ˜‚๐Ÿฅฐ๐Ÿค—
Thank you very much for the kind words!๐Ÿฅฐ

Collapse
 
uzzy412_73 profile image
Alexandru Ene

Looks amazing! Congrats!

Collapse
 
vidakhoshpey22 profile image
Vida Khoshpey

Really?๐Ÿ˜๐Ÿคž๐Ÿป thank you so much

Collapse
 
uzzy412_73 profile image
Alexandru Ene

Yes, really! You two did a great job. It looks so neat and the colors are so pleasant to the eyes. It is beautiful, really. You should definitely have more feedback!

Thread Thread
 
vidakhoshpey22 profile image
Vida Khoshpey

Thank you veryyyyyyy much, your opinion is important and encouraging to me.๐Ÿฅบ๐Ÿ˜

Collapse
 
kelvincode1234 profile image
Precious Kelvin Nwaogu • Edited

Amazing Tool!

*Absolute Cinema...This is beautiful!
*

Collapse
 
vidakhoshpey22 profile image
Vida Khoshpey

Thank you, sorry I wasn't available much.

Collapse
 
kelvincode1234 profile image
Precious Kelvin Nwaogu

no worries Vida

Collapse
 
latchudevops profile image
Latchu@DevOps • Edited

Wow! Vida Can we use this instead of WordPress application?

Collapse
 
vidakhoshpey22 profile image
Vida Khoshpey

Wow, thank you! ๐Ÿ˜Š๐Ÿคž๐Ÿป๐Ÿ˜
That means a lot! While Nebula Works isnโ€™t a full WordPress replacement, it can definitely be used as a modern front-end for custom projects.

If you ever want to turn it into a complete template or connect it with a CMS, Iโ€™d be super happy to help and maybe even publish it together ๐Ÿš€

Letโ€™s build something awesome! ๐Ÿ’ก

Collapse
 
latchudevops profile image
Latchu@DevOps

Sure Vida

Collapse
 
sara_shirmohamadi_86703e7 profile image
Sara Shirmohamadi

Amazing

Collapse
 
yaldakhoshpey profile image
Yalda Khoshpey

thanks sisi๐Ÿ˜๐Ÿ˜

Collapse
 
yaldakhoshpey profile image
Yalda Khoshpey

perfecttt

Collapse
 
abhiwantechnology profile image
Abhiwan Technology

This is very intresting, nowadays most of the India based augmented reality companies were doing such type of coding techniques to explore variousopportunities for innovation.

Collapse
 
vidakhoshpey22 profile image
Vida Khoshpey

Wow thatโ€™s super interesting! ๐Ÿคฉ

I didnโ€™t know AR companies in India were exploring similar approaches now Iโ€™m really curious!

Do you have any links or examples to share? Iโ€™d love to see how theyโ€™re using it and maybe get inspired too ๐ŸŒŸ

Thanks a lot for your kind comment! ๐Ÿ™Œ

Collapse
 
sara_shirmohamadi_86703e7 profile image
Sara Shirmohamadi

Perfect

Collapse
 
vidakhoshpey22 profile image
Vida Khoshpey

๐Ÿ˜๐Ÿ˜merciiiiiiiiiii

Collapse
 
pranamyark profile image
Pranamya Rajashekhar

The interactive 3D models are such a great touch! Great work!