Code Monkey home page Code Monkey logo

cs496-socialsoseol's Introduction

CS496-SocialSoseol

사회가 소설을 만들다. 소셜 소설

시대의 변화에도 책은 여전히 정적으로 유지되고있다.
우리는 시대의 흐름에 맞춰 사용자의 입맛에 따라 언제든지 변화하고 반응하는 책을 만들고 싶어 이 사이트를 제작하게 되었다.
소셜 소설은 누구나 새로운 이야기를 추가하고 입맛에 따라 이야기를 읽을 수 있는 사이트이다.
마음껏 이야기를 추가하고 입맛대로 읽어보자!

Contributor

사용언어 및 툴

  • JavaScript
  • React
  • NodeJS
  • MongoDB(Mongooose)

Frontend

React를 이용해 프로트를 구성하였다.

페이지 구성 및 기능

로그인 및 회원가입 페이지

JWT와 bcrypt를 이용해 사용자와 DB간 데이터 존성및 저장을 암호화해 보안성을 높였다.
실제 사이트 처럼 cookie를 통해 로그인 상태를 유지 할 수 있도록 설정하였다.

각 카테고리(릴레이 소설, 릴레이 시, 개인 소설, 개인 시)별 게시판

게시판을 통해 한 페이지에 6개의 아이템씩 책 정보를 하눈에 확인 할 수 있도록 디자인 하였다.
앞면에서는 제목과 좋아요, 조회수, 그리고 그림을 통해 장르를 알 수있다.
플러스 버튼을 통해 뒷면을 보면, 책의 첫번째 저자와 첫글의 일부를 볼 수 있다.

글쓰기 페이지

글을 처음으로 생성하기 위한 페이지이다.
글의 장르와 제목 그리고 내용을 입력해 글을 생성할 수있으며 등록후 게시판에서 확인할 수 있다.

글 읽기 및 브랜치 또는 노드 추가 페이지

원하는 게시물을 선택하면 글을 읽을 수있는데, 우리 사이트의 게시물은 노드와 브랜치로 구성이 되어있다.
작성자가 원하는 브랜치 흐름을 따라 릴레이된 글을 읽어 나갈 수 있다. 
글이 마음에 들지 않는다면 작성자가 원하는 브랜치도 추가할 수있다.
글을 이어나가고 싶다면 하위 노드를 추가해 글을 이어나갈 수도 있다.

좋아요 기능

각 노드와 책은 좋아요를 가진다. 언제나 좋아요를 할 수 있으면 좋아요를 두번 클릭하면 했던 좋아요가 해제되도록 구성하였다.

Backend

NodeJS와 MongoDB의 mongoose ODM 이용해 noSQL DB를 구성하였다.

DB Schema 구성

모든 스키마의 고유 아이디들은 몽구스가 자동으로 주어지는 id가 아닌,
auto-increment를 통해 식별하기 쉬운 숫자로 1씩 증가시키며 관리하였다.
  • User
  • Book
  • Node
  • CommentBook
  • LikeBook
  • LikeNode
  • LikeCommentBook

cs496-socialsoseol's People

Contributors

jhl8109 avatar woojin7879 avatar ayofine12 avatar

Watchers

 avatar

Forkers

woojin7879

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.