{"id":24430937,"url":"https://github.com/rioredwards/j-scribe","last_synced_at":"2026-04-11T13:34:21.456Z","repository":{"id":149574097,"uuid":"616797378","full_name":"rioredwards/j-scribe","owner":"rioredwards","description":"j-scribe provides users with a versatile platform to create, share, and modify code snippets in real-time.","archived":false,"fork":false,"pushed_at":"2023-10-21T00:28:35.000Z","size":14348,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-01T11:49:19.313Z","etag":null,"topics":["code-editor-online","documentation","javascript","react","typescript"],"latest_commit_sha":null,"homepage":"https://j-scribe.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rioredwards.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-03-21T05:11:24.000Z","updated_at":"2023-05-13T09:05:34.000Z","dependencies_parsed_at":"2024-10-31T08:34:10.234Z","dependency_job_id":"0eed406e-c8cd-4587-a8c1-48bb7b45b4a9","html_url":"https://github.com/rioredwards/j-scribe","commit_stats":{"total_commits":212,"total_committers":1,"mean_commits":212.0,"dds":0.0,"last_synced_commit":"d48bdfca59aeee41e59ab740ef6ffdecd49e7174"},"previous_names":["rioredwards/jbook"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/rioredwards/j-scribe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rioredwards%2Fj-scribe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rioredwards%2Fj-scribe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rioredwards%2Fj-scribe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rioredwards%2Fj-scribe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rioredwards","download_url":"https://codeload.github.com/rioredwards/j-scribe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rioredwards%2Fj-scribe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31682953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"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":["code-editor-online","documentation","javascript","react","typescript"],"created_at":"2025-01-20T14:58:18.972Z","updated_at":"2026-04-11T13:34:21.422Z","avatar_url":"https://github.com/rioredwards.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# j-scribe\n\n_Your All-in-One JavaScript_ _**Sandbox**_ _and_ _**Notebook**_ _._\n\n![j-scribe Header](images/j-scribe_header.png)\n\n[Try](https://j-scribe.vercel.app/) • [GitHub](https://github.com/rioredwards/j-scribe)\n\nj-scribe is a versatile platform to create, share, and modify code snippets.\n\nWith support for various libraries and frameworks, j-scribe's intuitive user interface and live preview make it easy to see the results of your code as you type.\n\n## Made with\n\n![Typescript](https://img.shields.io/badge/-Typescript-3178C6?logo=TypeScript\u0026logoColor=black\u0026style=for-the-badge)\u0026nbsp;![JavaScript](https://img.shields.io/badge/-JavaScript-F7DF1E?logo=Javascript\u0026logoColor=black\u0026style=for-the-badge)\u0026nbsp;![React](https://img.shields.io/badge/-React-61DAFB?logo=React\u0026logoColor=black\u0026style=for-the-badge)\u0026nbsp;![Redux](https://img.shields.io/badge/-Redux-764ABC?logo=Redux\u0026logoColor=white\u0026style=for-the-badge)\u0026nbsp;![Node.js](https://img.shields.io/badge/-Node.js-339933?logo=Node.js\u0026logoColor=black\u0026style=for-the-badge)\u0026nbsp;![Express.js](https://img.shields.io/badge/-Express.js-000000?logo=Express\u0026logoColor=white\u0026style=for-the-badge)\u0026nbsp;![Bulma](https://img.shields.io/badge/-Bulma-00D1B2?logo=Bulma\u0026logoColor=white\u0026style=for-the-badge)\u0026nbsp;![Lerna](https://img.shields.io/badge/-Lerna-CF4349?logo=Lerna\u0026logoColor=white\u0026style=for-the-badge)\u0026nbsp;![esbuild](https://img.shields.io/badge/-esbuild-F8A51C?logo=esbuild\u0026logoColor=black\u0026style=for-the-badge)\u0026nbsp;\n\n## Features\n\n- **All-in-One Sandbox**: Write, edit, and preview JavaScript and React code snippets without the need for external tools.\n- **Real-Time Editing**: See the results of your code immediately with j-scribe's live preview feature, making it easier to debug and visualize your work.\n- **Library Support**: Utilize popular libraries and frameworks to enhance your coding experience.\n- **Text-Editor**: j-scribe provides a user-friendly way to document code using the built-in Markdown text editor.\n- **Sharing and Collaboration**: j-scribe projects are automatically serialized and saved to user's machines, making it possible to store and share projects with others.\n- **Command-Line Interface**: j-scribe offers a convenient CLI, available on npm, for opening and creating j-scribe files from the command line.\n\n## Preview\n\n![j-scribe preview](images/j-scribe_preview.gif)\n\n## Usage\n\n1. Install the [CLI](https://www.npmjs.com/package/j-scribe1) by running `npm i j-scribe1`\n2. Open the built-in tutorial with `j-scribe1 serve _intro` and follow the instructions to get familiar with the basic features j-scribe offers.\n3. Open new or existing notes with `j-scribe1 serve \u003cfilename\u003e` (Optionally include a file path: `j-scribe1 serve \u003cpath/filename\u003e`).\n4. Run `j-scribe1 --help `for additional help\n\n## Lessons learned\n\n- **Best Practices** for designing and building advanced, production-ready apps.\n- Integrating **Typescript**, **React**, and **React-Redux** together.\n- Designing highly **reusable React components**.\n- Creating a **custom plugin for Esbuild** to enable in-browser transpiling/bundling with support for imports from npm.\n- Creating a **caching layer** for imported modules/bundled code using **Local-Forage**.\n- Using **Redux-Middlewares** for handling complex business logic.\n- Taking advantage of powerful **third-party libraries** such as: **bulma**, **immer**, **monaco-editor**, **react-md-editor**, **commander**, etc...\n- Safely **handling user input** by utilizing iframes as a code-execution environment- the same technique used by popular sites such as Codepen.\n- Utilizing **Lerna** and **nx** to create a **mono-repo** with multiple packages and build targets.\n- Creating a **Restful-API** to serve up a **Front-End** application from a **CLI**.\n- Utilizing **web-assembly** to go...BLAZINGLY FAST!\n- **Deploying** to **npm** and **Vercel**.\n\n## Reflection\n\n**Note**: A large portion of this project was built by following along with a [tutorial series](https://www.udemy.com/course/react-and-typescript-build-a-portfolio-project/) by Stephen Grider on Udemy. I extended and improved upon the original idea.\n\nThis was a great learning experience for me! I learned a ton about TypeScript, React, and React-Redux as well as some project-specific libraries such as Monaco-Editor and Resizable. An unexpected challenge I faced was working with Lerna and understanding the build process. This project contains multiple packages, and I had to learn how to configure Lerna to build and deploy the packages in the correct order and for different production environments.\n\nI also learned a lot about the importance of planning and design when building a large-scale application. It's very clear to me how useful OOP principles can be in designing larger apps. Developing each component in a modular way and ensuring that the code is reusable makes it much easier to modify and add more features later on.\n\nI had a lot of fun working on this project, and I'm excited to continue learning and improving my skills. ✅\n\n## Authors\n\n- [Rio Edwards](https://www.github.com/rioredwards)\n- [Stephen Grider](https://github.com/StephenGrider)\n\n## Acknowledgements\n\n- [readme.so](https://readme.so/editor)\n- [Simple Icons](https://simpleicons.org/?q=redux)\n- [shields.io](https://shields.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frioredwards%2Fj-scribe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frioredwards%2Fj-scribe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frioredwards%2Fj-scribe/lists"}