Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ladunjexa/nextjs14-carepulse
CarePulse is a basic healthcare management system built with Next.js, Shadcn UI, and Appwrite 👨⚕️
https://github.com/ladunjexa/nextjs14-carepulse
appwrite healthcare-application nextjs14-typescript react-datepicker shadcn-ui
Last synced: 2 months ago
JSON representation
CarePulse is a basic healthcare management system built with Next.js, Shadcn UI, and Appwrite 👨⚕️
- Host: GitHub
- URL: https://github.com/ladunjexa/nextjs14-carepulse
- Owner: ladunjexa
- License: mit
- Created: 2024-07-11T08:09:04.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-18T15:48:56.000Z (6 months ago)
- Last Synced: 2024-10-10T23:50:56.077Z (3 months ago)
- Topics: appwrite, healthcare-application, nextjs14-typescript, react-datepicker, shadcn-ui
- Language: TypeScript
- Homepage: https://nextjs14-carepulse.vercel.app
- Size: 8.15 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js 14 CarePulse
[](https://github.com/ladunjexa/nextjs14-carepulse/releases/tag/v0.1.0)
[](https://github.com/ladunjexa/nextjs14-carepulse/stargazers)
[](https://github.com/ladunjexa/nextjs14-carepulse/forks)
[](https://github.com/ladunjexa/nextjs14-carepulse/commits)
[](https://github.com/ladunjexa/nextjs14-carepulse/pulls)
[](https://github.com/luadnjexa)
[](https://github.com/ladunjexa/nextjs14-carepulse/blob/main/LICENSE)
[](https://www.typescriptlang.org/)
[](https://github.com/ladunjexa/nextjs14-carepulse/graphs/contributors)
[](https://snyk.io/test/github/ladunjexa/nextjs14-carepulse)
## 🌐 Live Demo
Explore the live demonstration of the project:
[nextjs14-carepulse](https://nextjs14-carepulse.vercel.app/)
## 📝 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
```bash
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](#-live-demo)
- [Description](#-description)
- [Technologies Used](#-technologies-used)
- [Get Started](#-get-started)
- [Prerequisites](#-prerequisites)
- [Installation and Run Locally](#-installation-and-run-locally)
- [Scripts](#-scripts)
- [Environment Variables](#-environment-variables)
- [Deployment](#-deployment)
- [Deploy to production (manual)](#-deploy-to-production-manual)
- [Deploy on Vercel (recommended)](#-deploy-on-vercel-recommended)
- [Deploy on Netlify](#-deploy-on-netlify)
- [Contributing](#-contributing)
- [Bug / Feature Request](#-bug--feature-request)
- [Acknowledgements](#-acknowledgements)
- [Contact Us](#-contact-us)
- [License](#-license)
## ✨ Technologies Used
CarePulse is built using the following technologies:
- [TypeScript](https://www.typescriptlang.org/): TypeScript is a typed superset of JavaScript that
compiles to plain JavaScript.
- [Next.js](https://nextjs.org/): Next.js is a React framework for building server-side rendered and
statically generated web applications.
- [Appwrite](https://appwrite.io/): 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](https://tailwindcss.com/): Tailwind CSS is a utility-first CSS framework for
rapidly building custom user interfaces.
- [ESLint](https://eslint.org/): ESLint is a static code analysis tool for identifying problematic
patterns found in JavaScript code.
- [Prettier](https://prettier.io/): Prettier is an opinionated code formatter.
- [Shadcn-UI](https://ui.shadcn.com/): Shadcn UI is a React UI library that helps developers rapidly
build modern web applications.
- [Sentry](https://sentry.io/): 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](https://twilio.com/): 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](https://reactdatepicker.com/): React Datepicker is a simple and reusable
datepicker component for React.
- [Vercel](https://vercel.com/): Vercel is a cloud platform for frontend developers, providing the
frameworks, workflows, and infrastructure to build a faster, more personalized Web.
[](https://skillicons.dev)
## 🧰 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](https://nodejs.org/en/)
- [NPM](https://www.npmjs.com/get-npm)
- [Git](https://git-scm.com/downloads)
### ⚙️ 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](https://appwrite.io/) 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](https://github.com/ladunjexa/nextjs14-carepulse/blob/main/appwrite/types/index.d.ts)
> 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](https://sentry.io/) 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](https://twilio.com/) 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:
```bash
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:
```bash
npm install
```
**Step 3:**
Execute the following command in order to run the development server locally:
```bash
npm run dev
```
**Step 4:**
Open [http://localhost:3000](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](https://en.wikipedia.org/wiki/Environment_variable) are variables that are
> set in the operating system or shell, typically used to configure programs.
**CarePulse** uses [Appwrite](https://appwrite.io), [Sentry](https://sentry.io), and
[Twilio](https://twilio.com) 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:
```env
NEXT_PUBLIC_ENDPOINT=
APPWRITE_PROJECT_ID=
APPWRITE_URL=
APPWRITE_API_KEY=
APPWRITE_DATABASE_ID=
APPWRITE_STORAGE_ID=
APPWRITE_PATIENT_COLLECTION_ID=
APPWRITE_DOCTOR_COLLECTION_ID=
APPWRITE_APPOINTMENT_COLLECTION_ID=
NEXT_PUBLIC_ADMIN_PASSWORD=
SENTRY_AUTH_TOKEN=
TWILIO_ACCOUNT_SID=
TWILIO_AUTH_TOKEN=
TWILIO_PHONE_NUMBER=
```
## 🚀 Deployment
#### Deploy to production (manual)
You can create an optimized production build with the following command:
```bash
npm run build
```
#### Deploy on Vercel (recommended)
The easiest way to deploy this Next.js app is to use the
[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fladunjexa%2Fnextjs14-carepulse)
#### Deploy on Netlify
You can also deploy this Next.js app with [Netlify](https://www.netlify.com/).
[](https://app.netlify.com/start/deploy?repository=https://github.com/ladunjexa/nextjs14-carepulse)
Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
## 🔧 Contributing
[](https://github.com/ladunjexa/nextjs14-carepulse/graphs/contributors)
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](https://github.com/ladunjexa/nextjs14-carepulse/issues/new) 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](https://github.com/ladunjexa/nextjs14-carepulse/issues/new). 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](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Shadcn UI](https://ui.shadcn.com/)
- [Appwrite](https://appwrite.io/)
- [Sentry](https://sentry.io/)
- [Twilio](https://twilio.com/)
- [React Datepicker](https://reactdatepicker.com/)
- [Vercel](https://vercel.com/)
- [JavaScript Mastery](https://www.jsmastery.pro/)
## 📞 Contact Us
[](https://t.me/ladunjexa)
[](https://www.linkedin.com/in/lironabutbul)
[](https://www.instagram.com/ladunjexa)
[](https://discord.com/users/827996364331810816)
## 📋 License
**CarePulse** is open source software [licensed as MIT](https://opensource.org/license/mit/) and is
free to use — See [LICENSE](https://github.com/ladunjexa/nextjs14-carepulse/blob/main/LICENSE) for
more details.