projectlearn project based learning
1.0.0
튜토리얼은 훌륭하지만 프로젝트를 구축하는 것이 배우는 가장 좋은 방법입니다. 프로젝트 기반 학습을 수행하고 올바른 방법으로 코드를 배우세요!
ProjectLearn은 학습자가 처음부터 애플리케이션을 구축할 수 있도록 선별된 프로젝트 튜토리얼 목록을 제공합니다. 이는 웹 개발, 모바일 개발, 게임 개발, 머신 러닝, 딥 러닝, 인공 지능 등 다양한 범주로 나뉩니다.
목록에는 ReactJS, NodeJS, VueJS, Flutter, React Native, .NET Core, Unity, TensorFlow, OpenCV, Keras 등을 포함하여 수요가 많은 다양한 언어 및 기술에 대한 프로젝트 튜토리얼이 있습니다.
이 목록에 참여하려면 CONTRIBUTE.md를 방문하여 자세한 내용을 확인하세요. :)
| 프로젝트 | 기술 | 링크 |
|---|---|---|
| React.JS Three.js 튜토리얼에서 놀라운 3D 웹 개발자 포트폴리오 구축 및 배포 | vite, React, JavaScript, Three.js, Tailwind | 링크 |
| Next.Js Drizzle ORM 및 Cryptomus Payments를 갖춘 풀스택 빠른 상거래 앱 | Next.js, React, JavaScript, Drizzle ORM, Cryptomus | 링크 |
| 관리 대시보드로 풀 스택 전자상거래 상점 구축 | Next.js, React, JavaScript, Tailwind, 스트라이프 | 링크 |
| 풀 스택 Uber 클론 구축 | Next.js, React, JavaScript, Tailwind, 스트라이프 | 링크 |
| React를 사용하여 풀 스택 소셜 미디어 앱 구축 및 배포 | 리액트, 자바스크립트, HTML, CSS, Tailwind | 링크 |
| HTML CSS 및 JavaScript로 나만의 ChatGPT 클론 만들기 | HTML, CSS, 자바스크립트, OpenAI API, API | 링크 |
| NextJS로 Reddit 2.0 클론 구축 | 리액트, SQL, Supabase, Next.js, GraphQL | 링크 |
| React로 YouTube 클론 만들기 | 익스프레스, 노드, 자바스크립트, HTML, CSS | 링크 |
| JavaScript 차트 라이브러리를 사용하여 분기형 막대 차트 만들기 | 자바스크립트, HTML, CSS | 링크 |
| 카드 구성 요소를 구축하여 CSS 기본 알아보기 | HTML, CSS | 링크 |
| 서버리스 Meme을 서비스로 생성 | 자바스크립트, 러스트, CSS, HTML | 링크 |
| 일기예보 웹사이트 | 자바스크립트, HTML, CSS, 리액트 | 링크 |
| 링크 단축기 웹사이트 | 자바스크립트, Vue, HTML, CSS, 리액트 | 링크 |
| 표절검사기 홈페이지 | 파이썬, 부트스트랩 | 링크 |
| 맞춤 Google 지도 테마 구축 | 자바스크립트, HTML, CSS | 링크 |
| JavaScript로 슈퍼 마리오 테마의 Google 지도 만들기 | 자바스크립트, HTML5, CSS3 | 링크 |
| 커뮤니티 기반 배달 애플리케이션 구축 | Python, Django, PostgreSQL, JavaScript, Mapbox | 링크 |
| 지역 매장 검색 및 발견 애플리케이션 구축 | Python, Django, PostgreSQL, JavaScript, Mapbox | 링크 |
| React.js 및 Node.js를 사용하는 중간 복제 | 리액트, 노드, CSS3, 자바스크립트, HTML5 | 링크 |
| React JS를 사용한 Facebook 복제 | 리액트, 파이어베이스, CSS3, 자바스크립트, HTML5 | 링크 |
| JavaScript30 - 30일 바닐라 JS 코딩 챌린지 | 자바스크립트 | 링크 |
| Gatsby와 GraphCMS를 사용한 여행 버킷리스트 지도 | 개츠비, 전단지, GraphCMS, HTML, CSS | 링크 |
| Vue.js를 사용한 메모리 카드 게임 | 뷰, 자바스크립트, HTML, CSS | 링크 |
| Strapi 및 GatsbyJS 과정 - 포트폴리오 프로젝트 | 스트라피, 개츠비, 자바스크립트, HTML, CSS | 링크 |
| 스토리북 - Node, Express, MongoDB 및 Google OAuth | MongoDB, 노드, 자바스크립트, HTML, CSS | 링크 |
| 숨을 쉬고 휴식을 취하세요 앱 - JavaScript 및 CSS 애니메이션 | 자바스크립트, HTML, CSS | 링크 |
| 암호화폐 가격에 대한 Node.js CLI | 노드, 자바스크립트 | 링크 |
| React 및 Tailwind CSS 이미지 갤러리 | 리액트, Tailwind, 자바스크립트, HTML, CSS | 링크 |
| React를 이용한 뽀모도로 시계 | 리액트, 자바스크립트, HTML, CSS | 링크 |
| Laravel을 처음부터 사용하는 키워드 밀도 도구 | 라라벨, PHP, JQuery, AJAX, SEO | 링크 |
| Yii2 PHP 프레임워크를 사용하는 YouTube 복제 | Yii2, PHP | 링크 |
| React, GraphQL 및 Amplify를 사용한 Reddit 복제 | 반응, 증폭, AWS, GraphQL, 노드 | 링크 |
| React 및 GraphQL을 사용한 전체 스택 Yelp 클론 | 리액트, GraphQL, HTML, CSS, 자바스크립트 | 링크 |
| React Hooks 및 Context API를 갖춘 Pokémon Web App | 리액트, HTML, CSS, 자바스크립트 | 링크 |
| JavaScript와 Rails를 사용한 유역 모니터링 | 루비, 레일즈, 자바스크립트 | 링크 |
| React와 Redux를 사용한 기후 데이터 대시보드 | 리액트, 리덕스, HTML, CSS, 자바스크립트 | 링크 |
| CSS만 사용하여 UNO 카드 뒤집기 | HTML, CSS | 링크 |
| Redis, WebSocket 및 Go를 사용한 채팅 앱 | Redis, 웹 소켓, Go, Azure | 링크 |
| React Navigation을 사용한 Spotify 로그인 애니메이션 | 리액트, HTML, CSS, 자바스크립트 | 링크 |
| CSS만으로 구성된 동적 날씨 인터페이스 | HTML, CSS | 링크 |
| Airtable과 Vue를 사용한 간단한 CRUD 앱 | 에어테이블, Vue, Vuetify, API, HTML | 링크 |
| MEVN 스택을 갖춘 풀 스택 RPG 캐릭터 생성기 | MongoDB, 익스프레스, Vue, 노드, HTML | 링크 |
| PERN 스택이 포함된 Todo 앱 | PostgreSQL, 익스프레스, 리액트, 노드, HTML | 링크 |
| Gatsby와 함께하는 여름 여행 지도 앱 | 리액트, 개츠비, 리플릿 | 링크 |
| Socket.io를 사용한 멀티플레이어 카드 게임 | 페이저 3, 익스프레스, Socket.io, 자바스크립트 | 링크 |
| Gatsby를 사용한 코로나19 대시보드 및 지도 앱 | 리액트, 개츠비, 리플릿 | 링크 |
| React를 사용한 플래시카드 퀴즈 | 리액트, API, 자바스크립트, HTML5, CSS3 | 링크 |
| 순수 JavaScript를 사용한 두더지 잡기 | 자바스크립트, HTML5, CSS3 | 링크 |
| React를 이용한 밈 메이커 | 리액트, 자바스크립트, HTML5, CSS3 | 링크 |
| React를 사용한 Evernote 복제 | 리액트, 파이어베이스, 노드, 자바스크립트, HTML5 | 링크 |
| Vue를 사용한 개발자 모임 앱 | Vue, Firebase, Vuetify, 자바스크립트, HTML5 | 링크 |
| Vue를 사용한 실시간 채팅 앱 | Vue, Firebase, Vuex, 자바스크립트, HTML5 | 링크 |
| Vue를 사용한 암호화폐 추적기 | Vue, Vuetify, API, 자바스크립트, HTML5 | 링크 |
| Vue를 사용한 멀티플레이어 퀴즈 게임 | Vue, 푸셔, 노드, 익스프레스, 자바스크립트 | 링크 |
| Vue를 사용한 지뢰 찾기 게임 | Vue, Vuex, Vuetify, 자바스크립트, HTML5 | 링크 |
| Vue를 사용한 Instagram 복제 | Vue, CSSGram, 자바스크립트, HTML5, CSS3 | 링크 |
| Angular를 사용한 해커 뉴스 클론 | 앵귤러, 라이트하우스, 자바스크립트, HTML5, CSS3 | 링크 |
| 채팅 인터페이스 | HTML5, CSS3 | 링크 |
| 순수 CSS3 툴팁 | HTML5, CSS3 | 링크 |
| 소셜 미디어 버튼 | HTML5, CSS3 | 링크 |
| 추천카드 | HTML5, CSS3 | 링크 |
| CSS3 Flexbox가 포함된 탐색 모음 | HTML5, CSS3 | 링크 |
| CSS3 Flexbox를 사용한 모바일 앱 레이아웃 | HTML5, CSS3 | 링크 |
| Reddit에서 영감을 받은 로딩 스피너 | HTML5, CSS3 | 링크 |
| CSS3 그리드가 포함된 달력 | 자바스크립트, HTML5, CSS3 | 링크 |
| React의 테트리스 게임 | 리액트, 자바스크립트, HTML5, CSS3 | 링크 |
| 2D 브레이크아웃 게임 | 자바스크립트, HTML5, CSS3 | 링크 |
| 스프라이트 애니메이션 | 자바스크립트, HTML5, CSS3 | 링크 |
| 뱀 게임 | 자바스크립트, HTML5, CSS3 | 링크 |
| 메모리 게임 | 자바스크립트, HTML5, CSS3 | 링크 |
| 간단한 인증 및 승인 | GraphQL, 아폴로, 노드, 자바스크립트, HTML5 | 링크 |
| 암호화폐 추적기 | NextJS, GraphQL, Apollo, 노드, 자바스크립트 | 링크 |
| 바닐라 자바스크립트를 사용한 즉시 검색 | 자바스크립트, HTML5, CSS3 | 링크 |
| 계산기 앱 | 자바스크립트, HTML5, CSS3 | 링크 |
| 할일 앱 | 뷰, 자바스크립트, CSS3, HTML5 | 링크 |
| 블로그 앱 | Vue, GraphQL, 아폴로, 자바스크립트, CSS3 | 링크 |
| 간단한 예산 앱 | 뷰, 부르마, 자바스크립트, CSS3, HTML5 | 링크 |
| 검색봇 | 노드, Twilio, Cheerio, API, 자동화 | 링크 |
| 트위터 봇 | 노드, 자바스크립트, API, 자동화 | 링크 |
| 실시간 마크다운 편집기 | 노드, 자바스크립트, 익스프레스, 레디스, HTML5 | 링크 |
| 할일 앱 | 앵귤러, 타입스크립트, RxJS, HTML5, CSS3 | 링크 |
| 해커 뉴스 클라이언트 | 앵귤러, RxJS, 웹팩, HTML5, CSS3 | 링크 |
| 무작위 견적 기계 | 리액트, 자바스크립트, HTML5, CSS3 | 링크 |
| Todoist 클론 | React, Firebase, JavaScript, 테스트, HTML5 | 링크 |
| 감정 분석 기능을 갖춘 채팅 앱 | NextJS, 푸셔, 감정, 노드, 반응 | 링크 |
| 약속 스케줄러 | 반응, Twilio, CosmicJS, Material-UI, JavaScript | 링크 |
| 인생의 게임 | 리액트, 2D, 자바스크립트, HTML5, CSS3 | 링크 |
| 뉴스 앱 | 리액트 네이티브, 노드, API, 리액트, 자바스크립트 | 링크 |
| 채팅 앱 | React, Redux, Redux Saga, 웹 소켓, 노드 | 링크 |
| 할일 앱 | 리액트 네이티브, GraphQL, Apollo, API, Hasura | 링크 |
| 크롬 확장 프로그램 | 리액트, 소포, 자바스크립트, HTML5, CSS3 | 링크 |
| 영화 투표 앱 | React, Redux, API, 불변, JavaScript | 링크 |
| 트렐로 클론 | 리액트, 엘릭서, 피닉스, JWT, 자바스크립트 | 링크 |
| 위키 스타일 CMS | C#, .NET, Razor 페이지 | 링크 |
| ReactJS를 사용한 Spotify 복제 | 리액트, HTML5, CSS3 | 링크 |
| Microsoft 홈페이지 복제 | HTML5, CSS3, 자바스크립트 | 링크 |
| 단순 간트 차트 | HTML5, CSS3, 자바스크립트 | 링크 |
| 직업 스크래핑 앱 | 노드, 자바스크립트, REST, API, 익스프레스 | 링크 |
| 전자상거래 앱 | 리액트, 부트스트랩, 자바스크립트, HTML5, CSS3 | 링크 |
| 넷플릭스 랜딩 페이지 | HTML5, CSS3, 자바스크립트 | 링크 |
| AI 챗봇 | 웹 음성 API, 노드, JavaScript, Express, Socket.io | 링크 |
| 소셜 네트워킹 앱 | 반응, 노드, Redux, Firebase, REST | 링크 |
| Node.js에서 간단한 암호화폐 블록체인 구축 | 노드, 자바스크립트, 암호화, 블록체인 | 링크 |
| 비트토렌트 클라이언트 | 노드, JavaScript, TCP, 컴퓨터 네트워크 | 링크 |
| JavaScript를 사용한 Todo List 앱 | 자바스크립트, HTML5, CSS3 | 링크 |
| Anime.js를 사용한 JavaScript 애니메이션 | 자바스크립트, CSS3, 라이브러리, HTML5, API | 링크 |
| React를 사용한 채용 게시판 앱 | 리액트, 노드, 크론, 자바스크립트, HTML5 | 링크 |
| 프로젝트 | 기술 | 링크 |
|---|---|---|
| React Native로 Uber Eats 클론 구축 | 리액트 네이티브, 자바스크립트, 안드로이드, iOS | 링크 |
| React Native로 Uber 클론 구축 | 리액트 네이티브, 자바스크립트, 안드로이드, iOS | 링크 |
| Flutter SDK를 사용하여 스토리가 포함된 채팅 앱 구축 | 플러터, 다트 | 링크 |
| 코로나19 사례를 추적하기 위한 Robinhood 스타일 앱 구축 | 코틀린, 안드로이드 | 링크 |
| Tinder 스타일 Swipe 모바일 앱 | 코틀린, 자바, 스위프트 | 링크 |
| 암호화폐 가격 목록 모바일 앱 | 리액트 네이티브, 스위프트, 플러터, 다트 | 링크 |
| 레스토랑 소셜 모바일 앱 | 리액트 네이티브, 스위프트, 플러터, 다트 | 링크 |
| 휴식 시간 알림 모바일 앱 | 리액트 네이티브, 코틀린, 자바, 스위프트 | 링크 |
| 송장 발행 및 결제 알림 모바일 앱 | 리액트, 노드, 익스프레스, 몽고DB | 링크 |
| 카운트다운 모바일 앱 | 스위프트, 자바, 리액트 네이티브 | 링크 |
| Swift를 사용하는 Flappy Bird iOS 게임 | 스위프트, XCode, iOS | 링크 |
| Swift를 사용하는 Bull's Eye iOS 게임 | 스위프트, XCode, iOS | 링크 |
| SwiftUI를 사용하는 레스토랑 iOS 앱 | 스위프트, XCode, iOS | 링크 |
| Swift를 사용하는 Dice iOS 앱 | 스위프트, XCode, iOS | 링크 |
| TrueCaller 클론 | 자바, MySQL, XAMPP, 안드로이드 | 링크 |
| 날씨 앱 | 자바, API, 안드로이드 | 링크 |
| 전자상거래 앱 | 자바, 파이어베이스, 안드로이드 | 링크 |
| 채팅 앱 | 자바, 파이어베이스, 안드로이드 | 링크 |
| 할일 앱 | 플러터, 다트, 안드로이드, iOS | 링크 |
| 여행 앱 UI | 플러터, 다트, 안드로이드, iOS | 링크 |
| 레딧 클라이언트 | 안드로이드, 코틀린 | 링크 |
| 할일 앱 | 리액트 네이티브, 안드로이드, iOS, 자바스크립트 | 링크 |
| 사진 라이브러리 뷰어 | C#, iOS, 자마린, 비주얼 스튜디오, 안드로이드 | 링크 |
| React Native를 사용한 WhatsApp 복제 | 리액트 네이티브, 노드, GraphQL, 아폴로, 자바스크립트 | 링크 |
| 프로젝트 | 기술 | 링크 |
|---|---|---|
| Kaboom.js를 사용하여 Super Mario Bros, Zelda 및 Space Invaders 구축 | 자바스크립트, 카붐 | 링크 |
| TypeScript를 사용하여 Arkanoid 게임 만들기 | 타입스크립트, HTML, CSS, 자바스크립트 | 링크 |
| 간단한 게임 | 루아, LÖVE, Python, 파이게임 제로 | 링크 |
| Python 온라인 멀티플레이어 게임 | 파이썬 | 링크 |
| 두들겨 패기 싸움 게임 | 유니티, C# | 링크 |
| Godot 3.1을 사용한 간단한 3D 게임 | 고도, C#, 3D | 링크 |
| Godot의 간단한 퍼즐 게임 - 상자와 스위치 | 고도, C#, 2D | 링크 |
| Godot 3의 처음부터 게임 인터페이스 | 고도, C#, 2D | 링크 |
| Godot를 이용한 2D 게임: 플레이어와 적 | 고도, C#, 2D | 링크 |
| Socket.io를 사용한 멀티플레이어 카드 게임 | 페이저 3, 익스프레스, Socket.io, 자바스크립트 | 링크 |
| Unity 2D와 Mirror를 사용한 멀티플레이어 카드 게임 | C#, 유니티, 2D, 미러 | 링크 |
| Rust의 로그라이크 튜토리얼 | 러스트, 2D | 링크 |
| Rust의 모험 - 기본적인 2D 게임 | 러스트, 2D | 링크 |
| Ruby와 함께하는 터미널 스네이크 게임 | 루비, 2D | 링크 |
| OpenGL을 사용하는 스페이스 인베이더 | OpenGL, C/C++, 2D | 링크 |
| C의 스도쿠 해결사 | C/C++, 2D | 링크 |
| C의 체스 엔진 | C/C++, 2D | 링크 |
| Swift를 사용하는 Flappy Bird iOS 게임 | 스위프트, XCode, iOS | 링크 |
| Swift를 사용하는 Bull's Eye iOS 게임 | 스위프트, XCode, iOS | 링크 |
| 순수 JavaScript를 사용한 두더지 잡기 | 자바스크립트, HTML5, CSS3 | 링크 |
| Vue를 사용한 멀티플레이어 퀴즈 게임 | Vue, 푸셔, 노드, 익스프레스, 자바스크립트 | 링크 |
| Vue를 이용한 지뢰찾기 게임 | Vue, Vuex, Vuetify, 자바스크립트, HTML5 | 링크 |
| React의 테트리스 게임 | 리액트, 자바스크립트, HTML5, CSS3 | 링크 |
| 2D 브레이크아웃 게임 | 자바스크립트, HTML5, CSS3 | 링크 |
| 스프라이트 애니메이션 | 자바스크립트, HTML5, CSS3 | 링크 |
| 뱀 게임 | 자바스크립트, HTML5, CSS3 | 링크 |
| 메모리 게임 | 자바스크립트, HTML5, CSS3 | 링크 |
| 탱크 슈터 | 3D, 유니티, C# | 링크 |
| 2D 로그라이크 | 2D, 유니티, C# | 링크 |
| 존 레몬의 Haunted Jaunt 3D | 3D, 유니티, C# | 링크 |
| VR 초보자: 탈출실 | VR, 유니티, C# | 링크 |
| 루비의 모험 | 2D, 유니티, C# | 링크 |
| RPG 게임 | 2D, 유니티, C# | 링크 |
| 롤어볼 | 3D, 유니티, C# | 링크 |
| FPS 마이크로게임 | 유니티, C# | 링크 |
| 플랫폼 게임 마이크로게임 | 유니티, C#, 2D | 링크 |
| 카트 마이크로게임 | 유니티, C# | 링크 |
| 아케이드 슈터 | 루아, 러브 | 링크 |
| 인생의 게임 | 리액트, 2D, 자바스크립트, HTML5, CSS3 | 링크 |
| 수제 영웅 | C/C++, OpenGL, 2D | 링크 |
| 브레이크아웃 | C/C++, OpenGL, 2D | 링크 |
| 테트리스 | C/C++, 2D | 링크 |
| NES 게임 | C/C++, 파이썬, 2D | 링크 |
| 로그라이크 게임 | C#, .NET, RogueSharp, MonoGame, RLNet | 링크 |
| 간단한 RPG 게임 | C#, SQL, 2D | 링크 |
| 프로젝트 | 기술 | 링크 |
|---|---|---|
| BeautifulSoup을 사용하여 웹 스크레이퍼 구축 | 파이썬, BeautifulSoup | 링크 |
| 흉부 엑스레이로 폐렴을 감지하는 CNN | CNN, 파이썬 | 링크 |
| AWS를 사용하여 Python에서 데이터 시각화 자동 업데이트 | 파이썬, AWS, 맷플롯립 | 링크 |
| GCP와 Node를 활용한 트위터 감성 분석 도구 | API, GCP, 노드, 자바스크립트 | 링크 |
| CNN을 활용한 트위터 감성 분석 | Python, Matplotlib, Numpy, 팬더 | 링크 |
| Taylor Swift 가사 생성기 | 파이썬, 케라스, Numpy, 판다 | 링크 |
| MNIST 숫자 인식기 | Python, Keras, TensorFlow, Numpy, SciKit | 링크 |
| 색상을 생성하도록 모델 훈련 | 파이썬, 케라스, 텐서플로우, Numpy | 링크 |
| 이미지 캡션 생성기 | Python, TensorFlow, Numpy | 링크 |
| CNN을 사용하여 보안 문자 시스템 깨기 | 파이썬, 케라스, 텐서플로우, OpenCV, Numpy | 링크 |
| 평균 얼굴 생성 | 파이썬, OpenCV, Numpy, C/C++ | 링크 |
| 이미지 스티칭 | 파이썬, OpenCV, Numpy | 링크 |
| 손 키포인트 감지 | 파이썬, OpenCV, Numpy, C/C++ | 링크 |
| 고유면 | 파이썬, OpenCV, Numpy, C/C++ | 링크 |
| 드론 표적 탐지 | 파이썬, OpenCV, Numpy | 링크 |
| Mask R-CNN을 이용한 객체 검출 | 파이썬, OpenCV, Numpy | 링크 |
| 얼굴 랜드마크 감지 | 파이썬, OpenCV, DLib, Numpy | 링크 |
| 텍스트 기울어짐 수정 | 파이썬, OpenCV, Numpy | 링크 |
| OCR 및 텍스트 인식 | Python, OpenCV, Tesseract, Numpy | 링크 |
| 인원 계수기 | 파이썬, OpenCV, Numpy | 링크 |
| 텍스트 감지 | 파이썬, OpenCV, Numpy | 링크 |
| 의미론적 분할 | 파이썬, OpenCV, Numpy | 링크 |
| 객체 추적 | 파이썬, OpenCV, Numpy, CamShift | 링크 |
| 얼굴 클러스터링 | 파이썬, OpenCV, Numpy | 링크 |
| 바코드 스캐너 | 파이썬, OpenCV, ZBar, Numpy | 링크 |
| 돌출성 탐지 | 파이썬, OpenCV, Numpy | 링크 |
| 얼굴 인식 | 파이썬, OpenCV, Numpy | 링크 |
| 문서 스캐너 | 파이썬, OpenCV, Numpy, SciKit | 링크 |
| 음악 추천자 | Python, SciKit, Numpy, 팬더 | 링크 |
| 와인의 품질 예측 | Python, Matplotlib, Numpy, 팬더 | 링크 |
| 유전 알고리즘 | Python, SciKit, Numpy, 팬더 | 링크 |
| 딥드림 | Python, TensorFlow, 시각화 | 링크 |
| 주가 예측 | 파이썬, SciKit, Matplotlib | 링크 |
| 영화 추천 시스템 | 파이썬, 라이트FM | 링크 |
| 트위터 감성 분석 | 파이썬, API | 링크 |
| 감정 분석 기능을 갖춘 채팅 앱 | NextJS, 푸셔, 감정, 노드, 반응 | 링크 |
