Bạn muốn xây dựng một cái gì đó thú vị? Đây là danh sách các ý tưởng ứng dụng web mẫu.

Quan tâm đến việc học JavaScript? Nhận ebook của tôi tại jshandbook.com

Nếu bạn đang đọc bài đăng này, có thể bạn đang tìm kiếm một ý tưởng. Bạn có thể muốn xây dựng một ứng dụng đơn giản mà bạn có thể sử dụng trong một hướng dẫn hoặc trong dự án mẫu của mình để thử nghiệm một khuôn khổ hoặc API mới. Nhưng bạn không thể tìm thấy bất cứ điều gì thực sự gây tiếng vang với bạn.

Nó cần phải đủ đơn giản để không chiếm hết thời gian của bạn, nhưng đồng thời cũng đủ phức tạp để đáng làm.

“Tôi không muốn xây dựng một ứng dụng việc cần làm khác!” Tôi nghe bạn đang nghĩ.

Tôi hiểu rồi. Tôi viết bài này để giúp đỡ bản thân, và tôi hy vọng nó cũng sẽ giúp ích cho bạn.

Những gì bạn sẽ tìm thấy bên dưới

Một số ý tưởng là độc lập (không liên quan đến việc sử dụng API bên ngoài), trong khi một số ý tưởng sử dụng các API công khai nổi tiếng, nơi bạn có thể dễ dàng lấy dữ liệu được tạo sẵn.

Một số yêu cầu một phần máy chủ và một số thì không, điều này cũng có thể phụ thuộc vào việc triển khai của bạn.

Nhưng tôi đã cố gắng đảm bảo những ý tưởng này là:

  • tốt cho một hướng dẫn
  • tốt để thử nghiệm với công nghệ web
  • không phải là một cái gì đó sẽ mất một tuần để tìm ra
  • không phải "ý tưởng khởi nghiệp"
  • nhắm mục tiêu đến các ứng dụng web
  • dễ giải thích
  • dễ xây dựng (ít hơn 24 giờ, nếu được chuẩn bị)
  • dễ dàng mở rộng với các tính năng mới

Vì vậy, nói đủ, đây là danh sách!

Ứng dụng đơn giản không có phụ thuộc bên ngoài

Một ứng dụng theo dõi cân nặng

  • Nó chấp nhận một tập hợp các mục nhập thủ công của các phép đo trọng lượng được thực hiện vào các ngày khác nhau
  • Nó có thể vẽ một đồ thị
  • Nó có thể cho phép bạn theo dõi nhiều thực thể, ví dụ như trọng lượng của nhiều hơn một người
  • Nó lưu trữ trọng lượng ở đâu đó

Một ứng dụng máy tính

  • Một máy tính tiêu chuẩn: các số, +, -, *, / và kết quả

Cơ sở dữ liệu sách

  • Nhập sách bạn sở hữu
  • Nhập sách bạn muốn mua
  • Lưu trữ thông tin sách và hình ảnh

Một ứng dụng công thức nấu ăn

  • Nhập tên và mô tả với các bước
  • Có hình ảnh
  • Có một số xếp hạng về độ khó và chất lượng
  • Thêm thời gian cần thiết
  • Có các bước khác nhau với một hình ảnh cho mỗi
  • Cất chúng ở đâu đó

Trình theo dõi hóa đơn

  • Ghi hóa đơn, số tiền và ngày tháng
  • Liệt kê các hóa đơn
  • Có một vài biểu đồ (năm nay / năm ngoái)
  • Cất chúng ở đâu đó

Một trình theo dõi chi phí

  • Ghi nhật ký chi phí và gắn thẻ chúng (hoặc có các danh mục)
  • Liệt kê chi phí
  • Có một vài biểu đồ (tháng trước / năm trước)
  • Cất chúng ở đâu đó

Một ứng dụng trò chuyện

  • Một số loại Slack rút gọn
  • Mọi người nhập mà không cần xác thực và được chỉ định một tên, được lưu trữ khi họ quay lại
  • Lưu trữ lịch sử
  • Thêm thông báo

Một ứng dụng ghi chú

  • Thêm ghi chú mới
  • Liệt kê tất cả các ghi chú của bạn trong thanh bên
  • Cất chúng ở đâu đó

Một ứng dụng nhật ký cá nhân

  • Thêm các mục nhập có ngày tháng và văn bản
  • Hiển thị gần đây hơn trước
  • Đính kèm hình ảnh
  • Cất chúng ở đâu đó

Một ứng dụng pomodoro

  • Nhập thời gian
  • Bắt đầu hẹn giờ
  • Thông báo khi hết thời gian

Trình tạo meme

  • Có 10 hình ảnh meme phổ biến
  • Cho phép người dùng thêm văn bản
  • Kết quả là hình ảnh + văn bản
  • Lưu trữ lịch sử

Trò chơi tic-tac-toe

Tất cả chúng ta đều biết trò chơi tic-tac-toe là gì?

Trò chơi của cuộc sống

Một dự án tuyệt vời liên quan đến toán học và đồ họa.

Một công cụ blog

  • Cho phép người dùng đăng nhập và thêm bài viết
  • Khách truy cập có thể thêm bình luận
  • Lưu trữ dữ liệu ở đâu đó

Một công cụ QA

  • Cho phép người dùng đăng nhập
  • Thêm câu hỏi
  • Trả lời câu hỏi
  • Cho phép người dùng ban đầu chọn câu hỏi hay nhất
  • Lưu trữ dữ liệu ở đâu đó

Một công cụ diễn đàn

  • Cho phép người dùng đăng nhập
  • Thêm bài viết
  • Bình luận về bài viết
  • Lưu trữ dữ liệu ở đâu đó

Một cuộc trò chuyện trực tiếp có thể nhúng

Hãy nghĩ đến Intercom hoặc Olark.

  • Có một "chương trình phụ trợ" để bạn phản hồi
  • Nhúng vào một trang web
  • Để mọi người viết thư cho bạn một cách riêng tư

Ứng dụng được cung cấp bởi API

Ứng dụng khách của Hacker News

  • Liệt kê các bài đăng phổ biến
  • Hiển thị bình luận của bài đăng
  • Hiển thị hồ sơ của người dùng
  • Tìm HN

Xem HNPWA và Tin tức Hacker tuyệt vời để tìm cảm hứng.

Một ứng dụng Reddit

  • Liệt kê các bài đăng phổ biến
  • Liệt kê các bình luận của một bài đăng
  • Hiển thị hồ sơ của người dùng

Một khách hàng Instagram

  • Nhập thẻ bắt đầu bằng # và nhận các bài đăng mới nhất
  • Nhập tên người dùng và nhận các bài viết mới nhất
  • Cho phép lưu trữ một hoặc nhiều thẻ bắt đầu bằng # / tên người dùng và nhận tất cả các bài đăng mới nhất từ ​​những

Ứng dụng khách API GitHub

  • Liệt kê các kho phổ biến từ hôm nay / tuần / tháng
  • Liệt kê các cam kết mới nhất trong một kho lưu trữ
  • Hiển thị kho lưu trữ công khai của một người hoặc tổ chức được xếp hạng theo sao

Một ứng dụng API Unsplash

  • Tìm kiếm hình ảnh theo chủ đề
  • Cho phép người dùng nhập một thuật ngữ, hiển thị hình ảnh có liên quan

Bắt đầu tại API Unsplash để tìm cảm hứng.

Dữ liệu cho các ứng dụng mẫu của bạn

Đôi khi bạn bắt đầu xây dựng một số ứng dụng đơn giản, nhưng lại cảm thấy nhàm chán với dữ liệu mà bạn tìm thấy mà bạn có thể sử dụng. Bạn không cần phải cảm thấy nhàm chán! Bạn có thể sử dụng dữ liệu thực hoặc dữ liệu ngẫu nhiên.

API công khai bạn có thể sử dụng trong các dự án mẫu

Có thể bạn có ý tưởng về một ứng dụng CRUD hoàn toàn đẹp mắt hoặc thứ gì đó hoạt động với API, nhưng bạn không muốn tạo API ngay từ đầu.

Tôi khuyên bạn nên xem Airtable, nơi cung cấp một API tuyệt vời cho các nhà phát triển. Nó rất dễ sử dụng, giống như một cơ sở dữ liệu.

Dưới đây là một số API công khai tuyệt vời mà bạn có thể sử dụng:

  • API Cat
  • API Dog
  • API Chuck Norris
  • F ** k Tắt như một API dịch vụ
  • API báo giá
  • API báo giá
  • API trò đùa của bố
  • API Spotify
  • API Thời báo New York
  • API Wikipedia
  • API Wikidata
  • API phương tiện
  • API báo giá thiết kế
  • API GoodReads
  • API Dribbble
  • API 500px
  • API Unsplash
  • API Giphy - Ảnh GIF!
  • API Pixabay
  • Tỷ giá hối đoái
  • API ảnh chụp màn hình trang web
  • API từ điển Oxford
  • API công nghệ trang web
  • API Mapbox
  • API lời bài hát của Genius
  • API thẻ meta trang web
  • API EventBrite
  • Thay đổi các dự án nguồn mở
  • API GitHub REST
  • API GitHub GraphQL
  • API mã QR
  • API StackExchange
  • Từ và từ đồng nghĩa
  • API Nasa
  • API SpaceX
  • API tin tức về hacker
  • API Instagram
  • API Reddit
  • API Slack
  • API Twitter
  • API YouTube

Trình giữ chỗ hình ảnh cho các dự án mẫu của bạn

  • Placeholder.com
  • Placekitten

Trình tạo hình ảnh

Ảnh đại diện:

  • RoboHash
  • Hình đại diện đáng yêu
  • Hình đại diện DiceBear (pixel art)
  • Lorem Picsum

Trình tạo văn bản mẫu cho các dự án mẫu của bạn

Lorem Ipsum thật nhàm chán. Thêm gia vị!

Nếu bạn khăng khăng sử dụng Lorem Ipsum, Loripsum là một máy phát điện tốt.

Dữ liệu giả mạo khác

FakeJSON có rất nhiều khả năng tạo dữ liệu giả mạo.

JSONPlaceholder có các bài đăng, nhận xét, ảnh, việc cần làm, người dùng và album giả mạo, tất cả đều sẵn sàng để tiêu thụ REST.

Cần tên giả / tạo dữ liệu người dùng? Kiểm tra Tên giao diện người dùng và Người dùng ngẫu nhiên.

Kết thúc

Tôi hy vọng danh sách này đủ toàn diện để phù hợp với nhu cầu của bạn!

Chúc vui vẻ!

Quan tâm đến việc học JavaScript? Nhận ebook của tôi tại jshandbook.com