Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nakyeonko3/pli
플레이리스트 기반 영상 공유 SNS 플랫폼 pli, 토이프로젝트
https://github.com/nakyeonko3/pli
emotion react typescript zustand
Last synced: 18 days ago
JSON representation
플레이리스트 기반 영상 공유 SNS 플랫폼 pli, 토이프로젝트
- Host: GitHub
- URL: https://github.com/nakyeonko3/pli
- Owner: nakyeonko3
- Created: 2024-09-10T08:50:21.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-18T09:13:57.000Z (4 months ago)
- Last Synced: 2024-09-28T17:23:31.738Z (4 months ago)
- Topics: emotion, react, typescript, zustand
- Language: TypeScript
- Homepage: https://pli-one.vercel.app
- Size: 2.68 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Toy_Project_3_team4
> 영상 공유 SNS 플랫폼 (Pli) 개발 프로젝트
플리 (Pli)는 사용자들이 만든 자신만의 유튜브 영상 링크 기반 플레이 리스트를 공유하고, 구독하여 자신만의 타임 라인을 만들고 네트워킹 할 수 있는 SNS 서비스입니다.
## 팀명: 피자사조
### 프로젝트 팀 소개 및 역할분담
| [
](https://github.com/nakyeonko3) | [
](https://github.com/devdeun) | [
](https://github.com/HSjjs98) | [
](https://github.com/wonjichoe) |
| :-------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| [@nakyeonko3](https://github.com/nakyeonko3) | [@devdeun](https://github.com/devdeun) | [@HSjjs98](https://github.com/HSjjs98) | [@wonjichoe](https://github.com/wonjichoe) |
| 프로젝트 세팅
공통 컴포넌트 개발 (Modal)
테스트 코드 작성
별도의 서버 구성
기능 구현: 타임라인 | UI 디자인 및 공통 스타일 설정
공통 컴포넌트 개발: Navbar, Layout, Input, Textarea, Spinner, Loading, Avatar, GradientIcon
라우팅
페이지 퍼블리싱: 플레이리스트 페이지, 플레이리스트 상세 페이지, 포스트 상세 페이지, 서비스 이용약관 및 개인정보처리방침 페이지
페이지 기능 구현 및 퍼블리싱: 로그인 페이지, 검색 페이지, 404 페이지
페이지 기능 구현 및 퍼블리싱: 로그인 페이지, 검색 페이지, 404 페이지
전체 디자인 수정
기타 기능 오류 수정 | 공통 컴포넌트 개발 (Button(FitButton, FullButton, ToggleButton), Toast)
포스트 추가
플레이리스트에 비디오 추가, 삭제
플레이리스트 수정
플레이리스트 구독
데이터베이스 구조 설계
전체적인 기능 오류 수정 | 공통 컴포넌트 개발 : Header, Tab, IconButton
(리액트 기본 CRUD 적응)
페이지 퍼블리싱: 설정 페이지
페이지 기능 구현 및 퍼블리싱: 프로필 페이지, 프로필 수정 페이지, 팔로우 페이지
기타 기능 구현: 포스트 비디오 토스트 알림 추가
|
## 목차
- [Toy_Project_3_team4](#toy_project_3_team4)
- [목차](#목차)
- [개발 일정](#개발-일정)
- [폴더 구조도](#폴더-구조도)
- [설치 및 실행 방법](#설치-및-실행-방법)
- [사용한 기술](#사용한-기술)
- [핵심 기능](#핵심-기능)
## 🗓 개발 일정
- 총 제작 기간: 8월 19일(월) ~ 9월 9일(월) 3주간 진행
- 중간 점검: 8/30 (금) 18:00 ~ 20:00
- **마감일: 2024-09-09 (월) 14:00**
- 발표회 : 9/9 (월) 17:00 ~ 20:00
- 리팩토링 기간 : 9/10 (화) ~ 9/12 (목)
## 🗂 폴더 구조도
```bash
├─ 📦src
│ ├─ 📜App.tsx
│ ├─ 📂api
│ │ ├─ 📜algoliaSearch.ts
│ │ ├─ 📜fetchPlaylist.ts
│ │ ├─ 📜fetchPosts.ts
│ │ ├─ 📜fetchUsers.ts
│ │ ├─ 📜fetchYouTubeVideoData.ts
│ │ ├─ 📜firebaseApp.ts
│ │ └─ 📜firebaseAuth.ts
│ ├─ 📂assets
│ ├─ 📂components
│ │ ├─ 📂common
│ │ │ ├─ 📜GradientIcon.tsx
│ │ │ ├─ 📜Modal.tsx
│ │ │ ├─ 📜Toast.tsx
│ │ │ ├─ 📂buttons
│ │ │ ├─ 📂inputs
│ │ │ ├─ 📂loading
│ │ │ └─ 📂tabs
│ │ ├─📂dragAndDrop
│ │ ├─📂onboarding
│ │ ├─📂playlist
│ │ ├─📂playlistDetail
│ │ ├─📂post
│ │ ├─📂profile
│ │ └─📂user
│ ├─📂constants
│ │ └─ 📜path.ts
│ ├─📂hooks
│ ├─ 📜main.tsx
│ ├─📂pages
│ │ ├─ 📜AddPost.tsx
│ │ ├─ 📜Follow.tsx
│ │ ├─ 📜Home.tsx
│ │ ├─ 📜NewPost.tsx
│ │ ├─ 📜Playlist.tsx
│ │ ├─ 📜PlaylistDetail.tsx
│ │ ├─ 📜PrivacyPolicyPage.tsx
│ │ ├─ 📜Profile.tsx
│ │ ├─ 📜ProfileEdit.tsx
│ │ ├─ 📜Search.tsx
│ │ ├─ 📜SelectPli.tsx
│ │ ├─ 📜Settings.tsx
│ │ ├─ 📜SignIn.tsx
│ │ └─ 📜TermsOfServicePage.tsx
│ ├─📂stores
│ │ └─ 📜toastStore.ts
│ ├─📂styles
│ │ ├─ 📜GlobalStyles.tsx
│ │ ├─ 📜input.ts
│ │ ├─ 📜legal.ts
│ │ └─ 📜theme.ts
│ ├─📂types
│ │ ├─ 📜emotion.d.ts
│ │ ├─ 📜global.d.ts
│ │ ├─ 📜playlist.ts
│ │ ├─ 📜post.ts
│ │ ├─ 📜profile.ts
│ │ └─ 📜user.ts
│ ├─📂utils
│ │ ├─ 📜date.ts
│ │ ├─ 📜gradient.ts
│ │ └─ 📜randomId.ts
│ └─ 📜vite-env.d.ts
```
## 설치 및 실행 방법
### 🖥 설치
```bash
npm install
```
### 🖥 실행 방법
```bash
npm run dev
```
## 📌 사용한 기술
### 디자인 및 기획
- **Figma/Figjam**
### 프론트엔드
- **React**: 18.3.1
- **TypeScript**: 5.5.3
- **Vite**: 5.4.1
### 상태관리
- **Zustand**: 4.5.5
- **TanStack Query**: 5.53.3
### 스타일링
- **Emotion**: 11.13.0
- **Radix**
- **@radix-ui/react-dialog**: 1.1.1
- **@radix-ui/react-dropdown-menu**: 2.1.2
- **@radix-ui/react-tooltip**: 1.1.2
### 백엔드 및 데이터베이스
- **firebase**: 10.13.0
### 테스트
- **playwright**: 1.46.1
### 개발 도구
- **ESLint**: 8.57.0
- **Prettier**: 3.3.3
## 핵심 기능
### 🌟 영상 링크 기반 포스트 작성 기능
- 유튜브 플랫폼에서 제공되는 영상 링크를 입력하여 나만의 플레이리스트를 작성
### 🌟 공개 플레이리스트 구독 및 타임라인 생성 기능
- 다른 사용자들이 공개한 플레이리스트를 구독하고 자신의 타임라인을 생성
### 🌟 타임라인 탐색 및 상호작용 기능
- 구독하지 않은 공개된 플레이리스트를 탐색하고 좋아요, 댓글, 팔로잉 같은 상호작용 가능
### 🌟 검색
- 사용자가 검색창을 통해 검색어를 입력하고 입력된 검색어를 기반으로 관련된 포스트와 유저를 검색
### 🌟 프로필 확인 및 편집
- 자신의 프로필 정보를 확인하고 수정할 수 있는 기능
- 다른 사용자의 프로필 페이지에 접속 시 팔로우/언팔로우 할 수 있는 기능