DevTips

Videos: 122 Likes: 75,553 Views: 2,795,903

Videos by: DevTips

Understanding OAuth with the Spotify API – #12 React JS prototyping

2 days ago
We build a small backend server to handle authenticating with the Spotify API via OAuth. After this episode we can finally get the user’s own data into the prototype! This actually works very similar for any OAuth credential server you might need. 🔗 Sign-in through the backend we just built better-playlists-backend.herokuapp.com/login 🔗 OAuth Bridge Template […]

Dynamic text filtering of playlists – #11 React JS prototyping

1 week ago
We’re wiring up the filter component to the app. Whatever text is input will dynamically filter both the list of playlist components as well as the aggregation components listing hours and number of playlists. – – – In this series we’ll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 […]

MOAR populating components with data – #10 React JS prototyping

2 weeks ago
Populating the playlist components with fake server data. Learning why .map() is the way to iterate through our playlists instead of .forEach() in the component. – – – In this series we’ll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user […]

Populating components with data – #9 React JS prototyping

3 weeks ago
Finally coding again! We begin populating our components with mock data. In doing that, we stumble upon the ternary operator and the reduce() function. More on ternary (? 🙂 operator ♥ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator More on logical (&&) operator ♥ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators MPJ explaining .reduce() ► www.youtube.com/watch?v=Wl98eZpkp-c – – – In this series we’ll go from start to […]

Deploying to the internet! – #8 React JS prototyping

1 month ago
Yet another episode MOSTLY NOT ACCOMPLISHING MUCH! Real-world development for you. Deploying our first version of the prototype to the internet using Heroku. You’ll learn about: ♥ Heroku and deployment ♥ Different git remotes (GitHub and Heroku) ♥ The pain when GitHub is not online, but how it is OK because git is decentralized Here’s […]

First push to GitHub – #7 React JS prototyping

1 month ago
WARNING: tired programmers exerting realistic performance of not accomplishing much in this episode! Messing around with initializing a git repository and pushing it to Github. Here are the commits: github.com/mpj/better-playlists/commits/master Now you have the power to peek into the future of coming episodes. Be brave. ► Check out Travis’ earlier series on GitHub for Noobs […]

Creating a dummy overview with JSX – #6 React JS prototyping

1 month ago
By using React components we’re building a dummy overview with JSX. We follow the sketch and just get the components in place, without having real data yet. – – – In this series we’ll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. […]

Creating the React app – #5 React JS prototyping

2 months ago
Let’s get coding! OMG we mix HTML and JavaScript and it autoruns when we save – this is fun! Getting started with create-react-app finally. If you have problems with the global npm install, follow this guide to set correct npm permissions: docs.npmjs.com/getting-started/fixing-npm-permissions Don’t have a codetemp directory and want to create it? Type this in […]

Installing node.js – #4 React JS prototyping

2 months ago
Understand why we need node.js and what the NPM node package manager is. Installing node to have everything set up for creating the prototype app. – – – In this series we’ll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user […]

Sketching out the components – #3 React JS prototyping

2 months ago
We decide to build a new Browse Playlists component for Spotify’s desktop client. But before we get coding, we need to sketch out the components of the build. – – – In this series we’ll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real […]

Why React JS for prototyping? – #2 React JS prototyping

2 months ago
Explaining the top reasons for choosing React JS for building the high-fidelity prototype. ► 0:31 It is an INDUSTRY STANDARD ► 1:13 It is GROWTH ► 1:37 It has a very strong ECOSYSTEM ► 2:27 It is backed by FACEBOOK ► 3:19 It is very SMALL ► 4:23 It has a NATIVE component for building […]

Building a high-fidelity prototype with React JS – #1 React JS prototyping

2 months ago
In this series we’ll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it! Let’s build a prototype that’s actually working to prove our point to stakeholders! When you as a designer […]