Skip to content

Latest commit

 

History

History
77 lines (47 loc) · 2.68 KB

07-frontend.en.md

File metadata and controls

77 lines (47 loc) · 2.68 KB
Raw

STEP7: Implement a simple Mercari webapp as frontend

1. Build local environment

Install Node v20 from below. (20.11.0 LTS is recommended as of Jan 2024)

https://nodejs.org/en/

If you would like to install multiple versions of Node, use nvs.

Run node -v and confirm that v20.0.0 or above is displayed.

Move to the following directory and install dependencies with the following command.

cd typescript/simple-mercari-web
npm ci

After launching the web application with the following command, check your web app from your browser at http://localhost:3000/.

npm start

Run the backend servers in Python/Go as described in Step3. This simple web application allows you to do two things

  • Add a new item (Listing)
  • View the list of itemas (ItemList)

These functionalities are carved out as components called src/components/Listing and src/components/ItemList, and called from the main App.tsx.

📌 Sample code is in React but the knowledge of React is not necessary.

(Optional) Task 1: Add a new item

Use the listing form to add a new item. In this screen, you can input name, category and a image for a new item.

If your API from STEP3 only accepts name and category, modify typescript/simple-mercari-web/src/components/Listing/Listing.tsx and delete the image field.

(Optional) Task 2. Show item images

In this screen, item images are all rendered as Build@Mercari logo. Specify the item image as http://localhost:9000/image/<item_id>.jpg and see if they can be displayed on the web app.

(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 specified in App.css and they are applied by className attribute (e.g. <div className='Listing'></div>).

.Listing {
  ...
}
.ItemList {
  ...
}

Try editing the HTML tags returned in each component and see how the UI changes.

(Optional) Task 4. Change the UI for ItemList

Current ItemList shows one column of items sequentially. Use the following reference to change this style into a grid system where multiple items are displayed in the same row.

📖 References

Next

STEP6: Run frontend and API using docker-compose