Хочете побудувати щось цікаве? Ось список зразків ідей веб-додатків.

Зацікавлені у вивченні JavaScript? Отримайте мою електронну книгу на jshandbook.com

Якщо ви читаєте цей пост, ви, мабуть, шукаєте ідею. Ймовірно, ви хочете створити простий додаток, який ви можете використовувати в навчальному посібнику або у своєму прикладі проекту для тестування нового фреймворку або API. Але ви не можете знайти нічого, що справді резонує у вас.

Він повинен бути досить простим, щоб не забирати весь ваш час, але в той же час досить складним, щоб того варто було робити.

"Я не хочу створювати чергову додаткову програму!" Я чую, як ти думаєш.

Зрозуміла. Я написав цю публікацію, щоб допомогти собі, і сподіваюся, вона допоможе і вам.

Що ви знайдете нижче

Деякі ідеї є самостійними (не передбачаючи використання зовнішнього API), тоді як деякі використовують відомі загальнодоступні API, де ви можете легко отримати попередньо побудовані дані.

Деякі вимагають серверної частини, а інші ні, що також може залежати від вашої реалізації.

Але я намагався переконатися, що ці ідеї такі:

  • добре для підручника
  • добре експериментувати з веб-технологіями
  • не те, на що знадобиться тиждень
  • не “ідеї стартапу”
  • орієнтована на веб-програми
  • легко пояснити
  • легко будувати (менше 24 годин, якщо готується)
  • легко розширити за допомогою нових функцій

Отже, досить розмов, ось список!

Прості програми без зовнішніх залежностей

Додаток для відстеження ваги

  • Він приймає набір ручних записів вимірювань ваги, зроблених на різні дати
  • Він може побудувати графік
  • Це може дозволити вам відстежувати декілька об'єктів, наприклад, вагу більше однієї людини
  • Він десь зберігає ваги

Додаток для калькулятора

  • Стандартний калькулятор: цифри, +, -, *, / і результат

База даних книг

  • Введіть власні книги
  • Введіть книги, які хочете придбати
  • Зберігайте інформацію про книгу та зображення

Додаток рецептів

  • Введіть ім’я та опис із кроками
  • Є фотографії
  • Визначте рейтинг за складністю та якістю
  • Додайте необхідний час
  • Майте різні кроки із зображенням для кожного
  • Зберігайте їх десь

Трекер рахунків

  • Запишіть рахунки, суми та дати
  • Перелічіть рахунки
  • Майте кілька графіків (цього року / минулого року)
  • Зберігайте їх десь

Трекер витрат

  • Журнал витрат і позначити їх (або мати категорії)
  • Перелік витрат
  • Майте кілька графіків (минулий місяць / минулий рік)
  • Зберігайте їх десь

Додаток для чату

  • Якась роздягнута млявість
  • Люди входять без аутентифікації і їм присвоюється ім’я, яке зберігається на час повернення
  • Зберігати історію
  • Додайте сповіщення

Додаток для нотаток

  • Додайте нову нотатку
  • Перелічіть усі свої нотатки на бічній панелі
  • Зберігайте їх десь

Програма для особистого щоденника

  • Додайте записи із датою та текстом
  • Показати спочатку новіші
  • Вкладіть картинки
  • Зберігайте їх десь

Додаток pomodoro

  • Введіть час
  • Таймер запуску
  • Попередження, коли час закінчиться

Генератор мемів

  • Є 10 популярних зображень мемів
  • Нехай користувач додає текст
  • Результат - зображення + текст
  • Зберігати історію

Гра в хрестики-нолики

Ми всі знаємо, що таке гра в хрестики-нолики?

Гра життя

Чудовий проект із математикою та графікою.

Двигун блогу

  • Дозволити користувачеві входити в систему та додавати повідомлення
  • Відвідувачі можуть додавати коментарі
  • Зберігайте дані десь

Двигун QA

  • Дозволити користувачеві входити
  • Додайте запитання
  • Відповідь на запитання
  • Дозволити оригінальному користувачеві вибрати найкраще запитання
  • Зберігайте дані десь

Двигун форуму

  • Дозволити користувачеві входити
  • Додайте публікації
  • Коментувати дописи
  • Зберігайте дані десь

Вбудований чат

Подумайте про Intercom або Olark.

  • Майте “бекенд”, де ви відповідаєте
  • Вставити на веб-сторінку
  • Нехай люди пишуть вам приватно

Програми на основі API

Клієнт Hacker News

  • Перерахуйте популярні публікації
  • Показати коментарі до публікації
  • Показати профіль користувача
  • Пошук HN

Перегляньте HNPWA та Awesome Hacker News, щоб отримати натхнення.

Клієнт Reddit

  • Перерахуйте популярні публікації
  • Перерахуйте коментарі до публікації
  • Показати профіль користувача

Клієнт Instagram

  • Введіть хештег і отримуйте останні повідомлення
  • Введіть ім’я користувача та отримуйте останні повідомлення
  • Дозвольте зберігати один або кілька хеш-тегів / імен користувачів та отримувати всі останні повідомлення від них

Клієнт API GitHub

  • Перелічіть популярні сховища за сьогодні / тиждень / місяць
  • Перелічіть останні коміти у сховищі
  • Покажіть загальнодоступні сховища людини чи організації, класифіковані зірками

Клієнт API Unsplash

  • Шукати зображення за темами
  • Нехай користувач вводить термін, показує відповідні зображення

Почніть з Unsplash API для натхнення.

Дані для зразків програм

Іноді ви починаєте створювати якийсь простий додаток, але вас нудьгують знайдені вами дані, якими ви можете скористатися. Нудьгувати не треба! Ви можете використовувати реальні дані або випадкові дані.

Відкриті API, які ви можете використовувати в прикладах проектів

Можливо, у вас є ідея для ідеально приємного CRUD-додатку або чогось, що працює з API, але ви не хочете створювати API насамперед.

Я рекомендую вам перевірити Airtable, який пропонує чудовий API для розробників. Він дуже простий у використанні, як база даних.

Ось кілька дивовижних загальнодоступних API, якими ви можете скористатися:

  • Cat API
  • Dog API
  • API Чак Норріс
  • F ** k Вимкнено як API обслуговування
  • API котирувань
  • API котирувань
  • API для анекдотів тата
  • API Spotify
  • API New York Times
  • API Вікіпедії
  • API Вікіданих
  • API Medium
  • API Design Quotes
  • API GoodReads
  • Dribbble API
  • API 500px
  • API Unsplash
  • API Giphy - GIF-файли!
  • API Pixabay
  • Курси валют
  • API скріншотів сайту
  • API Оксфордського словника
  • API веб-технологій
  • API Mapbox
  • Music Lyrics API від Genius
  • API мета-тегів сайту
  • API EventBrite
  • Журнали змін проектів з відкритим кодом
  • API GitHub REST
  • API GitHub GraphQL
  • API QR-кодів
  • API StackExchange
  • Слова та синоніми
  • Nasa API
  • API SpaceX
  • API Hacker News
  • API Instagram
  • API Reddit
  • API Slack
  • Twitter API
  • API YouTube

Заповнювачі зображень для ваших зразкових проектів

  • Placeholder.com
  • Placekitten

Генератори зображень

Аватари:

  • RoboHash
  • Чарівні аватари
  • DiceBear Avatars (піксельне зображення)
  • Лорем Пікум

Зразок генератора тексту для зразкових проектів

Лорем Іпсум нудна. Приправте це!

Якщо ви наполягаєте на використанні Lorem Ipsum, Loripsum є хорошим генератором.

Інші фальшиві дані

FakeJSON має безліч можливостей для створення підроблених даних.

У JSONPlaceholder є підроблені публікації, коментарі, фотографії, завдання, користувачі та альбоми, усі готові до споживання.

Потрібне створення підроблених імен / даних користувачів? Перевірте імена інтерфейсу користувача та RandomUser.

Підведенню

Сподіваюся, цей список є достатньо вичерпним, щоб задовольнити ваші потреби!

Веселіться!

Зацікавлені у вивченні JavaScript? Отримайте мою електронну книгу на jshandbook.com