Draft general improvements

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

tutorials/README.md

@@ -1,65 +1,49 @@
 ---
 description: Detailed tutorials to help you use Code Capsules based on your use case.
-cover: .gitbook/assets/CC Docs Banner.png
+cover: .gitbook/assets/cc-docs-banner.png
 coverY: 0
 ---
 
 # Tutorials Overview
 
-<table data-view="cards">
-<thead>
-<tr>
-<th></th>
-<th data-hidden data-card-cover data-type="files"></th>
-<th data-hidden data-card-target data-type="content-ref"></th>
-</tr>
-</thead>
-<tbody>
-<!-- Telegram Bot Tutorials -->
-<tr>
-<td>Build a Telegram bot that uses AI to respond to users with a custom personality.</td>
-<td><a href=".gitbook/assets/telegram-bot-cover.jpg">telegram-bot-cover.jpg</a></td>
-<td><a href="how-to-create-and-host-a-telegram-bot-on-code-capsules.md">how-to-create-and-host-a-telegram-bot-on-code-capsules.md</a></td>
-</tr>
-<tr>
-<td>Learn how to build a Telegram bot that messages you exchange rate data and weather forecasts for areas of your choosing.</td>
-<td><a href=".gitbook/assets/telegram-bot-cover.jpg">telegram-bot-cover.jpg</a></td>
-<td><a href="how-to-create-and-host-a-telegram-bot-on-code-capsules.md">how-to-create-and-host-a-telegram-bot-on-code-capsules.md</a></td>
-</tr>
-<tr>
-<td>Social media bots allow you to automate responses and reactions to posts or messages sent to the bot.</td>
-<td><a href=".gitbook/assets/telegrambot.jpg">telegrambot.jpg</a></td>
-<td><a href="create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md">create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md</a></td>
-</tr>
-<tr>
-<td>A decentralized application (dApp) is a software application that runs on a decentralized network, often…</td>
-<td><a href=".gitbook/assets/How to Deploy a React Token dApp to Code Capsules.png">How to Deploy a React Token dApp to Code Capsules.png</a></td>
-<td><a href="how-to-deploy-a-react-token-dapp-to-code-capsules.md">how-to-deploy-a-react-token-dapp-to-code-capsules.md</a></td>
-</tr>
-<tr>
-<td>Nuxt.js takes Vue to the next level, with SSR and SSG. Find out more about…</td>
-<td><a href=".gitbook/assets/Nuxt3 and Nitro.png">Nuxt3 and Nitro.png</a></td>
-<td><a href="nuxt3-and-nitro.md">nuxt3-and-nitro.md</a></td>
-</tr>
-<tr>
-<td>The MERN stack, which stands for MongoDB, Express.js, React, and Node.js, is a robust framework…</td>
-<td><a href=".gitbook/assets/Optimizing Performance in MERN Stack_ Tips and Techniques.png">Optimizing Performance in MERN Stack_ Tips and Techniques.png</a></td>
-<td><a href="optimizing-performance-in-mern-stack-tips-and-techniques.md">optimizing-performance-in-mern-stack-tips-and-techniques.md</a></td>
-</tr>
-<tr>
-<td>Build a personal API that lets you access up to the minute exchange rates and weather data for cities of your choosing.</td>
-<td><a href=".gitbook/assets/creating-flask-api-cover.jpg">creating-flask-api-cover.jpg</a></td>
-<td><a href="creating-and-hosting-an-api-with-flask/">creating-and-hosting-an-api-with-flask</a></td>
-</tr>
-<tr>
-<td>Create a full stack application with Flask and HTMx to build a lightweight interactive site.</td>
-<td><a href=".gitbook/assets/flask-htmx-cover.png">flask-htmx-cover.png</a></td>
-<td><a href="building-a-full-stack-application-with-flask-and-htmx.md">building-a-full-stack-application-with-flask-and-htmx.md</a></td>
-</tr>
-<tr>
-<td>Create a bot that monitors the state of your applications and reports any status changes via Slack.</td>
-<td><a href=".gitbook/assets/CodeCapsules_SlackBot.jpg">CodeCapsules_SlackBot.jpg</a></td>
-<td><a href="build-a-slackbot-with-node.js-to-monitor-your-applications.md">build-a-slackbot-with-node.js-to-monitor-your-applications.md</a></td>
-</tr>
-</tbody>
-</table>
+This section contains step-by-step tutorials to help you build and deploy applications on Code Capsules.
+
+## Telegram Bots
+
+<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Python Telegram Bot</strong></td><td>Build a Telegram bot with Python that messages you exchange rate data and weather forecasts.</td><td><a href="how-to-create-and-host-a-telegram-bot-on-code-capsules.md">how-to-create-and-host-a-telegram-bot-on-code-capsules.md</a></td></tr><tr><td><strong>Node.js Telegram Bot</strong></td><td>Create and host a Telegram bot using Node.js on Code Capsules.</td><td><a href="create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md">create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md</a></td></tr><tr><td><strong>Go AI Telegram Bot</strong></td><td>Build a Telegram bot in Go that uses AI to respond to users with a custom personality.</td><td><a href="create-and-host-go-ai-telegram-bot.md">create-and-host-go-ai-telegram-bot.md</a></td></tr></tbody></table>
+
+***
+
+## Flask & Python
+
+<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Creating an API with Flask</strong></td><td>Build a personal API that lets you access up to the minute exchange rates and weather data.</td><td><a href="create-and-host-an-api-with-flask.md">create-and-host-an-api-with-flask.md</a></td></tr><tr><td><strong>Flask and HTMx</strong></td><td>Create a full stack application with Flask and HTMx to build a lightweight interactive site.</td><td><a href="building-a-full-stack-application-with-flask-and-htmx.md">building-a-full-stack-application-with-flask-and-htmx.md</a></td></tr><tr><td><strong>Generative Art with Pillow</strong></td><td>Build a generative art application using Pillow, Flask and HTMx.</td><td><a href="build-a-generative-art-application-with-pillow-flask-and-htmx.md">build-a-generative-art-application-with-pillow-flask-and-htmx.md</a></td></tr></tbody></table>
+
+***
+
+## Node.js & Express
+
+<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Slackbot Monitor</strong></td><td>Create a bot that monitors the state of your applications and reports any status changes via Slack.</td><td><a href="build-a-slackbot-with-node.js-to-monitor-your-applications.md">build-a-slackbot-with-node.js-to-monitor-your-applications.md</a></td></tr><tr><td><strong>Express and HTMx</strong></td><td>Build a full stack application with Express and HTMx.</td><td><a href="building-a-full-stack-application-with-express-and-htmx.md">building-a-full-stack-application-with-express-and-htmx.md</a></td></tr><tr><td><strong>Game Catalogue API</strong></td><td>Build a game catalogue API with Node.js and MySQL.</td><td><a href="building-a-game-catalogue-api.md">building-a-game-catalogue-api.md</a></td></tr></tbody></table>
+
+***
+
+## Full Stack
+
+<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>MEAN Stack Tutorial</strong></td><td>A step-by-step guide to getting started with the MEAN stack.</td><td><a href="getting-started-with-mean-stack-a-step-by-step-tutorial.md">getting-started-with-mean-stack-a-step-by-step-tutorial.md</a></td></tr><tr><td><strong>MERN Job Board</strong></td><td>Build a job board application using the MERN stack.</td><td><a href="build-a-mern-job-board.md">build-a-mern-job-board.md</a></td></tr><tr><td><strong>Optimizing MERN Stack Performance</strong></td><td>Tips and techniques for optimizing performance in MERN stack applications.</td><td><a href="optimizing-performance-in-mern-stack-tips-and-techniques.md">optimizing-performance-in-mern-stack-tips-and-techniques.md</a></td></tr><tr><td><strong>MEAN/MERN/MEVN Best Practices</strong></td><td>Best practices for structuring MEAN, MERN, and MEVN projects.</td><td><a href="best-practices-for-structuring-mean-mern-mevn-projects.md">best-practices-for-structuring-mean-mern-mevn-projects.md</a></td></tr></tbody></table>
+
+***
+
+## Frontend Frameworks
+
+<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Nuxt3 and Nitro</strong></td><td>Learn about Nuxt3 and Nitro for building modern Vue.js applications.</td><td><a href="nuxt3-and-nitro.md">nuxt3-and-nitro.md</a></td></tr></tbody></table>
+
+***
+
+## Docker & Other
+
+<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Web File Store</strong></td><td>Build a web file store application.</td><td><a href="building-a-web-file-store.md">building-a-web-file-store.md</a></td></tr><tr><td><strong>PHP Book Recommendations</strong></td><td>Build a book recommendations app with PHP, SQLite, and Docker.</td><td><a href="building-a-book-recommendations-app-with-php-sqlite-and-docker.md">building-a-book-recommendations-app-with-php-sqlite-and-docker.md</a></td></tr><tr><td><strong>WordPress Blog</strong></td><td>How to simply host a production WordPress blog.</td><td><a href="how-to-simply-host-a-production-wordpress-blog.md">how-to-simply-host-a-production-wordpress-blog.md</a></td></tr></tbody></table>
+
+***
+
+## Platform
+
+<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>White-Label Your App</strong></td><td>Learn how to white-label your application with Code Capsules.</td><td><a href="white-label-your-app-with-code-capsules.md">white-label-your-app-with-code-capsules.md</a></td></tr><tr><td><strong>Video Guides</strong></td><td>Watch video tutorials for Code Capsules deployment guides.</td><td><a href="video-guides.md">video-guides.md</a></td></tr></tbody></table>

tutorials/SUMMARY.md

@@ -5,15 +5,11 @@
 * [How to Create and Host a Node.js Telegram Bot on Code Capsules](create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md)
 * [How to Create and Host a Go Telegram Bot on Code Capsules](create-and-host-go-ai-telegram-bot.md)
 * [How to (Simply) Host a Production WordPress Blog](how-to-simply-host-a-production-wordpress-blog.md)
-* [Creating and Hosting an API With Flask](creating-and-hosting-an-api-with-flask/README.md)
-  * [API Reference \[Sample\]](creating-and-hosting-an-api-with-flask/api-reference-sample.md)
+* [Create and Host an API With Flask](create-and-host-an-api-with-flask.md)
 * [Building a Full Stack Application with Flask and HTMx](building-a-full-stack-application-with-flask-and-htmx.md)
-* [How to Deploy a React Token dApp to Code Capsules](how-to-deploy-a-react-token-dapp-to-code-capsules.md)
 * [Nuxt3 and Nitro](nuxt3-and-nitro.md)
-* [How to Deploy a React Token dApp to Code Capsules](how-to-deploy-a-react-token-dapp-to-code-capsules.md)
 * [Optimizing Performance in MERN Stack: Tips and Techniques](optimizing-performance-in-mern-stack-tips-and-techniques.md)
 * [Build a Slackbot with Node.js to Monitor your Applications](build-a-slackbot-with-node.js-to-monitor-your-applications.md)
-* [Video Guides](video-guides.md)
 * [Building a Full Stack Application With Express and HTMx](building-a-full-stack-application-with-express-and-htmx.md)
 * [Getting Started With MEAN Stack: A Step-by-Step Tutorial](getting-started-with-mean-stack-a-step-by-step-tutorial.md)
 * [Building a Web File Store](building-a-web-file-store.md)
@@ -23,3 +19,4 @@
 * [White-Label Your App With Code Capsules](white-label-your-app-with-code-capsules.md)
 * [Building a Game Catalogue API](building-a-game-catalogue-api.md)
 * [Best Practices for Structuring MEAN/MERN/MEVN Projects](best-practices-for-structuring-mean-mern-mevn-projects.md)
+* [Video Guides](video-guides.md)

tutorials/build-a-slackbot-with-node.js-to-monitor-your-applications.md

@@ -181,7 +181,7 @@ To add the access token to the environment in Code Capsules, head over to the ca
 
 Now that we've added our access token, we need to find the ID of the channel we want to post to. Find a channel on your Slack workspace that you want to send to, or create a new channel. Now we can get the channel ID by right-clicking on the channel name to bring up a context menu. Now, we can choose "Copy Link" from that menu:
 
-<figure><img src=".gitbook/assets/CleanShot 2025-06-02 at 16.31.45@2x.png" alt=""><figcaption><p>Slack Channel ID</p></figcaption></figure>
+<figure><img src=".gitbook/assets/copy-slack-channel-id.png" alt=""><figcaption><p>Slack Channel ID</p></figcaption></figure>
 
 If we paste that link, we get something like `https://<workspace-name>.slack.com/archives/C01SZ6Z3TCY`. The last part of that URL is the channel ID; in this example case, `C01SZ6Z3TCY`.
 

tutorials/creating-and-hosting-an-api-with-flask/README.md → tutorials/create-and-host-an-api-with-flask.md

@@ -106,15 +106,11 @@ First, let’s register an account on OpenExchangeRates. Navigate to here and:
 2. On the dashboard, click “App IDs”.
 3. Take note of your “App ID” (API key) you will need to paste it into the code below.
 
-![app id](https://codecapsules.io/wp-content/uploads/2023/07/app-id.png)
-
 Obtaining the weatherstack API key is similar:
 
 1. Create a free account on weatherstack
 2. Log in and take note of the API key presented in the control panel, you will need to paste it into the code below.
 
-![weatherstack](https://codecapsules.io/wp-content/uploads/2023/07/weatherstack.png)
-
 Now we can retrieve data from the OpenExchangeRates and weatherstack APIs using our API keys. Let’s try that out now.
 
 ### Getting exchange rates