change(docs): apply small fixes (#116)

## What
This PR contains some small fixes in the documentation. I'd appreciate
you to review when you have time 🙇

- unify mixed `image_name` and `image_filename` with `image_name` in
abc52fd
- rename the table name from `category` to `categories` in
a417217
   - the existing `items` table is a plural form.
   - I don't think mixed naming convention is good.
- fix typos in
f05800c

## CHECKS ⚠️

Please make sure you are aware of the following.

- [ ] **The changes in this PR doesn't have private information

document/01-git.en.md

@@ -30,7 +30,7 @@ In this step, we will learn how to use Git and Github.
 2. Set your name and email address using git config. Check if your email address shows up.
    ```shell
    $ git config user.email
-   <your-email-adress>
+   <your-email-address>
    ```
 
 ## Use basic commands in Git

document/01-git.ja.md

@@ -28,7 +28,7 @@
 2. git configに自分の名前とemailアドレスを設定します。以下のコマンドを実行してあなたのemailアドレスが表示されればOKです。
    ```shell
    $ git config user.email
-   <your-email-adress>
+   <your-email-address>
    ```
 
 ## Gitの基本コマンドを使う

document/03-api.en.md

@@ -44,7 +44,7 @@ $ curl -X POST \
 
 **:beginner: Points**
 
-* Understand the difference betweeen GET and POST requests.
+* Understand the difference between GET and POST requests.
 * Why do we not see `{"message": "item received: <name>"}` on accessing `http://127.0.0.1:9000/items` from your browser?
   * What is the **HTTP Status Code** when you receive these responses?
   * What do different types of status code mean?
@@ -60,7 +60,7 @@ Make an endpoint to add a new item
 * (EN) [RESTful web API design](https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design)
 * (EN) [HTTP response status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)
 
-The endpoint already implemented (`POST /items`) takes `name` as an argument. Modify the API such that it also accepts `category` informaton.
+The endpoint already implemented (`POST /items`) takes `name` as an argument. Modify the API such that it also accepts `category` information.
 
 * name: Name of the item (string)
 * category: Category of the item (string)
@@ -109,7 +109,7 @@ curl -X POST \
 ```
 
 ```json
-{"items": [{"name": "jacket", "category": "fashion", "image_filename": "510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg"}, ...]}
+{"items": [{"name": "jacket", "category": "fashion", "image_name": "510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg"}, ...]}
 ```
 
 

document/03-api.ja.md

@@ -114,7 +114,7 @@ curl -X POST \
 
 
 ```json
-{"items": [{"name": "jacket", "category": "fashion", "image_filename": "510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg"}, ...]}
+{"items": [{"name": "jacket", "category": "fashion", "image_name": "510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg"}, ...]}
 ```
 
 
@@ -129,7 +129,7 @@ curl -X POST \
 
 ```shell
 $ curl -X GET 'http://127.0.0.1:9000/items/1'
-{"name": "jacket", "category": "fashion", "image_filename": "..."}
+{"name": "jacket", "category": "fashion", "image_name": "..."}
 ```
 
 ## 6. (Optional) Loggerについて調べる

document/04-database.en.md

@@ -20,7 +20,7 @@ We will use a database called **SQLite**.
   * category: string (Category of the item)
   * image_name: string (Filename of the imeage)
 
-Change the endpoints `GET /items` and `POST /items` such that items are saved into the database and can be returned based on GET request. Add `mercari.sqlite3` to your `.gitignore` such that it is not commited. `items.db` shoud be commited. 
+Change the endpoints `GET /items` and `POST /items` such that items are saved into the database and can be returned based on GET request. Add `mercari.sqlite3` to your `.gitignore` such that it is not committed. `items.db` should be committed. 
 
 **:beginner: Points**
 
@@ -44,12 +44,12 @@ Since `GET items` should return the category name as before, **join** these two
 
 **items table**
 
-| id   | name   | category_id | image_filename                                                       |
+| id   | name   | category_id | image_name                                                       |
 | :--- | :----- | :---------- | :------------------------------------------------------------------- |
 | 1    | jacket | 1           | 510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg |
 | 2    | ...    |             |                                                                      |
 
-**category table**
+**categories table**
 
 | id   | name    |
 | :--- | :------ |

document/04-database.ja.md

@@ -59,12 +59,12 @@ $ curl -X GET 'http://127.0.0.1:9000/search?keyword=jacket'
 
 **items table**
 
-| id   | name   | category_id | image_filename                                                       |
+| id   | name   | category_id | image_name                                                       |
 | :--- | :----- | :---------- | :------------------------------------------------------------------- |
 | 1    | jacket | 1           | 510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg |
 | 2    | ...    |             |                                                                      |
 
-**category table**
+**categories table**
 
 | id   | name    |
 | :--- | :------ |

document/05-docker.en.md

@@ -25,9 +25,9 @@ In this step, we will learn how to use Docker.
 $ docker run -v $(pwd)/data/text_en.png:/tmp/img.png wakanapo/tesseract-ocr tesseract /tmp/img.png stdout -l eng
 ```
 
-What message was diplayed after running this command?
+What message was displayed after running this command?
 
-Running this command downlods the corresponding docker image from [the registry](https://hub.docker.com/repository/docker/wakanapo/tesseract-ocr) to your local machine.
+Running this command downloads the corresponding docker image from [the registry](https://hub.docker.com/repository/docker/wakanapo/tesseract-ocr) to your local machine.
 
 This docker image has a functionality to read texts from images (OCR).
 Using a docker allows you to run applications using an environment built within the docker image without altering your local system.
@@ -58,7 +58,7 @@ $ docker help
 Docker will download images automatically if they are not found on your local system. You can also download the image beforehand.
 
 
-**Look for a commmand to download an image from the registry and download an image called `alpine`**
+**Look for a command to download an image from the registry and download an image called `alpine`**
 
 Check that you can see `alpine` in the list of images.
 
@@ -111,7 +111,7 @@ Run the image with the modified `Dockerfile`, check if the same message is displ
 
 The environment within the docker image should be the same as STEP2-2 after STEP4-5.
 
-**Mofify `dockerfile` to copy necessary files and install dependencies such that you can run the listing API on docker**
+**Modify `dockerfile` to copy necessary files and install dependencies such that you can run the listing API on docker**
 
 
 `$ docker run -d -p 9000:9000 build2024/app:latest`

document/07-frontend.en.md

@@ -43,7 +43,7 @@ In this screen, item images are all rendered as Build@Mercari logo. Specify the
 
 
 ### (Optional) Task 3. Change the styling with HTML and CSS
-These two components are styled by CSS. To see what types of changes can be made, try modifying `ItemList` component CSS. These are specifed in `App.css` and they are applied by `className` attribute (e.g. `<div className='Listing'></div>`).
+These two components are styled by CSS. To see what types of changes can be made, try modifying `ItemList` component CSS. These are specified in `App.css` and they are applied by `className` attribute (e.g. `<div className='Listing'></div>`).
 ```css
 .Listing {
   ...

document/08-docker-compose.en.md

@@ -56,13 +56,13 @@ Make a new file `docker-compose.yml` considering the following points.
 * Port numbers
     * API : 9000
     * Frontend : 3000
-* Connecting betweeen services
+* Connecting between services
     * Frontend should send requests to an environment variable `REACT_APP_API_URL`
     * While API will not send requests to frontend, [CORS](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS) needs to be set up such that frontend knows where the requests are coming from
     * Set an environment variable `FRONT_URL` for frontend URL
 
 
 Run `docker-compose up` and check if the following operates properly
-- [http://localhost:3000/](http://localhost:3000/) displayes the frontend page
+- [http://localhost:3000/](http://localhost:3000/) displays the frontend page
 - You can add an new item (Listing)
 - You can view the list of all items (ItemList)

python/main.py

@@ -9,34 +9,37 @@
 logger = logging.getLogger("uvicorn")
 logger.level = logging.INFO
 images = pathlib.Path(__file__).parent.resolve() / "images"
-origins = [ os.environ.get('FRONT_URL', 'http://localhost:3000') ]
+origins = [os.environ.get("FRONT_URL", "http://localhost:3000")]
 app.add_middleware(
     CORSMiddleware,
     allow_origins=origins,
     allow_credentials=False,
-    allow_methods=["GET","POST","PUT","DELETE"],
+    allow_methods=["GET", "POST", "PUT", "DELETE"],
     allow_headers=["*"],
 )
 
+
 @app.get("/")
 def root():
     return {"message": "Hello, world!"}
 
+
 @app.post("/items")
 def add_item(name: str = Form(...)):
     logger.info(f"Receive item: {name}")
     return {"message": f"item received: {name}"}
 
-@app.get("/image/{image_filename}")
-async def get_image(image_filename):
+
+@app.get("/image/{image_name}")
+async def get_image(image_name):
     # Create image path
-    image = images / image_filename
+    image = images / image_name
 
-    if not image_filename.endswith(".jpg"):
+    if not image_name.endswith(".jpg"):
         raise HTTPException(status_code=400, detail="Image path does not end with .jpg")
 
     if not image.exists():
         logger.debug(f"Image not found: {image}")
         image = images / "default.jpg"
 
-    return FileResponse(image)
+    return FileResponse(image)

typescript/simple-mercari-web/src/components/ItemList/ItemList.tsx

@@ -4,7 +4,7 @@ interface Item {
   id: number;
   name: string;
   category: string;
-  image_filename: string;
+  image_name: string;
 };
 
 const server = process.env.REACT_APP_API_URL || 'http://127.0.0.1:9000';