The latest articles on DEV Community by Oluwatobi Giwa (@toubielawbar). https://dev.to/toubielawbar 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%2F1434567%2Fa0493643-1df6-4259-8fad-60140c3321a8.jpeg https://dev.to/toubielawbar en Oluwatobi Giwa Mon, 28 Jul 2025 04:25:59 +0000 https://dev.to/toubielawbar/innosync-a-seamless-digital-workspace-54if https://dev.to/toubielawbar/innosync-a-seamless-digital-workspace-54if <p><em>This is a submission for <a href="https://dev.to/challenges/frontend/axero">Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space</a></em></p> <h2> What I Built </h2> <p><strong>InnoSync</strong> is a fully responsive, intuitive intranet homepage designed for a fictional tech-forward company. Built using HTML, CSS, and vanilla JavaScript, InnoSync aims to centralize internal communication, simplify access to tools, and create an engaging employee experience. From real-time announcements and upcoming events to team spotlights and a streamlined launch pad, every element is crafted to support collaboration, visibility, and ease of use. My goal was to create a digital office that feels both professional and personal — blending functionality with subtle design touches that keep users coming back. </p> <h2> Demo </h2> <p>Live Demo: <a href="https://innosync.netlify.app" rel="noopener noreferrer">https://innosync.netlify.app</a><br> GitHub Repository: <a href="https://github.com/toubielawbar/innosync.git" rel="noopener noreferrer">https://github.com/toubielawbar/innosync.git</a></p> <h2> Journey </h2> <p>InnoSync features a clean, user-friendly interface with dedicated sections for:</p> <p><strong>Upcoming Events:</strong> To keep employees informed about company-wide meetings, social gatherings, and important deadlines.</p> <p><strong>Team Spotlights:</strong> Highlighting individual and team achievements to boost morale and foster a sense of community.</p> <p><strong>Quick Links/Useful Resources:</strong> Providing easy access to frequently used tools, documents, and internal policies.</p> <p><strong>Company Announcements:</strong> A prominent area for critical updates and news from leadership.</p> <p>**<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%2Fasyqodwogafmtaofycxi.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%2Fasyqodwogafmtaofycxi.png" alt=" " width="800" height="382"></a>** Allowing employees to see relevant information at a glance, such as their upcoming tasks or notifications.</p> <p>My journey in building InnoSync focused on creating a truly holistic digital experience using only HTML, CSS, and JavaScript. I started by wireframing several layout options, prioritizing information hierarchy and ease of navigation. I wanted to avoid a cluttered feel, opting instead for a minimalist design that allows key information to stand out.</p> <p>One of my proudest choices was implementing a responsive design from the outset. I ensured InnoSync looks great and functions perfectly across various devices, recognizing that employees might access the intranet from desktops, tablets, or even mobile phones. This involved extensive use of CSS Flexbox and Grid for flexible and robust layouts.</p> <p>During the development process, I particularly enjoyed experimenting with dynamic content loading using JavaScript. For instance, the "Upcoming Events" and "Team Spotlights" sections are designed to be easily updated, simulating real-world data fetching and display. This allowed me to practice and refine my DOM manipulation skills. I also paid close attention to accessibility, ensuring that the intranet is usable by everyone, regardless of their abilities. This involved using semantic HTML and considering keyboard navigation.</p> <p>The biggest learning curve was perhaps optimizing the CSS for maintainability and scalability. I adopted a modular approach, breaking down styles into smaller, manageable components, which I believe will be beneficial if the project were to expand. Overall, this challenge was an excellent opportunity to solidify my foundational web development skills and apply them to a practical, real-world scenario.</p> devchallenge frontendchallenge css javascript Oluwatobi Giwa Sun, 23 Jun 2024 18:32:20 +0000 https://dev.to/toubielawbar/event-booking-system-with-twilio-and-openai-15m3 https://dev.to/toubielawbar/event-booking-system-with-twilio-and-openai-15m3 <p><em>This is a submission for the <a href="https://dev.to/challenges/twilio">Twilio Challenge </a></em></p> <h2> What I Built </h2> <p>I built an event booking system built using Twilio and AI allows users to book events through various communication channels like SMS and voice calls. </p> <h2> Demo </h2> <p><a href="https://caperstack.com">https://caperstack.com</a></p> <h2> Twilio and AI </h2> <h2> Additional Prize Categories </h2> <p>&lt;!-- Thanks for participating! →</p> devchallenge twiliochallenge ai twilio