https://gist.github.com/devinsays/24e9027398dcebfab67d253aa2f42835
Material UI and Laravel
Material UI is a popular React framework based on Google’s Material Design System. It provides a nice design system and library of prebuilt components that can speed up the process of building web applications. I’ve worked with it on a couple projects, and really enjoy building on top of it.
Because I like having good boilerplates available to start new projects with, I rebuilt my Laravel React Bootstrap To Do App with Material UI. It uses the same REST API for authentication and data storage- but it is a completely headless implementation and could easily be updated to use different APIs.
View the Demo
Source Code on Github
More About the Project
If you’d like to host your own backend, you can also find that source code on Github. In the future, I hope to write a new version of the backend that uses Airlock rather than the tymondesigns/jwt-auth library for auth. If that would be useful to you, leave me a comment.
Building a Mobile App with Flutter and Laravel
I’ve been developing a mobile app at work using Flutter the last couple months and absolutely love it. It’s a UI framework developed by Google that compiles down to native code for iOS and Android. It makes developing mobile layouts feel like snapping together legos.
To learn Flutter (which uses the programming language Dart), I built the generic “to do” app, exactly as I had done when learning Laravel and React. The mobile app actually uses the same REST API (hosted at laravelreact.com) as that project, which is a really nice benefit of having a decoupled UI.
Here’s a short overview video showing how it works:
Building a React App on Laravel
The first time I built a Laravel React app, most of my time was spent simply building out the infrastructure related to authentication (login, registration, password reset, etc).
With a server rendered app, Laravel generates the authentication boilerplate for you. But with a 100% React frontend, all these pieces need to be built custom: an auth API (with JSON web tokens), routing, forms and form validation, persistent storage, and tests. There’s also aren’t many tutorials or example projects that show how it all works together.
Example To-Do App
Now that I’m more familiar with these concepts, I’ve released an example boilerplate for others to look at. You can view a demo of the Laravel React To Do App here. Source code and installation instructions are available on GitHub.
It includes:
- An auth API, using tymon/jwt-auth to manage the JSON Web Tokens.
- Routing with react-router (private, public and split routes).
- Feature tests.
- Database seeding.
- A base ApiController to help return standardized responses.
- Bootstrap for styling.
You can find the project on GitHub. Use it as a starting base for quick prototypes or to learn from. Suggestions, recommendations, and pull requests welcome! Continue reading