Vivid: Hackathon ที่ไม่มีวันสิ้นสุด

Apr 30 2023
ถ้าคุณบอกฉันเมื่อปีที่แล้วว่าฉันจะถูกยกเลิกการลงทะเบียนเรียนจากวิทยาลัย และทำงานในสตาร์ทอัพสามคนในพื้นที่เครื่องมือสำหรับนักพัฒนาส่วนหน้า ฉันคงหัวเราะ 3 เดือนที่ผ่านมาได้เปลี่ยนความคิดของฉันไปอย่างสิ้นเชิง

ถ้าคุณบอกฉันเมื่อปีที่แล้วว่าฉันจะถูกยกเลิกการลงทะเบียนเรียนจากวิทยาลัย และทำงานในสตาร์ทอัพสามคนในพื้นที่เครื่องมือสำหรับนักพัฒนาส่วนหน้า ฉันคงหัวเราะ

3 เดือนที่ผ่านมาได้เปลี่ยนความคิดของฉันไปอย่างสิ้นเชิง ฉันมาฝึกงานครั้งนี้ด้วยความลังเลใจเกี่ยวกับสตาร์ทอัพ เพราะรู้แค่ว่าอาชีพในบริษัทใหญ่เป็นอย่างไร ฉันได้พิมพ์เขียวที่ชัดเจนเกี่ยวกับวิธีการเริ่มต้นบริษัทของตัวเอง ตั้งแต่การคิดและตั้งค่า codebase ไปจนถึงการปรับใช้และการออกสู่ตลาด

ทีม Vivid ทำให้มันเกิดขึ้น เมื่อพิจารณาแล้ว ความแตกต่างที่สำคัญสองประการระหว่างการเริ่มต้นในระยะเริ่มต้นและ Big Tech ทำให้เกิดความแตกต่าง

  • ความสนใจ. ที่ Vivid ให้ความสำคัญกับการเรียนรู้ของฉันเป็นอย่างมาก ฉันได้รับการสนับสนุนให้เลือกสิ่งที่ฉันต้องการทำงาน ถามคำถาม และพูดในสิ่งที่ฉันต้องการเรียนรู้ ฉันบอกว่าฉันสนใจว่า Jorge กำหนดค่า monorepo อย่างไร และวันต่อมาเราได้พูดคุยกันเป็นเวลาสองชั่วโมงเกี่ยวกับข้อมูลเชิงลึกของ Vite, Turborepo, pnpm และอื่นๆ นี่เป็นข้อพิสูจน์ถึงทีม Vivid มาก ความสนใจมักมาจากทีมที่เล็กกว่า งานของฉันเชื่อมโยงโดยตรงกับความสำเร็จของบริษัท ดังนั้นการช่วยให้ฉันทำงานได้ดีที่สุดจึงเป็นผลประโยชน์สูงสุดของทุกคน
  • ความกว้างของการเรียนรู้ ในบริษัทระยะเริ่มต้น ยังไม่มี codebase ที่สร้างขึ้นเพื่อต่อยอด ฉันชินกับการทำสิ่งต่าง ๆ เช่นสคริปต์การปรับใช้และสตริงการเชื่อมต่อฐานข้อมูล แต่ทันใดนั้นฉันก็พบว่าตัวเองต้องเป็นคนตั้งค่าสิ่งเหล่านี้ ฉันคิดว่าในบริษัทขนาดใหญ่ คุณสำรวจหัวข้อหนึ่งอย่างลึกซึ้งมาก แต่เมื่อเริ่มต้นธุรกิจ คุณจะถูกบังคับให้ต้องก้าวเข้ามาหาสินค้าทุกชิ้นของคุณ
  • คุณภาพของรหัส แม้ว่าสตาร์ทอัพมักมีชื่อเสียงในด้านคุณภาพโค้ดที่ไม่ดี แต่ที่ Vivid กลับไม่ใช่ในกรณีนี้ ฉันได้เรียนรู้มากมายเกี่ยวกับวิธีปฏิบัติด้านโค้ดที่ดีที่สุด โดยส่ง PR ของฉันกลับไปเพื่อแก้ไขหลายครั้งเกินกว่าจะนับได้ แม้ว่าจะเจ็บปวดในตอนนั้น แต่แน่นอนว่าตอนนี้ฉันเป็นวิศวกรที่ดีขึ้นแล้ว และฉันเข้าใจถึงความสำคัญของการตรวจสอบโค้ดอย่างละเอียดถี่ถ้วน
  • สนุก! สุดท้าย แต่ไม่ท้ายสุด การฝึกงานที่ Vivid นั้นสนุกที่สุดเท่าที่ฉันเคยพบมาในที่ทำงาน Aryaman, Jorge และ Alberto สร้างบรรยากาศสบายๆ ตั้งแต่สัปดาห์แรก และตอนนี้ฉันรู้สึกเหมือนกำลังทำงานในโครงการแฮ็กกาธอนกับเพื่อนที่ดีจริงๆ ในงานอื่นๆ ฉันอยากจะเลิกงานตอน 17.00 น. แต่ที่นี่ฉันพบว่าตัวเองมีความสุขที่จะอยู่และทำงานไปจนเมื่อไหร่ก็ได้

ขณะที่ฉันเขียนโพสต์นี้ห่างจากปาร์ตี้เปิดตัวครั้งที่สองของเราบนหลังคา WeWork เดียวกับที่ฉันได้พบกับ Aryaman, Jorge และ Alberto เพียงไม่กี่ชั่วโมง ฉันแทบหวังว่าตัวเองจะได้รับข้อเสนอจาก Big Tech เพื่อเปลี่ยนใจและเข้าร่วม Vivid แต่ฉันกลับไปเรียนปีสุดท้ายที่มหาวิทยาลัยโคลัมเบีย พาเพื่อนใหม่สี่คนไปด้วย และความอยากสร้างบางอย่างจากสิ่งที่ฉันได้เรียนรู้

ใส่สดใส

ฉันได้พบกับ Aryaman, Jorge และ Alberto ด้วยตัวเองเป็นครั้งแรก เมื่อพวกเขาปฏิเสธข้อเสนองานจาก Big Tech ในงานปาร์ตี้ WeWork บนชั้นดาดฟ้า หลังจากที่ได้ดื่มกาแฟสั้นๆ กับ Aryaman เมื่อสัปดาห์ก่อน ฉันคิดว่ามันสดชื่นมากที่ได้เห็นทั้งสามคนมีความตื่นเต้นเกี่ยวกับสิ่งที่พวกเขากำลังทำอยู่

ฉันเพิ่งออกจากการฝึกงาน Microsoft และเคยฝึกงานกับ Meta เมื่อฤดูร้อนก่อน ฉันรู้สึกว่าฉันเข้าใจดีว่าชีวิตใน Big Tech จะเป็นอย่างไร และแม้ว่าฉันจะไม่เกลียดมัน แต่ส่วนใหญ่ของฉันก็สงสัยว่าการทำงานกับบริษัทสตาร์ทอัพจะเป็นอย่างไร การเฝ้าดูทีม Vivid ชื่นชมยินดีในขณะที่พวกเขาละทิ้งข้อเสนอในฝันของนักเรียนใหม่ของฉัน ทำให้ฉันตื่นขึ้น — ฉันต้องดูว่าฉันพลาดอะไรไป

ไม่แปลกใจเลยที่หนึ่งเดือนต่อมา ฉันได้ลงนามในจดหมายตอบรับเพื่อเข้าร่วมเป็นเด็กฝึกงานคนแรกของ Vivid ในฤดูใบไม้ผลิปี 2023

เดอะเดือย

ฉันไปทำงานวันแรกที่ Vivid โดยไม่รู้ว่าจะต้องเจอกับอะไร

ในวันที่ 1 ฉันรู้สึกประหลาดใจมากที่สุด: Vivid ไม่ได้สร้าง Styler อีกต่อไป ซึ่งเป็นผลิตภัณฑ์เรือธงที่พวกเขาสาธิตให้ฉันดูบนดาดฟ้านั้นเมื่อสองสามเดือนก่อน ฉันตระหนักว่าฉันได้เข้าร่วมบริษัทในช่วงเวลาที่พิเศษอย่างเหลือเชื่อ การได้สัมผัสกับประสบการณ์โดยตรงว่าการสร้างบริษัทตั้งแต่เริ่มต้นนั้นมีความหมายอย่างไร

ฉันถูกโยนเข้าสู่การระดมสมองทันทีในขณะที่ทีมกำลังคิดเกี่ยวกับทิศทางใหม่สำหรับบริษัท ฉันรีบเร่งตามความคิดที่ถูกโยนทิ้งไปรอบๆ และซึมซับสิ่งที่ทำให้ความคิดหนึ่งดีกว่าอีกความคิดหนึ่ง

ประเด็นสำคัญบางประการจากการประชุมระดมสมองของเรา:

  • การสร้างผลิตภัณฑ์ที่ผู้คนต้องการ จริงๆ เป็นสิ่ง สำคัญ ไม่สำคัญว่าเครื่องมือของคุณจะเพิ่มประสิทธิภาพการทำงานของทุกคนในทีมได้ถึง 10% หรือไม่ — ไม่มีใครเต็มใจที่จะรบกวนเวิร์กโฟลว์ปัจจุบันของพวกเขาเพื่อการปรับปรุงเล็กน้อย แต่ถ้ามีวิศวกรสองหรือสามคนที่มีประสบการณ์ในการเพิ่มผลผลิต 200% เครื่องมือของคุณจะเหนียวกว่ามาก
  • คู่แข่งไม่ตัดสิทธิ์ความคิด ฉันเคยคิดว่าหากมีบริษัทอื่นไม่ว่าจะเล็กแค่ไหน เริ่มทำงานด้วยแนวคิดที่คล้ายกับของฉัน ฉันไม่ควรทำตามนั้น แต่ตอนนี้ฉันเห็นว่าบริษัทเหล่านี้มีอยู่เป็นหลักฐานว่ามีปัญหาจริงที่ต้องแก้ไข
  • การมองเห็นระยะยาวเป็นสิ่งสำคัญ ดังนั้นการปล่อยความคิดที่ไม่ดีออกไป ฉันรู้สึกประหลาดใจเมื่อได้ยินว่า Vivid เลิกใช้ Styler ในฐานะผู้ใช้ ฉันคิดว่าเป็นผลิตภัณฑ์ที่ดำเนินการได้ดีพร้อมกรณีการใช้งานที่มั่นคง ตอนนี้ฉันเข้าใจแล้วว่า Styler ไม่มีเป้าหมายระยะยาวที่คาดการณ์ได้ และการหมุนแกนเป็นสิ่งสำคัญสำหรับการเติบโตของบริษัท ความสามารถในการก้าวออกจากความคิดโดยไม่มีเส้นทางที่ชัดเจน โดยไม่คำนึงถึงต้นทุนที่จมลง เป็นสิ่งจำเป็นสำหรับสตาร์ทอัพในการดำเนินการอย่างรวดเร็ว

ด้านล่างนี้คือภาพของการให้รหัสครั้งแรกของฉันกับทีม Vivid!

บานหน้าต่างการตั้งค่าสำหรับ Vivid Styler

เมื่อจบสองสัปดาห์แรกที่ Vivid ฉันเปลี่ยนจากไม่รู้วิธีเขียน React เพียงบรรทัดเดียวมาเป็นมั่นใจว่าฉันสามารถสร้างเพจได้ตั้งแต่เริ่มต้น — ได้เรียนรู้มากกว่าที่ฉันได้รับจากการฝึกงาน 12 สัปดาห์ที่ผ่านมา

สดใสซิงค์

ส่วนที่สองของการฝึกงานของฉันถูกกำหนดโดย Vivid Sync เรารู้อยู่แล้วว่ามีความขัดแย้งอย่างมากในการส่งต่อจากนักพัฒนาไปยังนักออกแบบ แต่ในระหว่างการโทรหาลูกค้า ผู้นำด้านวิศวกรรมได้แบ่งปันข้อมูลเชิงลึกที่สำคัญ ความขัดแย้งนี้มีสาเหตุเดียว เมื่อเวลาผ่านไป ไลบรารี Figma เริ่มแตกต่างจากที่เก็บโค้ด ซึ่งทำให้เกิดการสื่อสารที่ผิดพลาดอย่างสม่ำเสมอระหว่างนักออกแบบและนักพัฒนา

ภายในหนึ่งสัปดาห์หลังจากคิดไอเดียได้ เราก็ได้พันธมิตรด้านการออกแบบและเริ่มสร้างผลิตภัณฑ์ ซึ่งโดยหลักแล้วก็คือระบบการจัดการงานที่เชื่อมโยงส่วนประกอบ Figma กับโค้ดเบสผ่านทาง Github Issues

ฉันได้รับมอบหมายให้สร้างเว็บ UI ซึ่งมีลักษณะดังนี้:

มุมมองเว็บขององค์ประกอบที่ติดตามสำหรับ Vivid Sync

แต่อีกครั้ง เท่าที่ฉันคิดว่าแนวคิดและผลิตภัณฑ์นั้นยอดเยี่ยม เพียงหนึ่งสัปดาห์หลังจากที่เราส่งมอบผลิตภัณฑ์ให้กับพันธมิตรด้านการออกแบบของเรา เราก็กลับมาที่ห้องประชุมโดยเริ่มจากจัตุรัสหนึ่งอีกครั้ง

การระดมสมอง Pt. 2

Vivid Sync มีข้อบกพร่องร้ายแรง — ไม่ได้แก้ปัญหาของลูกค้า ผู้ใช้ได้รับแรงบันดาลใจจากคำสัญญาที่จะจำกัดเวลาวิศวกรรมที่สูญเปล่า Vivid Sync มีวิสัยทัศน์ระยะยาวที่ชัดเจนซึ่งแตกต่างจาก Styler ซึ่งก็คือการสร้างการซิงค์แบบ end-to-end ระหว่าง Figma และ Code แต่ผลิตภัณฑ์ที่ส่งมอบไม่ได้ช่วยประหยัดเวลาของวิศวกร อันที่จริงแล้วได้เพิ่มเข้าไปในจำนวนรวมของ ทำงานโดยสร้างงานสำหรับงานบำรุงรักษา

ทีมงานจมปลักอยู่กับการสร้างบางอย่างให้เร็วที่สุดเท่าที่จะเป็นไปได้สำหรับพาร์ทเนอร์ด้านการออกแบบของเรา แต่เมื่อมองย้อนกลับไป มีคำเตือนที่ชัดเจนตั้งแต่เริ่มต้นว่ามูลค่าเพิ่มในทันทีของ Sync อาจไม่สูงพอ

รอบนี้ฉันเตรียมพร้อมสำหรับสิ่งที่กำลังจะมาถึง ฉันตั้งเป้าหมายที่จะมีส่วนร่วมในการอภิปรายความคิดอย่างจริงจัง ฉันได้เรียนรู้วิธีเขียนแผ่นงานสมมติฐาน ดำเนินการวิจัยเชิงแข่งขัน และจัดการการลดลงและกระแสของการคิดที่แตกต่างซึ่งถูกจำกัดให้แคบลงในความคิดเฉพาะ ที่สำคัญที่สุด ฉันได้เรียนรู้ว่าความคิดเห็นของฉันอาจมีผลกระทบมากเพียงใดในทีมเล็กๆ

ฟิกม่าเป็นรหัส

ประวัติการใช้งาน GitHub ของฉันทำให้ชัดเจนว่าเราใช้เวลานานแค่ไหนในการคิด — 3 สัปดาห์ เราตัดสินใจที่จะดำดิ่งสู่ทิศทางของมูลค่าสูงสุดสำหรับลูกค้า — แปลงการออกแบบ Figma ให้เป็นโค้ดส่วนหน้าที่ใช้งานได้ มีวิสัยทัศน์ระยะยาวที่ชัดเจน เรากำลังจัดการกับปัญหาของผู้ใช้ปลายทางโดยตรง และเราทุกคนมีความเชื่อมั่นในระดับที่สูงกว่ามาก

เมื่อเริ่มสร้าง ฉันถือกรรมสิทธิ์ในการเริ่มต้นใช้งานผู้ใช้ใหม่ เป้าหมายของการเริ่มใช้งานคือการอนุญาตให้ Vivid สร้างโค้ดโดยใช้ส่วนประกอบที่มีอยู่แล้วในโค้ดเบสของผู้ใช้

ความท้าทายทางเทคนิคที่สำคัญคือการรับส่วนประกอบโค้ดของผู้ใช้และเชื่อมโยงส่วนประกอบเหล่านั้นกับสินทรัพย์ Figma ที่สอดคล้องกัน ดังนั้นเมื่อใดก็ตามที่มีการใช้สินทรัพย์ Figma เราสามารถเรียกส่วนประกอบที่ถูกต้องในโค้ดได้ คุณสมบัติของคอมโพเนนต์จำเป็นต้องจับคู่ด้วย เพื่อให้เครื่องมือของเราสามารถเรียกคอมโพเนนต์เหล่านี้ได้โดยไม่มีข้อผิดพลาดใดๆ

คุณลักษณะการเริ่มต้นใช้งานมี 2-3 ส่วนที่แตกต่างกัน:

  1. แอพ Github แอป Github เชื่อมต่อกับพื้นที่เก็บข้อมูลและส่งคืนไฟล์ .tsx ทั้งหมดภายในพื้นที่เก็บข้อมูลที่เชื่อมต่อผ่าน REST API
  2. Python ไมโครเซอร์วิส Python microservice - สร้างด้วย Flask - ใช้อัลกอริธึมการจับคู่ NLP เพื่อจับคู่ส่วนประกอบรหัสเชิงความหมายกับส่วนประกอบ Figma
  3. รหัสแพ็คเกจการข้ามผ่าน แพ็คเกจ Code Traversal ให้ฉันเชื่อมโยง Github App และ Python Microservice เข้าด้วยกัน ได้รับไฟล์ .tsx จากแอป Github และส่งคืนส่วนประกอบที่ตรงกันจาก Python microservice
  4. แพลตฟอร์มการจับคู่ออนบอร์ด ในที่สุด UI อนุญาตให้จับคู่และส่งไปยังฐานข้อมูลในแบ็กเอนด์

ประมวลภาพสุดมันส์!

ทีมงานในงานปาร์ตี้เปิดตัว WeWork ครั้งที่สองของเรา!
นำสุนัขของคุณมาทำงานในวันงาน เซอร์ไพรส์วันเกิดครั้งที่ 21 อาหารค่ำแบบทีมปรุงเองที่บ้าน