Dental Clinic Appointment System 🦷

A full-stack web application designed to streamline the scheduling and management of dental appointments. The system features a modern, responsive landing page for patients to book their visits, alongside a secure administrative dashboard for clinic staff to manage daily operations.

🚀 Key Features

• Interactive Landing Page: A modern presentation of the clinic, featuring responsive carousels to showcase dental treatments and the medical team[cite: 16, 23, 28].
• Smart Patient Booking: Patients can request appointments, select their health insurance ("Obra Social"), and choose from dynamically updated available time slots[cite: 19].
• Secure Authentication: JWT-based login system for administrators and secretaries to access the management portal[cite: 17, 18].
• Admin Dashboard: A comprehensive control panel using a data grid to view, confirm, or cancel patient appointments[cite: 18].
• Dynamic Health Insurances: Staff can dynamically add, edit, or delete accepted health insurances directly from the admin panel[cite: 18].
• Global Layout & Navigation: Seamless navigation with a persistent App Bar, smooth scrolling to page sections, and integrated footer[cite: 25, 26].

🛠️ Technologies & Libraries

Frontend:

• Framework: React with React Router for navigation[cite: 20].
• UI/UX: Material UI (MUI) components, including DataGrid for tables and customized themes[cite: 18, 20].
• Carousels: Swiper library for interactive sliding components[cite: 23, 28].
• Date Management: Day.js and MUI DatePicker for handling appointment dates and times[cite: 19, 20].

Backend:

• Server: Node.js with Express framework[cite: 13].
• Database: MongoDB, using Mongoose as the ODM for data modeling[cite: 13, 15].
• Security: bcryptjs for password hashing and CORS middleware for cross-origin requests[cite: 13, 15].

📁 Project Structure Highlights

• app.js: The main Express server setup, configuring CORS, JSON parsing, and the MongoDB connection via Mongoose[cite: 13].
• .env: Configuration file for environment variables such as the database URI (MONGODB_URI), ports, and email credentials[cite: 14].
• seed.js: An initialization script to populate the database with a default Admin user and basic health insurances (OSDE, Swiss Medical, etc.)[cite: 15].
• LandingPage.jsx: The main public view containing the hero section, treatments, and clinic locations[cite: 16].
• ReservaTurno.jsx: The booking form that fetches available slots and submits new appointments to the backend[cite: 19].
• PanelAdmin.jsx: The protected route where staff manages appointments and health insurance records[cite: 18].
• Login.jsx: Handles user authentication and stores the access token in local storage[cite: 17].

⚙️ Setup and Execution

1. Clone the repository and install dependencies for both the frontend and backend.
2. Configure Environment: Ensure your .env file is set up with your local MongoDB connection string (e.g., mongodb://localhost:27017/consultorioDB)[cite: 14].
3. Seed the Database: Run the seeding script to generate the initial admin account and health insurances[cite: 15]:

   node seed.js

4. Default Credentials: Once seeded, you can log into the Admin Portal using[cite: 15]:
   • Email: admin@admin.com
   • Password: admin
5. Start the Application: Run your Node backend and React frontend development servers.