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