andrewchiull / 112-1-unit1-trello-clone

Web Programming HW#1

Reference

• (Frontend linter init settings for React) ntuee-web-programming/112-1-unit1-trello-clone

• ntuee-web-programming/112-1-unit1-todo-list // DEPRECATED

  • local README

Run the project

If you only want to run the project, you can follow the steps below.

1. Clone the project

Please find the .zip download link of HW1: My Diary at https://wp.ee.ntu.edu.tw/.

2. Install dependencies

cd backend
yarn

3. Run the server

yarn start

4. Open the frontend

Open frontend/index.html by clicking it in your file explorer.

Or if you're on ubuntu, you can run the following command to open it in your browser.

cd frontend
xdg-open index.html

If you're on macOS, you can run the following command to open it in your browser.

cd frontend
open index.html

Notes

Coding with MongoDB

ref

export const getTodos const method

ref

要用 const 來保證這個 method 沒有 side effects，即不會更動到 caller。

Destructuring Assignments

ref

const { title, description } = req.body;

// equals to

const title = req.body.title;
const description = req.body.description;

(req, res) 怎麼知道 caller method 是 put?

ref

因此，只要前端打過來的是，例如：…/api/todos/12345，那 id 就會收到 12345

建立一個 “Promise” 的 MongoDB 連線！

其實應該可以用 async/await ，老師說之後示範。

Git 版本控制教學 - submodule - MyApollo

[前端筆記] 使用 Node.js 時噴錯 -Error: listen EADDRINUSE: address already in use 127.0.0.1:3000 | by Bonnie Wang | Medium

Problems

1. lint 的部分應該放在 setup 後面？
2. 這裡 merge 有問題

Setup

Frontend Setup

1. Create a vite project

$ yarn create vite
yarn create v1.22.17
✔ Project name: … frontend
✔ Select a framework: › React
✔ Select a variant: › TypeScript

cd frontend
yarn
yarn dev

Backend Setup

1. Create a backend folder

mkdir backend

2. Create a package.json file

cd backend
yarn init -y

3. Install dependencies

yarn add express cors mongoose dotenv body-parser

4. Typescript setup

yarn add -D ts-node typescript @types/cors @types/node @types/express

-D: dev only

Then we create a tsconfig.json file

yarn tsc --init

5. Create an entry point

mkdir src
touch src/index.ts

6. Add scripts to package.json

"scripts": {
  "dev": "nodemon src/index.ts",
  "start": "ts-node src/index.ts",
  "lint": "eslint src",
  "format": "prettier --write src"
}

Do this after the linters are set up

Add the following line to tsconfig.json. Now we can import from @lib/* instead of ../../../lib/*.

{
  "compilerOptions": {
    ...
    "@lib/*": ["../lib/*"], // <--- Do NOT add this line

    // Use This Instead // ISSUE
    "paths": {
      "@lib/*": ["../lib/*"]
    }
    ...
  }
}