VANILLA

Introduction

VANILLA는 "뮤지션들의 공연 정보와 예매 서비스를 제공하고 음원과 비발매곡을 들 수 있으며, 함께 하지 못한 공연의 영상과 뮤지션의 일상을 공유"하는 웹 SNS 어플리케이션입니다.

Content

Requirements

  • 1024px 이상의 큰 브라우저 환경에서 실행해야 합니다.
  • 브라우저는 최신 버전 크롬을 사용해야 합니다.

Installation

Client

git clone https://github.com/wooder2050/vanilla-client.git
cd vanilla-client
npm install
npm start

Client

git clone https://github.com/wooder2050/vanilla-server.git
cd vanilla-server
npm install
npm start

Set server environment

.env 파일 생성
DATABASE_URI = "Input your MongoDB databse uri"
CLIENT_ADDRESS = "Input your client address"

Features

  • passport.js를 이용한 로컬 로그인과 소셜 로그인 구현(구글)
  • 팔로우, 팔로잉 기능 구현
  • 팔로잉한 유저 포스트만 SNS 피드 보이는 기능 구현
  • AMAZON WEB SERVICES S3를 이용해 이미지, 영상, 음원 업로드 기능 구현
  • 정규식을 활용해 유저 찾기 기능 구현(자동 완성)
  • 음악 플레이어 구현

Skills

Client

  • ES2015+
  • React
  • React Router
  • Redux
  • Sass

Server

  • Node.js
  • Express
  • ES2015+
  • Passport.js
  • AMAZON WEB SERVICES S3
  • MongoDB
  • Mongoose
  • Atlas

Project management

  • Git, Github
  • Trello를 이용한 일정관리

Challenges

  • 첫 프로젝트여서 시간관리를 제대로 하지 못했습니다. 생각보다 기능 구현 속도가 많이 늦어져서 처음 계획보다 많은 기능을 추가하지 못 했습니다. 다음 프로젝트에는 일정관리를 잘할 수 있도록 객관적으로 일정을 계획할 것입니다.

  • 이번 프로젝트에서 처음으로 AMAZON WEB SERVICES S3를 사용해 영상과 음원을 업로드해 보았습니다. AWS S3에서 영상과 음원을 저장하고 URL를 받아 Database를 입력하는 방식으로 서버를 설계하였습니다. 실행은 잘 되었지만 브라우저에서 실행되는 속도가 느렸습니다. multer 모듈과 서버의 로직 개선을 통해 이 문제점을 개선할 예정입니다.

  • 팔로우, 팔로잉 기능을 구현하면서 Database Schema 설계의 중요성을 알게 되었습니다. 팔로우, 팔로잉 상태에 따라서 보여지는 정보가 달라지기 때문에 잘 설계된 Schema가 아닐 경우 기능을 추가할 때마다 Database 구조를 뒤집어야 했습니다. 다음 프로젝트부터는 기능을 고려한 Database Schema 설계해서 Database를 뒤집는 작업을 하지 않도록 할 것입니다.

Things To Do

  • 테스트 작성 - Jest와 Enzyme를 이용해 프론트 테스트를 작성하고 Cypress.io로 E2E test를 작성할 예정입니다.
  • 클라이언트와 서버 배포 - 클라이언트는 Netlify로 배포 자동화를 하면서 도메인을 구매해 https 로 서버와 응답, 요청을 할 수 있도록 할 예정입니다. 서버는 AWS Elastic beanstalk로 배포를 하고 CircleCI를 이용해 테스트 이후 자동 배포될 수 있도록 할 예정입니다.
  • 좋아요와 댓글 기능 추가 - 좋아요와 댓글 Schema를 새로 만들어 유저의 id를 배열로 담아 기능을 구현할 예정입니다.
  • 스토리 기능 추가 - 스토리 Schema를 만들어 상대 유저 프로필을 클릭 시 10초 간 사진이나 영상을 보여주는 기능을 추가할 예정입니다.
  • 라이브 채팅 기능 추가(socket.io) - socket.io를 활용해서 실시간으로 채팅을 할 수 있는 기능을 추가할 예정입니다.
  • 언팔로우 기능과 삭제 기능 추가 - 현재 웹 어플리케이션에는 언팔로우와 포스트한 게시물을 삭제하는 기능이 없는데 서버와 데이터베이스을 수정해서 언팔로우와 삭제 기능을 추가할 예정입니다.

Sincere Thanks

ken / Vanilla Coding