Os tutoriais são ótimos, mas construir projetos é a melhor maneira de aprender. Faça aprendizado baseado em projetos e aprenda código da maneira certa!
ProjectLearn fornece uma lista selecionada de tutoriais de projetos nos quais os alunos criam um aplicativo do zero. Estes estão divididos em diferentes categorias, nomeadamente, desenvolvimento web, desenvolvimento móvel, desenvolvimento de jogos, aprendizagem de máquina, aprendizagem profunda e inteligência artificial.
A lista contém tutoriais de projetos em muitas linguagens e tecnologias sob demanda, incluindo ReactJS, NodeJS, VueJS, Flutter, React Native, .NET Core, Unity, TensorFlow, OpenCV, Keras e muito mais.
Para contribuir com esta lista, acesse CONTRIBUTE.md para mais detalhes :)
Projeto | Tecnologias | Link |
---|---|---|
Crie e implante um incrível portfólio de desenvolvedores da Web 3D no tutorial React.JS Three.js | vite, React, JavaScript, Three.js, Tailwind | Link |
Aplicativo Full-Stack Quick Commerce com Next.Js Drizzle ORM e Cryptomus Payments | Next.js, React, JavaScript, Drizzle ORM, Cryptomus | Link |
Construa uma loja de comércio eletrônico Full Stack com painel de administração | Next.js, React, JavaScript, Tailwind, Stripe | Link |
Construa um clone Full Stack do Uber | Next.js, React, JavaScript, Tailwind, Stripe | Link |
Crie e implante um aplicativo de mídia social Full Stack usando React | Reagir, JavaScript, HTML, CSS, Tailwind | Link |
Crie seu próprio clone ChatGPT em HTML CSS e JavaScript | HTML, CSS, JavaScript, API OpenAI, API | Link |
Crie um clone do Reddit 2.0 com NextJS | React, SQL, Supabase, Next.js, GraphQL | Link |
Crie um clone do YouTube com React | Expresso, Nó, JavaScript, HTML, CSS | Link |
Crie um gráfico de barras divergentes com uma biblioteca de gráficos JavaScript | Javascript, HTML, CSS | Link |
Aprenda noções básicas de CSS construindo um componente de cartão | HTML, CSS | Link |
Crie um meme sem servidor como serviço | JavaScript, ferrugem, CSS, HTML | Link |
Site de previsão do tempo | JavaScript, HTML, CSS, Reagir | Link |
Site de encurtador de links | JavaScript, Vue, HTML, CSS, React | Link |
Site verificador de plágio | Python, Bootstrap | Link |
Crie um tema personalizado do Google Maps | Javascript, HTML, CSS | Link |
Construa um mapa do Google com tema Super Mario com JavaScript | JavaScript, HTML5, CSS3 | Link |
Crie um aplicativo de entrega voltado para a comunidade | Python, Django, PostgreSQL, JavaScript, Mapbox | Link |
Crie um aplicativo de pesquisa e descoberta de loja local | Python, Django, PostgreSQL, JavaScript, Mapbox | Link |
Clone médio usando React.js e Node.js | Reagir, Nó, CSS3, JavaScript, HTML5 | Link |
Clone do Facebook com React JS | React, Firebase, CSS3, JavaScript, HTML5 | Link |
JavaScript30 - Desafio de codificação Vanilla JS de 30 dias | JavaScript | Link |
Mapa da lista de viagens com Gatsby e GraphCMS | Gatsby, Folheto, GraphCMS, HTML, CSS | Link |
Jogo de cartão de memória com Vue.js | Vue, JavaScript, HTML, CSS | Link |
Curso Strapi e GatsbyJS - Projeto de Portfólio | Strapi, Gatsby, JavaScript, HTML, CSS | Link |
Storybook - Node, Express, MongoDB e Google OAuth | MongoDB, Nó, JavaScript, HTML, CSS | Link |
Aplicativo Breathe and Relax - animações JavaScript e CSS | Javascript, HTML, CSS | Link |
CLI Node.js para preços de criptomoeda | Nó, JavaScript | Link |
Galeria de imagens CSS React e Tailwind | Reagir, Tailwind, JavaScript, HTML, CSS | Link |
Relógio Pomodoro usando React | Reagir, JavaScript, HTML, CSS | Link |
Ferramenta de densidade de palavras-chave com Laravel do zero | Laravel, PHP, JQuery, AJAX, SEO | Link |
Clone do YouTube usando Yii2 PHP Framework | Yii2, PHP | Link |
Clone do Reddit com React, GraphQL e Amplify | Reagir, Amplificar, AWS, GraphQL, Node | Link |
Clone Full-Stack do Yelp com React e GraphQL | Reagir, GraphQL, HTML, CSS, JavaScript | Link |
Pokémon Web App com React Hooks e Context API | Reagir, HTML, CSS, JavaScript | Link |
Monitor de Bacias Hidrográficas usando JavaScript e Rails | Ruby, Rails, JavaScript | Link |
Painel de dados climáticos usando React e Redux | React, Redux, HTML, CSS, JavaScript | Link |
Virando cartões UNO usando apenas CSS | HTML, CSS | Link |
Aplicativo de bate-papo com Redis, WebSocket e Go | Redis, Web Socket, Go, Azure | Link |
Animação de login do Spotify com navegação React | Reagir, HTML, CSS, JavaScript | Link |
Interface Meteorológica Dinâmica com apenas CSS | HTML, CSS | Link |
Aplicativo CRUD simples com Airtable e Vue | Airtable, Vue, Vuetify, API, HTML | Link |
Gerador de personagens RPG Full Stack com pilha MEVN | MongoDB, Express, Vue, Node, HTML | Link |
Todo App com a pilha PERN | PostgreSQL, Express, React, Node, HTML | Link |
Aplicativo de mapeamento de viagens rodoviárias de verão com Gatsby | Reagir, Gatsby, Folheto | Link |
Jogo de cartas multijogador com Socket.io | Phaser 3, Expresso, Socket.io, JavaScript | Link |
Painel COVID-19 e aplicativo de mapas com Gatsby | Reagir, Gatsby, Folheto | Link |
Questionário Flashcard com React | Reagir, API, JavaScript, HTML5, CSS3 | Link |
Whack-a-Mole com JavaScript puro | JavaScript, HTML5, CSS3 | Link |
Criador de memes com React | Reagir, JavaScript, HTML5, CSS3 | Link |
Clone do Evernote com React | React, Firebase, Node, JavaScript, HTML5 | Link |
Aplicativo Meetup para desenvolvedores com Vue | Vue, Firebase, Vuetify, JavaScript, HTML5 | Link |
Aplicativo de bate-papo em tempo real com Vue | Vue, Firebase, Vuex, JavaScript, HTML5 | Link |
Rastreador de criptomoeda com Vue | Vue, Vuetify, API, JavaScript, HTML5 | Link |
Jogo de perguntas multijogador com Vue | Vue, Pusher, Nó, Expresso, JavaScript | Link |
Jogo Campo Minado com Vue | Vue, Vuex, Vuetify, JavaScript, HTML5 | Link |
Clone do Instagram com Vue | Vue, CSSGram, JavaScript, HTML5, CSS3 | Link |
Clone de notícias de hackers com Angular | Angular, Farol, JavaScript, HTML5, CSS3 | Link |
Interface de bate-papo | HTML5, CSS3 | Link |
Dica de ferramenta CSS3 puro | HTML5, CSS3 | Link |
Botões de mídia social | HTML5, CSS3 | Link |
Cartão de depoimento | HTML5, CSS3 | Link |
Barra de navegação com CSS3 Flexbox | HTML5, CSS3 | Link |
Layout de aplicativo móvel com CSS3 Flexbox | HTML5, CSS3 | Link |
Carregando Spinner inspirado no Reddit | HTML5, CSS3 | Link |
Calendário com grade CSS3 | JavaScript, HTML5, CSS3 | Link |
Jogo Tetris em reação | Reagir, JavaScript, HTML5, CSS3 | Link |
Jogo de fuga 2D | JavaScript, HTML5, CSS3 | Link |
Animação Sprite | JavaScript, HTML5, CSS3 | Link |
Jogo de cobra | JavaScript, HTML5, CSS3 | Link |
Jogo da Memória | JavaScript, HTML5, CSS3 | Link |
Autenticação e autorização simples | GraphQL, Apollo, Node, JavaScript, HTML5 | Link |
Rastreador de criptomoeda | NextJS, GraphQL, Apollo, Node, JavaScript | Link |
Pesquisa instantânea com Vanilla Javascript | JavaScript, HTML5, CSS3 | Link |
Aplicativo Calculadora | JavaScript, HTML5, CSS3 | Link |
Aplicativo de tarefas | Vue, JavaScript, CSS3, HTML5 | Link |
Aplicativo de blog | Vue, GraphQL, Apollo, JavaScript, CSS3 | Link |
Aplicativo de orçamento simples | Vue, Bulma, JavaScript, CSS3, HTML5 | Link |
Robô de pesquisa | Node, Twilio, Cheerio, API, Automação | Link |
Bot do Twitter | Nó, JavaScript, API, Automação | Link |
Editor de descontos em tempo real | Nó, JavaScript, Expresso, Redis, HTML5 | Link |
Aplicativo de tarefas | Angular, TypeScript, RxJS, HTML5, CSS3 | Link |
Cliente de notícias de hackers | Angular, RxJS, Webpack, HTML5, CSS3 | Link |
Máquina de cotação aleatória | Reagir, JavaScript, HTML5, CSS3 | Link |
Clone de Todoist | React, Firebase, JavaScript, Teste, HTML5 | Link |
Aplicativo de bate-papo com análise de sentimento | NextJS, Pusher, Sentimento, Node, React | Link |
Agendador de compromissos | React, Twilio, CosmicJS, Material-UI, JavaScript | Link |
Jogo da Vida | Reagir, 2D, JavaScript, HTML5, CSS3 | Link |
Aplicativo de notícias | React Native, Nó, API, React, JavaScript | Link |
Aplicativo de bate-papo | React, Redux, Redux Saga, Web Sockets, Node | Link |
Aplicativo de tarefas | React Native, GraphQL, Apollo, API, Hasura | Link |
Extensão do Chrome | React, Pacote, JavaScript, HTML5, CSS3 | Link |
Aplicativo de votação de filmes | React, Redux, API, Imutável, JavaScript | Link |
Clone do Trello | React, Elixir, Phoenix, JWT, JavaScript | Link |
CMS estilo Wiki | C#, .NET, páginas Razor | Link |
Clone do Spotify com ReactJS | Reagir, HTML5, CSS3 | Link |
Clone da página inicial da Microsoft | HTML5, CSS3, JavaScript | Link |
Gráfico de Gantt Simples | HTML5, CSS3, JavaScript | Link |
Aplicativo de raspagem de trabalho | Nó, JavaScript, REST, API, Expresso | Link |
Aplicativo de comércio eletrônico | Reagir, Bootstrap, JavaScript, HTML5, CSS3 | Link |
Página inicial da Netflix | HTML5, CSS3, JavaScript | Link |
Bot de bate-papo com IA | API de fala da Web, Node, JavaScript, Express, Socket.io | Link |
Aplicativo de rede social | React, Node, Redux, Firebase, REST | Link |
Construa um blockchain de criptomoeda simples em Node.js | Nó, JavaScript, Criptografia, Blockchain | Link |
Cliente BitTorrent | Nó, JavaScript, TCP, Redes de Computadores | Link |
Aplicativo de lista de tarefas com JavaScript | JavaScript, HTML5, CSS3 | Link |
Animações JavaScript com Anime.js | JavaScript, CSS3, Biblioteca, HTML5, API | Link |
Aplicativo Job Board com React | React, Nó, Cron, JavaScript, HTML5 | Link |
Projeto | Tecnologias | Link |
---|---|---|
Crie um clone do Uber Eats com React Native | Reagir nativo, Javascript, Android, iOS | Link |
Construa um clone do Uber com React Native | Reagir nativo, Javascript, Android, iOS | Link |
Crie um aplicativo de bate-papo com histórias usando o Flutter SDK | Flutter, Dardo | Link |
Crie um aplicativo estilo Robinhood para rastrear casos COVID-19 | Kotlin, Android | Link |
Aplicativo móvel Swipe estilo Tinder | Kotlin, Java, Swift | Link |
Aplicativo móvel de lista de preços de criptomoeda | Reagir Nativo, Rápido, Flutter, Dardo | Link |
Aplicativo móvel social para restaurantes | Reagir Nativo, Rápido, Flutter, Dardo | Link |
Aplicativo móvel de lembrete de intervalo | Reagir nativo, Kotlin, Java, Swift | Link |
Aplicativo móvel de lembrete de faturamento e pagamento | React, Node, Express, MongoDB | Link |
Aplicativo móvel de contagem regressiva | Swift, Java, React Native | Link |
Jogo Flappy Bird para iOS usando Swift | Swift, XCode, iOS | Link |
Jogo Bull's Eye para iOS usando Swift | Swift, XCode, iOS | Link |
Aplicativo iOS para restaurante usando SwiftUI | Swift, XCode, iOS | Link |
Aplicativo de dados para iOS com Swift | Swift, XCode, iOS | Link |
Clone TrueCaller | Java, MySQL, XAMPP, Android | Link |
Aplicativo de clima | Java, API, Android | Link |
Aplicativo de comércio eletrônico | Java, Firebase, Android | Link |
Aplicativo de bate-papo | Java, Firebase, Android | Link |
Aplicativo de tarefas | Flutter, Dardo, Android, iOS | Link |
IU do aplicativo de viagens | Flutter, Dardo, Android, iOS | Link |
Cliente Reddit | Android, Kotlin | Link |
Aplicativo de tarefas | Reagir nativo, Android, iOS, JavaScript | Link |
Visualizador da biblioteca de fotos | C#, iOS, Xamarin, Visual Studio, Android | Link |
Clone do WhatsApp com React Native | React Native, Node, GraphQL, Apollo, JavaScript | Link |
Projeto | Tecnologias | Link |
---|---|---|
Construa Super Mario Bros, Zelda e Space Invaders com Kaboom.js | JavaScript, Kaboom | Link |
Crie um jogo Arkanoid com TypeScript | TypeScript, HTML, CSS, JavaScript | Link |
Jogos Simples | Lua, LÖVE, Python, Pygame Zero | Link |
Jogo multijogador online Python | Pitão | Link |
Jogo de luta Beat Em Up | Unidade, C# | Link |
Jogo 3D simples usando Godot 3.1 | Godot, C#, 3D | Link |
Jogo simples de quebra-cabeça em Godot - Box and Switch | Godot, C#, 2D | Link |
Interface de jogo do zero em Godot 3 | Godot, C#, 2D | Link |
Jogo 2D com Godot: Jogador e Inimigo | Godot, C#, 2D | Link |
Jogo de cartas multijogador com Socket.io | Phaser 3, Expresso, Socket.io, JavaScript | Link |
Jogo de cartas multijogador com Unity 2D e Mirror | C#, Unidade, 2D, Espelho | Link |
Tutorial Roguelike em Rust | Ferrugem, 2D | Link |
Adventures in Rust - Um jogo 2D básico | Ferrugem, 2D | Link |
Jogo Terminal Snake com Ruby | Rubi, 2D | Link |
Invasores do espaço usando OpenGL | OpenGL, C/C++, 2D | Link |
Solucionador de Sudoku em C | C/C++, 2D | Link |
Motor de xadrez em C | C/C++, 2D | Link |
Jogo Flappy Bird para iOS usando Swift | Swift, XCode, iOS | Link |
Jogo Bull's Eye para iOS usando Swift | Swift, XCode, iOS | Link |
Whack-a-Mole com JavaScript puro | JavaScript, HTML5, CSS3 | Link |
Jogo de perguntas multijogador com Vue | Vue, Pusher, Nó, Expresso, JavaScript | Link |
Jogo Campo Minado com Vue | Vue, Vuex, Vuetify, JavaScript, HTML5 | Link |
Jogo Tetris em reação | Reagir, JavaScript, HTML5, CSS3 | Link |
Jogo de fuga 2D | JavaScript, HTML5, CSS3 | Link |
Animação Sprite | JavaScript, HTML5, CSS3 | Link |
Jogo de cobra | JavaScript, HTML5, CSS3 | Link |
Jogo da Memória | JavaScript, HTML5, CSS3 | Link |
Atirador de tanques | 3D, Unidade, C# | Link |
Roguelike 2D | 2D, Unidade, C# | Link |
Passeio Assombrado de John Lemon 3D | 3D, Unidade, C# | Link |
Iniciante em VR: The Escape Room | VR, Unidade, C# | Link |
A aventura de Rubi | 2D, Unidade, C# | Link |
Jogo RPG | 2D, Unidade, C# | Link |
Rolar uma bola | 3D, Unidade, C# | Link |
Microjogo FPS | Unidade, C# | Link |
Microjogo de plataforma | Unidade, C#, 2D | Link |
Microjogo de Kart | Unidade, C# | Link |
Atirador de arcade | Lua, AMOR | Link |
Jogo da Vida | Reagir, 2D, JavaScript, HTML5, CSS3 | Link |
Herói Feito à Mão | C/C++, OpenGL, 2D | Link |
Saia | C/C++, OpenGL, 2D | Link |
Tetris | C/C++, 2D | Link |
Jogo NES | C/C++, Python, 2D | Link |
Jogo Roguelike | C#, .NET, RogueSharp, MonoGame, RLNet | Link |
Jogo RPG Simples | C#, SQL, 2D | Link |
Projeto | Tecnologias | Link |
---|---|---|
Construa um Web Scraper usando BeautifulSoup | Python, BeautifulSoup | Link |
CNN que detecta pneumonia em radiografias de tórax | CNN, Python | Link |
Atualização automática de visualizações de dados em Python com AWS | Python, AWS, Matplotlib | Link |
Ferramenta de análise de sentimento do Twitter usando GCP e Node | API, GCP, Nó, JavaScript | Link |
Análise de sentimento do Twitter usando CNN | Python, Matplotlib, Numpy, Pandas | Link |
Gerador de letras de Taylor Swift | Python, Keras, Numpy, Pandas | Link |
Reconhecedor de dígitos MNIST | Python, Keras, TensorFlow, Numpy, SciKit | Link |
Treine um modelo para gerar cores | Python, Keras, TensorFlow, Numpy | Link |
Gerador de legenda de imagem | Python, TensorFlow, Numpy | Link |
Quebre um sistema Captcha usando CNN | Python, Keras, TensorFlow, OpenCV, Numpy | Link |
Gere uma face média | Python, OpenCV, Numpy, C/C++ | Link |
Costura de imagem | Python, OpenCV, Numpy | Link |
Detecção de ponto-chave manual | Python, OpenCV, Numpy, C/C++ | Link |
Eigenface | Python, OpenCV, Numpy, C/C++ | Link |
Detecção de alvo de drone | Python, OpenCV, Numpy | Link |
Detecção de objetos usando máscara R-CNN | Python, OpenCV, Numpy | Link |
Detecção de marco facial | Python, OpenCV, DLib, Numpy | Link |
Correção de distorção de texto | Python, OpenCV, Numpy | Link |
OCR e reconhecimento de texto | Python, OpenCV, Tesseract, Numpy | Link |
Contador de Pessoas | Python, OpenCV, Numpy | Link |
Detecção de texto | Python, OpenCV, Numpy | Link |
Segmentação Semântica | Python, OpenCV, Numpy | Link |
Rastreamento de objetos | Python, OpenCV, Numpy, CamShift | Link |
Agrupamento de rostos | Python, OpenCV, Numpy | Link |
Leitor de código de barras | Python, OpenCV, ZBar, Numpy | Link |
Detecção de Saliência | Python, OpenCV, Numpy | Link |
Detecção de rosto | Python, OpenCV, Numpy | Link |
Scanner de documentos | Python, OpenCV, Numpy, SciKit | Link |
Recomendador de música | Python, SciKit, Numpy, Pandas | Link |
Prever a qualidade do vinho | Python, Matplotlib, Numpy, Pandas | Link |
Algoritmos Genéticos | Python, SciKit, Numpy, Pandas | Link |
DeepDream | Python, TensorFlow, Visualização | Link |
Previsão do preço das ações | Python, SciKit, Matplotlib | Link |
Sistemas de recomendação de filmes | Python, Light FM | Link |
Análise de sentimento do Twitter | Python, API | Link |
Aplicativo de bate-papo com análise de sentimento | NextJS, Pusher, Sentimento, Node, React | Link |