- 이 튜토리얼에서는 React js와 MERN 스택을 사용하여 풀 스택 소셜 미디어 앱을 구축하고 배포하는 방법을 다룹니다. 🚀
- 사용자는 가입하고 다른 사람들과 연결하며, 게시물과 스토리를 만들고, 새로운 사용자를 발견하고, 팔로우하고, 실시간 채팅 메시지를 보낼 수 있습니다. 💬
- 웹사이트를 열면 로그인 또는 가입 화면이 표시되며, Google 계정을 사용하거나 이메일 ID를 사용하여 계정을 만들 수 있습니다. 🔑
- 로그인 또는 가입 후 스토리와 게시물을 볼 수 있는 피드 페이지로 이동합니다. 📰
- 새 스토리를 만들고 텍스트를 작성하고 배경색을 선택하거나 비디오 또는 이미지를 추가할 수 있습니다. 🎨
- 스토리는 진행률 표시줄이 완료되면 자동으로 닫히고, 텍스트, 이미지, 비디오 스토리를 볼 수 있습니다. ⏳
- 사용자를 클릭하면 해당 사용자의 프로필, 게시물 수, 팔로워 및 팔로잉 정보를 볼 수 있습니다. 👤
- 프로필 페이지에서 프로필 사진, 커버 이미지, 이름, 사용자 이름, 자기소개 및 위치를 업데이트할 수 있습니다. ✏️
- 새 게시물을 작성하고 이미지를 업로드할 수 있습니다. 🖼️
- 연결 페이지에서 팔로워, 팔로잉, 보류 중인 연결 요청 및 연결된 사용자를 찾을 수 있습니다. 🔗
- 계정 관리 페이지에서 이메일 ID를 변경하고 프로필을 업데이트하거나 프로필을 삭제할 수 있습니다. ⚙️
- 로그아웃 옵션과 함께 다른 계정을 만들고 이전 계정에서 로그아웃하지 않고도 계정 간에 쉽게 전환할 수 있는 옵션이 있습니다. 🔄
- 메시지 탭에서 메시지를 보낼 수 있는 연결된 사람들을 볼 수 있으며, 채팅 상자를 통해 텍스트와 이미지를 보낼 수 있습니다. ✉️
- 검색 페이지에서 이름, 이메일 또는 위치를 입력하여 새로운 사람들을 찾고 팔로우하거나 연결 요청을 보낼 수 있습니다. 🔍
- 이 프로젝트에서는 사용자 인증을 위해 다중 가입 옵션(이메일, 소셜 미디어, 전화 번호)을 통합할 수 있는 컬러를 사용합니다. 🌈
- 컬러를 사용하여 다중 세션 가입을 추가하여 웹사이트에서 여러 프로필을 만들고 계정 간에 쉽게 전환할 수 있습니다. 💻
- Inest를 사용하여 백그라운드 작업 및 스케줄링을 관리하고, 보류 중인 연결 요청 또는 읽지 않은 메시지가 있는 사용자를 위한 미리 알림 이메일을 예약합니다. ⏰
- Image kit을 사용하여 프로필, 커버 사진, 게시물, 스토리 및 채팅 메시지에 대한 이미지를 저장하고 최적화합니다. 🖼️
- Image kit은 이미지를 압축하고 모든 장치에 적합한 형식으로 변환합니다. 🗜️
- 풀 스택 소셜 미디어 애플리케이션을 구축한 후 Versel을 사용하여 온라인에 무료로 배포합니다. 🌐
- 프로젝트를 완료한 후 프로젝트 라이브 링크를 이메일 ID로 보내 검토를 받고 greatest stack stars 페이지에 소개될 수 있습니다. ✨
- 이 프로젝트 라이브 링크를 이력서에 추가하거나 대학 프로젝트로 사용할 수 있습니다. 🎓
- React 프로젝트는 wheat 패키지를 사용하여 생성되며, 백엔드와 프론트엔드를 모두 포함합니다. 📦
- Telvin CSS를 React 프로젝트에 통합하고 Lucid React 패키지를 사용하여 아이콘을 추가합니다. 🎨
- UI 디자인은 Figma 파일을 통해 제공되며, 로그인 페이지, 피드 페이지, 메시지 페이지, 연결 페이지, 검색 페이지, 프로필 페이지 및 게시물 작성 페이지를 포함합니다. 🖼️
- 더미 데이터(사용자 데이터, 메뉴 항목 데이터, 스토리 데이터)를 사용하여 웹 페이지에 데이터를 표시합니다. 📊
Recommanded Videos
