Introduction
In this project, I built a modern healthcare website using React and Vite, with a strong emphasis on clean component architecture, maintainable styling, and real-world debugging. The application focuses on presenting healthcare services, professional expertise, and contact information in a clear, accessible, and scalable way specifically tailored for a women’s health and gynecologic oncology context.
This article documents the technical decisions, folder structure, common errors encountered, and solutions applied during development.
Technology Stack
React (Functional Components)
Vite (for fast development and bundling)
CSS (modular, folder-based styling)
React Router (page-level navigation)
ES Modules
Project Structure
One of the earliest and most important steps was defining a clear folder structure:
src/
├─ pages/
│ ├─ Services.jsx
│ ├─ Contact.jsx
│ └─ Home.jsx
├─ styles/
│ ├─ Services.css
│ └─ Contact.css
├─ components/
│ └─ Navbar.jsx
└─ App.jsx
Why this matters
Pages represent full routes (/services, /contact)
Components are reusable UI pieces
Styles are centralized and easy to maintain
Prevents import confusion and scaling issues later
**
Building the Services Page
**
Defining a Proper React Component
One of the first issues encountered was a classic beginner error:
ReferenceError: Services is not defined
This happened because JSX was written without wrapping it in a function component.
Correct Approach
Every React page must:
Be wrapped in a function
Return JSX
Be exported
`function Services() {
return (
{/* JSX goes here */}
);
}
export default Services;
Using Data-Driven Rendering
Instead of hardcoding each service card, I used an array of objects and mapped over it:
`const services = [
{ title: "Gynecologic Oncology Care", text: "..." },
{ title: "Cervical Cancer Prevention", text: "..." }
];
{services.map((service, index) => (
{service.title}
{service.text}
``
**
Benefits
**
Cleaner JSX
Easier to update or add services
More scalable for APIs or CMS integration
Styling with External CSS
The Import Error Problem
A common Vite error appeared:
Failed to resolve import "./Services.css"
This happened because:
The CSS file was located in src/styles
The import path assumed the same folder
Correct Import Path
import "../styles/Services.css";
Key Takeaway
Vite is strict about file paths and capitalization.
Always verify:
Folder location
Exact file name casing
Structuring Sections for Readability
The Services page was broken into clear semantic sections:
Intro Header
Services Grid
How It Works
Why Choose My Services
Each section had:
A dedicated container
Clear class names
Logical hierarchy
This improves:
Accessibility
Maintainability
Team collaboration
Aligning Content with Domain Knowledge
The “Why Choose My Services” section was initially generic.
I refined it to reflect actual expertise, including:
Gynecologic oncology specialization
Cervical cancer prevention
Community outreach
Digital health and health systems strengthening
This highlights an important lesson:
Good React code is not just about components—it’s about accurate, intentional content.
Building the Contact Page Header
The Contact page required a minimal, professional header section:
No buttons
No CTA components
Just a title and supporting text
<section className="contact-section">
<h1>Get in Touch</h1>
<p>Contact us to schedule an appointment...</p>
</section>
Styled with:
Centered layout
Soft neutral background
Accessible font sizes
Debugging Mindset: Lessons Learned
Throughout development, we encountered and resolved:
Undefined component exports
Always define and export components properly
Broken CSS imports
Match folder structure and relative paths
** Over-engineering**
Keep pages simple unless reuse is required
** Generic content**
Align UI text with real domain expertise
**
Best Practices Applied
**
Functional components only
Clear file naming
Relative imports (no magic paths)
Data-driven rendering
Separation of concerns (JSX vs CSS)
**
Conclusion
**
This project demonstrates how real React development works:
You build
You break things
You debug
You refine both code and content
By combining clean architecture, practical debugging, and domain-aligned content, we created a healthcare website that is both technically sound and professionally credible.
This approach scales well—whether the next step is form handling, API integration, authentication, or deployment.
Top comments (0)