Giới thiệu Hackathon 30 Ngày từ Frontend Mentor

Chúng tôi rất vui mừng thông báo về hackathon đầu tiên của mình! Dù bạn mới bắt đầu hành trình lập trình hay là một nhà phát triển dày dạn kinh nghiệm, đây là cơ hội để thử thách bản thân, kết nối với cộng đồng tuyệt vời của chúng ta và có khả năng giành một năm sử dụng Frontend Mentor Pro!

Hackathon FM30 là gì?

Hackathon bắt đầu vào thứ Sáu, ngày 5 tháng 9. Bạn có 30 ngày để xây dựng giải pháp tốt nhất cho thử thách ứng dụng thời tiết mới của chúng tôi. Không cần phải vội vàng hay thức khuya – hackathon này nhằm tạo ra giải pháp chất lượng cao nhất trong vòng 30 ngày, đồng thời chia sẻ hành trình của bạn với cộng đồng.

Sau 30 ngày, thử thách ứng dụng thời tiết sẽ vẫn có trên nền tảng, giống như tất cả các thử thách khác của chúng tôi. Vì vậy, nếu bạn muốn bỏ qua hackathon và xây dựng theo tốc độ riêng của mình, điều đó hoàn toàn ổn! Hackathon chỉ đơn giản là thêm một yếu tố thú vị và thời gian cho những ai muốn có thêm động lực.

Trong hackathon lần đầu tiên này, bạn sẽ xây dựng một ứng dụng thời tiết sử dụng Open-Meteo API (thông tin chi tiết bên dưới). Đây là một dự án thực tế mà hàng triệu người sử dụng hàng ngày, và bạn sẽ học cách làm việc với dữ liệu thực tế trong quá trình này. Ngay cả khi bạn không thắng, bạn sẽ có một sản phẩm trong portfolio và một số kỹ năng mới!

Cách tham gia

Bắt đầu

1. Tải thử thách: Tải các tệp khởi đầu miễn phí cho ứng dụng thời tiết từ trang thử thách. Như mọi khi, mọi thông tin cần thiết về thử thách đều có trong README.
2. Xây dựng giải pháp của bạn: Sử dụng 30 ngày này để tạo ra một sản phẩm mà bạn thực sự tự hào. Tập trung vào chất lượng hơn là tốc độ, và hãy cân nhắc mở rộng hơn nữa những yêu cầu cơ bản. Chúng tôi đã bao gồm một số ý tưởng trong phần "Ý tưởng để thử thách bản thân" trên trang thử thách.
3. Chia sẻ tiến trình của bạn: Đăng cập nhật bằng cách sử dụng #FM30Hackathon trên mạng xã hội. Chúng tôi sẽ theo dõi và chia sẻ lại những bài đăng nổi bật để giúp nâng cao sự hiển thị của bạn!
4. Nộp giải pháp của bạn: Hãy làm theo hướng dẫn nộp dưới đây trước thời hạn.

Hướng dẫn nộp bài

Nơi nộp

Đăng giải pháp của bạn trong kênh Discord #hackathon-submissions dưới chủ đề ứng dụng thời tiết.

Nội dung cần bao gồm

Nộp bài qua Discord của bạn cần một thứ duy nhất: một liên kết đến giải pháp của bạn trên Frontend Mentor. Điều này giúp cộng đồng dễ dàng xem xét công việc của bạn, và vì số lượt thích và đánh dấu cũng ảnh hưởng đến quá trình lựa chọn, bạn sẽ muốn càng nhiều người càng tốt xem trang giải pháp của bạn.

Xin hãy chỉ tạo một bài nộp duy nhất. Các bài trùng lặp sẽ bị xóa và có thể dẫn đến việc bị loại.

Yêu cầu quan trọng

• README tùy chỉnh: Repo GitHub của bạn phải bao gồm một tệp README cá nhân hóa (chúng tôi cung cấp mẫu trong các tệp khởi đầu). Hãy cho chúng tôi biết về quy trình của bạn, các chi tiết bạn thêm vào và những thách thức bạn đã vượt qua. Bao gồm một README tùy chỉnh là bắt buộc – không có README, không có nộp hợp lệ!
• Lịch sử commit có ý nghĩa: Hãy thể hiện công việc của bạn! Chúng tôi muốn thấy tiến trình của bạn qua nhiều lần commit, không chỉ là một commit lớn vào cuối.
• Khả năng truy cập công khai: Đảm bảo mọi người có thể xem giải pháp trực tiếp và repo của bạn.
• Thời hạn nộp: Chúng tôi sẽ khóa chủ đề hackathon trên Discord cho thử thách này vào thứ Hai, ngày 6 tháng 10 lúc 09:00 AM BST.

Cách chúng tôi chọn người thắng

Giai đoạn 1: Tình cảm từ cộng đồng

Trong suốt hackathon, cộng đồng có thể phản hồi về các bài nộp trong kênh Discord với:

• ❤️ Sự trân trọng chung – Phản ứng "Tôi thích điều này!"
• 🎨 Ấn tượng về mặt hình ảnh – Dành cho các giải pháp có thiết kế hình ảnh tuyệt vời (hoặc cải thiện!)
• 💡 Giải pháp sáng tạo – Dành cho các tính năng thông minh, mở rộng hoặc các cách tiếp cận sáng tạo khác
• 🧩 Chất lượng mã – Dành cho mã sạch, khả năng tiếp cận, các thực hành tốt nhất, hoặc sự xuất sắc về kỹ thuật

Xin vui lòng không phản ứng với bài nộp của chính bạn – những phản ứng này sẽ bị xóa, và việc cố gắng lặp lại có thể khiến bạn bị loại. Hãy để cộng đồng chúc mừng!

Chúng tôi cũng sẽ theo dõi số lượt thích và đánh dấu trên trang giải pháp Frontend Mentor của bạn, vì vậy hãy chắc chắn chia sẻ liên kết đó với mạng lưới của bạn để tăng khả năng hiển thị cho giải pháp của bạn.

Giai đoạn 2: Danh sách rút gọn của chúng tôi

Nhóm của chúng tôi sẽ xem xét tất cả các nộp hợp lệ và chọn ra năm bài xuất sắc dựa trên:

• Tương tác của cộng đồng (tất cả những phản ứng và lượt thích trên nền tảng!)
• Chất lượng mã và các thực hành tốt nhất
• Mức độ bạn đã đáp ứng (hoặc vượt trội!) các yêu cầu
• Chất lượng README – thực sự, hãy chắc chắn chú ý đến điều này!

Giai đoạn 3: Bỏ phiếu cộng đồng

Năm giải pháp được rút gọn sẽ được đưa ra một cuộc bỏ phiếu công khai nơi bạn sẽ chọn ba người thắng cuộc!

Giải thưởng

Chúng tôi giữ cho nó đơn giản nhưng có ý nghĩa cho hackathon đầu tiên:

• 🥇 Giải nhất: Một năm sử dụng Frontend Mentor Pro (giá trị $96!)
• 🥈 Giải nhì: Một tháng sử dụng Pro
• 🥉 Giải ba: Một tháng sử dụng Pro

Thử thách ứng dụng thời tiết

Bạn sẽ xây dựng một ứng dụng thời tiết sử dụng Open-Meteo API miễn phí. Tối thiểu, người dùng nên có thể:

• Tìm kiếm thông tin thời tiết bằng cách nhập vị trí vào thanh tìm kiếm
• Xem điều kiện thời tiết hiện tại bao gồm nhiệt độ, biểu tượng thời tiết và chi tiết vị trí
• Thấy các chỉ số thời tiết bổ sung như nhiệt độ "cảm giác như", tỷ lệ độ ẩm, tốc độ gió và lượng mưa
• Duyệt qua dự báo thời tiết 7 ngày với nhiệt độ cao/thấp hàng ngày và biểu tượng thời tiết
• Xem dự báo theo giờ cho thấy sự thay đổi nhiệt độ trong suốt cả ngày
• Chuyển đổi giữa các ngày trong tuần bằng cách sử dụng bộ chọn ngày trong phần dự báo theo giờ
• Chuyển đổi giữa các đơn vị đo lường Imperial và Metric thông qua danh sách thả xuống
• Chuyển đổi giữa các đơn vị nhiệt độ cụ thể (Celsius và Fahrenheit) và đơn vị đo lường cho tốc độ gió (km/h và mph) và lượng mưa (milimet) thông qua danh sách thả xuống
• Xem bố cục tối ưu cho giao diện tùy thuộc vào kích thước màn hình của thiết bị
• Thấy trạng thái hover và focus cho tất cả các phần tử tương tác trên trang

Nhưng đừng dừng lại ở đó! Đây là thời điểm của bạn để thử thách bản thân! Thêm tính năng, làm cho giao diện đẹp hơn, thêm hoạt ảnh thú vị – hãy cho chúng tôi thấy điều gì làm cho giải pháp của bạn đặc biệt. Bạn có thể tham khảo "Ý tưởng để thử thách bản thân" trên trang thử thách để lấy cảm hứng, nhưng chúng tôi cũng sẽ thêm chúng ở đây:

1. Thêm phát hiện vị trí địa lý để tự động hiển thị thời tiết cho vị trí hiện tại của người dùng khi truy cập lần đầu
2. Triển khai hệ thống yêu thích/vị trí đã lưu để người dùng có thể đánh dấu các vị trí thường xuyên kiểm tra
3. Triển khai tính năng "So sánh Vị trí" để xem thời tiết bên cạnh nhau cho nhiều vị trí
4. Bao gồm chỉ số UV, độ nhìn và dữ liệu áp suất không khí (có sẵn qua Open-Meteo)
5. Thêm thời gian mặt trời mọc/mặt trời lặn với các chỉ báo hình ảnh
6. Thêm nền thời tiết động thay đổi theo điều kiện hiện tại
7. Triển khai chức năng tìm kiếm bằng giọng nói
8. Tạo các chủ đề chế độ tối/sáng thích ứng với thời gian trong ngày
9. Thêm khả năng ứng dụng web tiến bộ (PWA) để cài đặt trên di động

Open-Meteo API miễn phí, không yêu cầu khóa API và có giới hạn tần suất rộng rãi, vì vậy bạn có thể tập trung vào việc xây dựng thay vì phải xử lý các rắc rối về xác thực.

Mẹo để thành công

• Bắt đầu ngay hôm nay, không phải ngày mai: Bắt đầu sớm mang lại cho bạn thời gian để thử nghiệm, lặp lại và làm cho sản phẩm hoàn hảo. Hơn nữa, bạn có thể giúp đỡ những người khác gặp khó khăn với những thứ mà bạn đã giải quyết!
• Ghi lại hành trình của bạn: Chia sẻ tiến trình trên mạng xã hội của bạn với #FM30Hackathon. Chúng tôi thích thấy những hình ảnh công việc đang tiến triển, bài học đã học và những khoảnh khắc "aha!". Chúng tôi sẽ theo dõi hashtag và chia sẻ lại những bài đăng được chọn. Bạn có thể sẽ truyền cảm hứng cho người khác tiếp tục!
• Tương tác với người khác: Hackathon cũng quan trọng về cộng đồng như là cạnh tranh. Giúp đỡ những người khác trong Discord, chia sẻ tài nguyên, và chúc mừng những thành công của nhau.
• Chất lượng hơn độ phức tạp: Một giải pháp sạch sẽ, có tài liệu tốt và dễ tiếp cận sẽ luôn đánh bại một ứng dụng phức tạp nhưng có lỗi.
• Biến nó thành của bạn: Trong khi đáp ứng các yêu cầu, hãy thêm dấu ấn cá nhân của bạn. Điều gì khiến BẠN muốn sử dụng ứng dụng thời tiết này hàng ngày?

Câu hỏi thường gặp

• Tôi có thể sử dụng bất kỳ framework hoặc thư viện nào không? Có! React, Vue, vanilla JS, bất cứ điều gì bạn cảm thấy thoải mái. Điều này là về kết quả cuối cùng, không phải công cụ.
• Chỉ một bài nộp cho mỗi người? Đúng – hãy dồn hết năng lượng của bạn vào việc tạo ra một giải pháp xuất sắc thay vì nhiều giải pháp vội vàng.
• Tôi có thể hợp tác không? Đây là một thử thách cá nhân, nhưng việc giúp nhau học hỏi và gỡ lỗi trong Discord được khuyến khích.
• Tôi mới lập trình – có nên tham gia không? Tuyệt đối! Hackathon là những trải nghiệm học tập tuyệt vời. Tập trung vào việc hoàn thành một giải pháp hoạt động và viết một README tuyệt vời. Đơn giản, sạch sẽ và có tài liệu có thể chiến thắng!
• Tôi có thể sử dụng công cụ AI không? Có, nhưng hãy chắc chắn rằng bạn hiểu và có thể giải thích mọi dòng mã trong giải pháp của bạn. README nên phản ánh hành trình học tập và quy trình làm việc của bạn.

Thông tin quan trọng

🗓️ Ngày quan trọng

• Bắt đầu: Thứ Sáu, ngày 5 tháng 9
• Thời hạn nộp bài: Thứ Hai, ngày 6 tháng 10 lúc 09:00 AM BST
• Công bố người thắng: Thứ Năm, ngày 9 tháng 10

🔗 Liên kết nhanh

• Thử thách ứng dụng thời tiết
• Máy chủ Discord
• Kênh nộp bài hackathon
• Kênh trợ giúp

Sẵn sàng để bắt đầu?

Chúng tôi rất háo hức xem bạn xây dựng gì! Các hackathon của chúng tôi là cơ hội thú vị để thử thách bản thân tạo ra điều gì đó mà bạn tự hào chia sẻ. Chúng tôi hy vọng bạn sẽ thích quy trình và học được điều gì mới trong suốt quá trình!

Có câu hỏi? Hãy nhớ đăng chúng trong kênh #help của chúng tôi trên Discord, và chúng tôi sẽ có mặt để hỗ trợ bạn.

Chúc bạn lập trình vui vẻ! 🎉