📚 Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.

Overview

react-redux-soundcloud

I wrote a huge tutorial about setting up your own SoundCloud Client in React + Redux. Additonally you can find a real world example of my own SoundCloud Client as source code and live version.

This repository should give you an entry point for a React + Redux + SoundCloud boilerplate project with multiple possible extensions. The outcome of the SoundCloud Client in React + Redux can be found in the base-init/ folder.

There are more folders marked as extension-*/. Each of them pairs with a blogpost and can be applied on the base-init/ project.

If you only search for a seed project for your React + Redux + SoundCloud app, simply use the base-init/ folder to begin with. If you want to get started in some other domains, please have a look at the extension-*/ folders and tutorials.

Folders

Base

Extensions

Get Started

  1. git clone [email protected]:rwieruch/react-redux-soundcloud.git
  2. cd base-init
  3. npm install
  4. npm start
  5. (npm test)
  6. (read and apply one of the extension tutorials OR start your own project on top of it the base-init)

Contribute

Feel free to contribute with a blog post + extension! You could open an issue or write me directly on GitHub or Twitter about your ideas.

I am open for feedback. Please reach out! :)

Comments
  • Redux data

    Redux data

    Is it good to store so much data in the redux store? I have noticed the sample website is already slow. Any tips on limiting data into the store, so it would slow down the browsing.

    opened by veeramarni 1
  • audio on base-init does not work

    audio on base-init does not work

    hey! I really enjoyed your tutorial. However, we encountered an error* on the loading of activeTrack in the base-init version. This was true even when we cloned your repo and npm started your version of the application.

    We were able to resolve it by importing the node module redux-audio+ and rendering the track in an Audio component, rather than a plain html audio element.

    You may want to revise the tutorial to mention this?

    *DOMException: Failed to load because no supported source was found

    • https://www.npmjs.com/package/redux-audio
    opened by lshapz 1
  • Action required: Greenkeeper could not be activated 🚨

    Action required: Greenkeeper could not be activated 🚨

    🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

    To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

    Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

    If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

    Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

    greenkeeper 
    opened by greenkeeper[bot] 0
  • Action required: Greenkeeper could not be activated 🚨

    Action required: Greenkeeper could not be activated 🚨

    🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

    To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

    Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

    If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

    Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

    greenkeeper 
    opened by greenkeeper[bot] 0
  • No more registration on SoundCloud

    No more registration on SoundCloud

    Hi,

    @rwieruch I really liked the way you explained the things. And I am looking forward to complete this tutorial. But sound cloud has stopped new app registration on their developer account. Please let me know how to move ahead so that I can finish the tutorials

    opened by mahayash 1
  • SyntaxError: Unexpected token import

    SyntaxError: Unexpected token import

    I'm on the step of the tutorial that talks about 'npm test' but when type in command lines give me Error Message that says: "SyntaxError: Unexpected token import".

    `[email protected] ~/D/k/kdrusha-website-v2> npm test

    [email protected] test /Users/brandonpowell/Desktop/kdrusha-website-v1/kdrusha-website-v2 mocha --compilers js:babel-core/register --require ./src/test/setup.js 'src/**/*spec.js'

    /Users/brandonpowell/Desktop/kdrusha-website-v1/kdrusha-website-v2/src/test/setup.js:1 (function (exports, require, module, __filename, __dirname) { import React from 'react'; ^^^^^^ SyntaxError: Unexpected token import at createScript (vm.js:53:10) at Object.runInThisContext (vm.js:95:10) at Module._compile (module.js:543:28) at loader (/Users/brandonpowell/Desktop/kdrusha-website-v1/kdrusha-website-v2/node_modules/babel-register/lib/node.js:144:5) at Object.require.extensions.(anonymous function) [as .js] (/Users/brandonpowell/Desktop/kdrusha-website-v1/kdrusha-website-v2/node_modules/babel-register/lib/node.js:154:7) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at /Users/brandonpowell/Desktop/kdrusha-website-v1/kdrusha-website-v2/node_modules/mocha/bin/_mocha:345:3 at Array.forEach (native) at Object. (/Users/brandonpowell/Desktop/kdrusha-website-v1/kdrusha-website-v2/node_modules/mocha/bin/_mocha:344:10) at Module._compile (module.js:571:32) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.runMain (module.js:605:10) at run (bootstrap_node.js:425:7) at startup (bootstrap_node.js:146:9) at bootstrap_node.js:540:3 npm ERR! Test failed. See above for more details.`

    `import React from 'react'; import { expect } from 'chai'; import jsdom from 'jsdom';

    const doc = jsdom.jsdom(''); const win = doc.defaultView;

    global.document = doc; global.window = win;

    Object.keys(window).forEach((key) => { if (!(key in global)) { global[key] = window[key]; } });

    global.React = React; global.expect = expect; `

    opened by brandonpowell 1
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 488 Sep 8, 2022
Ext-react - A starter repo for building browser extensions with React and Typescript

Web Extensions React starter A starter repo for building browser extensions with

Okanovic Dragan 35 Nov 25, 2022
In this tutorial, you'll learn to develop a wallet for the Solana protocol.

Wallet Tutorial In this tutorial, you'll learn to develop a wallet for the Solana protocol. We will provide a simple Next.js application that you will

Ian De Guzman 1 May 3, 2022
winwiz1 156 Dec 1, 2022
React-tutorial - A React tutorial from Udemy (Academind)

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Patrick James Nengasca 2 Mar 31, 2022
This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

This boilerplate is meant to be a quick start for creating chrome extensions using React, Typescript and Tailwind CSS.

Bronathan 55 Nov 29, 2022
🚀 React & TypeScript Starter for developing web extensions with hot reload

A web extension (Manifest V3) starter kit with hot reload support, built with React, Typescript, Redux, Vite, ESLint, Prettier, TailwindCSS, Jest and more!

Sinan Bekar 12 Dec 3, 2022
Get started with Chrome extensions development using webpack, Typescript, Sass, and more

Get started with Chrome extensions development using webpack, Typescript, Sass,

Sebastian Szczepański 157 Nov 29, 2022
A vite plugin for generating cross browser platform, ES module based web extensions.

@samrum/vite-plugin-web-extension A vite plugin for generating cross browser platform, ES module based web extensions. Features Manifest V2 & V3 Suppo

Ruben Medina 71 Nov 29, 2022
Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) ⚠ ⚠ ⚠ Work in Progress ⚠

Daniel Nikravesh 7 Apr 14, 2022
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.

React Component Generator v1.0.0 A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also aut

Udit Kumar 7 Aug 31, 2022
Full Stack tutorial using ReactJS, NodeJS, Express and MySQL

Run this project If you want to try the finished project: Go to Start with MySQL to create the database Download the project Go to the client folder a

Carlos Puente 1 Apr 15, 2022
Boilerplate app for full-stack MERN app with Create React App client toolchain. Uses JWT for auth.

Boilerplate app for full-stack MERN app with Create React App client tool chain. Includes React, JWT authentication, Mongoose/MongoDB, Apollo Server/Client, and ExpressJS.

John Desrosiers 5 Feb 2, 2022
Full-stack React app built with Typescript, Bootstrap, Apollo client on the frontend, and NodeJS/Express, Typescript, Apollo server, and MongoDB/mongoose on the backend.

Event Scheduler App This project was bootstrapped with Create React App. Event Scheduler is a React app that allows users to create events. An event c

ahmed 8 Dec 1, 2022
A powerful resource to learn React Redux Toolkit Typescript.

React Redux Toolkit Typescript Tác giả Dư Thanh Được Website: duthanhduoc.com Youtube: Được Dev Facebook Profile: Dư Thanh Được Fanpage: Được Dev Tikt

Dư Thanh Được 8 Nov 19, 2022
Batteries included starter for Adonis apps - React, Inertia, Typescript, Adonis

RITA React Inertia Typescript Adonis with TailwindCSS A batteries-included starter for Adonis apps. Setup You will have to have mysql running on your

Kavin Valli 20 Nov 15, 2022
🔋 Batteries included template for using React Three Fiber (R3F) with NextJS

r3f-next-starter This is a batteries included template for using React Three Fiber (R3F) with NextJS ?? . Based on create-r3f-app. Features ♻ Easily m

Ryosuke 81 Nov 22, 2022
My best-practices-included universal frontend starter kit

Redux Starter Kit Web application starter kit. React Optimizations PWA-optimized, server-side rendering, offline-first with Service Workers, prefetch

Oleg Akbarov 1k Nov 29, 2022
A boilerplate for a Redux-React 'Cordova' application because react native is too new to use in prod. It also has Babel, Webpack and Gulp

react-redux-cordova-boilerplate A boilerplate for a Redux-React Cordova application using Babel, Webpack and Gulp Development Run npm install Run npm

Inderpal Singh 19 Oct 11, 2022