1. Notion clone
Ny fampiharana Notion dia tian'ny maro; ahafahanao manatsara ny fizotran'ny asanao, miasa miaraka amin'ny antontan-taratasy, mandamina asa ary mampifanaraka ny angona eo amin'ny fitaovana.
Inona no hianaranao amin'ny famoronana clone Notion:
- . Ny mpampiasa dia afaka "misambotra amin'ny totozy" azo taritina Element ary apetraho ao droppable faritra.
- Ahoana ny fampifanarahana ny angona amin'ny fotoana tena izy eo amin'ny solosainao sy ny smartphone.
- Avelanay ny mpampiasa hamorona, hamaky, hanavao ary hamafa ireo rakitsoratra, amin'izany no mampiofana ny fahaiza-manao CRUD.
Nadika tamin'ny fanohanan'ny EDISON Software ny lahatsoratra, izay , ary koa .
2. Repl.it clone
Repl.it dia fitaovana ho an'ny fanitsiana kaody fiaraha-miasa amin'ny fotoana tena izy. Afaka misafidy fiteny maromaro ianao: JavaScript, Python, Mandehana ary mandehana mivantana amin'ny navigateur ny kaody. Tena ilaina amin'ny demo haingana sy dinidinika momba ny kaody.
Inona no hianaranao amin'ny famoronana clone Repl.it:
- Ahoana ny fampandehanana sy ny fanatanterahana ny kaody (lafin'ny mpizara) ao amin'ny navigateur (lafin'ny mpanjifa).
- Vakio ny angona fidirana (kaody loharano) ary asehoy ny valin'ny famonoana.
- Ahoana ny fomba hamoronana rakitra sy lahatahiry amin'ny tranonkala ary mitahiry ny valiny.
- Ahoana ny fomba hanasongadinana ny code syntax.
3. Google Photos Clone
Google Photos dia serivisy fitahirizana sy fizarana sary.
Ny fampiharana sary maoderina rehetra dia afaka manao asa fototra: mampakatra, mamokatra, sns. Te hamorona avatar manokana ny olona ary hizara sarin'ny saka, ka mila mahay miasa amin'ny sary ianao.
Inona no hianaranao amin'ny famoronana clone Google Photos:
- Ahoana ny fomba hamoronana sary mihetsika amin'ny finday, tablette, solosaina finday ary eny amin'ny fahitalavitra goavambe aza.
- Ahoana ny fitantanana ny fampiakarana sary, indrindra ny sary lehibe (>1MB) sy ny fampiakarana betsaka.
- Manaova fisie sary, amboary ary ovay ny sary ho an'ny thumbnail na rehefa manokatra galeria.
- Bonus: fomba fitahirizana sary ao amin'ny rahona na angona eo an-toerana.
4. Gifsky clone
manova horonan-tsary ho GIF amin'ny fampiasana fiasa ho an'ny palette cross-frame mahomby sy anti-aliasing ara-potoana. Ny vokatra dia GIF misy voninkazo an'arivony isaky ny sary.
Inona no hianaranao amin'ny famoronana clone Gifski:
- Ahoana ny fomba hamadihana rakitra video (.mp4 ho .gif).
- Ahoana ny fampiasana ny Drag and Drop HTML API.
- Ahoana ny fiasan'ny fanatsarana sy ny fanodinana sary.
Fanamarihana: ary ao amin'ny GitHub!
5. Fanaraha-maso ny tahan'ny cryptocurrency
React Native cryptocurrency tracker
Inona no hianaranao amin'ny famoronana mpanara-maso ny tahan'ny vola:
- Ahoana ny fomba fiasa miaraka amin'ny API sy ny fandraisana angona avy lavitra avy amin'ny API.
- Ahoana ny fomba hanehoana angona ho lisitra.
- Bonus: Raha liana ianao dia nanoratra aho vao haingana ho an'ny cryptocurrency miaraka amin'ny React Native.
Fanamarihana: eto .
Tetikasa voafantina avy amin'ny famoahana teo aloha.
Layer
Layer dia vondrom-piarahamonina ahafahan'ny tsirairay manao sary piksel amin'ny "birao" iombonana. Ny hevitra tany am-boalohany dia teraka tao amin'ny Reddit. Ny vondrom-piarahamonina r/Layer dia fanoharana ho an'ny famoronana iombonana, izay ahafahan'ny tsirairay ho mpamorona sy handray anjara amin'ny tanjona iraisana.
Inona no hianaranao rehefa mamorona tetikasa Layer anao manokana:
- Ny fomba fiasan'ny kanvas JavaScript Ny fahafantarana ny fomba fampandehanana lamba dia fahaiza-manao tena ilaina amin'ny fampiharana maro.
- Ahoana ny fandrindrana ny fahazoan-dàlana amin'ny mpampiasa. Ny mpampiasa tsirairay dia afaka manao sary piksel iray isaky ny 15 minitra nefa tsy mila miditra.
- Mamorona fivoriana cookie.
Squoosh
Squoosh dia fampiharana fanerena sary misy safidy mandroso maro.
GIF 20 MB
Amin'ny famoronana ny dikan-teninao manokana amin'ny Squoosh dia hianatra ianao:
- Ahoana ny fiasana amin'ny haben'ny sary
- Ianaro ny fototry ny Drag'n'Drop API
- Fantaro ny fomba fiasan'ny API sy ny mpihaino hetsika
- Ahoana ny fampiakarana sy fanondranana rakitra
Fanamarihana: Ny compressor sary dia eo an-toerana. Tsy ilaina ny mandefa data fanampiny amin'ny mpizara. Azonao atao ny manana ny compressor ao an-trano, na azonao ampiasaina amin'ny mpizara, ny safidinao.
fanaovana kajy
Eo moa? tena matotra? Calculator? Eny, kajy marina. Ny fahatakarana ny fototry ny asa matematika sy ny fomba iarahan'izy ireo dia fahaizana manan-danja amin'ny fanatsorana ny fampiharanao. Na ho ela na ho haingana dia tsy maintsy miatrika isa ianao ary ny haingana dia tsara kokoa.
Amin'ny famoronana kajy anao manokana dia hianatra ianao:
- Miaraha miasa amin'ny asa isa sy matematika
- Manaova fanazaran-tena miaraka amin'ny API mpihaino hetsika
- Ahoana no handaminana singa, hahatakatra ny fomba
Crawler (motera fikarohana)
Efa nampiasa motera fikarohana ny tsirairay, koa maninona raha mamorona anao manokana? Ilaina ny crawler hikaroka vaovao. Ny tsirairay dia mampiasa azy ireo isan'andro ary ny fangatahana an'io teknolojia sy manampahaizana manokana io dia hitombo ihany rehefa mandeha ny fotoana.
motera fikarohana Google
Inona no hianaranao amin'ny famoronana motera fikarohana anao manokana:
- Ahoana ny fiasan'ny crawlers
- Ahoana ny fanondroana tranokala sy ny fomba hametrahana azy ireo amin'ny alàlan'ny naoty sy laza
- Ahoana ny fomba fitehirizana tranokala voarakitra ao anaty tahiry sy ny fomba fiasa miaraka amin'ny tahiry
Mpilalao mozika (Spotify, Apple Music)
Mihaino mozika ny tsirairay - ampahany manan-danja amin'ny fiainantsika izany. Andao hamorona mpilalao mozika mba hahatakarana bebe kokoa ny fomba fiasan'ny mekanika fototra amin'ny sehatra fandefasana mozika maoderina.
Spotify
Inona no hianaranao amin'ny famoronana sehatra streaming mozika anao manokana:
- Ahoana ny fomba fiasa miaraka amin'ny API. mampiasa API avy amin'ny Spotify na Apple Music
- Ahoana ny filalaovana, fiatoana na famerenana amin'ny lalana manaraka/teo aloha
- Ahoana ny fanovana ny volume
- Ahoana ny fitantanana ny lalan'ny mpampiasa sy ny tantaran'ny navigateur
Fampiharana fikarohana sarimihetsika mampiasa React (miaraka amin'ny hooks)
Ny zavatra voalohany azonao atomboka dia ny mamorona rindranasa fikarohana sarimihetsika mampiasa React. Ity ambany ity ny sarin'ny ho endriky ny fampiharana farany:
Inona no hianaranao
Amin'ny fananganana ity fampiharana ity dia hanatsara ny fahaizanao React ianao amin'ny fampiasana ny API Hooks vaovao. Ny tetik'asa ohatra dia mampiasa singa React, hooks maro, API ivelany, ary mazava ho azy fa misy styling CSS.
Tech stack sy endri-javatra
- Mihetsika amin'ny farango
- mamorona-Maneho Hevitra Momba-fampiharana
- JSX
- CSS
Raha tsy mampiasa kilasy, ireo tetikasa ireo dia manome anao ny fidirana tonga lafatra amin'ny React miasa ary tena hanampy anao amin'ny 2020. afaka mahita ianao . Araho ny toromarika na ataovy ho anao manokana.
Chat App miaraka amin'ny Vue
Tetikasa lehibe iray hafa azonao atao ny mamorona rindranasa chat amin'ny fampiasana ny tranomboky JavaScript tiako indrindra: VueJS. Ny fampiharana dia hiseho toy izao:
Inona no hianaranao
Amin'ity lesona ity dia hianatra ny fomba fanaovana fampiharana Vue hatrany am-boalohany ianao - famoronana singa, fitantanana fanjakana, famoronana lalana, fifandraisana amin'ny serivisy an'ny antoko fahatelo, ary na dia ny fitantanana ny fanamarinana aza.
Tech stack sy endri-javatra
- Vue
- vuex
- Vue router
- Vidin'ny CLI
- Mpanosika
- CSS
Tetikasa tena tsara hanombohana amin'ny Vue na hanatsarana ny fahaizanao efa misy mba hidirana amin'ny fampandrosoana amin'ny taona 2020. afaka mahita ianao .
Fampiharana toetr'andro tsara tarehy miaraka amin'ny Angular 8
Ity ohatra ity dia hanampy anao hamorona fampiharana toetr'andro tsara tarehy amin'ny fampiasana Angular 8:
Inona no hianaranao
Ity tetikasa ity dia hampianatra anao fahaiza-manao sarobidy amin'ny fananganana rindranasa hatrany am-boalohany - manomboka amin'ny famolavolana ka hatramin'ny fampandrosoana, hatrany amin'ny fampiharana efa vonona.
Tech stack sy endri-javatra
- Angular 8
- Firebase
- Famerenana amin'ny lafiny server
- CSS miaraka amin'ny Grid sy Flexbox
- Mobile friendly sy adaptability
- Maody maizina
- Interface tsara tarehy
Ny tena tiako amin'ity tetikasa ity dia ny tsy fandalinanao zavatra irery. Fa kosa, mianatra ny dingana fampandrosoana manontolo ianao, manomboka amin'ny famolavolana ka hatramin'ny fametrahana farany.
To-Do fampiharana mampiasa Svelte
Svelte dia toy ny zaza vaovao amin'ny fomba fiasa mifototra amin'ny singa - farafaharatsiny mitovy amin'ny React, Vue ary Angular. Ary ity dia iray amin'ireo vokatra vaovao mafana indrindra amin'ny taona 2020.
Ny fampiharana To-Do dia tsy voatery ho lohahevitra mafana indrindra, fa tena hanampy anao hanatsara ny fahaizanao Svelte. Ho toy izao izany:
Inona no hianaranao
Ity lesona ity dia hampiseho anao ny fomba hamoronana fampiharana mampiasa Svelte 3, manomboka amin'ny voalohany ka hatramin'ny farany. Hampiasa singa, styling, ary mpitantana hetsika ianao
Tech stack sy endri-javatra
- Svelte 3
- singa
- Styling miaraka amin'ny CSS
- ES 6 syntax
Tsy dia betsaka ny tetikasa fanombohana Svelte tsara, ka hitako .
Fampiharana e-varotra mampiasa Next.js
Next.js no rafitra malaza indrindra amin'ny fananganana rindranasa React izay manohana ny famandrihana amin'ny lafiny mpizara ivelan'ny boaty.
Ity tetikasa ity dia hampiseho aminao ny fomba hamoronana rindranasa e-varotra tahaka izao:
Inona no hianaranao
Amin'ity tetikasa ity dia hianatra ny fomba mivelatra miaraka amin'ny Next.js ianao—mamorona pejy sy singa vaovao, maka angona ary fomba ary mametraka fampiharana Manaraka.
Tech stack sy endri-javatra
- Manaraka.js
- Ireo singa sy pejy
- Data sampling
- stylization
- Fametrahana tetikasa
- SSR sy SPA
Mahafinaritra foana ny manana ohatra tena izy toy ny fampiharana e-varotra hianarana zava-baovao. Ianao dia afaka .
Bilaogy feno fiteny amin'ny fiteny maro miaraka amin'ny Nuxt.js
Nuxt.js dia ho an'ny Vue, inona ny Next.js ho an'ny React: rafitra lehibe ahafahana manambatra ny herin'ny famandrihana amin'ny lafiny server sy ny fampiharana pejy tokana
Ny fampiharana farany azonao atao dia ho toy izao:
Inona no hianaranao
Amin'ity tetikasa santionany ity dia hianatra ny fomba hamoronana tranokala feno amin'ny fampiasana Nuxt.js ianao, manomboka amin'ny fananganana voalohany ka hatramin'ny fametrahana farany.
Manararaotra ny maro amin'ireo endri-javatra mahafinaritra atolotry ny Nuxt, toy ny pejy sy ny singa, ary ny fanaingoana amin'ny SCSS.
Tech stack sy endri-javatra
- Nuxt.js
- Ireo singa sy pejy
- Storyblock module
- Hagfish
- Vuex ho an'ny fitantanana fanjakana
- SCSS ho an'ny styling
- Nuxt middlewares
, izay ahitana endri-javatra Nuxt.js lehibe maro. Izaho manokana dia tia miara-miasa amin'ny Nuxt ka tokony andramana ianao fa hahatonga anao ho mpamorona Vue lehibe ihany koa.
Bilaogy miaraka amin'i Gatsby
Gatsby dia mpamorona tranokala static tena tsara mampiasa React sy GraphQL. Izao no vokatry ny tetikasa:
Inona no hianaranao
Amin'ity lesona ity dia hianatra ny fomba fampiasana Gatsby ianao hamorona bilaogy izay hampiasainao hanoratana ny lahatsoratrao manokana amin'ny fampiasana React sy GraphQL.
Tech stack sy endri-javatra
- gatsby
- Maneho Hevitra Momba
- GraphQL
- Plugins sy lohahevitra
- MDX/Markdown
- Bootstrap CSS
- Templates
Raha efa te hanomboka bilaogy ianao, momba ny fomba hanaovana izany amin'ny fampiasana React sy GraphQL.
Tsy milaza aho fa safidy ratsy ny WordPress, fa miaraka amin'i Gatsby dia afaka manangana tranokala avo lenta ianao amin'ny fampiasana React - izay fitambarana mahavariana.
Bilaogy miaraka amin'i Gridsome
Gridsome ho an'ny Vue... Eny, efa nanana an'ity izahay miaraka amin'ny Next/Nuxt.
Fa toy izany koa ny Gridsome sy Gatsby. Samy mampiasa GraphQL ho toy ny soson'ny angonany izy roa, fa ny Gridsome kosa dia mampiasa VueJS. Ity koa dia mpamorona tranokala static mahavariana izay hanampy anao hamorona bilaogy mahafinaritra:
Inona no hianaranao
Ity tetikasa ity dia hampianatra anao ny fomba hamoronana bilaogy tsotra hanombohana amin'ny Gridsome, GraphQL ary Markdown. Izy io koa dia mirakitra ny fomba fametrahana fampiharana amin'ny Netlify.
Tech stack sy endri-javatra
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Ity dia azo antoka fa tsy ny fampianarana feno indrindra, fa mirakitra ny foto-kevitra fototra momba ny Gridsome sy .
Mpilalao feo mitovy amin'ny SoundCloud mampiasa Quasar
Quasar dia rafitra Vue hafa azo ampiasaina hamoronana rindranasa finday. Amin'ity tetikasa ity dia hamorona fampiharana mpilalao audio ianao, ohatra:
Inona no hianaranao
Raha mifantoka indrindra amin'ny rindranasa an-tranonkala ny tetikasa hafa, ity iray ity dia hampiseho aminao ny fomba hamoronana rindranasa finday mampiasa Vue sy ny rafitra Quasar.
Tokony efa manana Cordova mihazakazaka miaraka amin'ny Android Studio/Xcode ianao. Raha tsy izany, ny boky dia manana rohy mankany amin'ny tranokalan'ny Quasar izay atorony anao ny fomba fametrahana ny zava-drehetra.
Tech stack sy endri-javatra
- quasar
- Vue
- Cordova
- WaveSurfer
- UI Components
, mampiseho ny fahaizan'i Quasar amin'ny famoronana fampiharana finday.
Karazana carte de crédit
Karazana carte de crédit mangatsiatsiaka miaraka amin'ny fifampikasohana bitika malefaka sy mahafinaritra. Ahitana fandrafetana isa, fanamarinana ary fitadiavana karazana karatra mandeha ho azy. Izy io dia miorina amin'ny Vue.js ary mamaly tanteraka ihany koa. (Hitanareo .)
Inona no hianaranao:
- Manaova sy manamarina ny endrika
- Mitantana hetsika (ohatra, rehefa miova ny saha)
- Fantaro ny fomba fanehoana sy fametrahana singa eo amin'ny pejy, indrindra fa ny fampahalalana momba ny carte de crédit izay miseho eo an-tampon'ny endrika
graph bar
Ny histograma dia tabilao na grafika izay maneho angon-drakitra voasokajy miaraka amin'ny bara mahitsizoro miaraka amin'ny haavony na ny halavany mifanaraka amin'ny soatoavina asehony.
Izy ireo dia azo ampiharina mitsangana na mitsivalana. Ny tabilao mitsangana dia antsoina indraindray hoe tabilao tsipika.
Inona no hianaranao:
- Asehoy amin'ny fomba mirindra sy azo takarina ny angona
- Fanampin'izany: Ianaro ny fomba fampiasana ilay singa
canvassy ny fomba fanaovana sary singa miaraka aminy
afaka mahita angon-drakitra momba ny mponina eran-tany ianao. Alahatra araka ny taona izy ireo.
Twitter Heart Animation
Niverina tamin'ny taona 2016, nampidirin'ny Twitter ity sary mihetsika mahagaga ity ho an'ny bitsikany. Hatramin'ny taona 2019, mbola mijery ny ampahany ihany izy io, koa maninona raha mamorona iray ny tenanao?
Inona no hianaranao:
- Miasa miaraka amin'ny toetra CSS
keyframes - Manipulate sy mamelona singa HTML
- Atambatra JavaScript, HTML ary CSS
Repositories GitHub azo karohina
Tsy misy zavatra mahafinaritra eto - lisitra feno voninahitra fotsiny ny fitahirizana GitHub.
Ny tanjona dia ny hampiseho ireo tahiry ary mamela ny mpampiasa hanivana azy ireo. Ampiasao mba hahazoana tahiry ho an'ny mpampiasa tsirairay.
Pejy piraofilina GitHub -
Inona no hianaranao:
- Mandraisa angona avy amin'ny API
- Asehoy ny angona avy amin'ny API
- Sivana ary asehoy ny angona mifandraika amin'ny fikarohana tsirairay
- Azo atao: Raha toa ianao ka miatrika fanamby, ampiasao , namboarina tamin'ny GraphQL. .
Resadresaka amin'ny fomba Reddit
Ny chat dia fomba fifandraisana malaza noho ny fahatsorany sy ny fampiasana azy. Inona anefa no tena mahatonga ny chat room maoderina? WebSockets!
Inona no hianaranao:
- Mampiasà WebSockets, fifandraisana amin'ny fotoana tena izy ary fanavaozana data
- Miaraha miasa amin'ny haavon'ny fidirana amin'ny mpampiasa (ohatra, ny tompon'ny fantsona chat dia manana ny anjara asany
admin, sy ny hafa ao amin'ny efitrano -user) - Manaova sy manamarina ny endrika - tadidio fa ny varavarankelin'ny chat handefasana hafatra dia
input - Mamorona ary midira amin'ny chat samihafa
- Miasa amin'ny hafatra manokana. Afaka mifampiresaka manokana amin'ny mpampiasa hafa ny mpampiasa. Amin'ny ankapobeny dia hanangana fifandraisana WebSocket eo amin'ny mpampiasa roa ianao.
Fikarohana amin'ny fomba stripe
Ny mampiavaka ity fitetezana ity dia ny fiovan'ny kaontenera popover hifanaraka amin'ny atiny. Misy ny hakantony amin'ity tetezamita ity raha oharina amin'ny fihetsika mahazatra amin'ny fanokafana sy fanakatonana popover vaovao.
Inona no hianaranao:
- Manambatra ny sary mihetsika CSS miaraka amin'ny fifindrana
- Aforeto ny atiny ary ampiharo ny kilasy mavitrika amin'ny singa mitsingevana
Pacman
Mamorona ny kinova Pacman anao manokana. Ity dia fomba tsara hahazoana hevitra momba ny fivoaran'ny lalao sy ny fahazoana ny fototra. Mampiasà framework JavaScript, React na Vue.
Hianaranao:
- Ahoana ny fihetsiky ny singa
- Ahoana no hamaritana izay fanalahidy hotsindriana
- Ahoana no hamaritana ny fotoana fifandonana
- Afaka mandroso bebe kokoa ianao ary manampy fanaraha-maso hetsika matoatoa
Hahita ohatra amin'ity tetikasa ity ianao GitHub
fitantanana mpampiasa
Ny tetikasa GitHub
Ny famoronana rindranasa karazana CRUD ho an'ny fitantanana mpampiasa dia hampianatra anao ny fototry ny fampandrosoana. Tena ilaina izany ho an'ny mpamorona vaovao.
Hianaranao:
- Inona no atao hoe routing
- Ahoana ny fomba fitantanana ireo endrika fampidirana angon-drakitra ary manamarina izay nampidirin'ny mpampiasa
- Ahoana ny fomba fiasa miaraka amin'ny angon-drakitra - mamorona, mamaky, manavao ary mamafa hetsika
Fanamarinana ny toetrandro amin'ny toerana misy anao
Ny tetikasa GitHub
Raha te hamorona fampiharana ianao dia manomboka amin'ny fampiharana toetr'andro. Ity tetikasa ity dia azo atao amin'ny fampiasana Swift.
Ho fanampin'ny fahazoana traikefa amin'ny fananganana fampiharana dia hianatra ianao:
- Ahoana ny fomba fiasa miaraka amin'ny API
- Ahoana ny fampiasana geolocation
- Ataovy mavitrika kokoa ny fampiharanao amin'ny fampidirana lahatsoratra. Ao anatin'izany, ireo mpampiasa dia afaka miditra amin'ny toerana misy azy mba hijery ny toetr'andro amin'ny toerana voafaritra.
Mila API ianao. Mba hahazoana angona momba ny toetrandro, ampiasao ny OpenWeather API. Fanazavana bebe kokoa momba ny OpenWeather API.
Varavarankely chat
Miasa ny varavarankelin'ny chat-ko, misokatra amin'ny tabilao navigateur roa
Ny famoronana varavarankelin'ny chat no fomba tsara hanombohana amin'ny sockets. Ny safidy ny stack teknolojia dia lehibe. Node.js, ohatra, dia tonga lafatra.
Hianatra ny fomba fiasan'ny socket sy ny fampiharana azy ireo ianao. Izany no tombony lehibe amin'ity tetikasa ity.
Raha mpamorona Laravel ianao izay te hiasa amin'ny sockets, vakio ny my
GitLab CI
Raha vaovao amin'ny fampidirana mitohy (CI) ianao, milalao miaraka amin'ny GitLab CI. Manangàna tontolo vitsivitsy ary manandrama manao fitsapana roa. Tsy dia tetik'asa sarotra loatra izany, fa azoko antoka fa hiana-javatra betsaka avy amin'izany ianao. Ekipa fampandrosoana maro izao no mampiasa CI. Mahasoa ny mahafantatra ny fomba fampiasana azy.
Hianaranao:
- Inona no atao hoe GitLab CI
- Ahoana ny fametrahana
.gitlab-ci.ymlizay milaza amin'ny mpampiasa GitLab ny tokony hatao - Ahoana ny fametrahana amin'ny tontolo hafa
Mpanadihady tranonkala
Manaova scraper izay manadihady ny semantika amin'ny tranokala ary mamorona ny naoty. Ohatra, azonao atao ny manamarina raha misy marika alt tsy hita ao amin'ny sary. Na jereo raha manana tag meta SEO ny pejy. Ny scraper dia azo noforonina tsy misy mpampiasa interface.
Hianaranao:
- Ahoana no fiasan'ny scraper?
- Ahoana ny famoronana DOM selectors
- Ahoana ny fanoratana algorithm
- Raha tsy te hijanona eo ianao dia mamorona interface tsara. Azonao atao ihany koa ny mamorona tatitra amin'ny tranokala tsirairay hojerenao.
Famantarana fihetseham-po amin'ny tambajotra sosialy
Ny fitadiavana fihetseham-po amin'ny media sosialy dia fomba tsara hampahafantarana ny fianarana milina.
Afaka manomboka amin'ny famakafakana tambajotra sosialy iray monja ianao. Matetika ny olona rehetra dia manomboka amin'ny Twitter.
Raha efa manana traikefa amin'ny fianarana milina ianao dia andramo manangona angona avy amin'ny tambajotra sosialy samihafa ary manambatra azy ireo.
Hianaranao:
- Inona no atao hoe fianarana milina
Trello clone
Inona no hianaranao:
- Fandaminana ny lalana fanodinana fangatahana (Routing).
- Tariho ary ampidino.
- Ahoana ny famoronana zavatra vaovao (birao, lisitra, karatra).
- Fanodinana sy fanamarinana ny angona fidirana.
- Avy amin'ny lafiny mpanjifa: ny fomba fampiasana fitehirizana eo an-toerana, ny fomba fitahirizana angon-drakitra amin'ny fitahirizana eo an-toerana, ny famakiana ny angona avy amin'ny fitahirizana eo an-toerana.
- Avy amin'ny lafin'ny mpizara: ny fomba fampiasana angona, ny fomba fitahirizana angon-drakitra ao amin'ny tahiry, ny famakiana ny angona avy amin'ny tahiry.
, natao tao amin'ny React+Redux.
Panel admin
Fampiharana CRUD tsotra, mety amin'ny fianarana ny fototra. Andao hianatra:
- Mamorona mpampiasa, mitantana mpampiasa.
- Mifandraisa amin'ny angon-drakitra - mamorona, mamaky, manova, mamafa mpampiasa.
- Manamarina ny fidirana sy miasa amin'ny endrika.
Cryptocurrency tracker (fampiharana finday teratany)
Na inona na inona: Swift, Objective-C, React Native, Java, Kotlin.
Andao hianatra:
- Ahoana ny fiasan'ny fampiharana teratany.
- Ahoana ny fomba fakana data avy amin'ny API.
- Ny fomba fiasan'ny fandrafetana pejy teratany.
- Ahoana ny fiasana amin'ny simulator finday.
. Raha mahita zavatra tsara kokoa ianao dia manorata ao amin'ny fanehoan-kevitra.
Raha liana ianao dia ity .
Amboary ny config webpack anao manokana hatrany am-boalohany
Ara-teknika, tsy fampiharana ity, fa asa tena ilaina ny mahatakatra ny fomba fiasan'ny webpack avy ao anatiny. Ankehitriny dia tsy ho "boaty mainty", fa fitaovana azo takarina.
fepetra takiana:
- Manangona es7 ka hatramin'ny es5 (fototra).
- Angony ny jsx amin'ny js - na - .vue mankany amin'ny .js (tsy maintsy mianatra loader ianao)
- Amboary ny mpizara webpack dev sy ny famerenana ny maody mafana. (vue-cli sy create-react-app dia mampiasa azy roa)
- Ampiasao ny Heroku, now.sh na Github, ianaro ny fomba fametrahana tetikasa webpack.
- Amboary ny preprocessor tianao indrindra hanangonana css - scss, less, stylus.
- Ianaro ny fampiasana sary sy svg amin'ny webpack.
Hackernews clone
Ny Jedi tsirairay dia takiana hanao ny hackernews azy manokana.
Inona no hianaranao eny an-dalana:
- Ahoana ny fifandraisana amin'ny hackernews API.
- Ahoana ny fomba hamoronana fampiharana pejy tokana.
- Ahoana ny fampiharana ireo endri-javatra toy ny fijerena fanehoan-kevitra, fanehoan-kevitra manokana, mombamomba.
- Fandaminana ny lalana fanodinana fangatahana (Routing).
Tudushechka
tena matotra? Tudushka? An'arivony izy ireo. Fa minoa ahy, misy antony izany laza.
Ny fampiharana Tudu dia fomba tsara hahazoana antoka fa azonao ny fototra. Andramo manoratra fampiharana iray amin'ny Javascript lavanila ary iray amin'ny rafitra tianao indrindra.
Mianara:
- Mamorona asa vaovao.
- Hamarino fa feno ny saha.
- Sivana ny asa (vita, mavitrika, rehetra). Ampiasao
filterиreduce. - Fantaro ny fototry ny Javascript.
Lisitry ny drag and drop azo alaina
Tena manampy hahatakatra .
Andao hianatra:
- Tariho ary ampidino ny API
- Mamorona UI manankarena
Clone Messenger (fampiharana teratany)
Ho azonao ny fomba fiasan'ny rindranasa an-tranonkala sy ny fampiharana teratany, izay hampiavaka anao amin'ny faobe volondavenona.
Inona no hianarantsika:
- Web sockets (hafatra avy hatrany)
- Ahoana ny fiasan'ny fampiharana teratany.
- Ahoana ny fiasan'ny môdely amin'ny fampiharana teratany.
- Fandaminana lalana fanodinana fangatahana amin'ny fampiharana teratany.
Mpanonta lahatsoratra
Ny tanjon'ny tonian-dahatsoratra dia ny hampihenana ny ezaky ny mpampiasa manandrana manova ny formatany ho marika HTML manan-kery. Ny tonian-dahatsoratra tsara dia ahafahan'ny mpampiasa mamolavola lahatsoratra amin'ny fomba samihafa.
Tamin'ny fotoana iray dia nampiasa mpamoaka lahatsoratra ny tsirairay. Ka maninona no tsy ?
Reddit clone
dia fanangonana vaovao ara-tsosialy, naoty votoaty amin'ny Internet ary tranokala fifanakalozan-kevitra.
Mandany ny ankamaroan'ny fotoanako i Reddit, saingy manohy mihantona amin'izany aho. Ny famoronana clone Reddit dia fomba mahomby hianarana fandaharana (raha mijery ny Reddit amin'ny fotoana iray ihany).
Reddit dia manome anao harena be. Aza miala amin'ny endri-javatra na manao zavatra tsy misy dikany. Ao amin'ny tontolo tena misy mpanjifa sy mpanjifa, tsy afaka miasa kisendrasendra ianao, na ho very asa haingana.
Ny mpanjifa manan-tsaina dia hahatsapa avy hatrany fa ny asa dia tsy vita ary hahita olon-kafa.
Famoahana fonosana NPM loharano misokatra
Raha manoratra kaody Javascript ianao, dia mety hampiasa mpitantana fonosana ianao. Ny mpitantana fonosana dia ahafahanao mampiasa indray ny code efa misy izay nosoratan'ny olon-kafa sy navoaka.
Ny fahatakarana ny tsingerin'ny fivoaran'ny fonosana iray dia hanome traikefa tena tsara. Betsaka ny zavatra tokony ho fantatrao rehefa mamoaka kaody. Mila mieritreritra momba ny fiarovana ianao, ny dikan-teny semantika, ny scalability, ny fifanarahana anarana ary ny fikojakojana.
Ny fonosana dia mety ho na inona na inona. Raha tsy manana hevitra ianao dia mamorona Lodash anao manokana ary avoaka.
Lodash:
Ny fananana zavatra nataonao an-tserasera dia mametraka anao 10% ambony noho ny hafa. momba ny loharano misokatra sy fonosana.
FreeCodeCamp Curriculum
freeCodecamp dia nanangona betsaka .
freeCodeCamp dia fikambanana tsy mitady tombony. Izy io dia ahitana sehatra fianarana mifototra amin'ny Internet, sehatra fifanakalozan-dresaka an-tserasera, efitrano firesahana, famoahana Mediam-bahoaka, ary fikambanana eo an-toerana izay mikasa ny hanao ny fampandrosoana ny tranonkala fianarana ho azon'ny rehetra.
Ho mendrika kokoa amin'ny asanao voalohany ianao raha mahavita ny fianarana manontolo.
Mamorona mpizara HTTP hatrany am-boalohany
Ny protocol HTTP dia iray amin'ireo protocole lehibe indrindra amin'ny fandehanana votoaty amin'ny Internet. Ny lohamilina HTTP dia ampiasaina hanompoana votoaty static toy ny HTML, CSS, ary JS.
Ny fahafahana mampihatra ny protocol HTTP hatrany am-boalohany dia hanitatra ny fahalalanao momba ny fifandraisan'ny zavatra.
Ohatra, raha mampiasa NodeJs ianao, dia fantatrao fa ny Express dia manome mpizara HTTP.
Jereo raha azonao atao:
- Manangana mpizara nefa tsy mampiasa tranomboky
- Ny mpizara dia tsy maintsy manolotra votoaty HTML, CSS ary JS.
- Fametrahana ny router avy amin'ny scratch
- Manara-maso ny fanovana ary manavao ny mpizara
Raha tsy fantatrao ny antony dia ampiasao ary manandrana mamorona mpizara HTTP hatrany am-boalohany.
App Desktop ho an'ny naoty
Samy mandray an-tsoratra isika, sa tsy izany?
Andao hamorona app naoty. Ny fampiharana dia mila mitahiry naoty ary mampifanaraka azy ireo amin'ny angon-drakitra. Mamorona fampiharana teratany mampiasa Electron, Swift, na izay tianao ary izay mety amin'ny rafitrao.
Aza misalasala manambatra an'io amin'ny fanamby voalohany (tonian-dahatsoratra).
Amin'ny maha-bonus azy, andramo amboary ny kinova desktop-nao amin'ny dikan-tranonkala.
Podcasts (clone overcast)
Iza no tsy mihaino podcasts?
Mamorona fampiharana amin'ny Internet miaraka amin'ireto fiasa manaraka ireto:
- Hamorona kaonty
- Hikaroka Podcast
- Manome naoty ary misoratra anarana amin'ny podcasts
- Mijanòna ary milalao, manova ny hafainganam-pandeha, mandroso sy miverina mandritra ny 30 segondra.
Andramo ny fampiasana ny iTunes API ho fanombohana. Raha mahafantatra loharano hafa ianao dia alefaso ao amin'ny fanehoan-kevitra.
Fakan-tsary
Salama! Maka sary an-tsary aho izao!
Mamorona fampiharana desktop na tranonkala ahafahanao maka sary ny efijery ary mitahiry ny clip ho .gif
eto ny fomba hahatratrarana izany.
loharanom-baovao
Source: www.habr.com