DrugSafe FrontEnd

What is DrugSafe?

The drug problem is serious worldwide. It is a project that helps to inform and prevent the seriousness and risk of drug addiction in order to solve these problems and create a healthier society. DrugSafe provides prediction of the risk of drug abuse and side effects of facial aging when drug abuse is performed, and lists drug mortality, interest, and drugs by type.

1. Development environment

• Front: HTML, React, styled-components
• Design: Figma

2. Adopted development technology

React

• Future maintenance and reusability were considered through componentization.
• There were many overlapping parts, such as the search box, so it was possible to save resources through componentization.

styled-components

• By using conditional styling using props, we were able to apply a style appropriate to the situation.
• When built, classes were given unique names, saving the cost of establishing a naming convention.

3. Features of the page

Main

Search for drugs using the search bar

• If you search the drug name in the search box, you will be taken to a page where you can view detailed information about the drug.
• You can check drug information by quickly navigating to the main page.

chatbot Gemini

• We implemented a chatbot using Gemini, Google's AI.
• In addition to drug information, it provides information such as withdrawal symptoms management and connection to drug government help centers.

Drug Report

• Data analysis was used.
• You can find the latest news related to drugs.

Cases of unintentional drug use

• People talk about cases where they have unintentionally taken drugs against their will.
• Knowing how to do this in advance can help you avoid unintentional drug use.

DeathRate

AI Mortality Prediction

• Using AI, we predicted the mortality rate when taking drugs.
• You can check the mortality rate by selecting your age, gender, race, and medication.

AIImage

AI face transformation

• Using AI, it predicts the face when taking drugs.
• Select a face image by dragging and dropping or select a file, and AI will replace it with your face when taking the drug.
• The face can be downloaded when the predicted drug is taken.

Drugs

Classification by drug category

• Because drug treatment varies depending on the type of drug, drugs can be viewed by type.

Search for drugs using the search bar

• If you search the drug name in the search box, you will be taken to a page where you can view detailed information about the drug.

4. project structure

├── public
│   └── index.html
├── src
│   ├── assets
│   │   ├── dropdown.png
│   │   ├── left.png
│   │   └── logo.png
│   │           .
│   │           .
│   │           .
│   ├── components
│   │   ├── death
│   │   │   ├── CheckBox.jsx
│   │   │   └── SelectBox.jsx
│   │   ├── detail
│   │   │   └──ImageBox.jsx
│   │   ├── drugs
│   │   │   ├── DrugItem.jsx
│   │   │   ├── DrugList.jsx
│   │   │   └── TabComponent.jsx
│   │   └── main
│   │   │   ├── CaseItem.jsx
│   │   │   ├── CaseSlide.jsx
│   │   │   ├── chatbot.jsx
│   │   │   ├── Inro.jsx
│   │   │   ├── Report.jsx
│   │   │   ├── SearchBar.jsx
│   │   │   └── UseCase.jsx
│   ├── pages
│   │   ├── AIImage.jsx
│   │   ├── DeathRate.jsx
│   │   ├── Detail.jsx
│   │   ├── Drugs.jsx
│   │   ├── Main.jsx
│   │   └── index.jsx
│   ├── shared
│   │   ├── Footer.jsx
│   │   ├── GlobalStyle.jsx
│   │   ├── Header.jsx
│   │   └── Router.jsx
│   ├── App.jsx
│   ├── index.js
│   └── setupProxy.js
├── .gitignore
├──README.md
├──package-loc.json
└── package.json