Merge pull request #225 from GabrielCTroia/enhance-docs

Enhance docs

ROADMAP.md

@@ -0,0 +1 @@
+apps/movex-docs/pages/roadmap.md

apps/movex-docs/components/Footer.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import { Logo } from '../modules/Logo';
 import { HeartIcon } from '@heroicons/react/24/solid';
+import Link from 'next/link';
 
 export const Footer: React.FC = () => {
   return (
-    <div className='flex flex-1 flex-col md:flex-row items-center md:justify-between md:items-end'>
+    <div className="flex flex-1 flex-col md:flex-row items-center md:justify-between md:items-end">
       <div>
         <Logo />
       </div>
       <div className="pt-4 text-center md:text-right">
-        <span>Movex is a Moves That Matter project.</span>
+        <span>
+          Movex is a{' '}
+          <Link href="https://github.com/movesthatmatter" target="_blank" className="font-bold">
+            Moves That Matter
+          </Link>{' '}
+          project.
+        </span>
         <p>
           Made with{' '}
           <HeartIcon

apps/movex-docs/modules/home/HeroSubText.tsx

@@ -7,14 +7,8 @@ type Props = {
 export const HeroSubText: React.FC<Props> = (props) => {
   return (
     <h3 className={props.className}>
-      Movex is a Redux inspired state management and synchronization tool that
-      does the heavy lifting to share state between peers in a network.
-      <br />
-      <br />
-      <b>
-        🚀 Build 10x faster by focusing only on the frontend – Movex handles the
-        rest!
-      </b>
+      Accelerate your development process and deliver faster by abstracting
+      the backend complexities with Movex! 🚀
     </h3>
   );
 };

apps/movex-docs/modules/home/HeroText.tsx

@@ -7,10 +7,11 @@ type Props = {
 export const HeroText: React.FC<Props> = (props) => {
   return (
     <h1 className={props.className}>
+      Effortless realtime{' '}<br/> 
       <span className="text-transparent bg-clip-text bg-gradient-to-r from-movexBlue-400 via-indigo-500 to-purple-500 0from-movexBlue-300 sto-green-500 text-movexBlue-500">
-        Realtime State Sync
+      data sharing
       </span>{' '}
-      without the backend! 😎
+      infrastructure
       {/* Build{' '}
       <span className="text-transparent bg-clip-text bg-gradient-to-r from-movexBlue-400 via-indigo-500 to-purple-500 0from-movexBlue-300 sto-green-500 text-movexBlue-500">
         Multiplayer Apps

apps/movex-docs/modules/home/homeVars.ts

@@ -1,95 +1,94 @@
 import {
   ArrowPathIcon,
   LockClosedIcon,
-  HeartIcon,
   FlagIcon,
   BookOpenIcon,
   BoltIcon,
-  ShieldCheckIcon
+  ShieldCheckIcon,
 } from '@heroicons/react/24/outline';
 import themeConfig from '../../theme.config';
 
 export const features = [
   {
-    name: 'Open Source',
+    name: 'Serverless',
     description:
-      "Movex is completely open source. You are welcome to contribute.",
-    icon: BookOpenIcon,
+      '“Movex manages the network logic, state-sharing protocols, server deployment and maintenance, along with various other essential functionalities.',
+    icon: BoltIcon,
     link: {
       label: 'Learn More',
-      url: 'https://github.com/movesthatmatter/movex',
+      url: 'docs/features/serverless',
     },
     color: 'orange-500',
   },
   {
-    name: 'Generated Backend',
+    name: 'Realtime',
     description:
-      "Movex takes care of the networking logic, databases, state sharing strategies, deploying and maintaining the server(s) and a lot of other decisions in between.",
-    icon: BoltIcon,
+      'Movex utilizes the Observable Pattern to monitor state changes in registered resources and promptly notify the UI layer.',
+    icon: ArrowPathIcon,
     link: {
       label: 'Learn More',
-      url: 'docs/features/frontend_only',
+      url: '/docs/features/realtime',
     },
-    color: 'orange-500',
+    color: 'blue-500',
   },
   {
-    name: 'Authoritative Server',
+    name: 'Private State',
     description:
-      "It's important to keep the app logic outside the reach of potential bad actors, which is why it gets processed on the server.",
-    icon: FlagIcon,
+      'At times, certain parts of the state need to remain hidden from peers until the right moment to reveal them—much like a game of cards.',
+    icon: LockClosedIcon,
     link: {
       label: 'Learn More',
-      url: '/docs/features/server_authoritative',
+      url: '/docs/features/private_state',
     },
-    color: 'orange-500',
+    color: 'yellow-300',
   },
   {
-    name: 'Real-Time Sync',
+    name: 'Authoritative Server',
     description:
-    'Movex uses the Observable Pattern under the hood to track state changes on the registered resources and notify the UI layer.',
-    icon: ArrowPathIcon,
+      "To safeguard app logic from potential bad actors, it is processed on the server while remaining abstracted from the developer.",
+    icon: FlagIcon,
     link: {
       label: 'Learn More',
-      url: '/docs/features/realtime',
+      url: '/docs/features/server_authoritative',
     },
-    color: 'blue-500',
+    color: 'orange-500',
   },
   {
-    name: 'Secret State',
+    name: 'Typesafe Functional Programming',
     description:
-      'Sometimes you need to keep parts of the state secret from the rest of the peers until the time is appropriate to reveal, like a game of cards for example.',
-    icon: LockClosedIcon,
+      "Movex is entirely built in TypeScript. If you’re familiar with Redux or the React.useReducer() hook, you’ll feel right at home. If not, getting started with Movex is quick and easy!",
+    icon: ShieldCheckIcon,
     link: {
       label: 'Learn More',
-      url: '/docs/features/secret_state',
+      url: '/docs/features/functional',
     },
-    color: 'yellow-300',
+    color: 'red-500',
   },
   {
-    name: 'Typesafe Functional Programming',
+    name: 'Open Source',
     description:
-      "Movex is built entirely in Typescript. If you know Redux or the React.useReducer() hook you'll feel right at home. If not Movex is quick to get started with.",
-    icon: ShieldCheckIcon,
+      'Movex is fully open source, inviting developers to contribute and collaborate! Your input is welcome as we build a robust and dynamic community around this project.',
+    icon: BookOpenIcon,
     link: {
       label: 'Learn More',
-      url: '/docs/features/functional',
+      url: 'https://github.com/movesthatmatter/movex',
     },
-    color: 'red-500',
+    color: 'orange-500',
   },
 ];
 
 export const faqs = [
   {
     q: 'What does "No Server Code" or "No Server Hassle" really mean?',
-    a: "It means there that you, the developer, don't have to write, build, distribute or maintain any server code. You only have to concern with the client/local code as you'd be developing for single player/user and movex takes care of the server part seamlessly.",
+    a: "This means you, the developer, don’t need to write, build, distribute, or maintain any server code. Your focus is solely on client-side/local code, as if you were developing for a single player or user, while Movex seamlessly manages the server component for you.",
     link: {
       label: 'See more here',
       url: '/docs/features/server_authoritative',
     },
   },
   {
     q: 'How can there be "Server Authoritative" without a server?',
-    a: "Spot on, detective! There is in fact a server sunning, but it's just abstracted away by movex + movex-service so you don't have to bother with it.",
+    a: "Spot on, detective! There is indeed a server running, but it’s fully abstracted by Movex and movex-service, so you can focus on development without any hassle.",
     link: {
       label: 'See more here',
       url: '/docs/features/server_authoritative',
@@ -101,7 +100,7 @@ export const faqs = [
   // },
   {
     q: 'What can I build with Movex?',
-    a: "Movex uses Deterministic Action Propagation under the hood, which means it's propagating Actions (small bits of data) from client to server and server to client(s). This works great for games (or applications) with infrequent changes (traffic) such as a turn-based game (e.g. Age of Empires) but will most likely not be enough for a shooter game or something that requires a lot of user input sent over the network. There are some ideas to make that possible in the future as well.",
+    a: "Movex employs Deterministic Action Propagation to seamlessly transmit Actions (small bits of data) between clients and servers. This approach is particularly effective for games or applications with infrequent state changes, such as turn-based games (e.g., Age of Empires). However, it may not suffice for fast-paced shooter games or applications requiring extensive user input transmitted over the network. Future enhancements are in the works to address these needs as well!",
     link: {
       label: 'Read more about Deterministic Propagation',
       url: '/docs/features/server_authoritative#determinstic-action-propagation-method',

apps/movex-docs/pages/_meta.json

@@ -25,6 +25,10 @@
     "title": "About",
     "type": "page"
   },
+  "roadmap": {
+    "title": "Roadmap",
+    "type": "page"
+  },
   "changelog": {
     "title": "Changelog",
     "type": "page"

apps/movex-docs/pages/about.mdx

@@ -1,22 +1,5 @@
 # About Movex
 
+Movex is an open-source framework designed to simplify multiplayer communication and state synchronization for web games and multi-peer applications. Born from the need to streamline backend logic across projects like Chessroulette, Movex allows developers to seamlessly run game logic on both the client and server without getting bogged down in complex networking protocols. With built-in real-time synchronization and an authoritative server model, Movex is built to handle multiplayer functionality so developers can focus on what they do best—creating engaging experiences.
 
-## Origins 
-Movex is the legacy of [chessroulette.live](https://gabrielctroia.medium.com/meet-chessroulette-org-a-quarantine-project-e4108f05db39) (now defunct but up for a comeback built on movex soon).
-
-import Image from 'next/image';
-
-<Image src="/static/chessroulette_screenshot.png" alt="Chessroulette Screenshot" width="720" height="560" className="pt-4"/>
-
-
-## Idea iteration
-
-The idea for Movex came while attempting to port the backend code from Chessroulette (everything from the network logic & protocols, servers, redis to matchmaking), into another turn based chess-like game server to make it multiplayer (that we are launching soon), and realizing that I actually have to copy and paste most of that code with very slight changes.
-
-The initial idea was simply to take that code, wrap it in a backend service of its own, complete with an api, socket + a (redis) store, and use it for my game as well as opening it up for other game developers that don't handle all that multyplayer logc on their own.
-
-But then, while working on that version, I realized I can in fact go a few steps further, and offer a solution for the client, where the actual game or app logic happens. So the idea of combining functional code (i.e. functions), to have them run both on the client and the server (seamlessly), could be an appealing solution for other game developers who don't won't to get out of their Game bubble, where to be honest, the fun happens.
-
-Combine that with an Authoritative Server that seamlessly just works, Realtime Synchronization and Deterministic Propagation and I think we have something here.
-
-But of course, only time will tell!
+Movex is a **[Moves That Matter](https://github.com/movesthatmatter)** project.

apps/movex-docs/pages/changelog.md

@@ -1,4 +1,4 @@
-# Changelog
+# Movex Changelog
 
 ## v0.1.6 (Sep 26 2024)
 

apps/movex-docs/pages/docs/features/_meta.json

@@ -1,7 +1,7 @@
 {
-  "frontend_only": "Frontend Only",
+  "serverless": "Serverless",
   "server_authoritative": "Authoritative Server",
   "realtime": "Realtime State Sync",
-  "secret_state": "Secret State",
+  "private_state": "Private State",
   "functional": "Typesafe Functional Programming"
 }

apps/movex-docs/pages/docs/features/private_state.mdx

@@ -0,0 +1,8 @@
+# Private State
+
+Sometimes, some parts of the state need not be known by every peer subscribed to it right away. This is called `Private State` or `Private State Fragments`.
+
+Think about a game of Poker for example, where each player gets a hand of cards that are meant to be kept _secret_ until the end of the round when every remaining player will reveal their cards. In a naive implementation of a Shared State setup, all of the hands would be kept somewhere in the global state and thus easily accessible by anyone who knows where to look (e.g. at the network traffic) – and thus a bad actor would be able to read their values even if the UI might not actually display them.
+
+Movex makes it very easy to keep these 100% private, by allowing the developer to decide which part of the state remains public and which private for each client (_peer_). See more more on how that works [here](/docs/how/private_state).
+

apps/movex-docs/pages/docs/features/realtime.mdx

@@ -1,3 +1,5 @@
-# Real-Time State Sync
+# Realtime State Sync
 
-Movex uses the Obervable Pattern under the hood to listen to changes coming from the Master State (i.e. Server)  accross all the peers (clients) subscribed to any Movex Resources. This means that as soon as a Resource State gets updated, all the subscribed peers will get notified, and the next client state will automatically get re-processed.
+Movex employs the Observable Pattern under the hood to monitor changes in the Master State (i.e., the Server) across all clients subscribed (i.e. peers) to Movex Resources. This means that as soon as a Resource State is updated, all peers receive immediate notifications, triggering an automatic reprocessing of their local state.
+
+Dive deeper into how it works [here](/docs/how/state_sync).

apps/movex-docs/pages/docs/features/server_authoritative.mdx

@@ -1,7 +1,7 @@
 # Authoritative Server
 
-It's important to keep the app logic outside the reach of potential bad actors, which is why it gets processed on an actual server run by movex. But there is no need for you to code, maintain or worry about that.
+**Keeping your app logic secure is crucial**, which is why Movex processes it on a secure server, safe from potential bad actors. The best part? You don’t need to write, maintain, or even worry about this back-end code—Movex handles it all for you.
 
-Movex makes use of a few concepts and strategies under the hood such as ["Deterministic Action Propagation"](/docs/features/functional#determinstic-action-propagation) as well as running the [`movex.config`](/docs/how/movex_config) logic on both the front-end and the back-end, to make this possible.
+Under the hood, Movex uses concepts like [Deterministic Action Propagation](/docs/features/functional#determinstic-action-propagation) and runs the [movex.config](/docs/how/movex_config) logic on both the front end and back end to ensure seamless, secure functionality.
 
-Learn more about how Movex works [here](/docs/how).
+Want to dive deeper into how Movex works? [Learn more here](/docs/how).

apps/movex-docs/pages/docs/features/serverless.mdx

@@ -0,0 +1,9 @@
+# Serverless
+
+**No back-end code needed. 🥳**
+
+One of the most time-consuming aspects of building multiplayer games or apps with shared states is dealing with the back end. Networking logic, databases, state synchronization, deploying, and maintaining servers—it’s a lot to manage. After going through this process multiple times, I found it became pretty redundant since there’s significant overlap in each project. Worse yet, it took time away from the fun part—actually building the game.
+
+Enter Movex. It removes all that back-end hassle, freeing you, the developer, to focus on what you love most—building your game or app! 😍
+
+And hey, if you do enjoy working on networking and server logic, I could use your help with Movex! Feel free to open an issue or submit a PR on GitHub: [Movex Repository](https://github.com/movesthatmatter/movex).

apps/movex-docs/pages/docs/how.mdx

@@ -1,22 +1,21 @@
 # How does Movex work
 
-Movex follows the [Flux Pattern](https://redux.js.org/understanding/history-and-design/prior-art#flux) locally to respond to changes in the UI, and then uses the "Deterministic Propagation Method" to sync up the state changes with the Global State as well as with all the peers in the network.
-<br/>
-<br/>
+Movex follows the [Flux Pattern](https://redux.js.org/understanding/history-and-design/prior-art#flux) locally to respond to UI changes. It then employs the [Deterministic Propagation Method](/docs/features/functional#determinstic-action-propagation) to synchronize state changes with the Global State(aka Master State) and all peers in the network.
+
+**Movex Diagram**
 <div className="bg-slate-100 p-8 text-center">
-<img alt="Movex Diagram" src="/static/diagram/diagram_d@1x_optimized.png" width="600px" className="mx-auto"/>
+<img alt="Movex Diagram" src="/static/diagram/diagram_d@1x_optimized.png" width="500px" className="mx-auto"/>
 </div>
 <br/>
-<br/>
 
 {/* Movex relies heavily on the concept of "Purity" and the "Deterministic Propagation Method", described in more detail [here](/docs/features/functional) to work under the hood. */}
 
 
-Each of following concepts plays a vital role in understanding and building with Movex:
+**Understanding and building with Movex involves several key concepts, each playing a vital role:**
 
 1. [Resources](/docs/how/resources)
 2. [Reducers](/docs/how/reducers)
 3. [Actions](/docs/how/actions)
 4. [State](/docs/how/state)
-5. [Secret State](/docs/how/secret_state)
+5. [Private State](/docs/how/private_state)
 6. [State Synchronization](/docs/how/state_synchronization).

apps/movex-docs/pages/docs/how/_meta.json

@@ -4,5 +4,6 @@
   "reducers": "Reducers",
   "actions": "Actions",
   "state": "State",
-  "secret_state": "Secret State & Private Actions"
+  "private_state": "Private State",
+  "state_sync": "State Sync"
 }

apps/movex-docs/pages/docs/how/secret_state.mdx → apps/movex-docs/pages/docs/how/private_state.mdx

@@ -1,8 +1,8 @@
-# Secret State & Private Actions
+# Private State
 
 Up to this point, everything is pretty much in line with how Redux works, but the following concepts are specific to Movex, and they are needed in order to make the possible to store secret state fragments:
 1. [Private Actions](#private-actions)
-2. [Reconciliation Checks (Needs different name?!)](#reconciliatory-checks)
+2. [Reconciliatory Check Function](#reconciliatory-checks)
 
 ## Private Actions