In the previous series we built a backend API for handling user registration, login, and profile management.
Whilst having an API for these features is nice, it's a little much to expect the vast majority of our customers to work directly with an API. Instead, we must also provide a front end to put a GUI / friendly user interface over the API.
You are, of course, free to use pretty much any technology stack you desire to do this. My personal favourite front end stack is React, with Redux for managing application state, and Redux Sagas for managing side effects.
The application we are going to build in this series can serve as the basis for many applications - from side projects, to SaaS apps, to many other kinds of web applications.
We will build a site with the following features:
This course is designed for PHP / Symfony developers who wish to learn about React / Redux / Redux Sagas, whilst still working with Symfony on the back end.
You will still find this course useful if you have an existing back end API, though will have to adapt the error handling section to your own implementation. This should be as simple as writing your own implementation of the error handler.
The buzzwords covered in this series include:
And a whole bunch more.
|1||App Walkthrough - User Experience||03:15|
|2||App Walkthrough - Developer Experience||07:41|
|3||Development Environment Setup||06:34|
|4||Login - Part 1||09:15|
|5||Login - Part 2||07:55|
|6||Login - Part 3||12:37|
|7||Login - Part 4||10:22|
|8||Login - Part 5||08:00|
|9||Saving Redux State to Local Storage||08:50|
|11||Adding an Auth-aware NavBar||14:43|
|12||Cleanup, Linting, and Login Form Styling||09:58|
|13||Showing Spinning Icons, Because Why Not?||08:11|
|14||More Robust Request Tracking||09:07|
|15||Getting Started Testing With Jest||06:43|
|16||Testing Request Reducer - Part 1||11:35|
|17||Testing Request Reducer - Part 2||05:25|
|18||Testing AuthSaga - Happy Path||09:19|
|19||Testing AuthSaga - Unhappy Paths||04:38|
|22||Getting Started with Jest Mocks||08:52|
|23||Using Webpack Environment Variables in Jest Tests||09:37|
|24||User Profile Page - Part 1||07:31|
|25||User Profile Page - Part 2||10:25|
|26||User Profile Page - Part 3||07:23|
|27||Change Password - Part 1||10:01|
|28||Change Password - Part 2||07:59|
|29||Change Password - Part 3 - Displaying Errors||06:28|
|30||Change Password - Part 4 - Converting Errors From Symfony to Redux Form||05:39|
|31||Change Password - Part 5 - Adding More Tests||05:06|
|32||Change Password - Part 6 - Avoid Blocking, and Wrap Up||06:23|
If you have found this course helpful, please share it.