The latest articles on DEV Community by Abel desalegn (@abel-boop). https://dev.to/abel-boop https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3291629%2F5b4f2838-e502-48b2-a300-27e6f2f86a39.jpg https://dev.to/abel-boop en Abel desalegn Tue, 22 Jul 2025 09:23:21 +0000 https://dev.to/abel-boop/novafleet-a-futuristic-dashboard-for-space-agencies-3p5f https://dev.to/abel-boop/novafleet-a-futuristic-dashboard-for-space-agencies-3p5f <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F90wosi61fd6hgqj5g7p6.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F90wosi61fd6hgqj5g7p6.png" alt=" " width="800" height="453"></a></p> <p>🚀 Submission for <a href="https://dev.to/challenges/frontend/axero">Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space</a></p> <p>🔧 What I Built</p> <p>NovaFleet Intranet Portal — a futuristic, space-themed internal dashboard for a fictional space agency.<br> Features include:</p> <p>Clean, modern interface<br> Dark/Light mode toggle<br> Real-time mission control widget<br> "Astronaut of the Week" profile</p> <p>The goal: make intranet tools fun, functional, and visually engaging.</p> <p>💻 Demo &amp; Code</p> <p>🔗 <a href="https://frontend-challange-five.vercel.app/" rel="noopener noreferrer">Live Demo</a><br> 📂 <a href="https://github.com/abel-boop/frontend-challange" rel="noopener noreferrer">GitHub Repository</a></p> <p>🛠 Tech Stack</p> <ul> <li>React 18 + TypeScript</li> <li>Vite for fast dev experience</li> <li>Tailwind CSS for styling</li> <li>Lucide Icons for clean iconography</li> </ul> <p>✨ Key Features</p> <ul> <li>Fully responsive on all devices</li> <li>Dark/Light theme with system preference detection</li> <li>Optimized performance with lazy loading</li> <li>Accessibility support (keyboard navigation, screen readers)</li> </ul> <h3> 📚 What I Learned </h3> <ul> <li>Advanced state management with React hooks</li> <li>Theming with CSS variables</li> <li>Performance optimization in React apps</li> <li>Accessibility best practices</li> </ul> <h3> 🎉 Highlights / Proud Moments </h3> <ul> <li>Smooth, polished dark/light theme transitions</li> <li>Fully responsive layouts</li> <li>Subtle glowing effects to enhance the space theme</li> </ul> <h3> 🚀 Future Improvements </h3> <ul> <li>User authentication</li> <li>Real-time updates via WebSockets</li> <li>More interactive dashboard widgets</li> <li>Internationalization support</li> </ul> <p>📝License</p> <p>MIT</p> <p>Thanks to the organizers for this awesome challenge! 🚀👨‍🚀</p> devchallenge frontendchallenge css javascript