Hello there! This is a Dental Center Management system for ENTNT built with React(frontend-only). It allows an Admin (Dentist) to manage patients and appointments, and lets Patients see their own data. All data is stored in localStorage to simulate a real workflow without any backend.
Live Site: https://entnt-dental-portal.netlify.app/
GitHub Repo: https://github.com/Harsha0987/ENTNT-dental-center-management--vharsha101-gmail.com-.git
- User Authentication (Admin & Patient)
- Session persistence via localStorage
- Role-based access control
- Dashboard with KPIs
- Patient management (Admin-only)
- Appointment management (Admin-only)
- Calendar view (Admin-only)
- Patient portal with their own appointments and treatment history
- File upload with preview (base64)
- Responsive design
- Login: admin@entnt.in / admin123
- Pages for Admin:
- Dashboard: Overview of KPIs, greeting, and quick stats.
- Patients: View, add, edit, and delete patient records.
- Appointments: Add and manage appointments for patients.
- Calendar: Visual monthly/weekly view of all appointments.
- Logout: Clear session and go back to login.
- Login: john@entnt.in / patient123
- Patient Dashboard:
- Shows welcome message.
- Displays only the patient’s appointments and treatments.
- Allows viewing attached treatment files (e.g., invoices, X-rays).
| Role | Password | |
|---|---|---|
| Admin | admin@entnt.in | admin123 |
| Patient | john@entnt.in | patient123 |
- React (Functional Components)
- React Router
- Context API
- TailwindCSS
- LocalStorage (for simulating data persistence)
src/
├── components/
│ ├── KPIs.js # KPI widgets for admin dashboard
│ ├── PatientList.js # List, add, edit, delete patients
│ ├── AppointmentList.js # Manage patient appointments/incidents
│ └── CalendarView.js # Calendar UI to view appointments
│
├── contexts/
│ └── UserContext.js # Global authentication state for logged-in user session
│
├── pages/
│ ├── LoginPage.jsx # Login form for admin and patients
│ ├── AdminDashboard.jsx # Full-featured admin dashboard for dentists
│ └── PatientDashboard.jsx # Limited dashboard for patients to view their records
│
├── utils/
│ └── storage.js # Utility functions for reading/writing localStorage
│
├── App.js # Main app component, defines routes with React Router
└── index.js # Entry point of the React app, renders App.js
The app uses mock data stored in localStorage with two users: one Admin and one Patient. Patient data includes personal details and appointment records. File uploads (e.g., invoices, X-rays) are stored as base64 or blob URLs.
-
Clone this repo: git clone https://github.com/your-github-username/dental-center-management.git cd dental-center-management
-
Install dependencies: npm install
-
Start the app locally: npm start
-
Open http://localhost:3000 in your browser.
The app is deployed on Netlify. You can deploy it yourself by linking your GitHub repo to Netlify or Vercel, and it should work out of the box as it's a static React build.
- Auth state and user sessions are managed using React Context (
UserContext). - All CRUD operations (add, edit, delete patients/appointments) read/write to
localStorage. - Data updates trigger UI re-render via state and context updates.
- App uses React Router for page-based routing (login, dashboards).
- Push your code to GitHub.
- Go to Netlify and connect your repository.
- Set build command as npm run build and publish directory as build/.
- Click Deploy and wait for the build to finish.
- Share your live URL!
- Chose React Context over Redux for simplicity and because the app state is small.
- Used TailwindCSS for faster styling and responsiveness.
- File uploads are saved as base64 in localStorage to meet frontend-only requirements.
- Avoided external APIs and backends as per assignment guidelines.
- Since data is in localStorage, it will reset if you clear browser storage.
- File uploads are not optimized for large files (base64 can be heavy).
- Animated clock and greeting in Admin dashboard.
- Sun/moon switch based on time of day.
- Visual calendar with clickable days showing appointments.
This project is built for ENTNT as part of a technical assignment. No commercial license granted.