Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/team-mansumugang/mansumugang-frontend

만수무강 서비스의 웹 어플리케이션입니다.
https://github.com/team-mansumugang/mansumugang-frontend

fcm kakaomap pwa reactjs

Last synced: about 2 months ago
JSON representation

만수무강 서비스의 웹 어플리케이션입니다.

Awesome Lists containing this project

README 

        
![Logo](https://github.com/user-attachments/assets/c6071a1f-6765-49b6-b293-3980e298e25b)



# 만수무강 프론트엔드 WebApp



**고령의 환자와 보호자 모두가 안심할 수 있는** 공간을 만들기 위한 안심케어 및 커뮤니티 서비스 **만수무강 웹앱입니다.**



## 📥 Installation



Follow these steps to install and run the Mansumugang frontend web application



```bash

    git clone https://github.com/Team-MansuMugang/mansumugang-frontend.git

    cd mansumugang-frontend

    npm install



    npm run dev

```



This will start the application in development mode, and you can access it by navigating to the provided local address (usually http://localhost:3000) in your browser.



## 🌟 Features



- **약 일정 관리 및 기록**: 약 복용 스케줄 설정 및 복약 기록을 통해 케어 맴버가 약을 놓치지 않고 복용할 수 있도록 지원합니다.

- **병원 일정 관리 및 기록**: 케어 맴버의 병원 예약 일정 관리와 방문 기록을 한눈에 확인할 수 있는 기능을 제공합니다.

- **음성 메시지 기능**: 케어 맴버와 음성 메시지를 통해 편리한 커뮤니케이션 할 수 있는 도구입니다.

- **음성 메시지 텍스트 변환 (ASR)**: 녹음된 음성을 자동으로 텍스트로 변환하여 편리성을 높입니다.

- **건강 커뮤니티**: 다양한 건강 관련 주제에 대해 다른 사용자들과 정보를 공유하고 소통할 수 있는 커뮤니티 기능입니다.

- **사용자 계정 관리**: 보호자와 케어 멤버를 위한 손쉬운 회원가입, 계정 관리 및 탈퇴 기능을 제공합니다.



## 🛠️ Main Tech Stack



- **React**: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리.

- **JavaScript**: 웹 애플리케이션의 로직을 구현하는 핵심 언어.

- **CSS**: 웹 페이지의 스타일링과 레이아웃을 관리하는 언어.



## 📚 Additional Libraries



- **immer**: 불변 상태 관리를 쉽게 할 수 있도록 돕는 라이브러리.

- **react-daum-postcode**: 다음 우편번호 서비스를 React와 연동하기 위한 라이브러리.

- **react-kakao-maps-sdk**: 카카오 맵 API를 React에서 쉽게 사용할 수 있게 해주는 라이브러리.

- **react-router-dom**: React 애플리케이션 내에서 라우팅을 관리하는 라이브러리.

- **react-toastify**: 사용자에게 토스트 알림 메시지를 띄우기 위한 라이브러리.

- **react-zoom-pan-pinch**: 이미지나 요소를 확대, 축소, 이동할 수 있게 해주는 라이브러리.

- **storybook**: UI 컴포넌트를 독립적으로 개발하고 문서화하는 데 사용하는 도구.

- **vitest**: Vite 프로젝트에 최적화된 테스트 프레임워크.

- **firebase**: 웹 애플리케이션에 푸시 알림 기능을 구현하기 위해 사용되는 라이브러리.



## 🎥 Demo



Insert gif or link to demo



[![Video Label](http://img.youtube.com/vi/6WP0Y-pIVe8/0.jpg)](https://youtu.be/6WP0Y-pIVe8?si=HEJ8IRgIGGOGIK5Q)



## 🖼️ Screenshots



|   |   |

|---|---|

| ![Image 1](https://github.com/user-attachments/assets/19ba0343-79c5-469f-861e-f92246100f98) | ![Image 2](https://github.com/user-attachments/assets/bab5a9b3-f579-4e4a-964b-09b9e04a42da) |

| ![Image 3](https://github.com/user-attachments/assets/1c927c51-c48e-423e-9823-98f7e16794e8) | ![Image 6](https://github.com/user-attachments/assets/eb388b02-a65e-409e-99fc-f1121e5c545e) |

| ![Image 7](https://github.com/user-attachments/assets/078b7231-c614-40c8-8488-2cab5e01dc39) | ![Image 9](https://github.com/user-attachments/assets/cd95516e-95ca-4d02-8e23-2d846dd5f5fb) |



## 🧑‍💻 Authors



- [@DUKY8N](https://www.github.com/octokatherine)

- [@Hossdd](https://github.com/Hossdd)

- [@minnnisu](https://github.com/minnnisu)