The latest articles on DEV Community by Chijioke Nwabasili (@chijiokenwabasili). https://dev.to/chijiokenwabasili 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%2F2668518%2Fae9742b7-df7b-4dce-9526-6c0961bf924a.jpg https://dev.to/chijiokenwabasili en Chijioke Nwabasili Sun, 27 Jul 2025 13:20:25 +0000 https://dev.to/chijiokenwabasili/from-website-to-workspace-building-the-nurturenest-admin-dashboard-4gel https://dev.to/chijiokenwabasili/from-website-to-workspace-building-the-nurturenest-admin-dashboard-4gel <h2> Wrapping Up the NurtureNest Admin Dashboard </h2> <p>I’ve just wrapped up building the admin dashboard prototype for <strong>NurtureNest</strong>, the fictional childcare platform I introduced in my <a href="https://dev.to/devceejay/launching-nurturenest-designing-a-responsive-childcare-website-2h10">first post</a>.</p> <p>While the public-facing site focuses on parents and families, the admin dashboard is designed to support internal staff managing day-to-day operations.</p> <h2> What the Dashboard Includes </h2> <ul> <li> <strong>Dynamic stat cards</strong> showing total enrollments, new inquiries, pending messages, and attendance </li> <li>A <strong>weekly enrollment chart</strong> powered by Chart.js </li> <li>Core admin tools like a <strong>search bar</strong>, <strong>profile dropdown</strong> </li> <li>Sections to manage <strong>enrollments</strong>, <strong>daily attendance logs</strong>, <strong>messages</strong>, <strong>event calendar</strong>, and <strong>site content updates</strong> </li> <li>Editable content areas for FAQs and homepage highlights, enabling non-technical staff to update information easily</li> </ul> <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%2Fnihbo0r839s0rwalwu83.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%2Fnihbo0r839s0rwalwu83.png" alt="NurtureNest Admin dashboard prototype" width="800" height="600"></a></p> <p>Here's the link to the 𝗗𝗮𝘀𝗵𝗯𝗼𝗮𝗿𝗱: 🔗 <a href="https://nurturenestcare-admin-dashboard.vercel.app" rel="noopener noreferrer">https://nurturenestcare-admin-dashboard.vercel.app</a> (Desktop View Only)</p> <h2> What I Learned </h2> <p>This part of the project helped me sharpen my frontend skills in:</p> <ul> <li>Handling and displaying mock data dynamically </li> <li>Organizing UI components and workflows for internal users </li> <li>Applying JavaScript for interactivity, including event handling and DOM manipulation </li> <li>Integrating third-party libraries like Chart.js for data visualization</li> </ul> <p>Working with mock data allowed me to simulate real-world admin workflows without setting up a backend, keeping the focus on usability and interface design.</p> <h2> What’s Next? </h2> <p>With the admin dashboard wrapped up, I’m excited to move on to:</p> <ul> <li>Deepening my JavaScript knowledge </li> <li>Learning to work with APIs </li> <li>Experimenting with tools like Firebase to add authentication and live data handling</li> </ul> <h2> Check It Out </h2> <p>You can explore the live <strong>public-facing site</strong> here:<br><br> 🔗 <a href="https://nurturenestcare.vercel.app" rel="noopener noreferrer">https://nurturenestcare.vercel.app</a></p> <p>If you’ve built admin tools or dashboards before, I’d love to hear your tips or challenges you faced while learning. Feel free to share in the comments!</p> <p>Thanks for reading!</p> <p><em>Thanks again for following my learning journey. More updates coming soon!</em></p> webdev frontend javascript showdev Chijioke Nwabasili Wed, 23 Jul 2025 11:27:06 +0000 https://dev.to/chijiokenwabasili/launching-nurturenest-designing-a-responsive-childcare-website-2h10 https://dev.to/chijiokenwabasili/launching-nurturenest-designing-a-responsive-childcare-website-2h10 <h2> Launching NurtureNest: Designing a Responsive Childcare Website </h2> <p>I recently completed designing and building <strong>NurtureNest</strong>, a self-initiated concept website for a fictional childcare center. Built from scratch using HTML, CSS, and JavaScript, this project was about more than just design, it was an opportunity to practice creating a full, responsive website that balances warmth and professionalism.</p> <h2> Why NurtureNest? </h2> <p>Childcare websites have to do a lot at once, they need to feel friendly and welcoming while also earning parents’ trust. That means thoughtful design, clear navigation, and content that speaks to both emotion and logic.</p> <p>With NurtureNest, I aimed to:</p> <ul> <li>Create a calming and approachable feel</li> <li>Make information easy to find</li> <li>Highlight what makes the center feel human and trustworthy</li> </ul> <h2> What I Built </h2> <p>Here’s what the public-facing site includes:</p> <ul> <li><p><strong>Interactive program cards</strong> - Clicking opens a modal with more details</p></li> <li><p><strong>Meet the Team section</strong> - Putting real faces to the brand to build trust</p></li> <li><p><strong>Daily Moments gallery</strong> - Showcasing activities in a visual, engaging way</p></li> <li><p><strong>Parent testimonials</strong> - For social proof and added credibility</p></li> <li><p><strong>Clear calls-to-action</strong> - Making enrollment and contact easy to start</p></li> </ul> <p>🖥️ <strong>Live site:</strong> <a href="https://nurturenestcare.vercel.app" rel="noopener noreferrer">https://nurturenestcare.vercel.app</a> </p> <p>NurtureNest website Hero section<br> <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%2Fb1mnf8eqvlpuq5c6cpgt.webp" 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%2Fb1mnf8eqvlpuq5c6cpgt.webp" alt="NurtureNest website Hero section" width="800" height="378"></a></p> <p>NurtureNest website Programs section<br> <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%2F35tfbh92veut26m5r5mi.webp" 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%2F35tfbh92veut26m5r5mi.webp" alt="NurtureNest website Programs section" width="800" height="372"></a></p> <h2> What I Learned </h2> <p>Building this project helped me sharpen my frontend skills while focusing more on <strong>usability</strong> and <strong>content flow</strong>. I started thinking beyond layout and styles, asking questions like:</p> <ul> <li>How will a parent interact with this section?</li> <li>Does the page feel overwhelming or reassuring?</li> <li>Are key actions obvious and accessible?</li> </ul> <p>It was also a great chance to write clean, reusable HTML and CSS, and structure JavaScript for future growth.</p> <h2> What's Next? </h2> <p>This is just the public-facing part. I'm now working on an <strong>admin dashboard</strong> prototype for internal staff to manage things like:</p> <ul> <li>Enrollments</li> <li>Attendance logs</li> <li>Site content (e.g., FAQs, homepage text)</li> <li>Event tracking</li> </ul> <p>The goal is to take the project from static website to something closer to a <strong>functional internal tool</strong>, where real tasks could be performed behind the scenes.</p> <p>I'll be sharing more posts as that side of the project comes together.</p> <h2> Got Feedback? </h2> <p>If you’ve worked on similar projects or have ideas for improving the design, UX, or structure, I’d love to hear your thoughts in the comments!</p> <p>Thanks for reading 🙌</p> <h3> 🔗 Link </h3> <ul> <li>🌐 <a href="https://nurturenestcare.vercel.app" rel="noopener noreferrer">Live Site - NurtureNest</a> </li> </ul> frontend html css javascript