Code Monkey home page Code Monkey logo

soundcloudmobx's Introduction

SoundCloundMobx

Live Demo

这是一个soundcloud的个人客户端 , 基于create-react-app构建,升级到了webpack2

使用到的技术

  1. react
  2. mobx
  3. typescript
  4. scss
  5. react-router v4
  6. react-motion
  7. webpack2.0
  8. jest

mobx是一个mvvm的状态管理层,可以让你更多的关注ui层, 状态驱动能让你更关注compoennt的主要更新点.它值得你一试!这里是它的中文文档

功能

  • 主页,个人主页,播放,播放列表,评论列表,歌单列表,喜爱列表
  • 图片的懒加载
  • 分页加载
  • 播放进度
  • 个人主页歌曲排序
  • 模拟评论
  • 响应式ui

截图

screen1

screen2

screen3

注意 🔥🔥

因为 soundcloud 被墙,所以需要工具才能获取数据.

使用

  1. git clone
  2. cnpm install
  3. cnpm start
  4. cnpm build

todo 📇📇

  • 添加测试ing
  • 记录位置
  • 轮播图
  • 服务端
  • react-native版本
  • 返回顶层
  • 更好的ui
  • 响应式ui
  • 数据缓存在内存中
  • 动画效果

issues

如果你有任何问题,可以开issue,我会及时关注和解决, 你有任何的建议或者指点同样非常感谢,keepcoding ✈️✈️

soundcloudmobx's People

Contributors

dive2pro avatar

Stargazers

ww2000e avatar qwqcode avatar eden lane avatar xilovesyu avatar Claus avatar busyzz avatar weixiaoyi avatar JSupot avatar Scc avatar tc9011 avatar roy avatar wengfan avatar djkloop avatar avatar Zhihao Zhang avatar Xu avatar avatar will wu avatar ivenabc avatar Yang Shao avatar Sean Chatman avatar iLabsRoy avatar 葫芦娃-十天 avatar wjl avatar mlzzen avatar Patrick Luzolo avatar avatar avatar xieqingtian avatar 云隙阳光 avatar Nicolas Zes avatar 铁眉 avatar LDQ-first avatar Leon Zhang avatar avatar CK avatar robin avatar avatar avatar Jason Wang avatar ShawnX avatar Claux avatar chuyun avatar smilebug avatar miya avatar Joe_Sky avatar SangKa.Z avatar

Watchers

Patrick Luzolo avatar avatar

Forkers

caize ishawge ningersan wangsen1989 zhaolii busyzz-1994 ylduang

soundcloudmobx's Issues

楼主

我也一直在自学，可是好久了，感觉自己连一个简单页面都写不出来。不知道是不是天资差啊！你有好的学习建议吗？望不吝赐教 谢谢。

报错了

Failed to compile.

Error in ./src/components/SearchPanel/SearchPanel.tsx
(58,11): error TS2322: Type 'Readonly<{ children?: ReactNode; }> & Readonly & { additionalStyles: { text: { transition:...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Props & { additionalStyles: any; }, Stat...'.
Type 'Readonly<{ children?: ReactNode; }> & Readonly & { additionalStyles: { text: { transition:...' is not assignable to type 'Readonly<Props & { additionalStyles: any; }>'.

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.