projectlearn project based learning
1.0.0
Tutorials sind großartig, aber Bauprojekte sind die beste Art zu lernen. Machen Sie projektbasiertes Lernen und lernen Sie Code auf die richtige Art und Weise!
ProjectLearn bietet eine kuratierte Liste von Projekt-Tutorials, in denen Lernende eine Anwendung von Grund auf erstellen. Diese sind in verschiedene Kategorien unterteilt, nämlich Webentwicklung, mobile Entwicklung, Spieleentwicklung, maschinelles Lernen, Deep Learning und künstliche Intelligenz.
Die Liste enthält Projekt-Tutorials zu vielen gefragten Sprachen und Technologien, darunter ReactJS, NodeJS, VueJS, Flutter, React Native, .NET Core, Unity, TensorFlow, OpenCV, Keras und mehr.
Um zu dieser Liste beizutragen, gehen Sie zu CONTRIBUTE.md für weitere Details :)
| Projekt | Technologien | Link |
|---|---|---|
| Erstellen und implementieren Sie ein erstaunliches 3D-Webentwickler-Portfolio im React.JS Three.js-Tutorial | vite, React, JavaScript, Three.js, Tailwind | Link |
| Full-Stack-Schnell-Commerce-App mit Next.Js Drizzle ORM und Cryptomus Payments | Next.js, React, JavaScript, Drizzle ORM, Cryptomus | Link |
| Erstellen Sie mit dem Admin-Dashboard einen Full-Stack-E-Commerce-Shop | Next.js, React, JavaScript, Tailwind, Stripe | Link |
| Erstellen Sie einen Full-Stack-Uber-Klon | Next.js, React, JavaScript, Tailwind, Stripe | Link |
| Erstellen und implementieren Sie eine Full-Stack-Social-Media-App mit React | Reagieren, JavaScript, HTML, CSS, Rückenwind | Link |
| Erstellen Sie Ihren eigenen ChatGPT-Klon in HTML, CSS und JavaScript | HTML, CSS, JavaScript, OpenAI-API, API | Link |
| Erstellen Sie einen Reddit 2.0-Klon mit NextJS | Reagieren, SQL, Supabase, Next.js, GraphQL | Link |
| Erstellen Sie mit React einen YouTube-Klon | Express, Node, JavaScript, HTML, CSS | Link |
| Erstellen Sie ein divergierendes Balkendiagramm mit einer JavaScript-Diagrammbibliothek | JavaScript, HTML, CSS | Link |
| Lernen Sie die CSS-Grundlagen, indem Sie eine Kartenkomponente erstellen | HTML, CSS | Link |
| Erstellen Sie ein serverloses Meme as a Service | JavaScript, Rust, CSS, HTML | Link |
| Wettervorhersage-Website | JavaScript, HTML, CSS, React | Link |
| Link-Shortener-Website | JavaScript, Vue, HTML, CSS, React | Link |
| Website zur Plagiatsprüfung | Python, Bootstrap | Link |
| Erstellen Sie ein benutzerdefiniertes Google Maps-Design | JavaScript, HTML, CSS | Link |
| Erstellen Sie mit JavaScript eine Google-Karte im Super Mario-Stil | JavaScript, HTML5, CSS3 | Link |
| Erstellen Sie eine Community-gesteuerte Bereitstellungsanwendung | Python, Django, PostgreSQL, JavaScript, Mapbox | Link |
| Erstellen Sie eine Such- und Erkennungsanwendung für den lokalen Store | Python, Django, PostgreSQL, JavaScript, Mapbox | Link |
| Mittlerer Klon mit React.js und Node.js | Reagieren, Knoten, CSS3, JavaScript, HTML5 | Link |
| Facebook-Klon mit React JS | Reagieren, Firebase, CSS3, JavaScript, HTML5 | Link |
| JavaScript30 – 30-tägige Vanilla JS Coding Challenge | JavaScript | Link |
| Reise-Bucket-List-Karte mit Gatsby und GraphCMS | Gatsby, Broschüre, GraphCMS, HTML, CSS | Link |
| Speicherkartenspiel mit Vue.js | Vue, JavaScript, HTML, CSS | Link |
| Strapi- und GatsbyJS-Kurs – Portfolio-Projekt | Strapi, Gatsby, JavaScript, HTML, CSS | Link |
| Storybook – Node, Express, MongoDB und Google OAuth | MongoDB, Knoten, JavaScript, HTML, CSS | Link |
| Breathe and Relax App – JavaScript- und CSS-Animationen | JavaScript, HTML, CSS | Link |
| Node.js CLI für Kryptowährungspreise | Knoten, JavaScript | Link |
| React und Tailwind CSS-Bildergalerie | Reagieren, Rückenwind, JavaScript, HTML, CSS | Link |
| Pomodoro Clock mit React | Reagieren, JavaScript, HTML, CSS | Link |
| Keyword-Dichte-Tool mit Laravel von Grund auf | Laravel, PHP, JQuery, AJAX, SEO | Link |
| YouTube-Klon mit Yii2 PHP Framework | Yii2, PHP | Link |
| Reddit-Klon mit React, GraphQL und Amplify | Reagieren, Verstärken, AWS, GraphQL, Node | Link |
| Full-Stack Yelp-Klon mit React und GraphQL | Reagieren, GraphQL, HTML, CSS, JavaScript | Link |
| Pokémon-Web-App mit React Hooks und Kontext-API | Reagieren, HTML, CSS, JavaScript | Link |
| Watershed Monitor mit JavaScript und Rails | Ruby, Rails, JavaScript | Link |
| Klimadaten-Dashboard mit React und Redux | Reagieren, Redux, HTML, CSS, JavaScript | Link |
| Umdrehen von UNO-Karten nur mit CSS | HTML, CSS | Link |
| Chat-App mit Redis, WebSocket und Go | Redis, Web Socket, Go, Azure | Link |
| Spotify-Anmeldeanimation mit Reaktionsnavigation | Reagieren, HTML, CSS, JavaScript | Link |
| Dynamische Wetterschnittstelle nur mit CSS | HTML, CSS | Link |
| Einfache CRUD-App mit Airtable und Vue | Airtable, Vue, Vuetify, API, HTML | Link |
| Full-Stack-RPG-Charaktergenerator mit MEVN-Stack | MongoDB, Express, Vue, Node, HTML | Link |
| Todo App mit dem PERN-Stack | PostgreSQL, Express, React, Node, HTML | Link |
| Sommer-Roadtrip-Karten-App mit Gatsby | React, Gatsby, Leaflet | Link |
| Multiplayer-Kartenspiel mit Socket.io | Phaser 3, Express, Socket.io, JavaScript | Link |
| COVID-19 Dashboard- und Karten-App mit Gatsby | React, Gatsby, Leaflet | Link |
| Flashcard-Quiz mit Reaktion | Reagieren, API, JavaScript, HTML5, CSS3 | Link |
| Whack-a-Mole mit reinem JavaScript | JavaScript, HTML5, CSS3 | Link |
| Meme Maker mit React | Reagieren, JavaScript, HTML5, CSS3 | Link |
| Evernote-Klon mit React | Reagieren, Firebase, Node, JavaScript, HTML5 | Link |
| Entwickler-Meetup-App mit Vue | Vue, Firebase, Vuetify, JavaScript, HTML5 | Link |
| Echtzeit-Chat-App mit Vue | Vue, Firebase, Vuex, JavaScript, HTML5 | Link |
| Kryptowährungs-Tracker mit Vue | Vue, Vuetify, API, JavaScript, HTML5 | Link |
| Multiplayer-Quizspiel mit Vue | Vue, Pusher, Node, Express, JavaScript | Link |
| Minesweeper-Spiel mit Vue | Vue, Vuex, Vuetify, JavaScript, HTML5 | Link |
| Instagram-Klon mit Vue | Vue, CSSGram, JavaScript, HTML5, CSS3 | Link |
| Hacker-News-Klon mit Angular | Angular, Lighthouse, JavaScript, HTML5, CSS3 | Link |
| Chat-Schnittstelle | HTML5, CSS3 | Link |
| Reiner CSS3-Tooltip | HTML5, CSS3 | Link |
| Social-Media-Schaltflächen | HTML5, CSS3 | Link |
| Zeugniskarte | HTML5, CSS3 | Link |
| Navigationsleiste mit CSS3-Flexbox | HTML5, CSS3 | Link |
| Mobile App-Layout mit CSS3 Flexbox | HTML5, CSS3 | Link |
| Von Reddit inspirierter Loading Spinner | HTML5, CSS3 | Link |
| Kalender mit CSS3-Raster | JavaScript, HTML5, CSS3 | Link |
| Tetris-Spiel in React | Reagieren, JavaScript, HTML5, CSS3 | Link |
| 2D-Breakout-Spiel | JavaScript, HTML5, CSS3 | Link |
| Sprite-Animation | JavaScript, HTML5, CSS3 | Link |
| Schlangenspiel | JavaScript, HTML5, CSS3 | Link |
| Memory-Spiel | JavaScript, HTML5, CSS3 | Link |
| Einfache Authentifizierung und Autorisierung | GraphQL, Apollo, Node, JavaScript, HTML5 | Link |
| Kryptowährungs-Tracker | NextJS, GraphQL, Apollo, Node, JavaScript | Link |
| Sofortige Suche mit Vanilla Javascript | JavaScript, HTML5, CSS3 | Link |
| Rechner-App | JavaScript, HTML5, CSS3 | Link |
| Todo-App | Vue, JavaScript, CSS3, HTML5 | Link |
| Blog-App | Vue, GraphQL, Apollo, JavaScript, CSS3 | Link |
| Einfache Budgetierungs-App | Vue, Bulma, JavaScript, CSS3, HTML5 | Link |
| Suchbot | Node, Twilio, Cheerio, API, Automatisierung | Link |
| Twitter-Bot | Knoten, JavaScript, API, Automatisierung | Link |
| Echtzeit-Markdown-Editor | Knoten, JavaScript, Express, Redis, HTML5 | Link |
| Todo-App | Angular, TypeScript, RxJS, HTML5, CSS3 | Link |
| Hacker News-Client | Angular, RxJS, Webpack, HTML5, CSS3 | Link |
| Zufällige Zitatmaschine | Reagieren, JavaScript, HTML5, CSS3 | Link |
| Todoist-Klon | Reagieren, Firebase, JavaScript, Testen, HTML5 | Link |
| Chat-App mit Stimmungsanalyse | NextJS, Pusher, Sentiment, Node, React | Link |
| Terminplaner | Reagieren, Twilio, CosmicJS, Material-UI, JavaScript | Link |
| Spiel des Lebens | Reagieren, 2D, JavaScript, HTML5, CSS3 | Link |
| Nachrichten-App | Reagieren Sie nativ, Knoten, API, Reagieren, JavaScript | Link |
| Chat-App | Reagieren, Redux, Redux Saga, Web Sockets, Node | Link |
| Todo-App | React Native, GraphQL, Apollo, API, Hasura | Link |
| Chrome-Erweiterung | Reagieren, Paket, JavaScript, HTML5, CSS3 | Link |
| Film-Voting-App | Reagieren, Redux, API, unveränderlich, JavaScript | Link |
| Trello-Klon | Reagieren, Elixier, Phoenix, JWT, JavaScript | Link |
| CMS im Wiki-Stil | C#, .NET, Razor-Seiten | Link |
| Spotify-Klon mit ReactJS | Reagieren, HTML5, CSS3 | Link |
| Klon der Microsoft-Homepage | HTML5, CSS3, JavaScript | Link |
| Einfaches Gantt-Diagramm | HTML5, CSS3, JavaScript | Link |
| Job-Scraping-App | Knoten, JavaScript, REST, API, Express | Link |
| E-Commerce-App | Reagieren, Bootstrap, JavaScript, HTML5, CSS3 | Link |
| Netflix-Landingpage | HTML5, CSS3, JavaScript | Link |
| KI-Chatbot | Web Speech API, Node, JavaScript, Express, Socket.io | Link |
| Social-Networking-App | Reagieren, Knoten, Redux, Firebase, REST | Link |
| Erstellen Sie eine einfache Kryptowährungs-Blockchain in Node.js | Knoten, JavaScript, Kryptographie, Blockchain | Link |
| BitTorrent-Client | Knoten, JavaScript, TCP, Computernetzwerke | Link |
| Todo-Listen-App mit JavaScript | JavaScript, HTML5, CSS3 | Link |
| JavaScript-Animationen mit Anime.js | JavaScript, CSS3, Bibliothek, HTML5, API | Link |
| Jobbörsen-App mit React | Reagieren, Knoten, Cron, JavaScript, HTML5 | Link |
| Projekt | Technologien | Link |
|---|---|---|
| Erstellen Sie mit React Native einen Uber Eats-Klon | Reagieren Sie nativ, Javascript, Android, iOS | Link |
| Erstellen Sie einen Uber-Klon mit React Native | Reagieren Sie nativ, Javascript, Android, iOS | Link |
| Erstellen Sie mit dem Flutter SDK eine Chat-App mit Geschichten | Flatter, Dart | Link |
| Erstellen Sie eine App im Robinhood-Stil, um COVID-19-Fälle zu verfolgen | Kotlin, Android | Link |
| Swipe Mobile App im Tinder-Stil | Kotlin, Java, Swift | Link |
| Mobile App zur Preisliste von Kryptowährungen | Reagieren Sie nativ, schnell, flattern, schießen | Link |
| Restaurants Social Mobile App | Reagieren Sie nativ, schnell, flattern, schießen | Link |
| Pausenzeit-Erinnerungs-App für Mobilgeräte | Reagieren Sie nativ, Kotlin, Java, Swift | Link |
| Mobile App zur Rechnungsstellung und Zahlungserinnerung | Reagieren, Knoten, Express, MongoDB | Link |
| Countdown-Mobile-App | Swift, Java, React Native | Link |
| Flappy Bird iOS-Spiel mit Swift | Swift, XCode, iOS | Link |
| Bull's Eye iOS-Spiel mit Swift | Swift, XCode, iOS | Link |
| Restaurant-iOS-App mit SwiftUI | Swift, XCode, iOS | Link |
| Würfeln Sie die iOS-App mit Swift | Swift, XCode, iOS | Link |
| TrueCaller-Klon | Java, MySQL, XAMPP, Android | Link |
| Wetter-App | Java, API, Android | Link |
| E-Commerce-App | Java, Firebase, Android | Link |
| Chat-App | Java, Firebase, Android | Link |
| Todo-App | Flattern, Dart, Android, iOS | Link |
| Benutzeroberfläche der Reise-App | Flattern, Dart, Android, iOS | Link |
| Reddit-Client | Android, Kotlin | Link |
| Todo-App | Reagieren Sie nativ, Android, iOS, JavaScript | Link |
| Fotobibliothek-Viewer | C#, iOS, Xamarin, Visual Studio, Android | Link |
| WhatsApp-Klon mit React Native | Reagieren Sie nativ, Node, GraphQL, Apollo, JavaScript | Link |
| Projekt | Technologien | Link |
|---|---|---|
| Erstellen Sie Super Mario Bros., Zelda und Space Invaders mit Kaboom.js | JavaScript, Kaboom | Link |
| Erstellen Sie ein Arkanoid-Spiel mit TypeScript | TypeScript, HTML, CSS, JavaScript | Link |
| Einfache Spiele | Lua, LÖVE, Python, Pygame Zero | Link |
| Python Online-Multiplayer-Spiel | Python | Link |
| Beat Em Up Kampfspiel | Einheit, C# | Link |
| Einfaches 3D-Spiel mit Godot 3.1 | Godot, C#, 3D | Link |
| Einfaches Puzzlespiel in Godot – Box und Switch | Godot, C#, 2D | Link |
| Spieloberfläche von Grund auf in Godot 3 | Godot, C#, 2D | Link |
| 2D-Spiel mit Godot: Spieler und Feind | Godot, C#, 2D | Link |
| Multiplayer-Kartenspiel mit Socket.io | Phaser 3, Express, Socket.io, JavaScript | Link |
| Multiplayer-Kartenspiel mit Unity 2D und Mirror | C#, Unity, 2D, Spiegel | Link |
| Roguelike-Tutorial in Rust | Rost, 2D | Link |
| Abenteuer in Rust – Ein einfaches 2D-Spiel | Rost, 2D | Link |
| Terminal Snake-Spiel mit Ruby | Rubin, 2D | Link |
| Space Invaders mit OpenGL | OpenGL, C/C++, 2D | Link |
| Sudoku-Löser in C | C/C++, 2D | Link |
| Schach-Engine in C | C/C++, 2D | Link |
| Flappy Bird iOS-Spiel mit Swift | Swift, XCode, iOS | Link |
| Bull's Eye iOS-Spiel mit Swift | Swift, XCode, iOS | Link |
| Whack-a-Mole mit reinem JavaScript | JavaScript, HTML5, CSS3 | Link |
| Multiplayer-Quizspiel mit Vue | Vue, Pusher, Node, Express, JavaScript | Link |
| Minesweeper-Spiel mit Vue | Vue, Vuex, Vuetify, JavaScript, HTML5 | Link |
| Tetris-Spiel in React | Reagieren, JavaScript, HTML5, CSS3 | Link |
| 2D-Breakout-Spiel | JavaScript, HTML5, CSS3 | Link |
| Sprite-Animation | JavaScript, HTML5, CSS3 | Link |
| Schlangenspiel | JavaScript, HTML5, CSS3 | Link |
| Memory-Spiel | JavaScript, HTML5, CSS3 | Link |
| Panzer-Shooter | 3D, Einheit, C# | Link |
| 2D-Roguelike | 2D, Einheit, C# | Link |
| John Lemons Haunted Jaunt 3D | 3D, Einheit, C# | Link |
| VR-Anfänger: Der Escape Room | VR, Unity, C# | Link |
| Rubys Abenteuer | 2D, Einheit, C# | Link |
| RPG-Spiel | 2D, Einheit, C# | Link |
| Roll-a-Ball | 3D, Einheit, C# | Link |
| FPS-Mikrospiel | Einheit, C# | Link |
| Plattform-Mikrospiel | Einheit, C#, 2D | Link |
| Kart-Mikrospiel | Einheit, C# | Link |
| Arcade-Shooter | Lua, LIEBE | Link |
| Spiel des Lebens | Reagieren, 2D, JavaScript, HTML5, CSS3 | Link |
| Handgemachter Held | C/C++, OpenGL, 2D | Link |
| Ausbruch | C/C++, OpenGL, 2D | Link |
| Tetris | C/C++, 2D | Link |
| NES-Spiel | C/C++, Python, 2D | Link |
| Roguelike-Spiel | C#, .NET, RogueSharp, MonoGame, RLNet | Link |
| Einfaches RPG-Spiel | C#, SQL, 2D | Link |
| Projekt | Technologien | Link |
|---|---|---|
| Erstellen Sie einen Web Scraper mit BeautifulSoup | Python, BeautifulSoup | Link |
| CNN, das Lungenentzündung anhand von Röntgenaufnahmen des Brustkorbs erkennt | CNN, Python | Link |
| Automatische Aktualisierung von Datenvisualisierungen in Python mit AWS | Python, AWS, Matplotlib | Link |
| Twitter-Sentiment-Analysetool mit GCP und Node | API, GCP, Knoten, JavaScript | Link |
| Twitter-Sentimentanalyse mit CNN | Python, Matplotlib, Numpy, Pandas | Link |
| Taylor Swift Songtext-Generator | Python, Keras, Numpy, Pandas | Link |
| MNIST-Ziffernerkenner | Python, Keras, TensorFlow, Numpy, SciKit | Link |
| Trainieren Sie ein Modell, um Farben zu erzeugen | Python, Keras, TensorFlow, Numpy | Link |
| Bildunterschriftengenerator | Python, TensorFlow, Numpy | Link |
| Brechen Sie ein Captcha-System mit CNN | Python, Keras, TensorFlow, OpenCV, Numpy | Link |
| Erzeugen Sie ein durchschnittliches Gesicht | Python, OpenCV, Numpy, C/C++ | Link |
| Bildzusammenfügung | Python, OpenCV, Numpy | Link |
| Hand-Schlüsselpunkterkennung | Python, OpenCV, Numpy, C/C++ | Link |
| Eigenface | Python, OpenCV, Numpy, C/C++ | Link |
| Drohnen-Zielerkennung | Python, OpenCV, Numpy | Link |
| Objekterkennung mit Mask R-CNN | Python, OpenCV, Numpy | Link |
| Erkennung von Gesichtspunkten | Python, OpenCV, DLib, Numpy | Link |
| Korrektur der Textschräge | Python, OpenCV, Numpy | Link |
| OCR und Texterkennung | Python, OpenCV, Tesseract, Numpy | Link |
| Personenzähler | Python, OpenCV, Numpy | Link |
| Texterkennung | Python, OpenCV, Numpy | Link |
| Semantische Segmentierung | Python, OpenCV, Numpy | Link |
| Objektverfolgung | Python, OpenCV, Numpy, CamShift | Link |
| Gesichtsclusterung | Python, OpenCV, Numpy | Link |
| Barcode-Scanner | Python, OpenCV, ZBar, Numpy | Link |
| Erkennung von Ausprägungen | Python, OpenCV, Numpy | Link |
| Gesichtserkennung | Python, OpenCV, Numpy | Link |
| Dokumentenscanner | Python, OpenCV, Numpy, SciKit | Link |
| Musikempfehlung | Python, SciKit, Numpy, Pandas | Link |
| Prognostizieren Sie die Qualität von Wein | Python, Matplotlib, Numpy, Pandas | Link |
| Genetische Algorithmen | Python, SciKit, Numpy, Pandas | Link |
| DeepDream | Python, TensorFlow, Visualisierung | Link |
| Aktienkursvorhersage | Python, SciKit, Matplotlib | Link |
| Filmempfehlungssysteme | Python, LightFM | Link |
| Twitter-Sentiment-Analyse | Python, API | Link |
| Chat-App mit Stimmungsanalyse | NextJS, Pusher, Sentiment, Node, React | Link |
