├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── vite.svg ├── src ├── App.jsx ├── assets │ ├── Dermatologist.svg │ ├── Gastroenterologist.svg │ ├── General_physician.svg │ ├── Neurologist.svg │ ├── Pediatricians.svg │ ├── about_image.png │ ├── appointment_img.png │ ├── arrow.svg │ ├── assets.js │ ├── chats_icon.svg │ ├── contact_image.png │ ├── doc1.png │ ├── doc10.png │ ├── doc11.png │ ├── doc2.png │ ├── doc3.png │ ├── doc4.png │ ├── doc5.png │ ├── doc6.png │ ├── doc7.png │ ├── doc8.png │ ├── doc9.png │ ├── dropdown.svg │ ├── group.png │ ├── header.png │ ├── logo.png │ ├── menu_icon.svg │ ├── profile.png │ └── verified_icon.svg ├── components │ ├── Header.jsx │ ├── Navbar.jsx │ └── SpecialtyMenu.jsx ├── context │ └── assets.js ├── index.css ├── main.jsx └── pages │ ├── About.jsx │ ├── Appointment.jsx │ ├── Contact.jsx │ ├── Doctors.jsx │ ├── Home.jsx │ ├── Login.jsx │ ├── MyAppointments.jsx │ └── MyProfile.jsx ├── tailwind.config.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Project Title: Appointment tracker: 2 | 3 | The purpose of this project ifs for users to have a platform to create online doctors appointments. They are able to have a list of doctors to choose from. For the future I would like to create this to be a platform that focuses on one specialty such as finding a therapist for mental health. 4 | 5 | Technologies used: MERN stack, npm ,multer, bcrypt ,cloudinary 6 | jsonwebtoken,validator, Tailwind CSS 7 | 8 | 9 | Features: 10 | Components file: 11 | Header 12 | NavBar 13 | SpecialtyMenu (Doctors specialization) 14 | Pages: 15 | ABOUT 16 | APPOINTMENTS 17 | CONTACT 18 | DOCTORS 19 | HOME 20 | LOGIN 21 | MyAppointments 22 | myProfile 23 | 24 | API Endpoints 25 | 26 | Resources: Google, (GreatStack youtube): https://www.youtube.com/watch?v=eRTTlS0zaW8&t=8485s, Tailwind CSS site 27 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Appointment Tracker 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.27.0", 16 | "react-toastify": "^10.0.6" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.13.0", 20 | "@types/react": "^18.3.11", 21 | "@types/react-dom": "^18.3.1", 22 | "@vitejs/plugin-react": "^4.3.3", 23 | "autoprefixer": "^10.4.20", 24 | "eslint": "^9.13.0", 25 | "eslint-plugin-react": "^7.37.1", 26 | "eslint-plugin-react-hooks": "^5.0.0", 27 | "eslint-plugin-react-refresh": "^0.4.13", 28 | "globals": "^15.11.0", 29 | "postcss": "^8.4.47", 30 | "tailwindcss": "^3.4.14", 31 | "vite": "^5.4.9" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Route, Routes} from 'react-router-dom' 3 | import Home from './pages/Home' 4 | import About from './pages/About' 5 | import Contact from './pages/Contact' 6 | import Doctors from './pages/Doctors' 7 | import Login from './pages/Login' 8 | import MyAppointments from './pages/MyAppointments' 9 | import Appointment from './pages/Appointment' 10 | import Navbar from './components/Navbar' 11 | import MyProfile from './pages/MyProfile' 12 | //import SpecialtyMenu from './components/SpecialtyMenu' 13 | 14 | 15 | const App = () => { 16 | return ( 17 |
18 | 19 | 20 | 21 | }/> 22 | }/> 23 | }/> 24 | }/> 25 | }/> 26 | }/> 27 | }/> 28 | }/> 29 | }/> 30 | 31 | 32 |
33 | ) 34 | } 35 | 36 | export default App 37 | -------------------------------------------------------------------------------- /src/assets/Dermatologist.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/assets/Gastroenterologist.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/assets/General_physician.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/assets/Neurologist.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/Pediatricians.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/about_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/about_image.png -------------------------------------------------------------------------------- /src/assets/appointment_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/appointment_img.png -------------------------------------------------------------------------------- /src/assets/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/assets.js: -------------------------------------------------------------------------------- 1 | import appointment_img from './appointment_img.png' 2 | import header from '../assets/header.png' 3 | import group from './group.png' 4 | import profile from '..assets/profile.png' 5 | import contact_image from './contact_image.png' 6 | import about_image from './about_image.png' 7 | import logo from './logo.png' 8 | import dropdown from '..assets/dropdown.svg' 9 | import menu_icon from './menu_icon.svg' 10 | import cross_icon from './cross_icon.png' 11 | import chats_icon from './chats_icon.svg' 12 | import verified_icon from './verified_icon.svg' 13 | import arrow_icon from './arrow_icon.svg' 14 | import info_icon from './info_icon.svg' 15 | import upload_icon from './upload_icon.png' 16 | import stripe_logo from './stripe_logo.png' 17 | import razorpay_logo from './razorpay_logo.png' 18 | import doc1 from '../assets/doc1.png' 19 | import doc2 from '../assets/doc2.png' 20 | import doc3 from '../assets/doc3.png' 21 | import doc4 from '../assets/doc4.png' 22 | import doc5 from '../assets/doc5.png' 23 | import doc6 from '../assets/doc6.png' 24 | import doc7 from '../assets/doc7.png' 25 | import doc8 from '../assets/doc8.png' 26 | import doc9 from '../assets/doc9.png' 27 | import doc10 from '../assets/doc10.png' 28 | import doc11 from '../assets/doc11.png' 29 | import Dermatologist from './Dermatologist.svg' 30 | import Gastroenterologist from './Gastroenterologist.svg' 31 | import General_physician from './General_physician.svg' 32 | import Gynecologist from './Gynecologist.svg' 33 | import Neurologist from './Neurologist.svg' 34 | import Pediatricians from './Pediatricians.svg' 35 | 36 | 37 | export const assets = { 38 | appointment_img, 39 | header, 40 | group, 41 | logo, 42 | chats_icon, 43 | verified_icon, 44 | info_icon, 45 | profile, 46 | arrow_icon, 47 | contact_image, 48 | about_image, 49 | menu_icon, 50 | cross_icon, 51 | dropdown, 52 | upload_icon, 53 | stripe_logo, 54 | razorpay_logo 55 | } 56 | 57 | export const specialtyData = [ 58 | { 59 | specialty: 'General physician', 60 | image: General_physician}, 61 | { 62 | specialty: 'Gynecologist', 63 | image: Gynecologist 64 | }, 65 | { 66 | specialty: 'Dermatologist', 67 | image: Dermatologist 68 | }, 69 | { 70 | specialty: 'Pediatricians', 71 | image: Pediatricians 72 | }, 73 | { 74 | specialty: 'Neurologist', 75 | image: Neurologist 76 | }, 77 | { 78 | specialty: 'Gastroenterologist', 79 | image: Gastroenterologist 80 | }, 81 | ] 82 | 83 | export const doctors = [ 84 | { 85 | _id: 'doc1', 86 | name: 'Dr. Richard James', 87 | image: doc1, 88 | speciality: 'General physician', 89 | degree: 'MBBS', 90 | experience: '4 Years', 91 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 92 | fees: 50, 93 | address: { 94 | line1: '17th Cross, Richmond', 95 | line2: 'Circle, Ring Road, London' 96 | } 97 | }, 98 | { 99 | _id: 'doc2', 100 | name: 'Dr. Emily Larson', 101 | image: doc2, 102 | speciality: 'Gynecologist', 103 | degree: 'MBBS', 104 | experience: '3 Years', 105 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 106 | fees: 60, 107 | address: { 108 | line1: '27th Cross, Richmond', 109 | line2: 'Circle, Ring Road, London' 110 | } 111 | }, 112 | { 113 | _id: 'doc3', 114 | name: 'Dr. Sarah Patel', 115 | image: doc3, 116 | speciality: 'Dermatologist', 117 | degree: 'MBBS', 118 | experience: '1 Years', 119 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 120 | fees: 30, 121 | address: { 122 | line1: '37th Cross, Richmond', 123 | line2: 'Circle, Ring Road, London' 124 | } 125 | }, 126 | { 127 | _id: 'doc4', 128 | name: 'Dr. Christopher Lee', 129 | image: doc4, 130 | speciality: 'Pediatricians', 131 | degree: 'MBBS', 132 | experience: '2 Years', 133 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 134 | fees: 40, 135 | address: { 136 | line1: '47th Cross, Richmond', 137 | line2: 'Circle, Ring Road, London' 138 | } 139 | }, 140 | { 141 | _id: 'doc5', 142 | name: 'Dr. Jennifer Garcia', 143 | image: doc5, 144 | speciality: 'Neurologist', 145 | degree: 'MBBS', 146 | experience: '4 Years', 147 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 148 | fees: 50, 149 | address: { 150 | line1: '57th Cross, Richmond', 151 | line2: 'Circle, Ring Road, London' 152 | } 153 | }, 154 | { 155 | _id: 'doc6', 156 | name: 'Dr. Andrew Williams', 157 | image: doc6, 158 | speciality: 'Neurologist', 159 | degree: 'MBBS', 160 | experience: '4 Years', 161 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 162 | fees: 50, 163 | address: { 164 | line1: '57th Cross, Richmond', 165 | line2: 'Circle, Ring Road, London' 166 | } 167 | }, 168 | { 169 | _id: 'doc7', 170 | name: 'Dr. Christopher Davis', 171 | image: doc7, 172 | speciality: 'General physician', 173 | degree: 'MBBS', 174 | experience: '4 Years', 175 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 176 | fees: 50, 177 | address: { 178 | line1: '17th Cross, Richmond', 179 | line2: 'Circle, Ring Road, London' 180 | } 181 | }, 182 | { 183 | _id: 'doc8', 184 | name: 'Dr. Timothy White', 185 | image: doc8, 186 | speciality: 'Gynecologist', 187 | degree: 'MBBS', 188 | experience: '3 Years', 189 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 190 | fees: 60, 191 | address: { 192 | line1: '27th Cross, Richmond', 193 | line2: 'Circle, Ring Road, London' 194 | } 195 | }, 196 | { 197 | _id: 'doc9', 198 | name: 'Dr. Ava Mitchell', 199 | image: doc9, 200 | speciality: 'Dermatologist', 201 | degree: 'MBBS', 202 | experience: '1 Years', 203 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 204 | fees: 30, 205 | address: { 206 | line1: '37th Cross, Richmond', 207 | line2: 'Circle, Ring Road, London' 208 | } 209 | }, 210 | { 211 | _id: 'doc10', 212 | name: 'Dr. Jeffrey King', 213 | image: doc10, 214 | speciality: 'Pediatricians', 215 | degree: 'MBBS', 216 | experience: '2 Years', 217 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 218 | fees: 40, 219 | address: { 220 | line1: '47th Cross, Richmond', 221 | line2: 'Circle, Ring Road, London' 222 | } 223 | }, 224 | { 225 | _id: 'doc11', 226 | name: 'Dr. Zoe Kelly', 227 | image: doc11, 228 | speciality: 'Neurologist', 229 | degree: 'MBBS', 230 | experience: '4 Years', 231 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 232 | fees: 50, 233 | address: { 234 | line1: '57th Cross, Richmond', 235 | line2: 'Circle, Ring Road, London' 236 | } 237 | }, 238 | ] -------------------------------------------------------------------------------- /src/assets/chats_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/contact_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/contact_image.png -------------------------------------------------------------------------------- /src/assets/doc1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc1.png -------------------------------------------------------------------------------- /src/assets/doc10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc10.png -------------------------------------------------------------------------------- /src/assets/doc11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc11.png -------------------------------------------------------------------------------- /src/assets/doc2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc2.png -------------------------------------------------------------------------------- /src/assets/doc3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc3.png -------------------------------------------------------------------------------- /src/assets/doc4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc4.png -------------------------------------------------------------------------------- /src/assets/doc5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc5.png -------------------------------------------------------------------------------- /src/assets/doc6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc6.png -------------------------------------------------------------------------------- /src/assets/doc7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc7.png -------------------------------------------------------------------------------- /src/assets/doc8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc8.png -------------------------------------------------------------------------------- /src/assets/doc9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/doc9.png -------------------------------------------------------------------------------- /src/assets/dropdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/group.png -------------------------------------------------------------------------------- /src/assets/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/header.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/menu_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/profile.png -------------------------------------------------------------------------------- /src/assets/verified_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import group from '../assets/group.png' 3 | import arrow from '../assets/arrow.svg' 4 | import header from '../assets/header.png' 5 | 6 | const Header = () => { 7 | return ( 8 |
9 | {/* ---- Left side header ------*/} 10 | 11 |
12 |

13 | Book Appointment
With Doctors near you 14 |

15 |
16 | 17 |

Browse through an extensive list of trusted doctors,
schedule your appointment

18 |
19 | 20 | Book Appointment 21 | 22 |
23 | 24 | {/* ---- Right side header ------*/} 25 |
26 | 27 | 28 |
29 | 30 |
31 | ) 32 | } 33 | 34 | export default Header 35 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import react from 'react' 2 | import { useState } from 'react'; 3 | import { NavLink, useNavigate } from 'react-router-dom'; 4 | import logo from "../assets/logo.png" 5 | import profile from '../assets/profile.png' 6 | import dropdown from '../assets/dropdown.svg' 7 | 8 | const Navbar = () => { 9 | const [showmenu, setShowMenu] = useState(false); 10 | const [token, setToken] = useState(true); //when token is true we are logged in and vice versa 11 | const navigate = useNavigate(); 12 | 13 | return ( 14 |
15 | logo 16 | 17 | 35 | 36 |
37 | { 38 | token 39 | ?
40 | profile 41 | dropdown 42 |
43 |
44 |

navigate('my-profile')} className='hover:text-black cursor-pointer'> My Profile

45 |

navigate('my-appointments')} className='hover:text-black cursor-pointer'> My Appointments

46 |

setToken(false)} className='hover:text-black cursor-pointer'> Logout

47 | 48 |
49 |
50 |
51 | : 56 | } 57 | 58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default Navbar; 65 | -------------------------------------------------------------------------------- /src/components/SpecialtyMenu.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { specialtyData } from '../assets/assets.js' 3 | import {Link} from 'react-router-dom' 4 | import dermatologist from '../assets/Dermatologist.svg' 5 | 6 | 7 | const SpecialtyMenu = () => { 8 | return ( 9 | 10 |
11 |

Find by Specialty

12 |

Browse through our extensive list of doctors and book your appointment today.

13 |
14 | 15 | {specialtyData.map((item, index) =>( 16 | 17 | 18 |

{item.specialty}

19 | 20 | 21 | ))} 22 |
23 |
24 | ) 25 | } 26 | 27 | export default SpecialtyMenu 28 | -------------------------------------------------------------------------------- /src/context/assets.js: -------------------------------------------------------------------------------- 1 | import appointment_img from './appointment_img.png' 2 | import header_img from './header_img.png' 3 | import group_profiles from './group_profiles.png' 4 | import profile_pic from './profile_pic.png' 5 | import contact_image from './contact_image.png' 6 | import about_image from './about_image.png' 7 | import logo from './logo.svg' 8 | import dropdown_icon from './dropdown_icon.svg' 9 | import menu_icon from './menu_icon.svg' 10 | import cross_icon from './cross_icon.png' 11 | import chats_icon from './chats_icon.svg' 12 | import verified_icon from './verified_icon.svg' 13 | import arrow_icon from './arrow_icon.svg' 14 | import info_icon from './info_icon.svg' 15 | import upload_icon from './upload_icon.png' 16 | import stripe_logo from './stripe_logo.png' 17 | import razorpay_logo from './razorpay_logo.png' 18 | import doc1 from './doc1.png' 19 | import doc2 from './doc2.png' 20 | import doc3 from './doc3.png' 21 | import doc4 from './doc4.png' 22 | import doc5 from './doc5.png' 23 | import doc6 from './doc6.png' 24 | import doc7 from './doc7.png' 25 | import doc8 from './doc8.png' 26 | import doc9 from './doc9.png' 27 | import doc10 from './doc10.png' 28 | import doc11 from './doc11.png' 29 | import doc12 from './doc12.png' 30 | import doc13 from './doc13.png' 31 | import doc14 from './doc14.png' 32 | import doc15 from './doc15.png' 33 | import Dermatologist from './Dermatologist.svg' 34 | import Gastroenterologist from './Gastroenterologist.svg' 35 | import General_physician from './General_physician.svg' 36 | import Gynecologist from './Gynecologist.svg' 37 | import Neurologist from './Neurologist.svg' 38 | import Pediatricians from './Pediatricians.svg' 39 | 40 | 41 | export const assets = { 42 | appointment_img, 43 | header_img, 44 | group_profiles, 45 | logo, 46 | chats_icon, 47 | verified_icon, 48 | info_icon, 49 | profile_pic, 50 | arrow_icon, 51 | contact_image, 52 | about_image, 53 | menu_icon, 54 | cross_icon, 55 | dropdown_icon, 56 | upload_icon, 57 | stripe_logo, 58 | razorpay_logo 59 | } 60 | 61 | export const specialityData = [ 62 | { 63 | speciality: 'General physician', 64 | image: General_physician 65 | }, 66 | { 67 | speciality: 'Gynecologist', 68 | image: Gynecologist 69 | }, 70 | { 71 | speciality: 'Dermatologist', 72 | image: Dermatologist 73 | }, 74 | { 75 | speciality: 'Pediatricians', 76 | image: Pediatricians 77 | }, 78 | { 79 | speciality: 'Neurologist', 80 | image: Neurologist 81 | }, 82 | { 83 | speciality: 'Gastroenterologist', 84 | image: Gastroenterologist 85 | }, 86 | ] 87 | 88 | export const doctors = [ 89 | { 90 | _id: 'doc1', 91 | name: 'Dr. Richard James', 92 | image: doc1, 93 | speciality: 'General physician', 94 | degree: 'MBBS', 95 | experience: '4 Years', 96 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 97 | fees: 50, 98 | address: { 99 | line1: '17th Cross, Richmond', 100 | line2: 'Circle, Ring Road, London' 101 | } 102 | }, 103 | { 104 | _id: 'doc2', 105 | name: 'Dr. Emily Larson', 106 | image: doc2, 107 | speciality: 'Gynecologist', 108 | degree: 'MBBS', 109 | experience: '3 Years', 110 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 111 | fees: 60, 112 | address: { 113 | line1: '27th Cross, Richmond', 114 | line2: 'Circle, Ring Road, London' 115 | } 116 | }, 117 | { 118 | _id: 'doc3', 119 | name: 'Dr. Sarah Patel', 120 | image: doc3, 121 | speciality: 'Dermatologist', 122 | degree: 'MBBS', 123 | experience: '1 Years', 124 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 125 | fees: 30, 126 | address: { 127 | line1: '37th Cross, Richmond', 128 | line2: 'Circle, Ring Road, London' 129 | } 130 | }, 131 | { 132 | _id: 'doc4', 133 | name: 'Dr. Christopher Lee', 134 | image: doc4, 135 | speciality: 'Pediatricians', 136 | degree: 'MBBS', 137 | experience: '2 Years', 138 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 139 | fees: 40, 140 | address: { 141 | line1: '47th Cross, Richmond', 142 | line2: 'Circle, Ring Road, London' 143 | } 144 | }, 145 | { 146 | _id: 'doc5', 147 | name: 'Dr. Jennifer Garcia', 148 | image: doc5, 149 | speciality: 'Neurologist', 150 | degree: 'MBBS', 151 | experience: '4 Years', 152 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 153 | fees: 50, 154 | address: { 155 | line1: '57th Cross, Richmond', 156 | line2: 'Circle, Ring Road, London' 157 | } 158 | }, 159 | { 160 | _id: 'doc6', 161 | name: 'Dr. Andrew Williams', 162 | image: doc6, 163 | speciality: 'Neurologist', 164 | degree: 'MBBS', 165 | experience: '4 Years', 166 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 167 | fees: 50, 168 | address: { 169 | line1: '57th Cross, Richmond', 170 | line2: 'Circle, Ring Road, London' 171 | } 172 | }, 173 | { 174 | _id: 'doc7', 175 | name: 'Dr. Christopher Davis', 176 | image: doc7, 177 | speciality: 'General physician', 178 | degree: 'MBBS', 179 | experience: '4 Years', 180 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 181 | fees: 50, 182 | address: { 183 | line1: '17th Cross, Richmond', 184 | line2: 'Circle, Ring Road, London' 185 | } 186 | }, 187 | { 188 | _id: 'doc8', 189 | name: 'Dr. Timothy White', 190 | image: doc8, 191 | speciality: 'Gynecologist', 192 | degree: 'MBBS', 193 | experience: '3 Years', 194 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 195 | fees: 60, 196 | address: { 197 | line1: '27th Cross, Richmond', 198 | line2: 'Circle, Ring Road, London' 199 | } 200 | }, 201 | { 202 | _id: 'doc9', 203 | name: 'Dr. Ava Mitchell', 204 | image: doc9, 205 | speciality: 'Dermatologist', 206 | degree: 'MBBS', 207 | experience: '1 Years', 208 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 209 | fees: 30, 210 | address: { 211 | line1: '37th Cross, Richmond', 212 | line2: 'Circle, Ring Road, London' 213 | } 214 | }, 215 | { 216 | _id: 'doc10', 217 | name: 'Dr. Jeffrey King', 218 | image: doc10, 219 | speciality: 'Pediatricians', 220 | degree: 'MBBS', 221 | experience: '2 Years', 222 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 223 | fees: 40, 224 | address: { 225 | line1: '47th Cross, Richmond', 226 | line2: 'Circle, Ring Road, London' 227 | } 228 | }, 229 | { 230 | _id: 'doc11', 231 | name: 'Dr. Zoe Kelly', 232 | image: doc11, 233 | speciality: 'Neurologist', 234 | degree: 'MBBS', 235 | experience: '4 Years', 236 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 237 | fees: 50, 238 | address: { 239 | line1: '57th Cross, Richmond', 240 | line2: 'Circle, Ring Road, London' 241 | } 242 | }, 243 | { 244 | _id: 'doc12', 245 | name: 'Dr. Patrick Harris', 246 | image: doc12, 247 | speciality: 'Neurologist', 248 | degree: 'MBBS', 249 | experience: '4 Years', 250 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 251 | fees: 50, 252 | address: { 253 | line1: '57th Cross, Richmond', 254 | line2: 'Circle, Ring Road, London' 255 | } 256 | }, 257 | { 258 | _id: 'doc13', 259 | name: 'Dr. Chloe Evans', 260 | image: doc13, 261 | speciality: 'General physician', 262 | degree: 'MBBS', 263 | experience: '4 Years', 264 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 265 | fees: 50, 266 | address: { 267 | line1: '17th Cross, Richmond', 268 | line2: 'Circle, Ring Road, London' 269 | } 270 | }, 271 | { 272 | _id: 'doc14', 273 | name: 'Dr. Ryan Martinez', 274 | image: doc14, 275 | speciality: 'Gynecologist', 276 | degree: 'MBBS', 277 | experience: '3 Years', 278 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 279 | fees: 60, 280 | address: { 281 | line1: '27th Cross, Richmond', 282 | line2: 'Circle, Ring Road, London' 283 | } 284 | }, 285 | { 286 | _id: 'doc15', 287 | name: 'Dr. Amelia Hill', 288 | image: doc15, 289 | speciality: 'Dermatologist', 290 | degree: 'MBBS', 291 | experience: '1 Years', 292 | about: 'Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies. Dr. Davis has a strong commitment to delivering comprehensive medical care, focusing on preventive medicine, early diagnosis, and effective treatment strategies.', 293 | fees: 30, 294 | address: { 295 | line1: '37th Cross, Richmond', 296 | line2: 'Circle, Ring Road, London' 297 | } 298 | }, 299 | ] -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .active hr{ 6 | 7 | @apply block 8 | } 9 | ::-webkit-scrollbar{ 10 | 11 | @apply hidden 12 | } -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | import {BrowserRouter} from 'react-router-dom' 6 | 7 | createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | 12 | 13 | , 14 | ) 15 | -------------------------------------------------------------------------------- /src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const About = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default About 12 | -------------------------------------------------------------------------------- /src/pages/Appointment.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Appointment = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default Appointment 12 | -------------------------------------------------------------------------------- /src/pages/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Contact = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default Contact 12 | -------------------------------------------------------------------------------- /src/pages/Doctors.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Doctors = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default Doctors 12 | -------------------------------------------------------------------------------- /src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Header from '../components/Header' 3 | 4 | const Home = () => { 5 | return ( 6 |
7 |
8 |
9 | ) 10 | } 11 | 12 | export default Home 13 | -------------------------------------------------------------------------------- /src/pages/Login.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Login = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default Login 12 | -------------------------------------------------------------------------------- /src/pages/MyAppointments.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const MyAppointments = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default MyAppointments 12 | -------------------------------------------------------------------------------- /src/pages/MyProfile.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const MyProfile = () => { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | 11 | export default MyProfile 12 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: { 9 | colors: { 10 | 'primary': "#2196f3" 11 | } 12 | }, 13 | 14 | }, 15 | plugins: [], 16 | } 17 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | --------------------------------------------------------------------------------