Merge pull request #236 from movesthatmatter/game-dev-focus

GabrielCTroia · web-flow · commit 303c41fb7424 · 2024-10-13T18:44:07.000+01:00
docs(readme, docs): 📝 start focusing on the js game dev niche
diff --git a/README.md b/README.md
@@ -6,8 +6,8 @@
 </div>
 
 <div align="center">
-  <h1>Serverless real-time data sharing infrastructure for frontend developers</h1>
-  Build multiplayer games, chat apps or anything in between without worrying about the server side, backend logic or even the network! Works with React out of the box!
+  <h1>Serverless Multiplayer Infrastructure for JavaScript Game Developers</h1>
+  Build multiplayer games without worrying about server-side logic, backend infrastructure, or networking. Movex takes care of it all—works with React out of the box!
 </div>
 
 <br/>
@@ -29,32 +29,37 @@
 
 ## 🧐 Why Movex
 
-__Movex let's you cut the development effort in half and ship faster by abstracting the backend logic and server-side away! 🎉__
-
-With it's unique approach and set of features Movex gives you the freedom to focus only on the front-end while still maintaining all of the control over the App Logic, UI/UX and Authority over Data.
-
-In addition it comes pre-packed with:
-- the ability to keep parts of the shared state private to specific users. [See Secret State](https://www.movex.dev/docs/features/secret_state)
-- ensures the minimun amount of data is sent over the wire with each update. [See Deterministic Action Propagation](https://www.movex.dev/docs/features/functional)
-- keeps bad actors away by keeping the Data Reconciliation Logic out of the client reach. [See Authoritative Server](https://www.movex.dev/docs/features/server_authoritative)
-
-
-## 🚀 Examples
+__Movex cuts your development effort in half and helps you ship faster by abstracting away backend logic and server-side complexity! 🎉__
+
+With its unique approach and robust set of features, Movex gives you the freedom to focus solely on the front-end while still maintaining full control over the Game Logic, UI/UX, and Data Authority.
+
+## ⭐️ Features:
+- __Serverless:__
+  Movex manages the network logic, state-sharing protocols, server deployment and maintenance, along with various other essential functionalities. [Learn more](https://www.movex.dev/docs/features/serverless).
+- __Authoritative Server:__
+  By keeping the data reconciliation logic on the server side, Movex keeps bad actors away, ensuring the integrity of your application. [Learn more](https://www.movex.dev/docs/features/server_authoritative).
+- __Real-time synchronization:__
+  By utilizing the Observable Pattern to monitor state changes in registered resources Movex promptly notifes the UI layer. [See more](https://www.movex.dev/docs/features/realtime)
+- __Private State:__
+  Movex allows parts of the shared state to remain private to specific users, ensuring that sensitive information is kept secure. [See more](https://www.movex.dev/docs/features/private_state)
+- __Efficient Data Flow:__
+  Movex ensures that only the minimum required data is transmitted with each update, optimizing performance. (See: [Deterministic Action Propagation](https://www.movex.dev/docs/features/functional#determinstic-action-propagation))
+
+
+## 💜 Who uses Movex?
+<a href="https://chessroulette.live" target="_blank" alt="Chessroulette | Conect. Play. Stream">
+  <picture width="500">
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/movesthatmatter/chessroulette-web/master/src/components/Logo/assets/Logo_light_full.svg" width="250">
+    <img alt="Chessroulette | Conect. Play. Stream" src="https://raw.githubusercontent.com/movesthatmatter/chessroulette-web/master/src/components/Logo/assets/Logo_dark_full.svg" width="250">
+  </picture>
+</a>
 
-- **Chat App** - https://github.com/GabrielCTroia/movex-next-chat
+## 🚀 Examples & Demos
 - **Multiplayer Rock Paper Scissors Game** - https://codesandbox.io/s/rps-demo-x877yl
-
-## ⭐️ Features
-- 🤯 __No Backend logic to manage__ - Movex takes care of it for you! [See how](https://www.movex.dev/docs/features/frontend_only).
-- 👑 __Authoritative Server__
-- 🤩 __Real-time synchronization__
-- 🤐 __Secret State__
-- 😎 __Follows the Flux API__
-- 😍 __Works with Vanilla JS or any Framework__
+- **Chat App** - https://github.com/GabrielCTroia/movex-next-chat
 
 ## 🧙🏽‍♂️ How Movex works
-
-At the client level, Movex adheres to the [Flux Pattern](https://medium.com/weekly-webtips/flux-pattern-architecture-in-react-35d0b55313f6) to react to UI changes. Additionally, it employs the ["Deterministic Action Propagation Method"](https://www.movex.dev/docs/features/functional#determinstic-action-propagation) to synchronize any state changes with the Global (Master) State which lives on the server. Consequently, this process instantly updates all other peers on the network, ensuring real-time data synchronization. [Learn More](https://www.movex.dev/docs/how).
+Movex follows the [Flux Pattern](https://medium.com/weekly-webtips/flux-pattern-architecture-in-react-35d0b55313f6) locally to respond to UI changes. It then employs the [Deterministic Propagation Method](https://www.movex.dev/docs/features/functional#determinstic-action-propagation) to synchronize state changes with the Global State(aka Master State) and all peers in the network. [Learn More](https://www.movex.dev/docs/how).
 
 <div align="center">
 <picture width="600">
@@ -65,7 +70,31 @@ At the client level, Movex adheres to the [Flux Pattern](https://medium.com/week
 
 ## 👩‍💻 Getting Started
 
-Visit the [Docs](https://www.movex.dev/docs/overview/get_started) to get started with Movex.
+#### 1. Install It
+
+```bash
+yarn add movex; yarn add --dev movex-service
+```
+
+####  2. Create the Movex Config File
+
+```ts
+export default {
+  resources: {},
+};
+```
+
+####  3. Start Movex in Dev Mode
+
+```bash
+npx movex dev
+```
+
+#### 4. Next Steps
+To continue with the next steps see [Get Started Docs](https://www.movex.dev/docs/overview/get_started).
+
+## Documentation 
+Visit the [Docs](https://www.movex.dev/docs/overview/introduction) to get started with Movex.
 
 ## 🙏 Contributing
 
diff --git a/apps/movex-docs/modules/home/HeroSubText.tsx b/apps/movex-docs/modules/home/HeroSubText.tsx
@@ -7,8 +7,9 @@ type Props = {
 export const HeroSubText: React.FC<Props> = (props) => {
   return (
     <h3 className={props.className}>
-      Accelerate your development process and deliver faster by abstracting
-      the backend complexities with Movex! 🚀
+      {/* Accelerate your development process and deliver faster by abstracting
+      the backend complexities with Movex! 🚀 */}
+      Accelerate your game development and deliver faster by abstracting the backend complexities with Movex—made for JavaScript Game Developers.
     </h3>
   );
 };
diff --git a/apps/movex-docs/modules/home/HeroText.tsx b/apps/movex-docs/modules/home/HeroText.tsx
@@ -7,11 +7,18 @@ type Props = {
 export const HeroText: React.FC<Props> = (props) => {
   return (
     <h1 className={props.className}>
-      Effortless realtime{' '}<br/> 
+      Serverless{' '}
+      <div className='hidden lg:block'/>
+      <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 Infrastructure
+      </span>{' '}
+      <div className='hidden lg:block'/>
+      for JavaScript Games
+      {/* 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">
       data sharing
       </span>{' '}
-      infrastructure
+      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
diff --git a/apps/movex-docs/modules/home/homeVars.ts b/apps/movex-docs/modules/home/homeVars.ts
@@ -12,7 +12,7 @@ export const features = [
   {
     name: 'Serverless',
     description:
-      '“Movex manages the network logic, state-sharing protocols, server deployment and maintenance, along with various other essential functionalities.',
+      'Movex manages the network logic, state-sharing protocols, server deployment and maintenance, along with various other essential functionalities.',
     icon: BoltIcon,
     link: {
       label: 'Learn More',
@@ -45,24 +45,35 @@ export const features = [
   {
     name: 'Authoritative Server',
     description:
-      "To safeguard app logic from potential bad actors, it is processed on the server while remaining abstracted from the developer.",
+      '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/server_authoritative',
     },
     color: 'orange-500',
   },
+  // {
+  //   name: 'Typesafe Functional Programming',
+  //   description:
+  //     "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/functional',
+  //   },
+  //   color: 'red-500',
+  // },
   {
-    name: 'Typesafe Functional Programming',
+    name: 'Efficient Data Flow',
     description:
-      "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!",
+      'Movex ensures that only the minimum required data is transmitted with each update, optimizing performance.',
     icon: ShieldCheckIcon,
     link: {
       label: 'Learn More',
-      url: '/docs/features/functional',
+      url: 'https://www.movex.dev/docs/features/functional#determinstic-action-propagation',
     },
-    color: 'red-500',
+    color: 'orange-500',
   },
   {
     name: 'Open Source',
@@ -80,15 +91,15 @@ export const features = [
 export const faqs = [
   {
     q: 'What does "No Server Code" or "No Server Hassle" really mean?',
-    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.",
+    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 indeed a server running, but it’s fully abstracted by Movex and movex-service, so you can focus on development without any hassle.",
+    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',
@@ -100,7 +111,7 @@ export const faqs = [
   // },
   {
     q: 'What can I build with Movex?',
-    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!",
+    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',
diff --git a/apps/movex-docs/pages/docs/overview/get_started.mdx b/apps/movex-docs/pages/docs/overview/get_started.mdx
@@ -20,21 +20,21 @@ yarn start
 yarn add movex movex-react; yarn add --dev movex-service
 ```
 
-### 3. Create the Movex Config File
+### 2. Create the Movex Config File
 
 ```ts copy filename="src/movex.config.ts"
 export default {
   resources: {},
 };
 ```
 
-### 2. Start Movex in Dev Mode
+### 3. Start Movex in Dev Mode
 
 ```bash copy
 npx movex dev
 ```
 
-### 3. Wrap the App in the MovexProvider
+### 4. Wrap the App in the MovexProvider
 
 ```ts copy filename="src/App.tsx" {4-5, 9-15, 32}
 import React from 'react';
@@ -73,7 +73,7 @@ export default function App() {
 }
 ```
 
-### 4. Add a Movex Resource
+### 5. Add a Movex Resource
 
 In this short tutorial we're going to build a Counter App that will sync in real-time with another client out of the box.
 
@@ -139,7 +139,7 @@ export default {
 };
 ```
 
-### 5. Let's add the Counter Component
+### 6. Let's add the Counter Component
 
 For this tutorial, we'll keep the UI very basic since it's not the main point.
 
@@ -176,7 +176,7 @@ On line 11 we're binding to the counter resource by rid. This means that now we
 
 In the following lines we're rendering a very simple UI, which displays the Counter State at _line 20_ and adding two Buttons which will be responsible for triggering the "Increment" and "Decrement" actions.
 
-### 5. And hook it up with our App
+### 7. And hook it up with our App
 
 ```ts copy showLineNumbers filename="src/App.tsx" {5-7, 10-13, 22-29, 32-39}
 import React, { useMemo } from 'react';
@@ -249,7 +249,7 @@ import Image from 'next/image';
   height={500}
 />
 
-### 5. Let's add the Actions
+### 8. Let's add the Actions
 
 At this point we can see the state of the Counter Resource but cannot do much with it.
 
@@ -311,7 +311,7 @@ And you should be able to see this:
   height={500}
 />
 
-### 6. Now bring in multi-players
+### 9. Now bring in multi-players
 
 Open the URL in another browser tab or 2, or even 9 and start clicking the buttons. The changes will be synced in realtime, without any server-side coding.
 
@@ -327,6 +327,6 @@ Open the URL in another browser tab or 2, or even 9 and start clicking the butto
 
 The world is your oyster now – go make multiplayer gameees! :D
 
-### 7. Homework
+### 10. Homework
 
 If you want an extra step, implement the "incrementBy" Action and functionality.
diff --git a/apps/movex-docs/pages/index.mdx b/apps/movex-docs/pages/index.mdx
@@ -9,8 +9,8 @@ import { features, faqs, community } from '../modules/home/homeVars';
 <div className="container mx-auto max-w-[90rem] gap-2 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
   <div className="flex flex-col lg:flex-row pt-4 md:pt-10 pb-10 lg:pt-20 lg:pb-20 gap-24 text-center lg:text-left">
     <div className="flex flex-col justify-center flex-1">
-      <HeroText className="text-5xl md:text-6xl font-bold mb-4 lg:mb-10 !leading-normals !md:leading-[4.5rem]" />
-      <HeroSubText className="text-xl lg:text-2xl mb-10 lg:mb-20 !leading-normal text-slate-500" />
+      <HeroText className="text-5xl md:text-5xl font-bold mb-4 lg:mb-3 !leading-tight" />
+      <HeroSubText className="text-xl lg:text-2xl mb-10 !leading-normal text-slate-500" />
 
       <div className="flex flex-col gap-5">
         <div className="flex justify-center lg:justify-start">
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "build": "nx build movex-demo",
     "test": "nx run-many --all --target=test --skip-nx-cache",
     "dev-movex-docs": "npx nx serve movex-docs",
-    "lint-all-libs": "npx nx run-many --parallel --target=lint --projects=movex-core-util,movex,movex-server,movex-service,movex-react,movex-vue --quiet",
+    "lint-all-libs": "npx nx run-many --parallel --target=lint --projects=movex-core-util,movex,movex-server,movex-service,movex-react,movex-react-local-master,movex-vue,movex-store,movex-master,movex-specs-util --quiet",
     "push-all-libs--locally": "cd dist/libs/movex && yalc push && cd -; cd dist/libs/movex-server && yalc push && cd -; cd dist/libs/movex-core-util && yalc push && cd -; cd dist/libs/movex-react && yalc push && cd -; cd dist/libs/movex-service && yalc push && cd -; cd dist/libs/movex-store && yalc push && cd -; cd dist/libs/movex-master && yalc push && cd -;",
     "push-lib-locally--movex": "cd dist/libs/movex && yalc push && cd -",
     "push-lib-locally--movex-react": "cd dist/libs/movex-react && yalc push && cd -",
