Git Product home page Git Product logo

bletcher-front's Introduction

GitHub contributors GitHub issues GitHub license

Bletcher-front

realfinalversion2

인공지능 예술 웹 서비스 Bletcher ProjectWeb Front-End Repository 입니다. React.js를 통하여 구현되어 있습니다.

라이센스에 관련된 내용은 License를 참조해주세요.

👏 우리는 issue를 통한 개발 기능 관리, branch를 통한 독립적인 작업 흐름 관리, pull request 및 코드 리뷰를 통한 협업을 진행하고 있습니다!!


Technology

  • React.js
  • Redux (redux-thunk)
  • JavaScript
  • SCSS
  • prop-types
  • reactstrap
  • material-ui

technology

프로젝트 설계

components

핵심 기능

  • 사용자 관리
    • 회원가입 및 로그인, 로그아웃
    • localStorage를 사용하여 유저별 token 발급 및 로그인 상태 유지
    • 회원 정보 수정 기능
  • Post
    • UserPage에서 새로운 Post 업로드 가능
    • 페이지별 Post View 차별화
      • hover : Mix 버튼, Favorite 버튼, Share 버튼 등
      • onClick : Post Detail 페이지 이동
  • Mix
    • MainPage와 UserPage에서 Post 합성 요청
    • 합성 요청 후 완료될 때까지 페이지 간 이동 가능
    • 완료 시 MixComplete 모달을 통해 합성 결과 확인 가능
  • Funding
    • 합성된 작품에 대해 사용자들은 펀딩 가능
    • 일정 펀딩 수를 달성한 작품은 Bletcher Shop으로 출품 가능 (Shop : in version 2)
  • Favorite
    • 특정 게시물 즐겨찾기 기능

About Bletcher

Sign Up / In

signin_out


Main Page

mainpage


New Page

new


Funding Page

funding_page


FavoritePage

favorite


UserPage

userpage(madebyme)


Profile Update

user_profile_edit


Upload Post

upload_1

upload_2


Mix

mix_table

mix_palette


Getting Started

Prerequisites

  1. node 및 npm 버전을 확인하고 버전에 알맞게 설치해주세요.
    node v12.14.1
    npm 6.13.4
    
  2. 실행 전, 루트 경로에 있는 .env 파일의 REACT_APP_SERVER_URLhttps://bletcher-back.herokuapp.com으로 설정해주세요.

Run

This project was bootstrapped with Create React App.

yarn install
yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.


License

프로젝트의 모든 라이센스는 MIT License를 따릅니다. 상세 라이센스 정보는 Bletcher License를 참조해주세요.


Bletcher Team

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.