trello clone mern

Mern Stack으로 Trello 클론!

이것은 Mern Stack으로 제작 된 앱이며 여기에서 라이브 데모에 액세스 할 수 있으며 다음 이미지를 클릭하여 비디오를 볼 수 있습니다!

비디오를 보려면 이미지를 클릭하십시오!

목적

이 프로젝트를 개발하려는 나의 목적은 프론트 엔드와 백엔드에서 내가 할 수있는 일을 보여주는 것입니다. 또한 Mern Stack과 같은 첫 번째 프로젝트임을 지적하고 싶습니다.

특징

• Trello와 같은 완전 반응 형 디자인
• 등록 및 로그인
• 여러 보드를 만들고 배경을 선택하고 멤버를 추가하십시오
• 여러 목록을 만듭니다
• 여러 카드를 만듭니다
• 드래그 앤 드롭 목록 또는 카드
• 보드의 제목과 배경을 변경하십시오
• 보드에 대한 설명을 추가합니다
• 목록의 제목을 변경하십시오
• 설명, 표지 색상, 멤버, 레이블, 시작 날짜, 마감일, 다중 점검 목록 및 다중 첨부 추가 추가
• 보드, 목록 또는 카드를 삭제합니다
• 카드 및 보드의 모든 활동 로그를 추적하십시오
• 카드 나 보드에 대한 의견
• 검색 보드 또는 카드 제목

사용 된 기술

서버 측	클라이언트 측	개발 만
Expressjs	스타일의 구성 요소	노드 몬
익스프레스	reduxjs-toolkit
몽구스	반응-비아 피트 한 -dnd
코스	재료 -UI
길	axios
dotenv	날짜 -FN
JSONWEBTOKE	순간
bcryptjs	Atlaskit/CSS-Reset
	반응 후크/마우스 위치
	반응-로터
	반응 후크

달리는 방법?

• 여기에서 nodejs를 다운로드하십시오

• 데이터베이스의 경우 로컬 MongoDB 또는 Mongo Atlas를 사용할 수 있습니다. 여기를 참조하십시오

• 저장소 복제 :

  git clone https://github.com/umurdogann/trello-clone-mern

• 디렉토리 변경 :

  cd trello-clone-mern

• 두 번째 터미널 열기 같은 위치 :

  • 우분투 : gnome-terminal
  • Windows : start

• 첫 번째 터미널의 디렉토리를 변경하고 패키지를 설치하십시오.

  cd server

  npm install

• .env.example과 같은 서버 디렉토리에서 .env 파일을 작성하고 필요한 변수를 입력하십시오.

• 서버 시작 :

  npm run start

• 두 번째 터미널을 전환하십시오

• 두 번째 터미널의 디렉토리를 변경하고 패키지를 설치하십시오.

  cd client

  npm install

• 클라이언트 시작 :

  npm run start