├── .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 |
19 |
--------------------------------------------------------------------------------
/src/assets/Gastroenterologist.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/src/assets/General_physician.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/assets/Neurologist.svg:
--------------------------------------------------------------------------------
1 |
17 |
--------------------------------------------------------------------------------
/src/assets/Pediatricians.svg:
--------------------------------------------------------------------------------
1 |
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 |
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 |
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 |
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 |
6 |
--------------------------------------------------------------------------------
/src/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Halimo9812/Appointment-tracker-frontend/3a23ca9096e07b3eb404596887d88269508abb49/src/assets/profile.png
--------------------------------------------------------------------------------
/src/assets/verified_icon.svg:
--------------------------------------------------------------------------------
1 |
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 |

16 |
17 |
18 |
19 | - HOME
20 |
21 |
22 |
23 | - ALL DOCTORS
24 |
25 |
26 |
27 | - ABOUT
28 |
29 |
30 |
31 | - CONTACT
32 |
33 |
34 |
35 |
36 |
37 | {
38 | token
39 | ?
40 |

41 |

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 |
--------------------------------------------------------------------------------