ProjectWT
Published in

ProjectWT

Simple React JS with Auth0|Redux|MUI and Consume Web API — Part One

Oh yeah, we are cooking some React Apps again.

Historically, I have been abhorrent to front end development. I remember looking at HTML, CSS and JavaScript when I was 16 or 17 (the age I started coding in C), and not liking it.

I would spend hours and days and nights on C, but, could not spend more than 10 minutes on front end.

Now, as I near the age of 40, I am finally forced to learn and tutor some front end technologies. Looks like, I cannot escape the nightmare that is front end development.

You can read about my UI journey, that started almost 16 months ago, here,

Now then, enough with my back stories, flashback and needless drama.

A sequel to this is now available.

Let’s dance!

In this demo project, my purpose was simple.

  1. Build a React JS app that can act as first real project for my student clients. Or anyone else who has just finished taking a course on HTML,CSS, JavaScript and React JS.
  2. Do some basic routing with “react-router-dom”
  3. Do some essential state management with ‘react-redux’
  4. Obviously, do some login, logout and token stuff with “@auth0/auth0-react”
  5. make things look pretty (the main part that I totally suck at), with ‘@mui’ UI components. I originally thought I would use react bootstrap, but, I figured, no man. We need something far more popular.

The project is already on my GitHub. You can find the code here.

Final Note

My plan is to write more sequel posts to this one, and explain the components that went into building this code. I also plan to keep improving this app, as my own front end skills keep improving as I spend more and more time fixing the mistake of my youth.

The mistake of not spending more time with front end when I was younger. But, it’s never too late to fix things.

I work as a full time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow. My personal website is here. Find more of my art at Behance and Unsplash. Also, I have a Podcast about everyday life. And, a 2nd Podcast, where I talk about freelancing.

--

--

--

I have been tutoring for a while now. I write some quick tips, tutorials and related topics here.

Recommended from Medium

https://youtu.be/aki0dzSuJ5c

Casting date string from and HTTP JSON response using a Decorator in Angular

Introducing PayPal’s open-source cross-domain javascript suite

Going real time with Socket.IO, Node.Js, and React

Getting Started with Angular Elements

React Functional components and Class components

I Promise These Are Easy (js promises)

Use Debounced or Throttle to Reduce the Frequency of Calls in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jay

Jay

Freelance Tutor — Coding, Generative Art and Photoshop. Full Name : Vijayasimha BR

More from Medium

Simple React JS with Auth0|Redux|MUI and Consume Web API — Part Three

Business Benefits & Types of Applications to Build with Angular Frontend Framework

3 Lessons Learned from Using Playwright for UI Tests