{"id":31780655,"url":"https://github.com/mcmullinboy15/crossover-js","last_synced_at":"2026-05-18T10:36:16.235Z","repository":{"id":198786330,"uuid":"701554695","full_name":"mcmullinboy15/crossover-js","owner":"mcmullinboy15","description":"Bridging the Gap between Frontend and Backend.","archived":false,"fork":false,"pushed_at":"2024-01-14T19:31:58.000Z","size":44,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-18T01:48:42.894Z","etag":null,"topics":["axios","axios-react","axios-vue","crossover","express","expressjs","simple"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/crossover-js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mcmullinboy15.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-10-06T22:45:53.000Z","updated_at":"2023-10-28T05:53:32.000Z","dependencies_parsed_at":"2025-10-10T08:17:24.827Z","dependency_job_id":"178e014c-9aef-465a-80ee-3081f7516c04","html_url":"https://github.com/mcmullinboy15/crossover-js","commit_stats":null,"previous_names":["mcmullinboy15/crossover-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mcmullinboy15/crossover-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcmullinboy15%2Fcrossover-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcmullinboy15%2Fcrossover-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcmullinboy15%2Fcrossover-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcmullinboy15%2Fcrossover-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mcmullinboy15","download_url":"https://codeload.github.com/mcmullinboy15/crossover-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcmullinboy15%2Fcrossover-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33174994,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","axios-react","axios-vue","crossover","express","expressjs","simple"],"created_at":"2025-10-10T08:17:19.215Z","updated_at":"2026-05-18T10:36:16.207Z","avatar_url":"https://github.com/mcmullinboy15.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Crossover-js Logo](https://raw.githubusercontent.com/mcmullinboy15/crossover-js/main/logo.png)](https://github.com/mcmullinboy15/crossover-js)\n\n### Bridging the Gap between Frontend and Backend.\n\n[![npm version](https://img.shields.io/npm/v/crossover-js.svg?)](https://www.npmjs.org/package/crossover-js)\n[![License](https://img.shields.io/github/license/mcmullinboy15/crossover-js)](LICENSE)\n[![npm downloads](https://img.shields.io/npm/dm/crossover-js.svg?)](https://npm-stat.com/charts.html?package=crossover-js)\n[![install size](https://img.shields.io/badge/dynamic/json?url=https://packagephobia.com/v2/api.json?p=crossover-js\u0026query=$.install.pretty\u0026label=install%20size\u0026)](https://packagephobia.now.sh/result?p=crossover-js)\n\u003c!-- [![Build status](https://img.shields.io/github/actions/workflow/status/mcmullinboy15/crossover-js/ci.yml?branch=v1.x\u0026label=CI\u0026logo=github\u0026)](https://github.com/mcmullinboy15/crossover-js/actions/workflows/ci.yml) --\u003e\n\u003c!-- [![code coverage](https://img.shields.io/coveralls/mcmullinboy15/crossover-js.svg?)](https://coveralls.io/r/mcmullinboy15/crossover-js) --\u003e\n\n  \n## What is Crossover?\n\nIn the modern era of web development, maintaining a seamless connection between `frontend` and `backend` systems is crucial, yet often challenging. Enter `crossover` - a revolutionary tool designed to simplify and streamline this connection. Whether you're working with React on the frontend and Express on the backend, sql queries, websocket connections, or any other combination, crossover effortlessly syncs your function calls, making it feel as if you're working within a single unified environment.\n\nWith `crossover`, you define your functions once and call them anywhere. It abstracts the intricacies of API endpoints, ensuring developers can focus on writing impactful code rather than battling configurations. Backed by a robust configuration system, crossover not only improves development speed but also ensures consistency, reliability, and scalability.\n\n## Developers Welcome!!\n\nDive in and feel free to modify or expand upon this as needed!\n\n\n## Table of Contents\n\n- [What is Crossover?](#what-is-crossover)\n- [Developers Welcome!!](#developers-welcome)\n- [Table of Contents](#table-of-contents)\n- [Features](#features)\n- [Installation](#installation)\n- [Example](#example)\n  - [Possible Project Structure](#possible-project-structure)\n  - [Configuration](#configuration)\n  - [Server Initialization](#server-initialization)\n  - [Client Initialization](#client-initialization)\n- [Benefits](#benefits)\n- [License](#license)\n\n\n## Features\n- Axios based api module generation\n- Express based api Application generation\n- SQL backend function generation\n- WebSocket pub/sub handers generation\n\n## Installation\nInstallation is done using the\n[`npm install`](https://docs.npmjs.com/getting-started/installing-npm-packages-locally) command:\n```console\n$ npm install crossover-js\n```\n\n\n## Example\n\n### Propsed Project Structure\n\n```\nproject-root/\n|-- crossover.config.js\n|-- server/\n|   |-- index.js\n|   |-- functions.js (or other sub-modules)\n|-- client/\n    |-- index.js\n    |-- components/\n```\n\n### Configuration\nThe `crossover.config.js` at the root would allow you to maintain a centralized configuration, making it easier to manage the relationship between the client and server.\n\n```js\n// crossover.config.js\n\nmodule.exports = {\n  server: {\n    port: 3000,\n    middleware: [...],\n    functions: ['gameComplete'],\n\n    // WebSockets\n    websockets: { // ws: 8083; wss: 8084\n      protocol: 'wss',\n      host: 'broker.emqx.io',\n      port: 8084,\n      endpoint: '/mqtt',\n    },\n\n    // Database configurations\n    database: {\n      type: 'postgres', // or sqlite, or mongodb\n      connectionString: 'YOUR_DB_CONNECTION_STRING',\n      table: 'games',\n      // ... other DB-related configurations\n    },\n\n    // Cache configurations\n    cache: {\n      type: 'redis',\n      host: 'localhost',\n      port: 6379,\n      // ... other cache-related configurations\n    },\n\n    // External service configurations\n    externalServices: {\n      paymentGateway: {\n        apiKey: 'YOUR_API_KEY',\n        endpoint: 'https://api.payment-gateway.com',\n        // ... other service-related configurations\n      },\n      // ... other external services\n    },\n\n    // Third-party client-side services\n    analytics: {\n      googleAnalyticsId: 'UA-XXXXXXXXX',\n      // ... other analytics configurations\n    },\n\n    // Any other server-specific configurations\n    // ...\n  },\n  client: {\n    axios: {\n      baseURL: 'http://api.crossover-server.com:3000', // default 'https' + 'localhost' + server.port\n    }\n    // ... client-specific configurations\n  },\n  routes: {\n    gameComplete: {\n        type: \"javascript/function\",\n        function: \"gameComplete\",\n        params: {'game_id': null}\n    },\n    // websockets\n    subGame: {\n        type: \"websockets/sub\",\n        topic: \"games/:game_id\",\n        // Usage: api.subGame('12345', () =\u003e ...)\n    },\n    pubGame: {\n        type: \"websockets/pub\",\n        topic: \"games/:game_id\"\n        // Usage: api.pubGame('12345', msg)\n    },\n    // database\n    createGamesTable: {\n      type: \"db/postgres\",\n      method: 'query',\n      query: 'CREATE TABLE IF NOT EXISTS {table} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(255), owner_id NUMBER NOT NULL, isComplete BOOLEAN );'\n    },\n    createNewGame: {\n        type: \"db/postgres\",\n        method: 'insert',\n        params: {'name': null, 'owner_id': null, 'isComplete': false}\n    },\n    listGames: {\n        type: \"db/postgres\",\n        method: 'select'\n    },\n    getGame: {\n        type: \"db/postgres\",\n        method: 'query',\n        query: 'SELECT * FROM {table} WHERE id = $id',\n        params: {'id': null}\n    },\n    updateGameName: {\n        type: \"db/postgres\",\n        method: 'query',\n        query: 'UPDATE {table} SET name = $name',\n        params: {'name': null}\n    },\n    deleteGame: {\n        type: \"db/postgres\",\n        method: 'query',\n        query: 'DELETE FROM {table} WHERE id = $id',\n        params: {'id': null}\n    }\n  }\n};\n```\n\n### Server Initialization\nOn the server side, initialize your Express (or other) server with crossover and pass the required functions.\n\n```js\n// server/index.js\n\nconst crossover = require('crossover/express');\nconst { gameComplete } = require('./functions');\n/**\n * function gameComplete(gameObj) {\n *     return true\n * };\n */\n\nconst app = crossover.generate({\n  functions: { gameComplete }\n});\n\napp.listen(3000, () =\u003e {\n  console.log('Server running on port 3000');\n});\n```\n\n### Client Initialization\nOn the client side, initialize your client with crossover, which would provide you an interface to make calls to the server.\n\n```js\n// client/index.js\n\nimport crossover from 'crossover/http';\n\nconst api = crossover.generate();\n\n// Now, you can use the `api` object to make calls to your server, e.g.:\napi.gameComplete(gameObj).then(gameObj =\u003e {\n  console.log(gameObj); // true\n});\n\n// websockets\napi.subGame(game_id, msg =\u003e {\n  console.log(msg);\n});\napi.pubGame(game_id, msg);\n\n// database\napi.createNewGame({name: 'Game 1', owner_id: 12345}).then(sql_response =\u003e {\n  console.log(sql_response);\n});\napi.getGame(id).then(game =\u003e {\n  console.log(game);\n});\n\napi.listGames(id).then(games =\u003e {\n  console.log(games);\n});\n```\n\n## Benefits\n\u003cb\u003eSeparation of Concerns:\u003c/b\u003e By keeping the client and server in separate directories, you cleanly separate their responsibilities.\n\n\u003cb\u003eCentralized Configuration:\u003c/b\u003e Having a single `crossover.config.js` at the root allows you to easily manage the relationship between the client and server.\n\n\u003cb\u003eFlexibility:\u003c/b\u003e By allowing different configurations for different server frameworks (Express, Koa, etc.), you make `crossover` adaptable to various needs.\n\n\u003cb\u003eExplicit Function Exports:\u003c/b\u003e By passing the server functions explicitly when generating the server, you have more control over what's exposed. It also makes the code self-documenting, as it's clear which functions are accessible from the client.\n\n\n## License\n\n[MIT](LICENSE)\n\n\n## Future \n\n### Code Generation\n1. I want to take any of the following Backend API types and auto generate the Frontend api/ module\n - `swagger`\n - `js:express`\n - `golang:fiber`\n - `golang:chai`\n - `py:flask`\n - `py:django`\n - Others:\n   - `rust?`\n   - `c++`\n   - `php:*`\n   - `ruby:ruby-on-rails`\n   - `ruby:*`\n   - `c#`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcmullinboy15%2Fcrossover-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmcmullinboy15%2Fcrossover-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcmullinboy15%2Fcrossover-js/lists"}