[{"data":1,"prerenderedAt":323},["ShallowReactive",2],{"portfolio-freshmarket-platform":3,"all-portfolio":300},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":7,"body":9,"_type":294,"_id":295,"_source":296,"_file":297,"_stem":298,"_extension":299},"\u002Fportfolio\u002Ffreshmarket-platform","portfolio",false,"","Freshmarket Platform",{"type":10,"children":11,"toc":284},"root",[12,17,41,46,52,57,62,82,94,106,112,124,129,252,266,272],{"type":13,"tag":14,"props":15,"children":16},"element","hr",{},[],{"type":13,"tag":18,"props":19,"children":21},"h2",{"id":20},"title-freshmarket-แพลตฟอร์มตลาดสดออนไลน์excerpt-ออกแบบและพัฒนาแพลตฟอร์ม-e-commerce-สำหรับตลาดสดที่เชื่อมต่อเกษตรกรโดยตรงกับผู้บริโภค-ยอดขายเติบโต-3-เท่าใน-6-เดือนcategory-e-commerceclient-freshmarket-co-ltdtimeline-10-สัปดาห์role-full-stack-development-uiux-design-devopsdate-2024-08-15url-httpsfreshmarketexamplecomtags-nextjs-typescript-postgresql-prisma-2c2p-tailwind-css-cloudflare",[22,25,33,35],{"type":23,"value":24},"text","title: FreshMarket — แพลตฟอร์มตลาดสดออนไลน์\nexcerpt: ออกแบบและพัฒนาแพลตฟอร์ม e-commerce สำหรับตลาดสดที่เชื่อมต่อเกษตรกรโดยตรงกับผู้บริโภค ยอดขายเติบโต 3 เท่าใน 6 เดือน\ncategory: E-commerce\nclient: FreshMarket Co., Ltd.\ntimeline: 10 สัปดาห์\nrole: Full-stack development, UI\u002FUX Design, DevOps\ndate: 2024-08-15\nurl: ",{"type":13,"tag":26,"props":27,"children":31},"a",{"href":28,"rel":29},"https:\u002F\u002Ffreshmarket.example.com",[30],"nofollow",[32],{"type":23,"value":28},{"type":23,"value":34},"\ntags: ",{"type":13,"tag":36,"props":37,"children":38},"span",{},[39],{"type":23,"value":40},"Next.js, TypeScript, PostgreSQL, Prisma, 2C2P, Tailwind CSS, Cloudflare",{"type":13,"tag":18,"props":42,"children":44},{"id":43},"โจทย์ที่เราได้รับ",[45],{"type":23,"value":43},{"type":13,"tag":47,"props":48,"children":49},"p",{},[50],{"type":23,"value":51},"FreshMarket ต้องการแพลตฟอร์มที่เชื่อมต่อเกษตรกรในชนบทกับผู้บริโภคในเมืองโดยตรง โดยไม่ผ่านคนกลาง เป้าหมายหลักคือลดค่าใช้จ่ายให้เกษตรกร และให้ผู้บริโภคได้สินค้าสดกว่าและราคาถูกกว่าในซูเปอร์มาร์เก็ตทั่วไป",{"type":13,"tag":47,"props":53,"children":54},{},[55],{"type":23,"value":56},"ความท้าทายหลักมีสองประการ: หนึ่ง — ระบบต้องรองรับสินค้าที่มีสต็อกแปรผันตามฤดูกาลและราคาที่เปลี่ยนได้ทุกวัน สอง — กลุ่มผู้ใช้ฝั่งเกษตรกรมีความคุ้นเคยกับสมาร์ทโฟนในระดับพื้นฐาน UI จึงต้องง่ายมาก",{"type":13,"tag":18,"props":58,"children":60},{"id":59},"วิธีที่เราแก้ปัญหา",[61],{"type":23,"value":59},{"type":13,"tag":47,"props":63,"children":64},{},[65,67,73,75,80],{"type":23,"value":66},"เราเลือก ",{"type":13,"tag":68,"props":69,"children":70},"strong",{},[71],{"type":23,"value":72},"Next.js 14",{"type":23,"value":74}," สำหรับ frontend เพราะต้องการ SSR ที่ดีเพื่อ SEO ในหน้า product listing และ ",{"type":13,"tag":68,"props":76,"children":77},{},[78],{"type":23,"value":79},"PostgreSQL + Prisma",{"type":23,"value":81}," สำหรับ database เพราะ schema ของ e-commerce มีความสัมพันธ์ซับซ้อนที่ relational database จัดการได้ดีกว่า",{"type":13,"tag":47,"props":83,"children":84},{},[85,87,92],{"type":23,"value":86},"สำหรับ payment gateway เราเลือก ",{"type":13,"tag":68,"props":88,"children":89},{},[90],{"type":23,"value":91},"2C2P",{"type":23,"value":93}," เพราะรองรับ PromptPay, True Money Wallet และบัตรเครดิต ซึ่งเป็น payment method หลักของกลุ่มเป้าหมาย",{"type":13,"tag":47,"props":95,"children":96},{},[97,99,104],{"type":23,"value":98},"ส่วน inventory system เราออกแบบให้เป็น ",{"type":13,"tag":68,"props":100,"children":101},{},[102],{"type":23,"value":103},"event-sourced",{"type":23,"value":105}," เพื่อให้ติดตาม stock movement ได้แม่นยำและมี audit trail สำหรับการคืนสินค้า",{"type":13,"tag":18,"props":107,"children":109},{"id":108},"สิ่งที่ทำให้-project-นี้น่าสนใจ",[110],{"type":23,"value":111},"สิ่งที่ทำให้ Project นี้น่าสนใจ",{"type":13,"tag":47,"props":113,"children":114},{},[115,117,122],{"type":23,"value":116},"การออกแบบ UI สำหรับสองกลุ่มผู้ใช้ที่แตกต่างกันมากเป็นความท้าทายที่น่าสนใจ เราทำ ",{"type":13,"tag":68,"props":118,"children":119},{},[120],{"type":23,"value":121},"separate app shells",{"type":23,"value":123}," — หน้า seller dashboard ใช้ navigation pattern ที่เรียบง่ายมาก ฟอนต์ใหญ่ ปุ่มใหญ่ เพื่อให้เกษตรกรที่ใช้มือถือกลางแจ้งกดได้ง่าย ขณะที่ buyer experience เน้น discovery และ browsing ที่ลื่นไหล",{"type":13,"tag":18,"props":125,"children":127},{"id":126},"ผลลัพธ์",[128],{"type":23,"value":126},{"type":13,"tag":130,"props":131,"children":132},"table",{},[133,157],{"type":13,"tag":134,"props":135,"children":136},"thead",{},[137],{"type":13,"tag":138,"props":139,"children":140},"tr",{},[141,147,152],{"type":13,"tag":142,"props":143,"children":144},"th",{},[145],{"type":23,"value":146},"Metric",{"type":13,"tag":142,"props":148,"children":149},{},[150],{"type":23,"value":151},"ก่อน",{"type":13,"tag":142,"props":153,"children":154},{},[155],{"type":23,"value":156},"หลัง 6 เดือน",{"type":13,"tag":158,"props":159,"children":160},"tbody",{},[161,180,198,216,234],{"type":13,"tag":138,"props":162,"children":163},{},[164,170,175],{"type":13,"tag":165,"props":166,"children":167},"td",{},[168],{"type":23,"value":169},"GMV รายเดือน",{"type":13,"tag":165,"props":171,"children":172},{},[173],{"type":23,"value":174},"450,000 บาท",{"type":13,"tag":165,"props":176,"children":177},{},[178],{"type":23,"value":179},"1,350,000 บาท",{"type":13,"tag":138,"props":181,"children":182},{},[183,188,193],{"type":13,"tag":165,"props":184,"children":185},{},[186],{"type":23,"value":187},"เกษตรกรที่ลงทะเบียน",{"type":13,"tag":165,"props":189,"children":190},{},[191],{"type":23,"value":192},"23 ราย",{"type":13,"tag":165,"props":194,"children":195},{},[196],{"type":23,"value":197},"187 ราย",{"type":13,"tag":138,"props":199,"children":200},{},[201,206,211],{"type":13,"tag":165,"props":202,"children":203},{},[204],{"type":23,"value":205},"Conversion rate",{"type":13,"tag":165,"props":207,"children":208},{},[209],{"type":23,"value":210},"1.8%",{"type":13,"tag":165,"props":212,"children":213},{},[214],{"type":23,"value":215},"4.2%",{"type":13,"tag":138,"props":217,"children":218},{},[219,224,229],{"type":13,"tag":165,"props":220,"children":221},{},[222],{"type":23,"value":223},"Lighthouse Performance",{"type":13,"tag":165,"props":225,"children":226},{},[227],{"type":23,"value":228},"—",{"type":13,"tag":165,"props":230,"children":231},{},[232],{"type":23,"value":233},"97",{"type":13,"tag":138,"props":235,"children":236},{},[237,242,247],{"type":13,"tag":165,"props":238,"children":239},{},[240],{"type":23,"value":241},"Average order value",{"type":13,"tag":165,"props":243,"children":244},{},[245],{"type":23,"value":246},"285 บาท",{"type":13,"tag":165,"props":248,"children":249},{},[250],{"type":23,"value":251},"410 บาท",{"type":13,"tag":253,"props":254,"children":255},"blockquote",{},[256,261],{"type":13,"tag":47,"props":257,"children":258},{},[259],{"type":23,"value":260},"\"Venoct เข้าใจ business ของเราจริงๆ ไม่ใช่แค่ทำตาม spec แต่ช่วยคิด solution ที่ดีกว่าที่เราขอไปด้วย\"",{"type":13,"tag":47,"props":262,"children":263},{},[264],{"type":23,"value":265},"— คุณสมชาย วงษ์เกษตร, CEO FreshMarket",{"type":13,"tag":18,"props":267,"children":269},{"id":268},"lessons-learned",[270],{"type":23,"value":271},"Lessons Learned",{"type":13,"tag":47,"props":273,"children":274},{},[275,277,282],{"type":23,"value":276},"โปรเจกต์นี้สอนให้เราเห็นว่า ",{"type":13,"tag":68,"props":278,"children":279},{},[280],{"type":23,"value":281},"user research ที่ดีสามารถเปลี่ยน solution ทั้งหมดได้",{"type":23,"value":283}," เราเคย plan ว่าจะทำ mobile app แต่หลังจากสัมภาษณ์เกษตรกร 15 ราย พบว่าพวกเขาสะดวกใช้ LINE มากกว่าแอปใหม่ เราจึงเพิ่ม LINE Notify integration เพื่อแจ้งเตือนออเดอร์ใหม่ ซึ่งลด onboarding friction ลงได้มาก",{"title":7,"searchDepth":285,"depth":285,"links":286},2,[287,289,290,291,292,293],{"id":20,"depth":285,"text":288},"title: FreshMarket — แพลตฟอร์มตลาดสดออนไลน์\nexcerpt: ออกแบบและพัฒนาแพลตฟอร์ม e-commerce สำหรับตลาดสดที่เชื่อมต่อเกษตรกรโดยตรงกับผู้บริโภค ยอดขายเติบโต 3 เท่าใน 6 เดือน\ncategory: E-commerce\nclient: FreshMarket Co., Ltd.\ntimeline: 10 สัปดาห์\nrole: Full-stack development, UI\u002FUX Design, DevOps\ndate: 2024-08-15\nurl: https:\u002F\u002Ffreshmarket.example.com\ntags: Next.js, TypeScript, PostgreSQL, Prisma, 2C2P, Tailwind CSS, Cloudflare",{"id":43,"depth":285,"text":43},{"id":59,"depth":285,"text":59},{"id":108,"depth":285,"text":111},{"id":126,"depth":285,"text":126},{"id":268,"depth":285,"text":271},"markdown","content:portfolio:freshmarket-platform.md","content","portfolio\u002Ffreshmarket-platform.md","portfolio\u002Ffreshmarket-platform","md",[301,302,306,309,313,317,320],{"_path":4,"title":8},{"_path":303,"title":304,"category":305},"\u002Fportfolio\u002Fzenvoy-saas-dashboard","Zenvoy — แพลตฟอร์ม SaaS สำหรับบริหารทีม Remote","SaaS",{"_path":307,"title":308,"category":305},"\u002Fportfolio\u002Fmedsync-dashboard","MedSync — ระบบจัดการคลินิกและนัดหมายผู้ป่วย",{"_path":310,"title":311,"category":312},"\u002Fportfolio\u002Frunclub-app","RunClub — แอปสำหรับชมรมวิ่งและ community นักวิ่งไทย","Mobile",{"_path":314,"title":315,"category":316},"\u002Fportfolio\u002Fbaan-design-studio","Baan Design Studio — Portfolio Website สำหรับสตูดิโอออกแบบ","Web",{"_path":318,"title":319,"category":305},"\u002Fportfolio\u002Forchard-saas","Orchard — HR & Payroll SaaS สำหรับ SME ไทย",{"_path":321,"title":322,"category":312},"\u002Fportfolio\u002Fbitebuddy-food-app","BiteBuddy — แอปค้นหาร้านอาหารและรีวิวเพื่อชุมชน",1780350561144]