GithubLinkedIn

E-Commerce Marketplace

Question

Design an e-commerce website that allows users to browse products and purchase them.

Requirements

browse products and purchase๋ฅผ ์ถฉ์กฑ ํ•  ์ˆ˜ ์žˆ๋Š” ์š”๊ตฌ์‚ฌํ•ญ์œผ๋กœ ์ž‘์„ฑํ•ด์•ผํ•œ๋‹ค.

  1. Product list page & product detailed page (PLP&PDP)

PLP

PLP

  • SEO๋ฅผ ํ†ตํ•ด ์œ ์ €๊ฐ€ ์‰ฝ๊ฒŒ ์™ธ๋ถ€์—์„œ ์ง„์ž…ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•œ๋‹ค.

    • SSR์„ ํ†ตํ•ด SEO๋ฅผ ์ตœ์ ํ™”ํ•˜๋ฉฐ ์ ์ ˆํžˆ CSR์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๊ตฌ์„ฑ

  • ์œ ์ €๋Š” ์‰ฝ๊ฒŒ ์›ํ•˜๋Š” ์ƒํ’ˆ์„ ์ฐพ์„ ์ˆ˜ ์žˆ์–ด์•ผํ•œ๋‹ค.

    • ์œ ์ €๋Š” ์‰ฝ๊ฒŒ ์ƒํ’ˆ์„ ๋น„๊ตํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•œ๋‹ค.

      • order(sort), filter, ์ƒํ’ˆ ์ •๋ณด

      • ์ƒํ’ˆ DB ๊ตฌ์„ฑ

        • ๋ธŒ๋žœ๋“œ, ์นดํ…Œ๊ณ ๋ฆฌ, ์ƒํ’ˆ ์˜ต์…˜ ๋“ฑ SKU ERD ์„ค๊ณ„

    • ์œ ์ €๋Š” ์‰ฝ๊ฒŒ ์›ํ•˜๋Š” ์ƒํ’ˆ์„ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•œ๋‹ค.

      • autofill, ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ

    • ํŽ˜์ด์ง€๋„ค์ด์…˜

      • ๋ฌดํ•œ ์Šคํฌ๋กค vs ํŽ˜์ด์ง€๋„ค์ด์…˜

  • ๊ด‘๊ณ  ๋ฐ ๋„›์ง€

PDP

PDP

  • ์˜ต์…˜ ๋…ธ์ถœ

  1. Cart

  1. Checkout

LogoE-commerce Marketplace (e.g. Amazon) | Front End System DesignGreatFrontEnd

Last updated