초보자를 위한 GitHub의 15가지 흥미로운 전체 스택 프로젝트 [2022]

게시 됨: 2021-01-06

전체 스택 개발에는 클라이언트 및 서버 소프트웨어가 모두 포함됩니다. 웹 개발자로서 성공적인 경력을 쌓기 위해서는 프론트엔드와 백엔드 개발에 대한 지식이 필요합니다. GitHub의 전체 스택 프로젝트는 개발 기술을 배우고 구축하는 훌륭한 방법을 제공합니다. 전체 스택 프로젝트를 구현하면 다음과 관련된 프로그래밍 기능을 개선하면서 HTML 및 CSS를 마스터하는 데 도움이 됩니다.

  • 브라우저(jQuery, Angular, JavaScript, Vue 등 사용)
  • 서버(PHP, Python, Node 등 사용)
  • 데이터베이스(SQL, SQLite, MongoDB 등 사용)

게다가 풀스택 개발은 수요가 많은 직업입니다. 개발자는 최신 기술과 사용된 기술의 모든 측면을 알고 있기 때문에 프로토타입을 빠르게 만들고 다른 팀원을 지원할 수 있습니다. 이러한 방식으로 숙련된 풀스택 개발자는 전체 프로젝트 비용을 줄이고 효율적인 팀 커뮤니케이션을 가능하게 합니다.

목차

GitHub의 전체 스택 프로젝트

Swiggy, Quora, IMDB 등과 같은 애플리케이션을 빌드하는 방법을 배우십시오.

1. 탭뉴스

사용자 로그를 기반으로 뉴스를 자동으로 추천해주는 React 기반 웹앱입니다. 기본적으로 TapNews는 다양한 소스에서 뉴스를 수집하고 기계 학습을 적용하여 주제를 제안합니다. TF-IDF 알고리즘을 사용하여 중복을 제거하고 TensorFlow CNN을 사용하여 뉴스 주제를 예측합니다. 또한 JSON-RPC는 여러 백엔드 서비스 간의 통신을 지원합니다.

2. 풀스태키네이터

이 프로젝트는 React 애플리케이션을 위해 Express 및 Next.js가 있는 Node.js 서버를 사용합니다. 대규모 프로젝트를 위한 견고한 상용구 역할을 하며 간단한 폴더 구성 구조로 구성됩니다. Fullstackinator는 전역 상태 관리를 위한 Redux와 서버 및 클라이언트 파일 모두에 Typescript 설정을 통합합니다. 따라서 이 오픈 소스 프로젝트를 확인하여 Node.js, Next.js, Typescript, Redux 및 styled-components의 작동에 대해 더 명확하게 알 수 있습니다.

3. 포스트베이포RS

PostVapoRS는 PostgreSQL, Vapor, React 및 Swift가 포함된 전체 스택을 나타냅니다. 이 GitHub 프로젝트는 백엔드 및 프론트엔드 개발을 위한 다음 도구도 제공합니다.

  • MySQL
  • SQLite
  • 마리아DB
  • 자바스크립트
  • 제이쿼리
  • 반응
  • 뷰
  • 모난
  • 날씬한
  • 포퍼 등

4. 몽고베이포RS

이 프로젝트는 위의 아이디어와 매우 유사하지만 PostgreSQL 대신 MongoDB를 사용합니다. MongoVapoRS를 복제하여 데이터베이스 개발, 데이터베이스 드라이버, 애플리케이션 프레임워크 및 라이브러리에 익숙해질 수 있습니다. 따라서 코드에 액세스하고 멀리 연습하십시오!

5. 풀스택 PPM도

GitHub에서 무료로 사용할 수 있는 이 개인 프로젝트 관리 도구의 코드는 여기 에서 찾을 수 있습니다. React 및 SpringBoot를 사용하여 빌드되었습니다. full-stack-ppm-tool 프로젝트에는 다음과 같은 기능이 있습니다.

  • 사용자 등록 및 로그인 기능
  • JWT 토큰을 통한 사용자 인증
  • CRUD 작업

6. 코딩AI

이 혁신적인 프로젝트는 많은 기여자 커뮤니티를 즐깁니다. CodingAI는 개발자가 기술 스택과 관련된 멘토를 찾을 수 있도록 하는 풀 스택 애플리케이션의 훌륭한 예입니다. 포괄적인 프로젝트 문서는 React, CSS, Redux 및 반응형 개발에 대해 배우는 데 도움이 될 수 있습니다.

7. 아이템 카탈로그

일반적인 아이템 카탈로그 프로젝트는 다양한 카테고리의 아이템 목록을 제공하며 사용자 등록 및 인증 시스템으로 구성됩니다. 이 GitHub 리포지토리 에는 이러한 모든 기능이 포함되어 있으며 자세히 다룹니다. 아이템 카탈로그 프로젝트는 HTML5, Bootstrap, SQLAlchhemy, Vagrant 및 Flask로 구축되었습니다. 또한 Google 및 Facebook으로 OAuth2 소셜 로그인을 허용합니다.

사용자는 로그인 시 특정 항목을 선택하여 제품 정보를 수집할 수 있습니다. 또한 항목 정보를 추가, 편집 및 삭제할 수 있습니다. 로그아웃하면 홈 페이지가 아무것도 추가되지 않은 공백으로 나타납니다.

이 프로젝트는 또한 레이아웃 설계의 개선 가능성과 CRUD 작업에 대한 CSRF 보호 구현 가능성을 나타냅니다. 이미 이 분야에 대한 경험이 있다면 시도해 볼 가치가 있습니다.

8. 풀스택 튜토리얼

이 튜토리얼 을 통해 프론트엔드에는 JavaScript(React), 백엔드에는 Python(Flask)을 사용하여 CRUD 앱을 구현하는 방법을 이해할 수 있습니다. 처음부터 개발하기 위한 전제 조건에는 Node.js 및 Anaconda(Python 3)가 포함됩니다. 앱 튜토리얼은 스스로 시작하기가 두려운 초보자에게 도움이 될 수 있습니다.

9. 느낌

Feel은 인간의 불안 문제를 해결하기 위한 진보적인 솔루션을 제공하는 오픈 소스 애플리케이션입니다. 비슷한 삶의 상황을 겪은 사람들을 연결하고 책, 음식, 게임, 영화, 음악과 관련된 게시물을 표시합니다. 이런 식으로 문제를 공유하고 일부 사람들에게 일상적인 주의를 산만하게 하는 안전한 공간을 만듭니다. 다음은 Feel 애플리케이션의 기술적인 내용입니다.

  • 백엔드: NodeJS, Express 및 MongoDB
  • 프런트 엔드: ReactJ 및 기타 여러 종속성
  • 모바일: Expo 및 React Native

10. 베를린 주변 지도

그것은 당신의 이웃의 지도를 보여주는 단일 페이지 웹 응용 프로그램입니다. 이 지도 프로젝트를 사용하여 장소를 강조 표시하고, 지도 마커로 인기 장소를 식별하고, 타사 데이터를 추가하고, 모든 위치의 검색 기능 및 목록 보기를 포함합니다. 이 프로젝트의 코드를 복제하여 KnockoutJS 및 Google Maps API 기술을 개선할 수 있습니다.

11. 가사도우미

Housekeeper 웹 애플리케이션을 통해 학생들은 호스텔 방 청소 서비스를 예약할 수 있습니다. 학생들은 수업 시간이 다양하기 때문에 자원 효율적인 방법으로 제 시간에 방을 청소하는 것은 중요한 과제입니다. 이 프로젝트는 데이터베이스 스키마 디자인과 프런트 엔드 및 백엔드 웹 앱을 통해 이 문제를 정면으로 해결합니다. 세 세그먼트 모두에 대한 소스 코드는 저장소에서 사용할 수 있습니다.

12. 병원 관리 시스템

이 GitHub 프로젝트는 다음 언어와 기술을 사용합니다.

  • HTML5/CSS3
  • PHP
  • 부트스트랩
  • Javascript(콘텐츠를 동적으로 업데이트하기 위해)
  • XAMPP(Apache Friends 웹서버)
  • TCPDF(PDF 생성을 위한 오픈 소스 소프트웨어)

컴퓨터에서 이 프로젝트를 실행하여 작동 방식을 파악하고 복잡성에 익숙해질 수 있습니다. 컴퓨터에 XAMPP를 설치하고 Sublime Text를 텍스트 편집기로 사용하고 Google Chrome을 사용하여 프로젝트를 실행하는 것이 이상적입니다.

13. BookMyShow 클론

Django 사용법을 배우고 싶다면 이 프로젝트가 적합합니다. 이 GitHub 리포지토리 는 다음 요소가 포함된 Book My Show의 전체 스택 복제본을 제공합니다.

  • 영화 필터 페이지
  • 영화 세부 정보 페이지
  • 극장·시네마 홀 일람
  • 예약 페이지

14. 일본 음식 블로그

이 GitHub 리포지토리에는 J Food Blogger 웹사이트의 소스 코드가 있습니다. 기술 스택은 Node.js, Express, MongoDB, Bootstrap 및 Cloudinary를 사용하여 구축되었습니다. 사람들은 개인 프로필 생성, 이미지 업로드, 블로그 작성, 댓글 작성 등을 통해 사이트에서 일본 음식 경험을 공유할 수 있습니다. 사용자는 관심 있는 게시물을 검색할 수도 있습니다.

15. 뷰도

일상적인 활동을 정리하고 생산성을 향상시킬 수 있는 작업 관리 응용 프로그램의 한 예입니다. Veudo는 PostgreSQL, Express, Vue, Node로 구성된 PEVN 스택을 사용합니다. 직장에서 재택근무 모델을 점점 더 많이 채택함에 따라 할 일 앱의 관련성이 높아지고 있습니다. 이러한 앱을 사용하여 쇼핑 목록을 작성하거나 생일 알림을 설정하는 것과 같은 개인적인 집안일과 책임을 추적할 수도 있습니다.

배우기: Django와 NodeJS: Django와 NodeJS의 차이점

세계 최고의 대학에서 온라인으로 소프트웨어 엔지니어링 과정을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.

마무리

이것으로 우리는 웹 개발자와 학생을 꿈꾸는 사람들에게 유용할 흥미로운 아이디어를 다뤘습니다. GitHub의 전체 스택 프로젝트 목록은 개발 모범 사례에 익숙해지고 기술 역량을 연마하는 데 도움이 됩니다. 그러니 지금 풀 스택 프로젝트에 도전하고 학습 여정을 시작하세요!

Javascript, 전체 스택 개발에 대해 자세히 알아보려면 작업 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트를 제공하는 upGrad & IIIT-B의 전체 스택 소프트웨어 개발 Executive PG 프로그램을 확인하십시오. , 과제, IIIT-B 동문 상태, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.

풀 스택 개발자 되기

풀 스택 개발의 Executive PG 프로그램에 지금 지원하십시오