The latest articles on DEV Community by Azzie Robel (@azzie_b7e9011e2c903). https://dev.to/azzie_b7e9011e2c903 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%2F3814502%2Fc878b0a8-7ba3-498e-ae08-a3b0cc17b484.png https://dev.to/azzie_b7e9011e2c903 en Azzie Robel Thu, 28 May 2026 15:28:42 +0000 https://dev.to/azzie_b7e9011e2c903/from-rough-to-ready-2f5o https://dev.to/azzie_b7e9011e2c903/from-rough-to-ready-2f5o <h2> What I Built </h2> <p>I built a responsive hospital website using React, Tailwind CSS and Vite.</p> <p>The app features:</p> <ul> <li>a complete appointment booking flow with department selection and filtered doctor choices</li> <li>a doctor directory and department overview</li> <li>a services section with a featured telemedicine call-to-action</li> <li>polished UI improvements for consistent cards, form placeholders and accessible controls</li> </ul> <p>This project started as a basic healthcare interface and I finished it by strengthening the interaction design, improving layout consistency and tailoring the content for a more realistic hospital experience.</p> <h2> Demo </h2> <p>Repository: <a href="https://github.com/james-works/q9-multispecialty-hospital" rel="noopener noreferrer">https://github.com/james-works/q9-multispecialty-hospital</a><br> Demo: <a href="https://q9-multispecialty-hospital.vercel.app/" rel="noopener noreferrer">https://q9-multispecialty-hospital.vercel.app/</a></p> <h2> The Comeback Story </h2> <p>This project was already close to being finished, but it still had a lot of rough edges. The UI felt inconsistent, some interactions didn't behave correctly and parts of the code were repetitive and hard to maintain.</p> <p>So I treated this as a full "finish-up" phase - not just fixing small issues, but improving the overall quality of the app.</p> <p>Before finishing, the project had several issues:</p> <ul> <li>inconsistent card heights across feature sections</li> <li>dropdown arrows too close to the select border missing placeholders on forms</li> <li>basic filtering logic that didn't always behave correctly</li> <li>generic content that made the app feel like a template</li> </ul> <p>I improved the project by:</p> <ul> <li>refactoring repeated UI parts into cleaner, reusable components</li> <li>simplifying Tailwind styles and fixing inconsistent spacing</li> <li>fixing card layouts so all sections align properly</li> <li>improving select inputs (spacing, alignment, usability)</li> <li>updating form UX with placeholders and better structure</li> <li>fixing doctor filtering so it responds correctly to department selection</li> <li>handling small edge cases in forms and dropdowns</li> <li>replacing generic data with more realistic Indonesian-style names</li> <li>improving the telemedicine CTA and making it work as a proper link</li> </ul> <p>I also cleaned up unused code, improved responsiveness and made small UI adjustments that make the whole app feel smoother.</p> <p>Overall, I focused on making the project feel complete - not just working, but consistent and reliable.</p> <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%2F70ndod537epozuu883fu.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%2F70ndod537epozuu883fu.png" alt=" " width="800" height="386"></a></p> <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%2Ft5bpw2ti5j3la4npvtv9.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%2Ft5bpw2ti5j3la4npvtv9.png" alt=" " width="799" height="386"></a></p> <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%2Fg7qt32yze5svj7ci4ocm.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%2Fg7qt32yze5svj7ci4ocm.png" alt=" " width="800" height="386"></a></p> <h2> My Experience with GitHub Copilot </h2> <p>GitHub Copilot was extremely helpful during this finish-up phase. It helped me refactor components, suggest better structure and speed up repetitive UI fixes.</p> <p>It was especially useful when:</p> <ul> <li>cleaning up repeated code</li> <li>improving Tailwind patterns</li> <li>fixing small bugs and edge cases</li> <li>keeping everything consistent while making many changes</li> </ul> <p>Copilot made it easier to move quickly without breaking things and helped me focus more on improving the overall quality of the project.</p> devchallenge githubchallenge webdev react