Искате ли да изградите нещо забавно? Ето списък с примерни идеи за уеб приложения.

Интересувате ли се от изучаването на 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, които можете да използвате:

  • API на Cat
  • API за кучета
  • API на Чък Норис
  • F ** k Изключен като API за услуга
  • API за котировки
  • API за котировки
  • API на Dad Jokes
  • API на Spotify
  • API на Ню Йорк Таймс
  • API на Wikipedia
  • API на Wikidata
  • API на Medium
  • API за оферти за дизайн
  • API на GoodReads
  • Dribbble API
  • API за 500px
  • API на Unsplash
  • API на Giphy - GIF файлове!
  • API на Pixabay
  • Валутни курсове
  • API за скрийншотове на сайтове
  • API на Оксфордския речник
  • API за уебсайт технологии
  • API на Mapbox
  • API за музикални текстове от Genius
  • API за мета тагове на сайта
  • API на EventBrite
  • Промени в проекти с отворен код
  • API за почивка на GitHub
  • API на GitHub GraphQL
  • API за QR кодове
  • API на StackExchange
  • Думи и синоними
  • API на Nasa
  • API на SpaceX
  • API на Hacker News
  • API на Instagram
  • API на Reddit
  • Slack API
  • API на Twitter
  • API на YouTube

Заместители на изображения за вашите примерни проекти

  • Placeholder.com
  • Placekitten

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

Аватари:

  • RoboHash
  • Очарователни аватари
  • DiceBear Аватари (пикселно изкуство)
  • Лорем Пикум

Примерен генератор на текст за вашите примерни проекти

Lorem Ipsum е скучно. Подправете го!

Ако настоявате да използвате Lorem Ipsum, Loripsum е добър генератор.

Други фалшиви данни

FakeJSON разполага с множество фалшиви възможности за генериране на данни.

JSONPlaceholder има фалшиви публикации, коментари, снимки, задачи, потребители и албуми, всички готови за ПОЧИВКА.

Нуждаете се от генериране на фалшиво име / потребителски данни? Проверете имената на потребителския интерфейс и RandomUser.

Обобщавайки

Надявам се този списък да е достатъчно изчерпателен, за да отговори на вашите нужди!

Забавлявай се!

Интересувате ли се от изучаването на JavaScript? Вземете моята електронна книга на jshandbook.com