jbook

Your All-in-One JavaScript Sandbox and Notebook.

jbook provides users with a versatile platform to create, share, and modify code snippets in real-time.

With support for a variety of libraries and frameworks, jbook's intuitive user interface and live preview make it easy to see the results of your code as you type.

This project served as an educational exercise to enhance my understanding of TypeScript, React, and React-Redux. It was developed by following along with this 30-hour comprehensive Udemy tutorial: React and Typescript: Build a Portfolio Project created by the fantastic Stephen Grider.

Tech Stack

| | | | | | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------- | | | | | |

Features

• All-in-One Sandbox: Write, edit, and preview JavaScript and React code snippets without the need for external tools.
• Real-Time Editing: See the results of your code immediately with jbook's live preview feature, making it easier to debug and visualize your work.
• Library Support: Utilize popular libraries and frameworks to enhance your coding experience.
• Text-Editor: jbook provides a user-friendly way to document code using the built-in Markdown text-editor.
• Sharing and Collaboration: jbook projects are automatically serialized and saved to user's machines, making it possible to store and share projects with others.
• Command-Line Interface: jbook offers a convenient CLI, available on npm, for opening and creating jbook files from the command line. jbook serve <filename> starts a local API and opens the front-end application on a localhost port, allowing users to easily access and interact with jbook in their browser.

Usage

1. Install the CLI by running npm i jbook-notes.
2. Open the built-in tutorial with jbook-notes serve _intro and follow the instructions to get familiar with the basic features jbook offers.
3. Open new or existing notes with jbook-notes serve <filename> (Optionally include a filepath: jbook-notes serve <path/filename>).
4. Run jbook-notes --help for additional help

Preview

Lessons Learned

• Best Practices for designing and building advanced, production-ready apps.
• Integrating Typescript, React and React-Redux together.
• Designing highly reusable React components.
• Creating a custom plugin for Esbuild to enable in-browser transpiling/bundling with support for imports from npm.
• Creating a caching layer for imported modules/bundled code using Local-Forage.
• Using Redux-Middlewares for handling complex business logic.
• Taking advantage of powerful third-party libraries such as: bulma, immer, monaco-editor, react-md-editor, commander, etc...
• Safely handling user-input by utilizing iframes as a code-execution environment- the same technique used by popular sites such as Codepen.
• Utilizing lerna and nx to create a mono-repo with multiple packages and build targets.
• Creating a Restful-API to serve up a Front-End application from a CLI.
• Utilizing web-assembly to go... BLAZINGLY FAST!
• Deploying to npm and vercel.

Acknowledgements

• Udemy - React and Typescript: Build a Portfolio Project
• readme.so
• Simple Icons
• shields.io

Authors

• Rio Edwards