---
# System prepended metadata

title: LI 2.0 Doc
tags: [LangIsland]

---

---
tags: LangIsland
---

# LI 2.0 Doc

React(NextJS) + Prisma + MySQL 
```
Lib: MUI, react-hook-form
```

### VIP
1. Github Repo: https://github.com/cwchang93/LangIsland-v2 
2. Asana: https://app.asana.com/0/1204620036551349/board 
3. 核心架構：https://blog.shibayu36.org/entry/2020/02/25/180000
4. AWS Account: 待補

### Team Member:
FM: Backend, Cloud, DevOps  bugffet@gmail.com
JW: Frontend, Backend  cwchang93@gmail.com
Ariel: Frontend  life23913349@gmail.com
Zoe: Frontend  carol331536@gmail.com
Frontend  whps40333@gmail.com

## I. Frontend

```
npm i 
npm run dev
```

.env
```
DATABASE_URL="mysql://root@localhost:3307/copyli"
# "DatabaseURL/DBNAME"
```


## <a href="https://www.prisma.io/nextjs">II. Prisma</a> 
```
Prisma是一個NodeJS & TS 的ORM，讓前端可以操作ＤＢ
```


1. 確認是否有連到prisma schema & db
```
npx prisma studio
```
上述指令輸入後，預計會打開localhost:5555

出現該畫面表示有啟動成功
![](https://hackmd.io/_uploads/BJHeXjZLh.png)

點擊table出現Prisma Error表示沒連到DB
![](https://hackmd.io/_uploads/rkk2fjWL3.png)


## III. Database 

1. 開啟DB 
![](https://hackmd.io/_uploads/Hkiu72ZUn.png)

Schema可以打開後再匯入即可


2. CREATE DATABASE
![](https://hackmd.io/_uploads/HJuqN3WLn.png)

3. DB Restore: Import Data from .sql 

![](https://hackmd.io/_uploads/Hk2Yw2WIn.png)

4. 檢查是否有資料
![](https://hackmd.io/_uploads/r1KhPn-Uh.png)

用Docker建立一個mysql 

<a href="https://drive.google.com/drive/u/0/folders/1fqMojEdJbL3UnVvtWxlJExTbfFhcM5Mm">Docker & SQL</a>

Docker mariadb up

docker-compose up mariadb



## Prisma Migration


```
1. Migration
npx prisma migrate dev --name init
```

![](https://hackmd.io/_uploads/ryErfqQt3.png)

```
2. Migrate
npx prisma migrate
```
![](https://hackmd.io/_uploads/HykqG57Fh.png)


看到migrate成功後，上面顯示Already in Sync，可以看到db裡面已經有欄位了
![](https://hackmd.io/_uploads/ryeW7cmth.png)


## DB

```
CREATE DATABASE DBJULY;
```

![](https://hackmd.io/_uploads/H1JppqQY3.png)


再次確認env對應正確的DB
![](https://hackmd.io/_uploads/B1beRcmYh.png)

RUN Migration
![](https://hackmd.io/_uploads/B1POCqmK3.png)

MYSQL
![](https://hackmd.io/_uploads/S1oeyjmtn.png)

這樣表示成功了！
![](https://hackmd.io/_uploads/H1FGJjmF3.png)



---

1. 評分機制: Host Rating 

2. 