VISVESVARAYA TECHNOLOGICAL UNIVERSITY
Jnana Sangama, Belagavi - 590018
Internship Second In-Term Review Report
on
“DOCCURE - DOCTOR OPD APPOINTMENT
WEBSITE USING VUE.JS & PHP ”
Submitted in partial fulfillment for the award of the degree of
BACHELOR OF ENGINEERING
In
INFORMATION SCIENCE & ENGINEERING
by
RATHAN
4MT21IS032
Internship
at
Intellogic Software Pvt Ltd
Internal Guide External Guide
Rajesh N Kamath Chethan Shetty
SR ASST. Professor Intellogic Software Pvt Ltd
Dept. of ISE
DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING
MANGALORE INSTITUTE OF TECHNOLOGY & ENGINEERING
(A unit of Rajalaxmi Education Trust ®, Mangalore)
Autonomous Institute Affiliated to V.T.U., Belagavi, Approved by AICTE, New Delhi
Accredited by NAAC with A+ Grade & ISO 9001:2015 Certified Institution
2024-25
TABLE OF CONTENTS
Chapter No. Title Page No.
1. Introduction 1
2. Project Overview & Technology Stack 2-3
3. Tasks Completed 4
4. Conclusion 5
Department of ISE, MITE
DOCCURE - Doctor OPD Appointment Website using Vue.js & PHP
1.Introduction
The project titled “Doccure – Doctor OPD Appointment Website” was undertaken as part of
the internship program to gain hands-on experience in full-stack web development, with a
particular focus on frontend development using Vue.js and backend development using
PHP. The primary objective of this project was to build a responsive, user-friendly, and real-
time doctor appointment platform that enables patients to seamlessly register, browse doctors,
and book consultations online.
This project draws inspiration from the Doccure template—a modern UI theme designed for
healthcare solutions. My task was to convert the static HTML template into a dynamic,
component-based Vue.js application, integrate routing using Vue Router, and handle user
interactions through JavaScript. Additionally, the backend logic was handled using PHP for
processing form data, managing user sessions, and connecting to a MySQL database.
The project started with the setup of the Vue.js environment, followed by the modular
conversion of HTML pages like the login, patient registration (multi-step), and doctor list
pages into Vue components. Each component was designed with scoped styles and reused where
applicable to maintain consistency and performance.
The backend using PHP facilitated user authentication, form handling, and basic CRUD
operations. Throughout the development process, I applied my knowledge of HTML, CSS,
JavaScript, Vue.js, and PHP to structure a clean and functional application that mimics real-
world healthcare appointment systems.
This internship has so far enhanced my understanding of component-based architecture,
frontend-backend integration, and real-world deployment processes. The following sections will
detail the work done and the progress achieved during the course of this project.
Department of ISE, MITE 1
DOCCURE - Doctor OPD Appointment Website using Vue.js & PHP
2.Project Overview & Technology Stack
The Doccure – Doctor OPD Appointment Website is a modern, responsive web application
developed to streamline the interaction between patients and healthcare professionals. It is
designed to enable patients to search for doctors, book appointments, register online, and
manage their profiles—all from a user-friendly digital platform. Inspired by the Doccure HTML
template, this project focuses on real-world features expected in an Online Patient-Doctor
Consultation Portal and serves as a full-stack internship project applying frontend and backend
development skills.
The main goal of this project was to convert a static HTML template into a dynamic,
component-based application using Vue.js, while also integrating PHP for handling backend
logic such as form processing and database interaction. This project simulates a working model
for a digital outpatient department (OPD), allowing patients to experience a seamless digital
onboarding and appointment flow.
The website is built with scalability and maintainability in mind, utilizing a modular
architecture, clean UI/UX principles, and modern development practices. It follows a multi-step
patient registration process, supports doctor listings with filters, and includes appointment
booking functionality, all while maintaining responsive behavior across different screen sizes.
This project was executed as part of an internship program and helped build proficiency in
integrating technologies, optimizing user interactions, and building an end-to-end solution. The
key learning outcome included practical experience in Vue.js component lifecycle, router-based
navigation, form handling, PHP scripting, and frontend-backend data communication.
Department of ISE, MITE 2
DOCCURE - Doctor OPD Appointment Website using Vue.js & PHP
Department of ISE, MITE 3
DOCCURE - Doctor OPD Appointment Website using Vue.js & PHP
3. Tasks Completed
As part of my internship project, I successfully developed and structured the Doccure – Doctor
OPD Appointment Website using Vue.js for the frontend and PHP for backend simulation.
The project commenced with an in-depth analysis of the Doccure HTML template, which was
used as a base for building a dynamic, scalable frontend using Vue. I began by setting up the
development environment using Vue CLI, integrating Vue Router for single-page application
routing, and organizing the folder structure for components, assets, and views.
One of the first milestones achieved was converting the static Login page into a Vue component
(Login.vue) with proper routing and validation. I then moved on to developing the multi-step
patient registration flow, where each step (like uploading a profile picture or filling out patient
details) was created as an independent Vue component (`PatientRegisterStep1.vue`,
`PatientRegisterStep2.vue`, etc.). Components like `StepList.vue` and `ProfileUpload.vue` were
developed to ensure reusability and maintainability.
During the frontend phase, I applied custom CSS3 and Bootstrap 5 to design responsive and
user-friendly interfaces. Using JavaScript and Vue's reactivity, I implemented real-time
validations, form state management, and image preview functionality. A separate
`DoctorList.vue` component was created to dynamically render doctor profiles using mock data
with `v-for`.
For the backend simulation, I used “core PHP” to handle form data submitted from the frontend.
I created an endpoint that received patient registration details using the “Fetch API” via a POST
request and simulated data storage. This backend logic is prepared to be extended for “MySQL
database” integration in the future. The website was deployed using “Localhost:8000” for
frontend hosting and “XAMPP” for testing backend functionality locally. Throughout this
process, I maintained clean code practices, structured documentation, and incremental testing to
ensure consistency and reliability across the project.
Department of ISE, MITE 4
DOCCURE - Doctor OPD Appointment Website using Vue.js & PHP
Conclusion
This project has been a comprehensive and enriching learning experience that significantly
improved my skills in full-stack web development. Working on the Doccure – Doctor OPD
Appointment Website enabled me to apply my theoretical knowledge to a real-world use case,
bridging the gap between classroom learning and industry practices. I gained hands-on
experience in developing modern web applications using Vue.js, where I learned how to build
reusable components, manage application state, and implement routing for multi-step processes.
On the backend, working with PHP enhanced my understanding of server-side scripting and
data processing. I also improved my proficiency in HTML, CSS, Bootstrap, and JavaScript,
which helped me design responsive layouts and dynamic user interfaces. By deploying the
application and testing it across various environments, I also gained exposure to deployment
practices and debugging techniques.
Overall, this internship project helped me grow as a developer by building a solid foundation in
component-based architecture, user experience design, and API interaction. It also fostered soft
skills like time management, task planning, problem-solving, and independent learning. I now
feel more confident and prepared to take on larger development projects and continue my
journey in the field of software engineering.
Department of ISE, MITE 5
