Next.js 14 CarePulse

🌐 Live Demo

Explore the live demonstration of the project: nextjs14-carepulse

📝 Description

CarePulse is an healthcare management application that allows patients to schedule their appointments, and also allows doctors to manage their appointments and patients. The application is built with Next.js, Tailwind CSS, Shadcn UI, Appwrite, Twilio and Sentry.

Folder Structure

nextjs14-carepulse/
├── app/
│   ├── admin/
│   │   └── page.tsx
│   ├── patients/
│   │   └── [id]/
│   │       ├── new-appointment/
│   │       │   └── page.tsx
│   │       └── register/
│   │           └── page.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── global-error.tsx
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── atoms/
│   │   ├── file-uploader.tsx
│   │   ├── form-field.tsx
│   │   ├── form-submit.tsx
│   │   ├── stat-card.tsx
│   │   └── status-badge.tsx
│   ├── forms/
│   │   ├── appointment-form.tsx
│   │   ├── patient-form.tsx
│   │   └── register-form.tsx
│   ├── modals/
│   │   ├── appointment-modal.tsx
│   │   └── auth-modal.tsx
│   ├── providers/
│   │   └── theme-provider.tsx
│   ├── table/
│   │   ├── columns.tsx
│   │   └── data-table.tsx
│   └── ui/ (generated by Shadcn UI)
│       └── [[...]].{tsx,ts}
├── appwrite/
│   ├── actions/
│   │   ├── appointment.action.ts
│   │   └── patient.action.ts
│   ├── conf/
│   │   └── index.ts
│   ├── types/
│   │   └── index.d.ts
│   ├── client.ts
│   └── env.ts
├── constants/
│   └── index.ts
├── lib/
│   ├── validation.ts
│   └── utils.ts
├── public/
│   ├── assets/
│   │   ├── gifs/[[...]].gif
│   │   ├── icons/[[...]].svg
│   │   └── images/[[...]].png
│   ├── next.svg
│   └── vercel.svg
├── types/
│   └── index.d.ts
├── .env.local
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc
├── components.json
├── instrumentation.ts
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── README.md
├── sentry.client.config.ts
├── sentry.edge.config.ts
├── sentry.server.config.ts
├── tailwind.config.ts
└── tsconfig.json

📖 Table of Contents

Table of Contents

• Live Demo
• Description
• Technologies Used
• Get Started
  • Prerequisites
  • Installation and Run Locally
  • Scripts
• Environment Variables
• Deployment
  • Deploy to production (manual)
  • Deploy on Vercel (recommended)
  • Deploy on Netlify
• Contributing
  • Bug / Feature Request
• Acknowledgements
• Contact Us
• License

✨ Technologies Used

CarePulse is built using the following technologies:

• TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• Next.js: Next.js is a React framework for building server-side rendered and statically generated web applications.
• Appwrite: Appwrite is a secure end-to-end backend server for Web, Mobile, and Flutter developers that is packaged as a set of Docker containers for easy deployment.
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
• ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
• Prettier: Prettier is an opinionated code formatter.
• Shadcn-UI: Shadcn UI is a React UI library that helps developers rapidly build modern web applications.
• Sentry: Sentry is a developer-first error tracking and performance monitoring platform that helps developers see what actually matters, solve quicker, and learn continuously about their applications.
• Twilio: Twilio is a cloud communications platform as a service company that allows software developers to programmatically make and receive phone calls, send and receive text messages, and perform other communication functions using its web service APIs.
• React Datepicker: React Datepicker is a simple and reusable datepicker component for React.
• Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

🧰 Get Started

To get this project up and running in your development environment, follow these step-by-step instructions.

📋 Prerequisites

In order to install and run this project locally, you would need to have the following installed on your local machine.

• Node.js
• NPM
• Git

⚙️ Installation and Run Locally

Step 0:

Important

• the application uses Appwrite as a backend service for Authentication, Database, Storage and Messaging, therefore you need to create account here and sets the APPWRITE_PROJECT_ID, APPWRITE_URL, and APPWRITE_API_KEY environment variables in .env file.
• to understand how to design the Appwrite collections, refer to the Appwrite Types file. add the following environment variables to the .env file: APPWRITE_DATABASE_ID, APPWRITE_STORAGE_ID, APPWRITE_PATIENT_COLLECTION_ID, APPWRITE_DOCTOR_COLLECTION_ID, and APPWRITE_APPOINTMENT_COLLECTION_ID.
• the application uses Sentry for Error Tracking and Monitoring, therefore, you need to create Sentry account here and sets the SENTRY_AUTH_TOKEN environment variable in .env file.
• the application uses Twilio for SMS, therefore, you need to create Twilio account here and sets the TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, and TWILIO_PHONE_NUMBER environment variables in .env file.

Step 1:

Download or clone this repo by using the link below:

git clone https://github.com/ladunjexa/nextjs14-carepulse.git

Step 2:

Execute the following command in the root directory of the downloaded repo in order to install dependencies:

npm install

Step 3:

Execute the following command in order to run the development server locally:

npm run dev

Step 4:

Open http://localhost:3000 with your browser to see the result.

📜 Scripts

All scripts are defined in the package.json file. Here is a list of all scripts:

Script	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run start	Start your production site locally
npm run lint	Run ESLint

🔒 Environment Variables

Environment variables[^14] can be used for configuration. They must be set before running the app.

Environment variables are variables that are set in the operating system or shell, typically used to configure programs.

CarePulse uses Appwrite, Sentry, and Twilio as external services. You need to create an account on each of these services and get the required credentials to run the app.

Create a .env file in the root directory of the project and add the following environment variables:

NEXT_PUBLIC_ENDPOINT=<NEXT_PUBLIC_ENDPOINT>

APPWRITE_PROJECT_ID=<APPWRITE_PROJECT_ID>
APPWRITE_URL=<APPWRITE_URL>
APPWRITE_API_KEY=<APPWRITE_API_KEY>

APPWRITE_DATABASE_ID=<APPWRITE_DATABASE_ID>
APPWRITE_STORAGE_ID=<APPWRITE_STORAGE_ID>

APPWRITE_PATIENT_COLLECTION_ID=<APPWRITE_PATIENT_COLLECTION_ID>
APPWRITE_DOCTOR_COLLECTION_ID=<APPWRITE_DOCTOR_COLLECTION_ID>
APPWRITE_APPOINTMENT_COLLECTION_ID=<APPWRITE_APPOINTMENT_COLLECTION_ID>

NEXT_PUBLIC_ADMIN_PASSWORD=<NEXT_PUBLIC_ADMIN_PASSWORD>

SENTRY_AUTH_TOKEN=<SENTRY_AUTH_TOKEN>

TWILIO_ACCOUNT_SID=<TWILIO_ACCOUNT_SID>
TWILIO_AUTH_TOKEN=<TWILIO_AUTH_TOKEN>
TWILIO_PHONE_NUMBER=<TWILIO_PHONE_NUMBER>

🚀 Deployment

Deploy to production (manual)

You can create an optimized production build with the following command:

npm run build

Deploy on Vercel (recommended)

The easiest way to deploy this Next.js app is to use the Vercel Platform.

Deploy on Netlify

You can also deploy this Next.js app with Netlify.

Check out Next.js deployment documentation for more details.

🔧 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

To fix a bug or enhance an existing module, follow these steps:

1. Fork the repo
2. Create a new branch (git checkout -b improve-feature)
3. Make the appropriate changes in the files
4. Commit your changes (git commit -am 'Improve feature')
5. Push to the branch (git push origin improve-feature)
6. Create a Pull Request 🎉

📩 Bug / Feature Request

If you find a bug (failure of a module to execute its intended function), kindly open an issue here by including the issue with a title and clear description.

If you'd like to request a new function, feel free to do so by opening an issue here. Please include sample queries and their corresponding results.

💎 Acknowledgements

I'd like to express my gratitude to the following people who helped me with this project and made it possible:

• Next.js
• Tailwind CSS
• Shadcn UI
• Appwrite
• Sentry
• Twilio
• React Datepicker
• Vercel
• JavaScript Mastery

📞 Contact Us

📋 License

CarePulse is open source software licensed as MIT and is free to use — See LICENSE for more details.