PetalFM

PetalFM

A simple and delicate Music FM SPA built with react.

Preview

The following pictures are interface display in wechat in IOS 8Plus device.

Online Address

Visit http://fm.huzerui.com/, you can get better experience on mobile phones, sweep the qrcode below.

Test Account

• Username: petalFM
• Password: petalFM

Based on

• Framework: react
• State Management: redux
• Bundler: Webpack，Babel
• Language: ES2015, Less
• Library:
• React Router V4
• Material-UI
• Lint: ESLint
• Icon Support: Iconfont

Feature

• Material design style interface based on MaterialUI. The main color is pink tone.
• Using backend clouds (leancloud) to provide data services.
• Customize your exclusive FM by label preferences and collections.

Function

• [x] Login, regist and logout
• [x] Customizing personal preference labels
• [x] High qualityFM, private FM, red heart FM channel for choice
• [x] Search songs, collect songs, download songs
• [x] Add songs to the trash bin or recycle songs from it
• [ ] Personal configuration, topic switching, etc.

Redevelope

Pre work:

• Step1: Clone the project in local environment by command git clone https://github.com/alex1504/PetalFM.git
• Step2: Execute command npm install
• Step3: Regist an account in https://leancloud.cn/ and create an application in leancloud admin panel.
• Step4: Import database table in database directory and create a superuser in _User table in leancloud admin panel.
• Step5: Change /src/services/config.js

export const APP_ID = 'YOUR APP_ID FOUND IN LEANCLOUD APP SETTING';
export const APP_KEY = 'YOUR APP_KEY FOUND IN LEANCLOUD APP SETTING';
export const SUPER_USER_OBJECT_ID = 'YOUR SUPERUSER ACCOUNT OBJECT ID';

Only the superadministrator can see the admin entrance, in which you can search and input a song and set song category.

Dev:

• Step6: Execute command npm run dev
• Step7: Redevelop the project.
• Step8: Execute command npm run build and view the optimised code in /dist/ folder.

Deployment:

• Step9: Deploy: Make sure to proxy /api/ to http://music.163.com/api. In development you don't need to care about this for webpack-dev-server has done which is config in package.json, but in deployment you need to make proxy by nginx or nodejs server.

More

• Contact: <a href="mailto:me@huzerui.com">me@huzerui.com</a>

License

MIT © alex1504