jsnotenlf

Created for Udemy course React and Typescript: Build a Portfolio Project

The application allows a user to create and edit markdown and javascript code cells directly in the browser. The code cells are bundled and executed automatically, providing instant feedback. The cells can be inserted, reordered, and deleted.

The application will launch a react web client and an api server on the user's local machine. The client fetches a list of cells from the server at startup and any changes to the cells are persisted via the API layer. As of right now, the data is persisted to a file.

Some features of the client-side application include:

• The code cells use the Monaco code editor with jsx syntax highlighting
• Node packages referenced in code cells are automatically fetched from unpkg.
• Node packages are cached in the browser's IndexedDB using localForage.
• After the code is bundled with esbuild, it is executed in an iframe.
• Code entered in previous cells can be referenced in subsequent cells. For instance, a function or variable can be defined in one cell and then used in a later cell.
• A convenience function is available to display content in the iframe. For example show(<h1>hello there</h1), will render the provided html in a div element of the iframe.

Links

• Github - Navigate to the course-react-ts-portfolio/jbook folder.

How to run the application

1. On the command line, type npx jsnotenlf serve. Optionally, a file can be provided to the serve command and/or a port. Type npx jsnotenlf serve -h for additional information.
2. Open the launched client application in your browser. For instance, http://localhost:4005.