Code Monkey home page Code Monkey logo

mobile-topster's Introduction

The Topsters

React를 이용한 Mobile First 탑스터 만들기 웹 어플리케이션 입니다.


탑스터란?

음악 앨범을 콜라주 형식으로 모아서 만든 자신만의 차트입니다.
일반적으로 모음 형식이므로 순위는 없습니다.


자주 사용되는 형식

  • 10 x 10 등의 격자 형식
  • Top 42 (최상위 42개의 좋아하는 앨범)
  • Top 100 (최상위 100개의 좋아하는 앨범)

이용 방법

처음에는 10 x 10으로 콜라주가 초기화 됩니다.
우측하단의 설정 버튼을 이용하여 자유롭게 모양을 변형하시고,

콜라주의 타일을 클릭하시어 원하시는 음악 앨범을 검색해주세요.

검색 결과에서 원하는 앨범 우측 하단의 +를 클릭하시면 클릭하신 위치에 음악 앨범이 추가됩니다.

음악 앨범의 제목과 아티스트 를 탑스터 하단에 추가하시려면 우측하단의 설정 버튼을 눌러 설정해주세요.

원하시는 콜라주를 완성하신 후, 우측 하단의 저장 버튼을 누르시면 앨범이미지를 jpeg 형식의 파일로 내려받으실 수 있습니다.

Safari(iOS의 브라우저)의 경우는 기능이 제한되기 때문에 스크린샷을 이용하셔야 할 수도 있습니다. 불편을 드려 죄송합니다.


음악 앨범 검색 기능에 대하여

검색은 Spotify API 를 이용합니다. 따라서 음악 앨범에 따라 스포티파이 DB 에 등록되지 않은 경우 검색이 되지 않을 수 있습니다.

가능한 정확한 앨범의 제목 을 입력하시면 정확한 앨범 검색 결과를 얻으실 수 있습니다.


Built With

  • ReactJS
  • Typescript
  • UI
    • MUI
    • styled-components
  • State Management
    • MobX
  • Query Feature
    • React Query
    • axios
  • Save Feature
    • html-to-image

mobile-topster's People

Contributors

minusmo avatar

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.