ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

1. Клон Notion

Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

www.notion.so

Чему вы научитесь, создавая клон Notion:

  • HTML Drag and drop API. Пользователь может «схватить мышкой» draggable элемент и поместить его в droppable зону.
  • Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
  • Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

వ్యాసం EDISON సాఫ్ట్‌వేర్ మద్దతుతో అనువదించబడింది, ఇది разрабатывает приложения и сайтыమరియు స్టార్టప్‌లలో పెట్టుబడులు పెడుతుంది.

2. Клон Repl.it

Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

repl.it

Чему вы научитесь, создавая клон Repl.it:

  • Как запускать и выполнять код (server-side) в браузере (client-side).
  • Считывать входные данные (исходный код) и выводить на экран результат выполнения.
  • Как создавать файлы и папки в вебе и сохранять результаты.
  • Как подсвечивать синтаксис кода.

3. Клон Google Photos

Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

www.google.com/photos/about

Чему вы научитесь, создавая клон Google Photos:

  • Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
  • Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
  • Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
  • ఉపరి లాభ బహుమానము: как хранить изображения в облаке или локальной базе данных.

4. Клон Gifsky

గిఫ్స్కి конвертирует видео в GIF используя функцииpngquant для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

gif.ski

Чему вы научитесь, создавая клон Gifski:

  • Как конвертировать видео файлы (.mp4 в .gif).
  • Как использовать API Drag and Drop HTML.
  • Как работают оптимизация и обработка изображений.

గమనిక: Gifsky — это проект с открытым исходным кодом и есть на GitHub!

5. Мониторинг курсов криптовалют

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

React Native cryptocurrency tracker

Чему вы научитесь, создавая трекер курса валют:

  • Как работать с API и получать данные удаленно из API.
  • Как отобразить данные в виде списка.
  • ఉపరి లాభ బహుమానము: Если вам интересно, я недавно написал туториал по созданию трекера цен на криптовалюту с React Native.

గమనిక: ఇక్కడ GitHub example repository.

Подборка проектов из предыдущих публикаций.

లేయర్

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

www.reddit.com/r/layer

లేయర్ అనేది భాగస్వామ్య “బోర్డ్”లో ప్రతి ఒక్కరూ పిక్సెల్‌ని గీయగల సంఘం. అసలు ఆలోచన రెడ్డిట్‌లో పుట్టింది. r/Layer కమ్యూనిటీ అనేది భాగస్వామ్య సృజనాత్మకతకు ఒక రూపకం, ప్రతి ఒక్కరూ సృష్టికర్తలు కావచ్చు మరియు ఒక సాధారణ కారణానికి సహకరించగలరు.

మీ స్వంత లేయర్ ప్రాజెక్ట్‌ను సృష్టించేటప్పుడు మీరు ఏమి నేర్చుకుంటారు:

  • JavaScript కాన్వాస్ ఎలా పని చేస్తుంది కాన్వాస్‌ను ఎలా ఆపరేట్ చేయాలో తెలుసుకోవడం అనేది చాలా అప్లికేషన్‌లలో కీలకమైన నైపుణ్యం.
  • వినియోగదారు అనుమతులను ఎలా సమన్వయం చేయాలి. ప్రతి వినియోగదారు లాగిన్ చేయకుండానే ప్రతి 15 నిమిషాలకు ఒక పిక్సెల్ డ్రా చేయవచ్చు.
  • కుక్కీ సెషన్‌లను సృష్టించండి.

Squoosh

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
squoosh.app

Squoosh అనేది అనేక అధునాతన ఎంపికలతో కూడిన ఇమేజ్ కంప్రెషన్ అప్లికేషన్.

GIF 20 MBఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

Squoosh యొక్క మీ స్వంత సంస్కరణను సృష్టించడం ద్వారా మీరు నేర్చుకుంటారు:

  • చిత్ర పరిమాణాలతో ఎలా పని చేయాలి
  • Drag'n'Drop API యొక్క ప్రాథమికాలను తెలుసుకోండి
  • API మరియు ఈవెంట్ శ్రోతలు ఎలా పని చేస్తారో అర్థం చేసుకోండి
  • ఫైల్‌లను ఎలా అప్‌లోడ్ చేయాలి మరియు ఎగుమతి చేయాలి

గమనిక: ఇమేజ్ కంప్రెసర్ స్థానికంగా ఉంటుంది. సర్వర్‌కు అదనపు డేటాను పంపాల్సిన అవసరం లేదు. మీరు ఇంట్లో కంప్రెసర్‌ని కలిగి ఉండవచ్చు లేదా మీరు దానిని సర్వర్‌లో ఉపయోగించవచ్చు, మీ ఎంపిక.

కాలిక్యులేటర్

వస్తావా? తీవ్రంగా? కాలిక్యులేటర్? అవును, సరిగ్గా, ఒక కాలిక్యులేటర్. గణిత కార్యకలాపాల యొక్క ప్రాథమికాలను అర్థం చేసుకోవడం మరియు అవి ఎలా కలిసి పని చేస్తాయి అనేది మీ అప్లికేషన్‌లను సరళీకృతం చేయడంలో కీలకమైన నైపుణ్యం. ముందుగానే లేదా తరువాత మీరు సంఖ్యలను ఎదుర్కోవలసి ఉంటుంది మరియు ఎంత త్వరగా అంత మంచిది.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
jarodburchill.github.io/CalculatorReactApp

మీ స్వంత కాలిక్యులేటర్‌ను సృష్టించడం ద్వారా మీరు నేర్చుకుంటారు:

  • సంఖ్యలు మరియు గణిత కార్యకలాపాలతో పని చేయండి
  • ఈవెంట్ శ్రోతల APIతో ప్రాక్టీస్ చేయండి
  • అంశాలను ఎలా ఏర్పాటు చేయాలి, శైలులను అర్థం చేసుకోండి

క్రాలర్ (సెర్చ్ ఇంజన్)

ప్రతి ఒక్కరూ శోధన ఇంజిన్‌ను ఉపయోగించారు, కాబట్టి మీ స్వంతంగా ఎందుకు సృష్టించకూడదు? సమాచారం కోసం శోధించడానికి క్రాలర్లు అవసరం. ప్రతి ఒక్కరూ వాటిని ప్రతిరోజూ ఉపయోగిస్తున్నారు మరియు ఈ సాంకేతికత మరియు నిపుణుల కోసం డిమాండ్ కాలక్రమేణా పెరుగుతుంది.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
Google శోధన ఇంజిన్

మీ స్వంత శోధన ఇంజిన్‌ని సృష్టించడం ద్వారా మీరు ఏమి నేర్చుకుంటారు:

  • క్రాలర్లు ఎలా పని చేస్తాయి
  • సైట్‌లను ఎలా సూచిక చేయాలి మరియు రేటింగ్ మరియు కీర్తి ద్వారా వాటిని ఎలా ర్యాంక్ చేయాలి
  • ఇండెక్స్ చేయబడిన సైట్‌లను డేటాబేస్‌లో ఎలా నిల్వ చేయాలి మరియు డేటాబేస్‌తో ఎలా పని చేయాలి

మ్యూజిక్ ప్లేయర్ (Spotify, Apple Music)

ప్రతి ఒక్కరూ సంగీతాన్ని వింటారు - ఇది మన జీవితంలో ఒక అంతర్భాగం. ఆధునిక మ్యూజిక్ స్ట్రీమింగ్ ప్లాట్‌ఫారమ్ యొక్క ప్రాథమిక మెకానిక్స్ ఎలా పనిచేస్తుందో బాగా అర్థం చేసుకోవడానికి మ్యూజిక్ ప్లేయర్‌ని క్రియేట్ చేద్దాం.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
Spotify

మీ స్వంత సంగీత స్ట్రీమింగ్ ప్లాట్‌ఫారమ్‌ను సృష్టించడం ద్వారా మీరు ఏమి నేర్చుకుంటారు:

  • APIతో ఎలా పని చేయాలి. Spotify లేదా Apple Music నుండి APIని ఉపయోగించండి
  • తదుపరి/మునుపటి ట్రాక్‌కి ప్లే చేయడం, పాజ్ చేయడం లేదా రివైండ్ చేయడం ఎలా
  • వాల్యూమ్‌ను ఎలా మార్చాలి
  • వినియోగదారు రూటింగ్ మరియు బ్రౌజర్ చరిత్రను ఎలా నిర్వహించాలి

రియాక్ట్ (హుక్స్‌తో) ఉపయోగించి మూవీ సెర్చ్ యాప్

రియాక్ట్‌ని ఉపయోగించి మూవీ సెర్చ్ యాప్‌ని క్రియేట్ చేయడం మీరు మొదటగా ప్రారంభించవచ్చు. చివరి అప్లికేషన్ ఎలా ఉంటుందో దాని యొక్క చిత్రం క్రింద ఉంది:

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు
ఈ యాప్‌ను రూపొందించడం ద్వారా, మీరు సాపేక్షంగా కొత్త Hooks APIని ఉపయోగించడం ద్వారా మీ రియాక్ట్ నైపుణ్యాలను మెరుగుపరుస్తారు. ఉదాహరణ ప్రాజెక్ట్ రియాక్ట్ భాగాలు, చాలా హుక్స్, బాహ్య API మరియు కొన్ని CSS స్టైలింగ్‌ని ఉపయోగిస్తుంది.

టెక్ స్టాక్ మరియు ఫీచర్లు

  • హుక్స్‌తో ప్రతిస్పందించండి
  • క్రియేట్-రియాక్ట్-అనువర్తనం
  • JSX
  • CSS

ఎటువంటి తరగతులను ఉపయోగించకుండా, ఈ ప్రాజెక్ట్‌లు మీకు ఫంక్షనల్ రియాక్ట్‌లోకి సరైన ఎంట్రీ పాయింట్‌ను అందిస్తాయి మరియు 2020లో మీకు ఖచ్చితంగా సహాయపడతాయి. మీరు కనుగొనగలరు ఇక్కడ ఉదాహరణ ప్రాజెక్ట్. సూచనలను అనుసరించండి లేదా మీ స్వంతం చేసుకోండి.

Vueతో చాట్ యాప్

నాకు ఇష్టమైన జావాస్క్రిప్ట్ లైబ్రరీని ఉపయోగించి చాట్ యాప్‌ను సృష్టించడం మీరు చేయవలసిన మరో గొప్ప ప్రాజెక్ట్: VueJS. అప్లికేషన్ ఇలా కనిపిస్తుంది:

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు
ఈ ట్యుటోరియల్‌లో, మీరు మొదటి నుండి Vue యాప్‌ను ఎలా తయారు చేయాలో నేర్చుకుంటారు - భాగాలను సృష్టించడం, స్థితిని నిర్వహించడం, మార్గాలను సృష్టించడం, మూడవ పక్ష సేవలకు కనెక్ట్ చేయడం మరియు ప్రామాణీకరణను కూడా నిర్వహించడం.

టెక్ స్టాక్ మరియు ఫీచర్లు

  • వ్యూ
  • vuex
  • Vue రూటర్
  • Vue CLI
  • Pusher
  • CSS

Vueతో ప్రారంభించడానికి లేదా 2020లో అభివృద్ధిలోకి రావడానికి మీ ప్రస్తుత నైపుణ్యాలను మెరుగుపరచుకోవడానికి ఇది నిజంగా గొప్ప ప్రాజెక్ట్. మీరు కనుగొనగలరు ఇక్కడ ట్యుటోరియల్.

కోణీయ 8తో అందమైన వాతావరణ యాప్

కోణీయ 8ని ఉపయోగించి అందమైన వాతావరణ యాప్‌ను రూపొందించడంలో ఈ ఉదాహరణ మీకు సహాయం చేస్తుంది:

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు
ఈ ప్రాజెక్ట్ మొదటి నుండి అప్లికేషన్‌లను రూపొందించడంలో మీకు విలువైన నైపుణ్యాలను నేర్పుతుంది - డిజైన్ నుండి డెవలప్‌మెంట్ వరకు, డిప్లాయ్‌మెంట్-సిద్ధంగా ఉన్న అప్లికేషన్ వరకు.

టెక్ స్టాక్ మరియు ఫీచర్లు

  • కోణీయ 8
  • Firebase
  • సర్వర్ వైపు రెండరింగ్
  • గ్రిడ్ మరియు ఫ్లెక్స్‌బాక్స్‌తో CSS
  • మొబైల్ స్నేహపూర్వక మరియు అనుకూలత
  • డార్క్ మోడ్
  • అందమైన ఇంటర్ఫేస్

ఈ అన్నింటినీ చుట్టుముట్టే ప్రాజెక్ట్‌లో నేను నిజంగా ఇష్టపడేది ఏమిటంటే, మీరు ఏకాంతంగా విషయాలను అధ్యయనం చేయరు. బదులుగా, మీరు డిజైన్ నుండి తుది విస్తరణ వరకు మొత్తం అభివృద్ధి ప్రక్రియను నేర్చుకుంటారు.

Svelteని ఉపయోగించి చేయవలసిన పని

స్వేల్టే అనేది కాంపోనెంట్-బేస్డ్ అప్రోచ్‌లో కొత్త పిల్లవాడిలా ఉంటుంది - కనీసం రియాక్ట్, వ్యూ మరియు యాంగ్యులర్‌ని పోలి ఉంటుంది. మరియు ఇది 2020కి సంబంధించిన హాటెస్ట్ కొత్త ఉత్పత్తులలో ఒకటి.

చేయవలసిన యాప్‌లు హాటెస్ట్ టాపిక్ కానవసరం లేదు, కానీ ఇది మీ స్వల్టే నైపుణ్యాలను మెరుగుపరుచుకోవడంలో మీకు నిజంగా సహాయపడుతుంది. ఇది ఇలా కనిపిస్తుంది:

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు
ఈ ట్యుటోరియల్ ప్రారంభం నుండి ముగింపు వరకు Svelte 3ని ఉపయోగించి అప్లికేషన్‌ను ఎలా సృష్టించాలో మీకు చూపుతుంది. మీరు భాగాలు, స్టైలింగ్ మరియు ఈవెంట్ హ్యాండ్లర్‌లను ఉపయోగిస్తారు

టెక్ స్టాక్ మరియు ఫీచర్లు

  • స్వల్టే 3
  • భాగాలు
  • CSSతో స్టైలింగ్
  • ES 6 సింటాక్స్

చాలా మంచి Svelte స్టార్టర్ ప్రాజెక్ట్‌లు లేవు, కాబట్టి నేను కనుగొన్నాను ప్రారంభించడానికి ఇది మంచి ఎంపిక.

Next.jsని ఉపయోగించి ఇ-కామర్స్ యాప్

Next.js అనేది బాక్స్ వెలుపల సర్వర్ వైపు రెండరింగ్‌కు మద్దతు ఇచ్చే రియాక్ట్ అప్లికేషన్‌లను రూపొందించడానికి అత్యంత ప్రజాదరణ పొందిన ఫ్రేమ్‌వర్క్.

ఈ ప్రాజెక్ట్ ఇలా కనిపించే ఇ-కామర్స్ అప్లికేషన్‌ను ఎలా సృష్టించాలో మీకు చూపుతుంది:

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు
ఈ ప్రాజెక్ట్‌లో, మీరు Next.jsతో ఎలా అభివృద్ధి చేయాలో నేర్చుకుంటారు—కొత్త పేజీలు మరియు భాగాలను సృష్టించడం, డేటాను సంగ్రహించడం మరియు శైలి మరియు తదుపరి అప్లికేషన్‌ని అమలు చేయడం.

టెక్ స్టాక్ మరియు ఫీచర్లు

  • తదుపరి.జెస్
  • భాగాలు మరియు పేజీలు
  • డేటా నమూనా
  • శైలీకరణ
  • ప్రాజెక్ట్ విస్తరణ
  • SSR మరియు SPA

క్రొత్తదాన్ని నేర్చుకోవడానికి ఇ-కామర్స్ యాప్ వంటి వాస్తవ ప్రపంచ ఉదాహరణను కలిగి ఉండటం ఎల్లప్పుడూ గొప్ప విషయం. నువ్వు చేయగలవు ఇక్కడ ట్యుటోరియల్‌ని కనుగొనండి.

Nuxt.jsతో పూర్తి స్థాయి బహుభాషా బ్లాగ్

Nuxt.js Vue కోసం, రియాక్ట్ కోసం Next.js అంటే ఏమిటి: సర్వర్-సైడ్ రెండరింగ్ మరియు సింగిల్-పేజీ అప్లికేషన్‌ల శక్తిని కలపడానికి గొప్ప ఫ్రేమ్‌వర్క్
మీరు సృష్టించగల చివరి అప్లికేషన్ ఇలా కనిపిస్తుంది:

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు

ఈ నమూనా ప్రాజెక్ట్‌లో, ప్రారంభ సెటప్ నుండి తుది విస్తరణ వరకు Nuxt.jsని ఉపయోగించి పూర్తి వెబ్‌సైట్‌ను ఎలా సృష్టించాలో మీరు నేర్చుకుంటారు.

ఇది Nuxt అందించే పేజీలు మరియు భాగాలు మరియు SCSSతో స్టైలింగ్ వంటి అనేక అద్భుతమైన ఫీచర్‌ల ప్రయోజనాన్ని పొందుతుంది.

టెక్ స్టాక్ మరియు ఫీచర్లు

  • Nuxt.js
  • భాగాలు మరియు పేజీలు
  • స్టోరీబ్లాక్ మాడ్యూల్
  • హాగ్ ఫిష్
  • రాష్ట్ర నిర్వహణ కోసం Vuex
  • స్టైలింగ్ కోసం SCSS
  • నక్స్ట్ మిడిల్‌వేర్

ఇది నిజంగా అద్భుతమైన ప్రాజెక్ట్, ఇది అనేక గొప్ప Nuxt.js లక్షణాలను కలిగి ఉంది. నేను వ్యక్తిగతంగా నక్స్ట్‌తో కలిసి పనిచేయడాన్ని ఇష్టపడతాను కాబట్టి మీరు దీన్ని ఒకసారి ప్రయత్నించండి, ఇది మిమ్మల్ని గొప్ప Vue డెవలపర్‌గా కూడా చేస్తుంది.

Gatsbyతో బ్లాగ్ చేయండి

Gatsby అనేది React మరియు GraphQLని ఉపయోగించే ఒక అద్భుతమైన స్టాటిక్ సైట్ జనరేటర్. ఇది ప్రాజెక్ట్ యొక్క ఫలితం:

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు

ఈ ట్యుటోరియల్‌లో, మీరు React మరియు GraphQLని ఉపయోగించి మీ స్వంత కథనాలను వ్రాయడానికి ఉపయోగించే బ్లాగును సృష్టించడానికి Gatsbyని ఎలా ఉపయోగించాలో నేర్చుకుంటారు.

టెక్ స్టాక్ మరియు ఫీచర్లు

  • గాత్స్బీ లను సంప్రదించింది
  • స్పందించలేదు
  • గ్రాఫ్క్యూల్
  • ప్లగిన్‌లు మరియు థీమ్‌లు
  • MDX/మార్క్‌డౌన్
  • బూట్స్ట్రాప్ CSS
  • పద్ధతులు

మీరు ఎప్పుడైనా బ్లాగును ప్రారంభించాలనుకుంటే, ఇది ఒక గొప్ప ఉదాహరణ రియాక్ట్ మరియు గ్రాఫ్‌క్యూఎల్‌ని ఉపయోగించి దీన్ని ఎలా తయారు చేయాలో.

నేను WordPress ఒక చెడ్డ ఎంపిక అని చెప్పడం లేదు, కానీ Gatsbyతో మీరు Reactని ఉపయోగించి అధిక-పనితీరు గల వెబ్‌సైట్‌లను రూపొందించవచ్చు - ఇది అద్భుతమైన కలయిక.

గ్రిడ్‌సమ్‌తో బ్లాగ్ చేయండి

Vue కోసం గ్రిడ్‌సమ్... సరే, మేము ఇప్పటికే దీన్ని Next/Nuxtతో కలిగి ఉన్నాము.
కానీ గ్రిడ్‌సమ్ మరియు గాట్స్‌బైకి కూడా ఇదే వర్తిస్తుంది. రెండూ GraphQLని తమ డేటా లేయర్‌గా ఉపయోగిస్తాయి, అయితే Gridsome VueJSని ఉపయోగిస్తుంది. ఇది అద్భుతమైన స్టాటిక్ సైట్ జనరేటర్, ఇది గొప్ప బ్లాగులను సృష్టించడంలో మీకు సహాయపడుతుంది:

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు

గ్రిడ్‌సమ్, గ్రాఫ్‌క్యూఎల్ మరియు మార్క్‌డౌన్‌తో ప్రారంభించడానికి సాధారణ బ్లాగును ఎలా సృష్టించాలో ఈ ప్రాజెక్ట్ మీకు నేర్పుతుంది. నెట్‌లిఫై ద్వారా అప్లికేషన్‌ను ఎలా అమలు చేయాలో కూడా ఇది కవర్ చేస్తుంది.

టెక్ స్టాక్ మరియు ఫీచర్లు

  • గ్రిడ్సమ్
  • వ్యూ
  • గ్రాఫ్క్యూల్
  • Markdown
  • నెట్‌లిఫై

ఇది ఖచ్చితంగా అత్యంత సమగ్రమైన ట్యుటోరియల్ కాదు, కానీ ఇది గ్రిడ్‌సమ్ యొక్క ప్రాథమిక భావనలను కవర్ చేస్తుంది మరియు మార్క్‌డౌన్ మంచి ప్రారంభ స్థానం కావచ్చు.

Quasar ఉపయోగించి సౌండ్‌క్లౌడ్ లాంటి ఆడియో ప్లేయర్

Quasar అనేది మొబైల్ అప్లికేషన్‌లను రూపొందించడానికి ఉపయోగించే మరొక Vue ఫ్రేమ్‌వర్క్. ఈ ప్రాజెక్ట్‌లో మీరు ఆడియో ప్లేయర్ అప్లికేషన్‌ను సృష్టిస్తారు, ఉదాహరణకు:

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు

ఇతర ప్రాజెక్ట్‌లు ప్రధానంగా వెబ్ అప్లికేషన్‌లపై దృష్టి సారిస్తుండగా, Vue మరియు Quasar ఫ్రేమ్‌వర్క్‌ని ఉపయోగించి మొబైల్ అప్లికేషన్‌ను ఎలా సృష్టించాలో ఇది మీకు చూపుతుంది.
మీరు ఇప్పటికే ఆండ్రాయిడ్ స్టూడియో/ఎక్స్‌కోడ్ కాన్ఫిగర్‌తో కార్డోవాను రన్ చేసి ఉండాలి. కాకపోతే, మాన్యువల్‌లో క్వాసర్ వెబ్‌సైట్‌కి లింక్ ఉంది, అక్కడ వారు అన్నింటినీ ఎలా సెటప్ చేయాలో చూపుతారు.

టెక్ స్టాక్ మరియు ఫీచర్లు

  • క్వాజార్
  • వ్యూ
  • Cordova
  • వేవ్ సర్ఫర్
  • UI భాగాలు

చిన్న ప్రాజెక్ట్, మొబైల్ అప్లికేషన్‌లను రూపొందించడానికి క్వాసర్ సామర్థ్యాలను ప్రదర్శిస్తోంది.

Форма кредитной карты

మృదువైన మరియు ఆనందించే సూక్ష్మ పరస్పర చర్యలతో కూడిన చల్లని క్రెడిట్ కార్డ్ ఆకృతి. నంబర్ ఫార్మాటింగ్, ధృవీకరణ మరియు ఆటోమేటిక్ కార్డ్ రకాన్ని గుర్తించడం వంటివి ఉంటాయి. ఇది Vue.jsలో నిర్మించబడింది మరియు పూర్తిగా ప్రతిస్పందిస్తుంది. (మీరు చూడగలరు ఇక్కడ.)

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

క్రెడిట్ కార్డ్-ఫారమ్

మీరు ఏమి నేర్చుకుంటారు:

  • ఫారమ్‌లను ప్రాసెస్ చేయండి మరియు ధృవీకరించండి
  • ఈవెంట్‌లను నిర్వహించండి (ఉదాహరణకు, ఫీల్డ్‌లు మారినప్పుడు)
  • పేజీలో ఎలిమెంట్లను ఎలా ప్రదర్శించాలో మరియు ఉంచాలో అర్థం చేసుకోండి, ముఖ్యంగా ఫారమ్ పైన కనిపించే క్రెడిట్ కార్డ్ సమాచారం

బార్ గ్రాఫ్

హిస్టోగ్రాం అనేది చార్ట్ లేదా గ్రాఫ్, ఇది వారు సూచించే విలువలకు అనులోమానుపాతంలో ఎత్తులు లేదా పొడవులతో దీర్ఘచతురస్రాకార బార్‌లతో వర్గీకరణ డేటాను సూచిస్తుంది.

వాటిని నిలువుగా లేదా క్షితిజ సమాంతరంగా వర్తించవచ్చు. నిలువు బార్ చార్ట్‌ను కొన్నిసార్లు లైన్ చార్ట్ అని పిలుస్తారు.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు:

  • నిర్మాణాత్మకంగా మరియు అర్థమయ్యే రీతిలో డేటాను ప్రదర్శించండి
  • అదనంగా: మూలకాన్ని ఎలా ఉపయోగించాలో తెలుసుకోండి canvas మరియు దానితో అంశాలను ఎలా గీయాలి

ఇది మీరు ప్రపంచ జనాభా డేటాను కనుగొనవచ్చు. అవి సంవత్సరం వారీగా క్రమబద్ధీకరించబడతాయి.

Анимация сердечка Twitter

తిరిగి 2016లో, ట్విట్టర్ తన ట్వీట్ల కోసం ఈ అద్భుతమైన యానిమేషన్‌ను పరిచయం చేసింది. 2019 నాటికి, ఇది ఇప్పటికీ భాగంగా కనిపిస్తుంది, కాబట్టి మీరే ఎందుకు సృష్టించకూడదు?

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
మీరు ఏమి నేర్చుకుంటారు:

  • CSS లక్షణంతో పని చేయండి keyframes
  • HTML మూలకాలను మార్చండి మరియు యానిమేట్ చేయండి
  • జావాస్క్రిప్ట్, HTML మరియు CSSలను కలపండి

Репозитории GitHub с функцией поиска

ఇక్కడ ఫ్యాన్సీ ఏమీ లేదు-GitHub రిపోజిటరీలు కేవలం గ్లోరిఫైడ్ లిస్ట్ మాత్రమే.
రిపోజిటరీలను ప్రదర్శించడం మరియు వాటిని ఫిల్టర్ చేయడానికి వినియోగదారుని అనుమతించడం లక్ష్యం. వా డు అధికారిక GitHub API ప్రతి వినియోగదారు కోసం రిపోజిటరీలను పొందడానికి.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

GitHub ప్రొఫైల్ పేజీ - github.com/indreklasn

మీరు ఏమి నేర్చుకుంటారు:

Чаты в стиле Reddit

చాట్‌లు వాటి సరళత మరియు వాడుకలో సౌలభ్యం కారణంగా ఒక ప్రసిద్ధ కమ్యూనికేషన్ మార్గం. అయితే ఆధునిక చాట్ రూమ్‌లకు నిజంగా ఇంధనం ఏది? వెబ్‌సాకెట్‌లు!

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు:

  • WebSockets, నిజ-సమయ కమ్యూనికేషన్ మరియు డేటా అప్‌డేట్‌లను ఉపయోగించండి
  • వినియోగదారు యాక్సెస్ స్థాయిలతో పని చేయండి (ఉదాహరణకు, చాట్ ఛానెల్ యజమాని పాత్ర ఉంటుంది admin, మరియు గదిలో ఇతరులు - user)
  • ఫారమ్‌లను ప్రాసెస్ చేయండి మరియు ధృవీకరించండి - గుర్తుంచుకోండి, సందేశాన్ని పంపడానికి చాట్ విండో input
  • విభిన్న చాట్‌లను సృష్టించండి మరియు చేరండి
  • వ్యక్తిగత సందేశాలతో పని చేయండి. వినియోగదారులు ఇతర వినియోగదారులతో ప్రైవేట్‌గా చాట్ చేయవచ్చు. ముఖ్యంగా, మీరు ఇద్దరు వినియోగదారుల మధ్య WebSocket కనెక్షన్‌ని ఏర్పాటు చేస్తారు.

Навигация в стиле Stripe

ఈ నావిగేషన్ ప్రత్యేకత ఏమిటంటే పాప్‌ఓవర్ కంటైనర్ కంటెంట్‌కు సరిపోయేలా రూపాంతరం చెందుతుంది. కొత్త పాప్‌ఓవర్‌ను తెరవడం మరియు మూసివేయడం యొక్క సాంప్రదాయిక ప్రవర్తనతో పోలిస్తే ఈ పరివర్తనకు చక్కదనం ఉంది.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు ఏమి నేర్చుకుంటారు:

  • పరివర్తనాలతో CSS యానిమేషన్‌లను కలపండి
  • కంటెంట్‌ను మసకబారుస్తుంది మరియు ఫ్లోటెడ్ ఎలిమెంట్‌కు యాక్టివ్ క్లాస్‌ని వర్తింపజేయండి

ప్యాక్మ్యాన్

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీ స్వంత ప్యాక్‌మ్యాన్ వెర్షన్‌ను సృష్టించండి. గేమ్‌లు ఎలా అభివృద్ధి చెందుతాయి అనే ఆలోచనను పొందడానికి మరియు ప్రాథమికాలను అర్థం చేసుకోవడానికి ఇది గొప్ప మార్గం. JavaScript ఫ్రేమ్‌వర్క్, రియాక్ట్ లేదా Vueని ఉపయోగించండి.

నువ్వు నేర్చుకుంటావు:

  • మూలకాలు ఎలా కదులుతాయి
  • ఏ కీలను నొక్కాలో ఎలా నిర్ణయించాలి
  • తాకిడి యొక్క క్షణాన్ని ఎలా నిర్ణయించాలి
  • మీరు మరింత ముందుకు వెళ్లి దెయ్యాల కదలిక నియంత్రణలను జోడించవచ్చు

మీరు ఈ ప్రాజెక్ట్ యొక్క ఉదాహరణను కనుగొంటారు రిపోజిటరీలో గ్యాలరీలు

వాడుకరి నిర్వహణ

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

ప్రాజెక్ట్ రిపోజిటరీలో గ్యాలరీలు

యూజర్ అడ్మినిస్ట్రేషన్ కోసం CRUD రకం అప్లికేషన్‌ను సృష్టించడం వలన అభివృద్ధి యొక్క ప్రాథమికాలను మీకు బోధిస్తుంది. ఇది కొత్త డెవలపర్‌లకు ప్రత్యేకంగా ఉపయోగపడుతుంది.

నువ్వు నేర్చుకుంటావు:

  • రూటింగ్ అంటే ఏమిటి
  • డేటా ఎంట్రీ ఫారమ్‌లను ఎలా నిర్వహించాలి మరియు వినియోగదారు ఏమి నమోదు చేశారో తనిఖీ చేయండి
  • డేటాబేస్తో ఎలా పని చేయాలి - చర్యలను సృష్టించండి, చదవండి, నవీకరించండి మరియు తొలగించండి

Проверка погоды в вашем местоположении

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
ప్రాజెక్ట్ రిపోజిటరీలో గ్యాలరీలు

మీరు యాప్‌లను సృష్టించాలనుకుంటే, వాతావరణ యాప్‌తో ప్రారంభించండి. ఈ ప్రాజెక్ట్ స్విఫ్ట్ ఉపయోగించి పూర్తి చేయవచ్చు.

అనువర్తనాన్ని రూపొందించడంలో అనుభవాన్ని పొందడంతో పాటు, మీరు నేర్చుకుంటారు:

  • APIతో ఎలా పని చేయాలి
  • జియోలొకేషన్‌ను ఎలా ఉపయోగించాలి
  • టెక్స్ట్ ఇన్‌పుట్‌ని జోడించడం ద్వారా మీ అప్లికేషన్‌ను మరింత డైనమిక్‌గా చేయండి. దీనిలో, వినియోగదారులు నిర్దిష్ట ప్రదేశంలో వాతావరణాన్ని తనిఖీ చేయడానికి వారి స్థానాన్ని నమోదు చేయగలరు.

మీకు API అవసరం. వాతావరణ డేటాను పొందడానికి, OpenWeather APIని ఉపయోగించండి. OpenWeather API గురించి మరింత సమాచారం ఇక్కడ.

Окно чата

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
నా చాట్ విండో చర్యలో ఉంది, రెండు బ్రౌజర్ ట్యాబ్‌లలో తెరవండి

చాట్ విండోను సృష్టించడం అనేది సాకెట్లతో ప్రారంభించడానికి సరైన మార్గం. టెక్ స్టాక్ ఎంపిక చాలా పెద్దది. Node.js, ఉదాహరణకు, ఖచ్చితంగా ఉంది.

సాకెట్లు ఎలా పని చేస్తాయి మరియు వాటిని ఎలా అమలు చేయాలో మీరు నేర్చుకుంటారు. ఇది ఈ ప్రాజెక్ట్ యొక్క ప్రధాన ప్రయోజనం.

మీరు సాకెట్‌లతో పని చేయాలనుకునే లారావెల్ డెవలపర్ అయితే, నా చదవండి వ్యాసం

గిట్‌ల్యాబ్ సిఐ

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మూలం

మీరు నిరంతర ఏకీకరణ (CI)కి కొత్త అయితే, GitLab CIతో ఆడుకోండి. కొన్ని వాతావరణాలను సెటప్ చేయండి మరియు కొన్ని పరీక్షలను అమలు చేయడానికి ప్రయత్నించండి. ఇది చాలా కష్టమైన ప్రాజెక్ట్ కాదు, కానీ మీరు దీని నుండి చాలా నేర్చుకుంటారని నేను ఖచ్చితంగా అనుకుంటున్నాను. అనేక అభివృద్ధి బృందాలు ఇప్పుడు CIని ఉపయోగిస్తున్నాయి. ఎలా ఉపయోగించాలో తెలుసుకోవడం ఉపయోగకరంగా ఉంటుంది.

నువ్వు నేర్చుకుంటావు:

  • GitLab CI అంటే ఏమిటి
  • ఎలా కాన్ఫిగర్ చేయాలి .gitlab-ci.ymlఇది GitLab వినియోగదారుకు ఏమి చేయాలో చెబుతుంది
  • ఇతర వాతావరణాలకు ఎలా అమర్చాలి

Анализатор сайтов

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

వెబ్‌సైట్‌ల సెమాంటిక్స్‌ను విశ్లేషించి, వాటి రేటింగ్‌ను రూపొందించే స్క్రాపర్‌ను రూపొందించండి. ఉదాహరణకు, మీరు చిత్రాలలో తప్పిపోయిన ఆల్ట్ ట్యాగ్‌లను తనిఖీ చేయవచ్చు. లేదా పేజీలో SEO మెటా ట్యాగ్‌లు ఉన్నాయో లేదో తనిఖీ చేయండి. వినియోగదారు ఇంటర్‌ఫేస్ లేకుండా స్క్రాపర్‌ని సృష్టించవచ్చు.

నువ్వు నేర్చుకుంటావు:

  • స్క్రాపర్ ఎలా పని చేస్తుంది?
  • DOM సెలెక్టర్లను ఎలా సృష్టించాలి
  • అల్గోరిథం ఎలా వ్రాయాలి
  • మీరు అక్కడితో ఆగకూడదనుకుంటే, వినియోగదారు ఇంటర్‌ఫేస్‌ను సృష్టించండి. మీరు తనిఖీ చేసే ప్రతి వెబ్‌సైట్‌లో మీరు నివేదికను కూడా సృష్టించవచ్చు.

Определение настроений в социальных сетях

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మూలం

సోషల్ మీడియాలో సెంటిమెంట్ డిటెక్షన్ అనేది మెషిన్ లెర్నింగ్‌ను పరిచయం చేయడానికి ఒక గొప్ప మార్గం.

మీరు కేవలం ఒక సోషల్ నెట్‌వర్క్‌ని విశ్లేషించడం ద్వారా ప్రారంభించవచ్చు. సాధారణంగా ప్రతి ఒక్కరూ ట్విట్టర్‌తో ప్రారంభిస్తారు.

మీకు మెషిన్ లెర్నింగ్‌లో ఇప్పటికే అనుభవం ఉన్నట్లయితే, వివిధ సోషల్ నెట్‌వర్క్‌ల నుండి డేటాను సేకరించి వాటిని కలపడానికి ప్రయత్నించండి.

నువ్వు నేర్చుకుంటావు:

  • మెషిన్ లెర్నింగ్ అంటే ఏమిటి

Клон Trello

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

ఇండ్రెక్ లాస్న్ నుండి ట్రెల్లో క్లోన్.

మీరు ఏమి నేర్చుకుంటారు:

  • అభ్యర్థన ప్రాసెసింగ్ మార్గాల సంస్థ (రూటింగ్).
  • లాగివదులు.
  • కొత్త వస్తువులను ఎలా సృష్టించాలి (బోర్డులు, జాబితాలు, కార్డులు).
  • ఇన్‌పుట్ డేటాను ప్రాసెస్ చేయడం మరియు తనిఖీ చేయడం.
  • క్లయింట్ వైపు నుండి: స్థానిక నిల్వను ఎలా ఉపయోగించాలి, స్థానిక నిల్వకు డేటాను ఎలా సేవ్ చేయాలి, స్థానిక నిల్వ నుండి డేటాను ఎలా చదవాలి.
  • సర్వర్ వైపు నుండి: డేటాబేస్‌లను ఎలా ఉపయోగించాలి, డేటాబేస్‌లో డేటాను ఎలా సేవ్ చేయాలి, డేటాబేస్ నుండి డేటాను ఎలా చదవాలి.

రిపోజిటరీకి ఉదాహరణ ఇక్కడ ఉంది, React+Reduxలో తయారు చేయబడింది.

Панель админа

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
గితుబ్ రిపోజిటరీ.

ఒక సాధారణ CRUD అప్లికేషన్, బేసిక్స్ నేర్చుకోవడానికి అనువైనది. నేర్చుకుందాం:

  • వినియోగదారులను సృష్టించండి, వినియోగదారులను నిర్వహించండి.
  • డేటాబేస్తో పరస్పర చర్య చేయండి - వినియోగదారులను సృష్టించండి, చదవండి, సవరించండి, తొలగించండి.
  • ఇన్‌పుట్‌ని ధృవీకరించడం మరియు ఫారమ్‌లతో పని చేయడం.

Трекер криптовалют (нативное мобильное приложение)

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
గితుబ్ రిపోజిటరీ.

ఏదైనా: స్విఫ్ట్, ఆబ్జెక్టివ్-సి, రియాక్ట్ నేటివ్, జావా, కోట్లిన్.

అధ్యయనం చేద్దాం:

  • స్థానిక అప్లికేషన్లు ఎలా పని చేస్తాయి.
  • API నుండి డేటాను ఎలా తిరిగి పొందాలి.
  • స్థానిక పేజీ లేఅవుట్‌లు ఎలా పని చేస్తాయి.
  • మొబైల్ సిమ్యులేటర్‌లతో ఎలా పని చేయాలి.

ఈ APIని ప్రయత్నించండి. మీరు ఏదైనా మంచిదాన్ని కనుగొంటే, వ్యాఖ్యలలో వ్రాయండి.

మీకు ఆసక్తి ఉంటే, ఇదిగోండి ఇక్కడ ఒక ట్యుటోరియల్ ఉంది.

Настроить собственный конфиг webpack с нуля

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
సాంకేతికంగా, ఇది అప్లికేషన్ కాదు, కానీ లోపల నుండి వెబ్‌ప్యాక్ ఎలా పనిచేస్తుందో అర్థం చేసుకోవడం చాలా ఉపయోగకరమైన పని. ఇప్పుడు అది "బ్లాక్ బాక్స్" కాదు, కానీ అర్థమయ్యే సాధనం.

అవసరాలు:

  • es7 నుండి es5 వరకు కంపైల్ చేయండి (బేసిక్స్).
  • jsx నుండి js - లేదా - .vue నుండి .js వరకు కంపైల్ చేయండి (మీరు లోడర్‌లను నేర్చుకోవాలి)
  • వెబ్‌ప్యాక్ దేవ్ సర్వర్ మరియు హాట్ మాడ్యూల్ రీలోడింగ్‌ను సెటప్ చేయండి. (vue-cli మరియు create-react-app రెండింటినీ ఉపయోగిస్తాయి)
  • Heroku, now.sh లేదా Githubని ఉపయోగించండి, వెబ్‌ప్యాక్ ప్రాజెక్ట్‌లను ఎలా అమలు చేయాలో తెలుసుకోండి.
  • css - scss, తక్కువ, స్టైలస్ కంపైల్ చేయడానికి మీకు ఇష్టమైన ప్రిప్రాసెసర్‌ని సెటప్ చేయండి.
  • వెబ్‌ప్యాక్‌తో చిత్రాలు మరియు svgలను ఎలా ఉపయోగించాలో తెలుసుకోండి.

పూర్తి ప్రారంభకులకు ఇది అద్భుతమైన వనరు.

Клон Hackernews

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
ప్రతి జేడీ తన స్వంత హ్యాకర్‌న్యూస్‌ని తయారు చేసుకోవాలి.

మార్గంలో మీరు ఏమి నేర్చుకుంటారు:

  • హ్యాకర్‌న్యూస్ APIతో ఎలా ఇంటరాక్ట్ అవ్వాలి.
  • ఒకే పేజీ అప్లికేషన్‌ను ఎలా సృష్టించాలి.
  • వ్యాఖ్యలను వీక్షించడం, వ్యక్తిగత వ్యాఖ్యలు, ప్రొఫైల్‌లు వంటి లక్షణాలను ఎలా అమలు చేయాలి.
  • అభ్యర్థన ప్రాసెసింగ్ మార్గాల సంస్థ (రూటింగ్).

Тудушечка

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
TodoMVC.

తీవ్రంగా? తుడుష్కా? వాటిలో వేల సంఖ్యలో ఉన్నాయి. కానీ నన్ను నమ్మండి, ఈ ప్రజాదరణకు కారణం ఉంది.
మీరు ప్రాథమికాలను అర్థం చేసుకున్నారని నిర్ధారించుకోవడానికి టుడు యాప్ ఒక గొప్ప మార్గం. వనిల్లా జావాస్క్రిప్ట్‌లో ఒక అప్లికేషన్ మరియు మీకు ఇష్టమైన ఫ్రేమ్‌వర్క్‌లో ఒకటి రాయడానికి ప్రయత్నించండి.

తెలుసుకోండి:

  • కొత్త టాస్క్‌లను సృష్టించండి.
  • ఫీల్డ్‌లు పూరించబడ్డాయో లేదో తనిఖీ చేయండి.
  • ఫిల్టర్ టాస్క్‌లు (పూర్తయ్యాయి, సక్రియం, అన్నీ). వా డు filter и reduce.
  • జావాస్క్రిప్ట్ యొక్క ప్రాథమికాలను అర్థం చేసుకోండి.

Сортируемый drag and drop список

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
గితుబ్ రిపోజిటరీ.

అర్థం చేసుకోవడానికి చాలా ఉపకరిస్తుంది apiని లాగి వదలండి.

నేర్చుకుందాం:

  • APIని లాగి వదలండి
  • రిచ్ UIలను సృష్టించండి

Клон мессенджера (нативное приложение)

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)
వెబ్ అప్లికేషన్లు మరియు స్థానిక అప్లికేషన్లు రెండూ ఎలా పని చేస్తాయో మీరు అర్థం చేసుకుంటారు, ఇది మిమ్మల్ని గ్రే మాస్ నుండి వేరు చేస్తుంది.

మేము ఏమి అధ్యయనం చేస్తాము:

  • వెబ్ సాకెట్లు (తక్షణ సందేశాలు)
  • స్థానిక అప్లికేషన్లు ఎలా పని చేస్తాయి.
  • స్థానిక అప్లికేషన్‌లలో టెంప్లేట్‌లు ఎలా పని చేస్తాయి.
  • స్థానిక అప్లికేషన్‌లలో అభ్యర్థన ప్రాసెసింగ్ మార్గాలను నిర్వహించడం.

టెక్స్ట్ ఎడిటర్

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

టెక్స్ట్ ఎడిటర్ యొక్క ఉద్దేశ్యం వినియోగదారులు తమ ఫార్మాటింగ్‌ను చెల్లుబాటు అయ్యే HTML మార్కప్‌గా మార్చడానికి ప్రయత్నించే ప్రయత్నాన్ని తగ్గించడం. ఒక మంచి టెక్స్ట్ ఎడిటర్ వివిధ మార్గాల్లో టెక్స్ట్‌ను ఫార్మాట్ చేయడానికి వినియోగదారులను అనుమతిస్తుంది.

ఏదో ఒక సమయంలో, ప్రతి ఒక్కరూ టెక్స్ట్ ఎడిటర్‌ని ఉపయోగించారు. కాబట్టి ఎందుకు కాదు దానిని మీరే సృష్టించుకోండి?

Клон Reddit

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

Reddit సామాజిక వార్తల సముదాయం, వెబ్ కంటెంట్ రేటింగ్ మరియు చర్చా సైట్.

Reddit నా సమయాన్ని ఎక్కువగా తీసుకుంటుంది, కానీ నేను దానితో సమావేశాన్ని కొనసాగిస్తాను. Reddit క్లోన్‌ని సృష్టించడం అనేది ప్రోగ్రామింగ్ నేర్చుకోవడానికి ఒక ప్రభావవంతమైన మార్గం (అదే సమయంలో Reddit బ్రౌజ్ చేస్తున్నప్పుడు).

Reddit మీకు చాలా రిచ్‌ని అందిస్తుంది API. ఏ లక్షణాలను వదిలివేయవద్దు లేదా అస్థిరంగా పనులు చేయవద్దు. క్లయింట్లు మరియు కస్టమర్‌లు ఉన్న వాస్తవ ప్రపంచంలో, మీరు అస్థిరంగా పని చేయలేరు లేదా మీరు త్వరగా మీ ఉద్యోగాన్ని కోల్పోతారు.

స్మార్ట్ క్లయింట్లు ఉద్యోగం పేలవంగా జరుగుతోందని వెంటనే తెలుసుకుంటారు మరియు మరొకరిని కనుగొంటారు.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

రెడ్డిట్ API

Публикация пакета NPM с открытым исходным кодом

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు జావాస్క్రిప్ట్ కోడ్‌ని వ్రాస్తే, మీరు ప్యాకేజీ మేనేజర్‌ని ఉపయోగించే అవకాశం ఉంది. ఇతర వ్యక్తులు వ్రాసిన మరియు ప్రచురించిన ఇప్పటికే ఉన్న కోడ్‌ని మళ్లీ ఉపయోగించుకోవడానికి ప్యాకేజీ మేనేజర్ మిమ్మల్ని అనుమతిస్తుంది.

ప్యాకేజీ యొక్క పూర్తి అభివృద్ధి చక్రాన్ని అర్థం చేసుకోవడం చాలా మంచి అనుభవాన్ని అందిస్తుంది. కోడ్‌ని ప్రచురించేటప్పుడు మీరు తెలుసుకోవలసిన అనేక విషయాలు ఉన్నాయి. మీరు భద్రత, సెమాంటిక్ సంస్కరణ, స్కేలబిలిటీ, నామకరణ సంప్రదాయాలు మరియు నిర్వహణ గురించి ఆలోచించాలి.

ప్యాకేజీ ఏదైనా కావచ్చు. మీకు ఆలోచన లేకపోతే, మీ స్వంత లోడాష్‌ని సృష్టించి, దాన్ని ప్రచురించండి.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

లోడాష్: lodash.com

మీరు ఆన్‌లైన్‌లో చేసిన పనిని కలిగి ఉండటం వలన మీరు ఇతరుల కంటే 10% పైన ఉంటారు. ఇక్కడ కొన్ని ఉపయోగకరమైన వనరులు ఉన్నాయి ఓపెన్ సోర్సెస్ మరియు ప్యాకేజీల గురించి.

Учебный план freeCodeCamp

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

FCC పాఠ్యప్రణాళిక

freeCodecamp చాలా సేకరించింది సమగ్ర ప్రోగ్రామింగ్ కోర్సు.

freeCodeCamp అనేది లాభాపేక్ష లేని సంస్థ. ఇది ఇంటరాక్టివ్ వెబ్ ఆధారిత అభ్యాస ప్లాట్‌ఫారమ్, ఆన్‌లైన్ కమ్యూనిటీ ఫోరమ్, చాట్ రూమ్‌లు, మీడియం పబ్లికేషన్‌లు మరియు ప్రతి ఒక్కరికీ అందుబాటులో ఉండేలా లెర్నింగ్ వెబ్ డెవలప్‌మెంట్ చేయడానికి ఉద్దేశించిన స్థానిక సంస్థలను కలిగి ఉంటుంది.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మీరు మొత్తం కోర్సును పూర్తి చేయగలిగితే, మీరు మీ మొదటి ఉద్యోగానికి అర్హత కంటే ఎక్కువగా ఉంటారు.

Создайте HTTP-сервер с нуля

ఇంటర్నెట్‌లో కంటెంట్ ప్రయాణించే ప్రధాన ప్రోటోకాల్‌లలో HTTP ప్రోటోకాల్ ఒకటి. HTML, CSS మరియు JS వంటి స్టాటిక్ కంటెంట్‌ను అందించడానికి HTTP సర్వర్‌లు ఉపయోగించబడతాయి.

మొదటి నుండి HTTP ప్రోటోకాల్‌ను అమలు చేయగలగడం వలన విషయాలు ఎలా పరస్పరం పరస్పరం సంకర్షణ చెందుతాయి అనే దాని గురించి మీ జ్ఞానాన్ని విస్తరిస్తుంది.

ఉదాహరణకు, మీరు NodeJలను ఉపయోగిస్తే, ఎక్స్‌ప్రెస్ HTTP సర్వర్‌ని అందిస్తుందని మీకు తెలుసు.

సూచన కోసం, మీరు వీలైతే చూడండి:

  • లైబ్రరీలను ఉపయోగించకుండా సర్వర్‌ని సెటప్ చేయండి
  • సర్వర్ తప్పనిసరిగా HTML, CSS మరియు JS కంటెంట్‌ను అందించాలి.
  • మొదటి నుండి రూటర్‌ని అమలు చేస్తోంది
  • మార్పులను పర్యవేక్షించండి మరియు సర్వర్‌ను నవీకరించండి

ఎందుకు అని మీకు తెలియకపోతే, ఉపయోగించండి లాంగ్ వెళ్ళండి మరియు HTTP సర్వర్‌ని సృష్టించడానికి ప్రయత్నించండి కేడీ మొదటి నుండి.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

Десктопное приложение для заметок

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

మనమందరం నోట్స్ తీసుకుంటాము, కాదా?

నోట్స్ యాప్‌ని క్రియేట్ చేద్దాం. అప్లికేషన్ గమనికలను సేవ్ చేయాలి మరియు వాటిని డేటాబేస్తో సమకాలీకరించాలి. ఎలక్ట్రాన్, స్విఫ్ట్ లేదా మీకు నచ్చిన వాటిని మరియు మీ సిస్టమ్‌కి ఏది పని చేస్తుందో దాన్ని ఉపయోగించి స్థానిక యాప్‌ను రూపొందించండి.

దీన్ని మొదటి సవాలు (టెక్స్ట్ ఎడిటర్)తో కలపడానికి సంకోచించకండి.

బోనస్‌గా, మీ డెస్క్‌టాప్ వెర్షన్‌ను వెబ్ వెర్షన్‌తో సింక్ చేయడానికి ప్రయత్నించండి.

Подкасты (клон Overcast)

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

పాడ్‌క్యాస్ట్‌లను ఎవరు వినరు?

కింది కార్యాచరణతో వెబ్ అప్లికేషన్‌ను సృష్టించండి:

  • ఒక ఎకౌంటు సృష్టించు
  • పాడ్‌క్యాస్ట్‌లను శోధించండి
  • పాడ్‌క్యాస్ట్‌లకు రేట్ చేయండి మరియు సభ్యత్వాన్ని పొందండి
  • 30 సెకన్ల పాటు ఆపి ఆడండి, వేగం, ఫార్వర్డ్ మరియు బ్యాక్‌వర్డ్ ఫంక్షన్‌లను మార్చండి.

iTunes APIని ప్రారంభ బిందువుగా ఉపయోగించడానికి ప్రయత్నించండి. మీకు ఏవైనా ఇతర వనరుల గురించి తెలిస్తే, దయచేసి వ్యాఖ్యలలో పోస్ట్ చేయండి.

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

తెరపై చిత్రమును సంగ్రహించుట

ఫ్రంట్-ఎండ్ డోజో: డెవలపర్ నైపుణ్యాలకు శిక్షణ ఇచ్చే ప్రాజెక్ట్‌లు (5 కొత్త + 43 పాతవి)

హలో! నేను ప్రస్తుతం నా స్క్రీన్‌ని చిత్రీకరిస్తున్నాను!

మీ స్క్రీన్‌ని క్యాప్చర్ చేయడానికి మరియు క్లిప్‌ని ఇలా సేవ్ చేయడానికి మిమ్మల్ని అనుమతించే డెస్క్‌టాప్ లేదా వెబ్ యాప్‌ని సృష్టించండి .gif

ఇక్కడ కొన్ని చిట్కాలుదీన్ని ఎలా సాధించాలి.

వర్గాలు

మూలం: www.habr.com

ఒక వ్యాఖ్యను జోడించండి