General Forums on Product Hunt

My 7-Day Coding Journal: Setting Up the Doclinic Medical Dashboard

leshan wang · 2026-07-23T20:15:34.853-07:00

How I Built a Medical Admin Portal in 7 Days Using DoclinicLast month, a client of mine who runs a private orthopedic clinic reached out. He was frustrated. His team was using three different spreadsheets to track patient appointments, doctor shifts, and medical billing. It was a mess. He asked me if I could build a centralized dashboard that looked professional but didn't cost fifty thousand dollars in custom design fees. As a developer with over a decade of experience, I know better than to start from a blank white screen for a niche project like this. You’ll spend weeks just trying to get the "Patient Profile" card to look right. Instead, I went looking for a solid foundation. I needed something built on Bootstrap that was already tailored for healthcare. After a bit of digging, I decided to use the Doclinic - Medical Responsive Bootstrap Admin Dashboard. I didn't just want to "install and go." I wanted to see how this template actually holds up under the pressure of a real-world project. Here is my 7-day diary of the build process, the technical hurdles I hit, and how I pushed this template to its limits. Day 1: The Initial Handshake The first day is always about the "vibe check" of the code. I downloaded the package and opened it up in VS Code. Some templates are a nightmare of nested folders and dead dependencies. Doclinic was actually pretty refreshing. It uses a standard Bootstrap 5 structure, which means I don't have to relearn how to position a div for the hundredth time. I set up a local development environment using a simple Gulp workflow to handle the SCSS compilation. Within twenty minutes, I had the demo dashboard running on my localhost. My first impression? The UI is clean. It uses a soft color palette—lots of light blues and teals—which is perfect for a medical setting. It doesn't feel "aggressive" like some of those dark-mode crypto dashboards. For Dr. Miller’s clinic, this "trustworthy" look was exactly what he wanted. Day 3: Dealing with the "Active Link" Friction By day three, I started migrating the static HTML pages into my actual application logic. This is where I hit my first small technical snag. While the template looks great, the sidebar navigation script was a bit too basic for a deep-level application. The clinic needed a nested menu: "Patients" -> "In-Patient" and "Out-Patient." The default template script didn't automatically keep the parent menu expanded if you were on a sub-page. If a nurse clicked on "Add New Patient," the menu would collapse, and they’d lose their place. It’s a small thing, but for someone using this 8 hours a day, it’s annoying as hell. I didn't want to rewrite the whole navigation library, so I wrote a quick jQuery fix to sniff the current URL and force the parent container to stay open. Here is the snippet I added to the main app.js file: // Custom fix for Sidebar Active State $(document).ready(function() { var currentPath = window.location.pathname.split("/").slice(-1)[0]; $('.sidebar-menu a').each(function() { var href = $(this).attr('href'); if (currentPath === href) { $(this).addClass('active'); $(this).parents('ul').addClass('show'); // Bootstrap 5 collapse class $(this).parents('li').addClass('menu-open'); } }); }); This solved the friction. Now, the UI felt like a real "app" rather than just a collection of linked web pages. It took me about 45 minutes to debug and test, which isn't bad at all for a pre-made template. Day 5: Performance and Data Visualization Day five was the "fun" part—wiring up the charts. The clinic wanted to see a weekly trend of patient visits. Doclinic comes with Chart.js integrated, which is my favorite library because it’s lightweight and mobile-friendly. I had to pull real data from their SQL database and feed it into the JavaScript objects. Instead of just dumping a massive JS file into the footer, I decided to optimize the loading sequence. I used a "Critical Path" approach where I only loaded the core CSS and the sidebar logic first, then lazy-loaded the heavy charting scripts. I also realized the template used a lot of large SVG icons. To keep the site fast (SEO 101, right?), I ran a quick optimization on all the assets. I also set up a custom Nginx rule to make sure these static assets were cached properly on the server side. Here is what I added to the server block: # Browser Caching for Medical Dashboard Assets location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg)$ { expires 30d; add_header Cache-Control "public, no-transform"; } After these tweaks, the dashboard felt snappy. Clicking between the "Appointment Calendar" and "Doctor List" was almost instant. Speed is a huge factor for "Trust" in Google's eyes, even for internal-ish tools. Day 7: The Handover and Final Thoughts Today was the final walkthrough with Dr. Miller. We spent the morning testing the "Mobile Responsive" view. This is usually where templates fail—the tables usually overflow and break the layout. Luckily, Doclinic uses the Bootstrap .table-responsive class correctly, so the patient lists were actually readable on a tablet during his rounds. The Honest Pros and Cons The Good Stuff (Pros): Niche-Specific Components: It has specific UI elements like "Doctor Profiles" and "Appointment Timelines" that you won't find in a generic admin template. This saved me at least 40 hours of UI design.Clean CSS: The SCSS files are modular. If I wanted to change the primary "Medical Blue" to a "Hospital Green," I only had to change one variable in the _variables.scss file.Lightweight: It doesn't force a massive framework like Angular on you if you don't want it. Plain HTML/JS works just fine. The Not-So-Good Stuff (Cons): Documentation: The documentation is okay for getting started, but it doesn't explain the custom JS functions very well. If you aren't an experienced dev, you might struggle to customize the more complex widgets.Sidebar Logic: As I mentioned on Day 3, the menu persistence needed a bit of manual code to feel truly "premium." Is it worth it? Look, I've been doing this for 10 years. I could have built this from scratch using Tailwind or a custom CSS grid. But why? My client didn't want to pay for 200 hours of my time; he wanted a working tool for his staff. By using a solid base like the Doclinic dashboard, I was able to focus on the things that actually matter—like data security and the appointment logic—instead of worrying about if a button has the right amount of padding. If you are building anything in the healthcare space, from a small clinic portal to a large pharmacy management system, this template is a very strong starting point. Just be prepared to write a few lines of custom JS to polish the navigation, and you'll have a top-tier product in less than a week. The client is happy, the nurses are no longer fighting with Excel, and I finished the project ahead of schedule. That’s a win in my book.

p/generalShare and discuss tech, products, business, startups, or product recommendations

Start new thread

trending

•

10mo ago

Featured

A Week with Poke Review: A Promising Start for a Proactive AI Assistant

Have you used Poke? Leave your thoughts in the comment or share other AI Assistants you've used!

What is Poke?

Poke.com is a proactive AI assistant that automates your digital life with smart integrations and real-world utility. It s like Claude via iMessage or WhatsApp that doesn t always need a user prompt to message you.

Can an AI Assistant Finally Deliver on Its Promise?

•

3yr ago

Featured

Would you rather own a VC-backed unicorn 🦄 or a 1M yearly revenue bootstraped SaaS Business 🐜 ?

•

5yr ago

Featured

What’s the hardest part of growing a startup?

Setting up a new business is tough, but growing it is tougher! So, what s the hardest part of growing a startup? What difficulties can a entrepreneur face and how can he/she overcome it?

•

3yr ago

Featured

How do you grow your newsletter? 👀

Hey Product Hunters! Recently I launched a newsletter with weekly marketing case studies from profitable Solopreneurs (https://makerbox.ck.page/marketi...). Last week, I tried content repurposing and got around 50 new subscribers: autoplug on Twitter next issue teaser on Twitter repurposing content on Product Hunt discussions repurposing content on Indie Hackers To be honest, kinda dissatisfied with the growth. I thought I could grow at least +100 So, how do you promote your newsletter?

•

1yr ago

Featured

From zero to 500 users: How I launched IndieCru.sh solo

Hey, I m Alex Saint

I m a solo indie hacker based in Paris, and fun fact I only started coding thanks to AI tools. I got inspired watching Marc Lou s videos on YouTube, picked up some tools, started building and tweeting.

•

21d ago

Is AI still cheap or just temporarily subsidized?

AI pricing today doesn t fully reflect real cost.

Some reports and industry estimates suggest that real inference cost can be 5 10x higher than what companies currently charge, depending on model size, context length, and infrastructure load.

So the market is not really stable yet.
It s still in a growth phase, supported by subsidized pricing and scale.
And usage is already massive.

Most of you probably saw this report:

•

5yr ago

Featured

How do you motivate co-founders to commit with you on an idea?

I am currently working on an idea with my team. All of us have jobs and are in different locations(same time zones). We're are struggling with productivity because only two members are fully commited on building the product. The two of us came with up with the idea and we brought two members who shared interest and the vision of the idea. The two other guys will promise to do stuff and then not deliver on them. How do you motivate them to work without being intrusive to their time. And how do you make sure they not slack?