, as there will be multiple pages needing it. This is similar to the ReduxProvider, except we give it an endpointUrl which is the url where Movex runs the back-end server. It also, takes the just created "movex.config" file in to be able to create the hooks for the configured resources on the back-end.Change the index file to look like this:What happens here?First, the thinking here is to split the UI/UX in the previous index.tsx version in two separate pages.Secondly, we start using the useMovexResourceType hook at the begining of the component, which gives us a MovexResource Object, and then we use that later to create an actual chat resource, once the user has picked a slot.From there, we use the chat resource identifier (aka rid) to redirect to /pages/chat/[rid].This is where the Chat UI/UX actually lives, and it's specific to a chat resource id. Meaning, each new resource will have its own state (message history, etc.) and the users will be able to access multiple chat rooms at the same time.What does the code do?Other than the query param checks and rendering the ChatOnboarding component once more if the user slot isn't present in the URL query params, we use a special component which takes in the rid and it's rendering the Chat UI, providing a boundResource in the render function params.What is the BoundResource? 🤨This is what makes the movex magic possible. It's the glue between the UI and the state changes both on the front-end and the back-end. It also offers an api similar to the useReducer allowing us to read the state and call dispatch(action) on it.This runs the server based on the movex.config file at localhost:3333.Going to localhost:3000 and picking a slot now should take you to a URL similar to http://localhost:3000/chat/chat:f02e10c5-ccfb-47b5-a71e-55bb44c56953?slot=pink. Click the "Invite" button and open it in another tab to test the multiplayer mode too. You should see something like this:Find the full code here: https://github.com/GabrielCTroia/movex-next-chatAlso, if you want to try your hand at it, you can take it a step further and add "{user} is typing..." logic or display a list of active users. This will involve you creating and handling new actions.It's pretty straightforward to run Movex on Docker and deploy that to Fly.io or AWS, and I'll write a tutorial on how to do that in the future, but for now you can check the documentation.I hope you learned something useful in this tutorial and I'm really curious to see if it inspired you to build something cool.Please leave a comment down below and/or star the Movex repo if you think the project is worthy to be known by others or to be developed further.https://github.com/movesthatmatter/movexTemplates let you quickly answer FAQs or store snippets for re-use.I love it! Interesting approach using the determinstic action propagation, looks clean and easy to implement. I think this can be the future of boostrapping turn based games! Looking forward to the development! Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Jeongho Nam - Jul 29 Rodrigo Oler - Jul 22 Olabisi Olaoye - Jul 30 Chaoo Charles - Jul 29 Once suspended, gabrielctroia will not be able to comment or publish posts until their suspension is removed. Once unsuspended, gabrielctroia will be able to comment and publish posts again. Once unpublished, all posts by gabrielctroia will become hidden and only accessible to themselves. If gabrielctroia is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Gabriel C. Troia. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag gabrielctroia: gabrielctroia consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging gabrielctroia will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.