Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yuna-c/vanilateam
vanila javascript team project
https://github.com/yuna-c/vanilateam
firebase fontawesome html javascript scss tmdb-api
Last synced: 3 months ago
JSON representation
vanila javascript team project
- Host: GitHub
- URL: https://github.com/yuna-c/vanilateam
- Owner: yuna-c
- Created: 2024-07-31T06:36:45.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-14T09:16:15.000Z (6 months ago)
- Last Synced: 2024-10-02T08:47:11.642Z (4 months ago)
- Topics: firebase, fontawesome, html, javascript, scss, tmdb-api
- Language: JavaScript
- Homepage: https://cinespot8.vercel.app/
- Size: 1.33 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
## vanilaMovie
TMDB API를 통한 영화 검색 및 정보 탐색 사이트
## 사이트
https://cinespot8.vercel.app/
## 개요
MOViE API를 가공하여 사용자에게 MOVIE 정보를 줄 수 있는 페이지 제작
API를 통한 비동기화를 연습해보는 사이트 제작
SCSS를 통한 페이지 디자인
JS로 페이지를 통으로 구현해 보는 연습
## 개발기간
2024.07.31~ 2024.08.07
## 활용 기술
## Code Convention
- .prettierrc 설정
- JS : Camel Case
- SCSS : kebab-case
## 기능 및 특징
1. 회원가입 및 사용자 로그인 기능(유효성 검사)
2. 마이페이지 비밀번호 변경, 찜 기능
3. 사용자 리뷰 CRUD 기능
4. 검색 기능
5. 페이징 기능
6. 모바일 페이지 토글 및 반응형
7. 슬라이드 기능(메인/ 상세)
8. 최신순/ 인기순 데이터 가공 소팅기능
9. 하단 푸터의 날씨API를 사용한 지역,온도,날씨 출력
## 팀원
Frontend
Frontend
Frontend
Frontend
박규리
임기철
정민지
최유나
## 개인별 담당
- **박규리** : 상세페이지 데이터 가공 및 페이지 UI
: 푸터 날씨, 온도, 지역 보이게 처리
: 푸터 멤버 소개 기능
- **임기철** : 메인 상단 슬라이드 기능
: 메인 상단 최신순/ 인기순 데이터 소팅
- **정민지** : 파이어 베이스를 통한 댓글 CRUD 기능
: 상세페이지 배우소개, 스틸컷 슬라이드 기능
- **최유나** : TMDB API 세팅
: UIUX SCSS 세팅 및 모듈화
: search API를 통한 검색 기능
: search API를 통한 페이징 기능
: 마이페이지 찜기능/ 비밀번호 변경 기능
: 로그인 페이지 기능
: 회원가입 페이지 + 유효성 검사
: 반응형 처리 (메뉴 토글 기능)
## 폴더구조
```bash
@vanilaMovie //
└─vanilaMovie //
├─ index.html //
├─ page //
│ ├─ Provider //
│ │ ├─ detail.html //
│ │ ├─ join.html //
│ │ ├─ login.html //
│ │ └─ mypage.html //
├─ js //
│ ├─ detail //
│ │ ├─ detail.js //
│ │ ├─ detailCredits.js //
│ │ ├─ detailImages.js //
│ │ ├─ review.js //
│ │ └─ script.js //
│ ├─ join //
│ │ ├─ join.js //
│ │ └─ script.js //
│ ├─ login //
│ │ ├─ login.js //
│ │ └─ script.js //
│ ├─ mypage //
│ │ ├─ mypage.js //
│ │ └─ script.js //
│ ├─ sort //
│ │ └─ sort.js //
│ ├─ utils //
│ │ ├─ date.js //
│ │ └─ uuid.js //
│ ├─ config.js //
│ ├─ fetchData.js //
│ ├─ fetchFirebaseData.js //
│ ├─ firebaseConfig.js //
│ ├─ goMain.js //
│ ├─ header.js //
│ ├─ footer.js //
│ ├─ mainSlide.js //
│ ├─ modal.js //
│ ├─ nav.js //
│ ├─ pager.js //
│ └─ script.js //
├─ scss //
│ ├─ _detailCredits.scss //
│ ├─ _detailImages.scss //
│ ├─ _footer.scss //
│ ├─ _header.scss //
│ ├─ _mainSlide.scss //
│ ├─ _reset.scss //
│ ├─ _review.scss //
│ ├─ _sort.scss //
│ ├─ _variables.scss //
│ ├─ detail.scss //
│ ├─ login.scss //
│ ├─ main.scss //
│ ├─ modal.scss //
│ ├─ mypage.scss //
│ └─ style.scss //
├─ assets //
│ ├─ fontawesome.html //
│ └─ img //
│ ├─ favicon.png //
│ ├─ next.png //
│ └─ prev.png //
├─ .prettierrc //
└─ .gitignore //
```
## 반응형 사이트
## 세부 페이지
