diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..7a73a41bf --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/tutorials/.gitbook/assets/CC Docs Banner.png b/tutorials/.gitbook/assets/cc-docs-banner.png similarity index 100% rename from tutorials/.gitbook/assets/CC Docs Banner.png rename to tutorials/.gitbook/assets/cc-docs-banner.png diff --git a/tutorials/.gitbook/assets/code-capsules-captule-details.png b/tutorials/.gitbook/assets/code-capsules-captule-details.png new file mode 100644 index 000000000..022d2eb41 Binary files /dev/null and b/tutorials/.gitbook/assets/code-capsules-captule-details.png differ diff --git a/tutorials/.gitbook/assets/code-capsules-create-new-space.jpg b/tutorials/.gitbook/assets/code-capsules-create-new-space.jpg new file mode 100644 index 000000000..cc877fa16 Binary files /dev/null and b/tutorials/.gitbook/assets/code-capsules-create-new-space.jpg differ diff --git a/tutorials/.gitbook/assets/code-capsules-create-new-team.png b/tutorials/.gitbook/assets/code-capsules-create-new-team.png new file mode 100644 index 000000000..8ae5fd400 Binary files /dev/null and b/tutorials/.gitbook/assets/code-capsules-create-new-team.png differ diff --git a/tutorials/.gitbook/assets/code-capsules-login-existing-account.png b/tutorials/.gitbook/assets/code-capsules-login-existing-account.png new file mode 100644 index 000000000..8dc82e7a4 Binary files /dev/null and b/tutorials/.gitbook/assets/code-capsules-login-existing-account.png differ diff --git a/tutorials/.gitbook/assets/code-capsules-register-new-account.png b/tutorials/.gitbook/assets/code-capsules-register-new-account.png new file mode 100644 index 000000000..2d04c2ead Binary files /dev/null and b/tutorials/.gitbook/assets/code-capsules-register-new-account.png differ diff --git a/tutorials/.gitbook/assets/CleanShot 2025-06-02 at 16.31.45@2x.png b/tutorials/.gitbook/assets/copy-slack-channel-id.png similarity index 100% rename from tutorials/.gitbook/assets/CleanShot 2025-06-02 at 16.31.45@2x.png rename to tutorials/.gitbook/assets/copy-slack-channel-id.png diff --git a/tutorials/.gitbook/assets/creating-flask-api-cover.jpg b/tutorials/.gitbook/assets/creating-flask-api-cover.jpg new file mode 100644 index 000000000..40070033b Binary files /dev/null and b/tutorials/.gitbook/assets/creating-flask-api-cover.jpg differ diff --git a/tutorials/.gitbook/assets/flask-htmx-cover.png b/tutorials/.gitbook/assets/flask-htmx-cover.png new file mode 100644 index 000000000..39f529188 Binary files /dev/null and b/tutorials/.gitbook/assets/flask-htmx-cover.png differ diff --git a/tutorials/.gitbook/assets/slack-bot-cover.jpg b/tutorials/.gitbook/assets/slack-bot-cover.jpg new file mode 100644 index 000000000..64d867ba8 Binary files /dev/null and b/tutorials/.gitbook/assets/slack-bot-cover.jpg differ diff --git a/tutorials/README.md b/tutorials/README.md index 23bab221a..4af3f21b4 100644 --- a/tutorials/README.md +++ b/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 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Build a Telegram bot that uses AI to respond to users with a custom personality.telegram-bot-cover.jpghow-to-create-and-host-a-telegram-bot-on-code-capsules.md
Learn how to build a Telegram bot that messages you exchange rate data and weather forecasts for areas of your choosing.telegram-bot-cover.jpghow-to-create-and-host-a-telegram-bot-on-code-capsules.md
Social media bots allow you to automate responses and reactions to posts or messages sent to the bot.telegrambot.jpgcreate-and-host-a-telegram-bot-with-node.js-on-code-capsules.md
A decentralized application (dApp) is a software application that runs on a decentralized network, often…How to Deploy a React Token dApp to Code Capsules.pnghow-to-deploy-a-react-token-dapp-to-code-capsules.md
Nuxt.js takes Vue to the next level, with SSR and SSG. Find out more about…Nuxt3 and Nitro.pngnuxt3-and-nitro.md
The MERN stack, which stands for MongoDB, Express.js, React, and Node.js, is a robust framework…Optimizing Performance in MERN Stack_ Tips and Techniques.pngoptimizing-performance-in-mern-stack-tips-and-techniques.md
Build a personal API that lets you access up to the minute exchange rates and weather data for cities of your choosing.creating-flask-api-cover.jpgcreating-and-hosting-an-api-with-flask
Create a full stack application with Flask and HTMx to build a lightweight interactive site.flask-htmx-cover.pngbuilding-a-full-stack-application-with-flask-and-htmx.md
Create a bot that monitors the state of your applications and reports any status changes via Slack.CodeCapsules_SlackBot.jpgbuild-a-slackbot-with-node.js-to-monitor-your-applications.md
+This section contains step-by-step tutorials to help you build and deploy applications on Code Capsules. + +## Telegram Bots + +
Python Telegram BotBuild a Telegram bot with Python that messages you exchange rate data and weather forecasts.how-to-create-and-host-a-telegram-bot-on-code-capsules.md
Node.js Telegram BotCreate and host a Telegram bot using Node.js on Code Capsules.create-and-host-a-telegram-bot-with-node.js-on-code-capsules.md
Go AI Telegram BotBuild a Telegram bot in Go that uses AI to respond to users with a custom personality.create-and-host-go-ai-telegram-bot.md
+ +*** + +## Flask & Python + +
Creating an API with FlaskBuild a personal API that lets you access up to the minute exchange rates and weather data.create-and-host-an-api-with-flask.md
Flask and HTMxCreate a full stack application with Flask and HTMx to build a lightweight interactive site.building-a-full-stack-application-with-flask-and-htmx.md
Generative Art with PillowBuild a generative art application using Pillow, Flask and HTMx.build-a-generative-art-application-with-pillow-flask-and-htmx.md
+ +*** + +## Node.js & Express + +
Slackbot MonitorCreate a bot that monitors the state of your applications and reports any status changes via Slack.build-a-slackbot-with-node.js-to-monitor-your-applications.md
Express and HTMxBuild a full stack application with Express and HTMx.building-a-full-stack-application-with-express-and-htmx.md
Game Catalogue APIBuild a game catalogue API with Node.js and MySQL.building-a-game-catalogue-api.md
+ +*** + +## Full Stack + +
MEAN Stack TutorialA step-by-step guide to getting started with the MEAN stack.getting-started-with-mean-stack-a-step-by-step-tutorial.md
MERN Job BoardBuild a job board application using the MERN stack.build-a-mern-job-board.md
Optimizing MERN Stack PerformanceTips and techniques for optimizing performance in MERN stack applications.optimizing-performance-in-mern-stack-tips-and-techniques.md
MEAN/MERN/MEVN Best PracticesBest practices for structuring MEAN, MERN, and MEVN projects.best-practices-for-structuring-mean-mern-mevn-projects.md
+ +*** + +## Frontend Frameworks + +
Nuxt3 and NitroLearn about Nuxt3 and Nitro for building modern Vue.js applications.nuxt3-and-nitro.md
+ +*** + +## Docker & Other + +
Web File StoreBuild a web file store application.building-a-web-file-store.md
PHP Book RecommendationsBuild a book recommendations app with PHP, SQLite, and Docker.building-a-book-recommendations-app-with-php-sqlite-and-docker.md
WordPress BlogHow to simply host a production WordPress blog.how-to-simply-host-a-production-wordpress-blog.md
+ +*** + +## Platform + +
White-Label Your AppLearn how to white-label your application with Code Capsules.white-label-your-app-with-code-capsules.md
Video GuidesWatch video tutorials for Code Capsules deployment guides.video-guides.md
diff --git a/tutorials/SUMMARY.md b/tutorials/SUMMARY.md index 4a9c182d6..0fc7e52a3 100644 --- a/tutorials/SUMMARY.md +++ b/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) \ No newline at end of file diff --git a/tutorials/build-a-slackbot-with-node.js-to-monitor-your-applications.md b/tutorials/build-a-slackbot-with-node.js-to-monitor-your-applications.md index 1512e2179..b31fd6793 100644 --- a/tutorials/build-a-slackbot-with-node.js-to-monitor-your-applications.md +++ b/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: -

Slack Channel ID

+

Slack Channel ID

If we paste that link, we get something like `https://.slack.com/archives/C01SZ6Z3TCY`. The last part of that URL is the channel ID; in this example case, `C01SZ6Z3TCY`. diff --git a/tutorials/creating-and-hosting-an-api-with-flask/README.md b/tutorials/create-and-host-an-api-with-flask.md similarity index 98% rename from tutorials/creating-and-hosting-an-api-with-flask/README.md rename to tutorials/create-and-host-an-api-with-flask.md index 1e4688723..9fb93559e 100644 --- a/tutorials/creating-and-hosting-an-api-with-flask/README.md +++ b/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 diff --git a/tutorials/creating-and-hosting-an-api-with-flask/.gitbook/assets/env-active.png b/tutorials/creating-and-hosting-an-api-with-flask/.gitbook/assets/env-active.png deleted file mode 100644 index 4d8ca59db..000000000 Binary files a/tutorials/creating-and-hosting-an-api-with-flask/.gitbook/assets/env-active.png and /dev/null differ diff --git a/tutorials/creating-and-hosting-an-api-with-flask/api-reference-sample.md b/tutorials/creating-and-hosting-an-api-with-flask/api-reference-sample.md deleted file mode 100644 index 927102123..000000000 --- a/tutorials/creating-and-hosting-an-api-with-flask/api-reference-sample.md +++ /dev/null @@ -1,26 +0,0 @@ -# API Reference \[Sample] - -{% openapi src="../.gitbook/assets/openapi 3.0.3.yaml" path="/" method="get" %} -[openapi 3.0.3.yaml](<../.gitbook/assets/openapi 3.0.3.yaml>) -{% endopenapi %} - -{% openapi src="../.gitbook/assets/openapi 3.0.3.yaml" path="/search" method="get" %} -[openapi 3.0.3.yaml](<../.gitbook/assets/openapi 3.0.3.yaml>) -{% endopenapi %} - -{% openapi src="../.gitbook/assets/openapi 3.0.3.yaml" path="/search/ask" method="get" %} -[openapi 3.0.3.yaml](<../.gitbook/assets/openapi 3.0.3.yaml>) -{% endopenapi %} - -{% openapi src="../.gitbook/assets/openapi 3.0.3.yaml" path="/search/ask" method="post" %} -[openapi 3.0.3.yaml](<../.gitbook/assets/openapi 3.0.3.yaml>) -{% endopenapi %} - -{% openapi src="../.gitbook/assets/openapi 3.0.3.yaml" path="/spaces/{spaceId}" method="patch" %} -[openapi 3.0.3.yaml](<../.gitbook/assets/openapi 3.0.3.yaml>) -{% endopenapi %} - -{% openapi src="../.gitbook/assets/openapi 3.0.3.yaml" path="/spaces/{spaceId}" method="delete" %} -[openapi 3.0.3.yaml](<../.gitbook/assets/openapi 3.0.3.yaml>) -{% endopenapi %} - diff --git a/tutorials/how-to-deploy-a-react-token-dapp-to-code-capsules.md b/tutorials/how-to-deploy-a-react-token-dapp-to-code-capsules.md deleted file mode 100644 index aaf473f3d..000000000 --- a/tutorials/how-to-deploy-a-react-token-dapp-to-code-capsules.md +++ /dev/null @@ -1,330 +0,0 @@ ---- -cover: .gitbook/assets/tutorial common hero.png -coverY: 70 ---- - -# How to Deploy a React Token dApp to Code Capsules - -A _decentralized application (dApp)_ is a software application that runs on a decentralized network, often a blockchain. Unlike traditional apps, dApps are transparent and resistant to censorship. In this article, we focus on a React Token dApp built using React.js for the frontend and handling tokens through a Solidity smart contract. - -## Cloning the Project Repository - -Before you begin building your React Token dApp, it’s essential to start with the base code. This tutorial assumes you have a Git repository set up with the initial code required for the project. Follow these steps to clone the repository and set up your local environment: - -1. Install Git: If you haven’t already, install [Git](https://git-scm.com/downloads) on your system. -2. Clone the Repository: Open your terminal or command prompt and navigate to the directory where you want to clone the repository. Use the following command to clone the repo: - -``` -git clone https:/github.com/codecapsules-io/dapp-react-token -``` - -3. Navigate to the Project Directory: Once the cloning process is complete, navigate to the project directory: - -``` -cd [name of your project directory] -``` - -With the repository successfully cloned and dependencies installed, you’re now ready to start building and deploying your React Token dApp as described in the following sections of this tutorial. - -### React Frontend App - -Your dApp will leverage React.js to create a dynamic, user-friendly interface. React is popular for dApps due to its flexibility and component-based architecture. - -### Solidity Smart Contract Token - -The tokens in your React dApp are governed by a smart contract written in Solidity. Solidity is a high-level programming language for writing smart contracts on the Ethereum blockchain. - -## Creating the React Frontend - -Assuming `dapp-react-token` is your root directory: - -1. Open Terminal/Command Prompt: Navigate to your `dapp-react-token` directory. -2. Create React App Inside the Directory: Run `npx create-react-app frontend` to create a new React app in a subdirectory called `frontend` inside `dapp-react-token`. -3. Navigate to the Frontend Directory: Change your current directory to the newly created frontend folder with `cd frontend`. -4. Start the React Development Server: (Optional at this stage) Begin the development server with `npm start`. - -## Installing Web3.js - -In the frontend directory of your `dapp-react-token` project: - -1. Install Web3.js: Within the frontend directory, execute `npm install web3` to add the Web3.js library to your project. - -## Modifying Frontend Code to Interact with Blockchain - -In the `frontend/src` directory: - -``` -import React, { useEffect } from 'react'; -import Web3 from 'web3'; - -function App() { - useEffect(() => { - // Initialize web3 - const web3 = new Web3(Web3.givenProvider || 'http://localhost:8545'); - - // Your contract ABI and address - const ABI = [...]; // Replace with your ABI array - const contractAddress = '...'; // Replace with your contract address - - // Connect to the contract - const contract = new web3.eth.Contract(ABI, contractAddress); - - // Additional logic goes here - }, []); - - return ( -
-

Hello, React Token dApp!

- {/* Additional UI components */} -
- ); -} - -export default App; -``` - -## Setting Up the Solidity Smart Contract - -In the `dapp-react-token` directory: - -1. Create a Directory for Smart Contracts: Use `mkdir contracts` and then `cd contracts` to create and navigate into a directory for your Solidity contracts. -2. Write Your Smart Contract: In the contracts directory, create a Solidity file (e.g., `TokenContract.sol`) and write your smart contract logic. -3. Compile and Deploy Your Contract: Utilize a tool like Truffle or Hardhat within the contracts directory to compile and deploy your smart contract. - -## Integrating Frontend and Smart Contract - -Use the deployed contract’s ABI and Address in your React app: - -1. Getting the ABI Array: Compile your Solidity contract to generate the ABI, which is found in the `build/contracts` or `artifacts` directory after compilation. -2. Obtaining the Contract Address: Deploy your contract to a blockchain and note the deployed address. - -## Writing the TokenContract.sol - -A basic ERC-20 token contract in Solidity can serve as a starting point. Here’s a simple example: - -``` -// SPDX-License-Identifier: MIT -pragma solidity ^0.8.0; - -interface IERC20 { - function totalSupply() external view returns (uint256); - function balanceOf(address account) external view returns (uint256); - function transfer(address recipient, uint256 amount) external returns (bool); - // Add other ERC-20 functions here -} - -contract TokenContract is IERC20 { - string public name = "MyToken"; - string public symbol = "MTK"; - uint8 public decimals = 18; - uint256 public override totalSupply; - - mapping(address => uint256) private _balances; - - constructor(uint256 initialSupply) { - totalSupply = initialSupply; - _balances[msg.sender] = totalSupply; - } - - function balanceOf(address account) public view override returns (uint256) { - return _balances[account]; - } - - function transfer(address recipient, uint256 amount) public override returns (bool) { - require(_balances[msg.sender] >= amount, "Not enough tokens"); - _balances[msg.sender] -= amount; - _balances[recipient] += amount; - emit Transfer(msg.sender, recipient, amount); - return true; - } - - // Implement other ERC-20 functions here - - event Transfer(address indexed from, address indexed to, uint256 value); - // Add other events here -} -``` - -## Key Components - -When building a React Token dApp, the following components are essential: - -* Smart Contracts: These self-executing contracts with the terms directly written into code are typically written in Solidity. -* React.js: Used for the frontend, this JavaScript library enables creating a dynamic and interactive user interface. -* Web3.js: This JavaScript library lets you interact with a blockchain, essential for connecting your React frontend to your Solidity smart contract. -* Tokens: These are the digital assets your dApp will handle, managed by a Solidity smart contract. - -## Required Resources and Dependencies - -To develop and deploy a React Token dApp, you will need the following developer tools and dependencies: - -### Developer Tools - -* **Node.js and npm:** Node.js is a JavaScript runtime that allows you to execute JavaScript code server-side. npm (Node Package Manager) accompanies Node.js and serves as the package manager for JavaScript, helping you to manage project dependencies. Both are foundational tools for any JavaScript-based project. -* **React.js:** A JavaScript library for building user interfaces, particularly SPAs (Single Page Applications). React enables you to create reusable UI components and manage the state across components, making it well-suited for the dynamic and interactive frontend of a dApp. -* **Web3.js:** This is a collection of libraries that allow you to interact with the Ethereum blockchain using JavaScript. It provides the necessary functionalities to connect your React.js frontend with your Solidity smart contract, enabling features like sending transactions, reading contract state, and more. -* **Metamask**: An in-browser Ethereum wallet that allows users to safely store Ether and other ERC-20 tokens. It’s also a gateway to blockchain apps (like your dApp) and is often used to provide the web3 functionality to the browser. -* **Solidity Compiler (solc)**: A tool for compiling Solidity source code into bytecode that can run on the Ethereum Virtual Machine (EVM). It’s essential for turning your Solidity smart contracts into something that can actually be deployed onto the Ethereum blockchain. - -### Code for Installing Dependencies - -Below are code snippets for installing these essential dependencies. Each dependency has a specific role in the development and deployment of your dApp: - -``` -// Installing Node.js and npm -// To install Node.js and npm, download the installer from the official website and follow the installation instructions. - -// Installing React.js -npm install -g create-react-app -// This command installs Create React App, a tool that sets up a new React project with sensible defaults. - -// Installing Web3.js -npm install web3 -// This command adds the web3.js library to your project, allowing you to interact with the Ethereum blockchain. - -// Installing Solidity Compiler (solc) -npm install -g solc -// This command globally installs the Solidity compiler, enabling you to compile Solidity smart contracts into bytecode. -``` - -## Sample React.js Frontend Code - -Below is a basic example to initialize web3 and connect to a smart contract using React.js. This code assumes you’ve already written a Solidity smart contract and deployed it to get an ABI and contract address. - -``` -import React, { useEffect } from 'react'; -import Web3 from 'web3'; - -function App() { - useEffect(() => { - // Initialize web3 - const web3 = new Web3(Web3.givenProvider || 'http://localhost:8545'); - - // Your contract ABI and address - const ABI = [...]; // Your ABI array here - const contractAddress = '...'; // Your contract address here - - // Connect to the contract - const contract = new web3.eth.Contract(ABI, contractAddress); - - // Your code logic here - }, []); - - return ( -
-

Hello, React Token dApp!

-
- ); -} - -export default App; -``` - -## Key Concepts - -Understanding some key concepts can help you grasp the nuances of deploying a React Token dApp: - -* Decentralization: Unlike traditional apps, dApps don’t have a central authority, offering more security and freedom. -* Smart Contracts: These are self-executing contracts where the terms are directly written into the code. -* Token Standards: ERC-20 and ERC-721 are popular Ethereum token standards often used in dApps. -* Gas: Transactions on the Ethereum network require a fee, known as gas, which varies depending on network congestion. - -## Explaining the Code - -Below we delve deeper into each code snippet to gain a more comprehensive understanding of how our dApp functions. - -``` -{/* Use useEffect to run code after the component mounts. */} -useEffect(() => { - // Initialization logic here - // The empty dependency array means this useEffect runs once after the initial render. -}, []); - -{/* Initialize web3 instance */} -const web3 = new Web3(Web3.givenProvider || 'http://localhost:8545'); -// Web3.givenProvider will use the provider from MetaMask if available. -// Otherwise, it will default to localhost at port 8545 for development purposes. - -{/* Initialize contract instance */} -const ABI = [...]; // Paste your contract's ABI array here -const contractAddress = '...'; // Paste your contract address here - -// Creating new contract instance using web3 -const contract = new web3.eth.Contract(ABI, contractAddress); -// ABI and contractAddress are necessary to interact with the contract. -``` - -## Troubleshooting Common Issues - -Here are some common issues and how to solve them: - -* Metamask Not Found: If the dApp can’t find a web3 provider, make sure Metamask or another web3 provider is installed. -* Gas Errors: These usually occur when you don’t have enough Ethereum in your wallet to perform transactions. -* Smart Contract Errors: Ensure your smart contract is properly deployed and you’re interacting with the correct functions and sending the required arguments. - -## Why Deploy to Code Capsules - -Code Capsules offers a streamlined environment for deploying and managing web applications, making it an ideal choice for React Token dApps. Here are some compelling reasons to use Code Capsules: - -* Scalability: Code Capsules allows for easy scaling, so as your dApp gains more users, accommodating them becomes seamless. -* Security: With built-in HTTPS and other security features, Code Capsules ensures that your dApp is secure. -* Frontend Capsules: Specialized environments, called Frontend Capsules, are optimized for frontend technologies like React.js, making deployment a breeze. -* Global CDN: Code Capsules provides a Global Content Delivery Network (CDN), ensuring low latency and a fast loading dApp. -* Continuous Deployment: With features like GitHub integration, continuous deployment is straightforward, allowing for quick updates to your dApp. - -## How to Deploy to Code Capsules - -Here is a step-by-step guide to deploy your React Token dApp to Code Capsules: - -1. Sign Up/Login: Start by creating an account or logging into your existing Code Capsules account. -2. Create a New Capsule: Go to the dashboard and create a new Frontend Capsule. -3. Configuration: Configure your capsule settings such as the domain, build environment, and routes. -4. Repository Connection: Link your GitHub repository where your React dApp code resides. -5. Deployment: Once the repository is linked, trigger the deployment process. -6. Verification: After the deployment is complete, verify that the dApp is running as expected by visiting the provided URL. - -{% hint style="info" %} -Always ensure that your dApp is responsive and adheres to best practices, especially when deploying to a live environment like Code Capsules. -{% endhint %} - -## Deployment on Code Capsules: A Guide for Your React Token dApp - -Deploying your React Token dApp on Code Capsules brings together ease of use, best practices, and optimal performance. Let’s walk through the steps of deployment and understand why Code Capsules is the right choice for your project. - -### Registration and Account Management on Code Capsules - -Begin by creating an account on Code Capsules to manage and deploy your projects. After registration, log in to manage your CMS deployment and other project settings. - -![Register a new account on Code Capsules](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-register-new-account.png) - -### Team and Space Creation for Collaboration and Organization - -Create a team for collaborative projects and set up a new space, offering flexibility in organizing and managing different applications. - -![Code Capsules Dashboard create a new team](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-create-new-team.png) - -### Starting a New Capsule for Your Project - -Within your space, start a new capsule for your CMS. Choose its purpose according to your project’s architecture – front-end, back-end, or a Docker container. - -![Code Capsules - Capsule details](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-captule-details.png) - -### Why Code Capsules is Ideal for Your React Token dApp - -Code Capsules aligns with best practices, offering streamlined development and deployment, responsiveness, and core vitals optimization. Its global CDN ensures fast load times, critical for user experience. The platform supports scalability and security, making it an ideal choice for your dApp. - -### Streamlined Development and Deployment - -Enjoy GitHub integration for continuous deployment, focusing more on coding and less on deployment mechanics. - -### Responsiveness and Core Vitals - -A fast-loading dApp is key to maintaining strong Core Web Vitals, a critical aspect of user experience. - -### Best Practices and Security - -HTTPS is built-in, and the platform scales easily, allowing your dApp to grow without constant re-engineering. - -## Conclusion - -Choosing Code Capsules for your React Token dApp is more than a decision; it’s an investment in the quality and future success of your application. diff --git a/tutorials/nuxt3-and-nitro.md b/tutorials/nuxt3-and-nitro.md index 9873f3307..0a4aae32c 100644 --- a/tutorials/nuxt3-and-nitro.md +++ b/tutorials/nuxt3-and-nitro.md @@ -204,31 +204,31 @@ Both Vue.js and Nuxt 3 applications can make HTTP requests to APIs or backend se Start off by setting up a new Code Capsules account. Follow the steps to create your user profile, preparing you for app deployment. -![Creating a new account on Code Capsules](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-register-new-account.png) +![Creating a new account on Code Capsules](.gitbook/assets/code-capsules-register-new-account.png) ### Navigating Your Code Capsules Interface Once you’ve registered, log in to your Code Capsules profile. This interface is your command center for project management and application deployment. -![Logging into your Code Capsules account](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-login-existing-account.png) +![Logging into your Code Capsules account](.gitbook/assets/code-capsules-login-existing-account.png) ### Building a Collaborative Team in Code Capsules Use Code Capsules to form a development team. This is a vital step for effective project coordination and developer collaboration. -![Forming a team on Code Capsules](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-create-new-team.png) +![Forming a team on Code Capsules](.gitbook/assets/code-capsules-create-new-team.png) ### Creating a New Project Environment in Code Capsules Spaces in Code Capsules offer unique environments for each project. Initiate a new space to provide a dedicated and isolated setting for your apps. -![Setting up a new space in Code Capsules](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-create-new-space.jpg) +![Setting up a new space in Code Capsules](.gitbook/assets/code-capsules-create-new-space.jpg) ### Starting Your First Capsule In your newly created space, proceed to launch a new capsule. Consider these capsules as separate compartments for different parts of your application, including the front-end, back-end, or Docker setups. -![code capsules captule details.png](https://codecapsules.io/wp-content/uploads/2024/06/code-capsules-captule-details.png.webp) +![code capsules captule details.png](.gitbook/assets/code-capsules-captule-details.png) Following these steps, you can smoothly deploy your MEAN stack application on Code Capsules, taking advantage of their comprehensive and intuitive platform for efficient application management and deployment. diff --git a/tutorials/optimizing-performance-in-mern-stack-tips-and-techniques.md b/tutorials/optimizing-performance-in-mern-stack-tips-and-techniques.md index 9412f3b1d..e5a996593 100644 --- a/tutorials/optimizing-performance-in-mern-stack-tips-and-techniques.md +++ b/tutorials/optimizing-performance-in-mern-stack-tips-and-techniques.md @@ -212,31 +212,31 @@ Monitor real-time performance metrics to detect and address issues promptly. Initiate your journey by establishing a Code Capsules account, specifically tailored for MERN stack optimization. Carefully complete your profile setup, ensuring it aligns with performance enhancement strategies for MERN applications. -![Optimizing account setup for MERN stack on Code Capsules](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-register-new-account.png) +![Optimizing account setup for MERN stack on Code Capsules](.gitbook/assets/code-capsules-register-new-account.png) ### Streamlining MERN Project Management in Code Capsules Post-registration, access your Code Capsules dashboard to manage MERN stack projects. This space is optimized for performance tracking and efficient deployment of MERN applications. -![Streamlined MERN project management on Code Capsules](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-login-existing-account.png) +![Streamlined MERN project management on Code Capsules](.gitbook/assets/code-capsules-login-existing-account.png) ### Formulating a High-Performance MERN Team in Code Capsules In Code Capsules, establish a team that specializes in MERN stack optimization. This step is crucial for collaboratively enhancing application performance and handling complex MERN projects. -![Creating a MERN-focused team in Code Capsules](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-create-new-team.png) +![Creating a MERN-focused team in Code Capsules](.gitbook/assets/code-capsules-create-new-team.png) ### Setting Up Performance-Optimized Spaces for MERN in Code Capsules Within Code Capsules, create spaces dedicated to MERN stack projects. These spaces are designed to host and run your applications in environments that are fine-tuned for maximum performance. -![Developing performance-optimized spaces for MERN in Code Capsules](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-create-new-space.jpg) +![Developing performance-optimized spaces for MERN in Code Capsules](.gitbook/assets/code-capsules-create-new-space.jpg) ### Launching Performance-Focused Capsules for MERN Start a new capsule in your MERN-optimized space, conceptualizing these as individual project units. These capsules are configured to enhance the performance of each component of your MERN application, such as the front-end, back-end, or server configurations. -![Initiating performance-focused capsules for MERN in Code Capsules](https://codecapsules.io/wp-content/uploads/2023/11/code-capsules-captule-details.png) +![Initiating performance-focused capsules for MERN in Code Capsules](.gitbook/assets/code-capsules-captule-details.png) By following these modified steps focused on MERN stack performance, you can efficiently deploy and manage your applications on Code Capsules, leveraging the platform’s capability for optimized MERN application performance and deployment. diff --git a/tutorials/video-guides.md b/tutorials/video-guides.md index 24ca46f45..ee26b2531 100644 --- a/tutorials/video-guides.md +++ b/tutorials/video-guides.md @@ -1,7 +1,9 @@ # Video Guides -## Video Guides - If you prefer watching videos to reading text then you can watch videos for the tutorials and deployment guides listed below on our [YouTube Channel](https://www.youtube.com/channel/UC5q3AFoYRYWiFKGKdKyIX_Q/videos). -
Python Telegram Bot (Webhooks)https://www.youtube.com/watch?v=z-K9rVfhd5c&list=PLoEGujFfB4nakOY7ifjldejFZBREfn3Zd
Mern Job Boardhttps://www.youtube.com/watch?v=iHl-pFlLWk0&list=PLoEGujFfB4nYx8b4Wai0l75KsjzEruy6l
Angularhttps://www.youtube.com/watch?v=9UYugPpxlMQ&t=12s
Reacthttps://www.youtube.com/watch?v=qQ0Y-3JEeZ0&t=9s
Express and Mongohttps://www.youtube.com/watch?v=Jt52C0xIiA8
Expresshttps://www.youtube.com/watch?v=P42D4IBtTVY&t=2s
MEAN Stackhttps://www.youtube.com/watch?v=aVyMru2nrP4&t=8s
+| | | | +|:-:|:-:|:-:| +| [![Python Telegram Bot](https://img.youtube.com/vi/z-K9rVfhd5c/mqdefault.jpg)](https://www.youtube.com/watch?v=z-K9rVfhd5c&list=PLoEGujFfB4nakOY7ifjldejFZBREfn3Zd)
**Python Telegram Bot** | [![MERN Job Board](https://img.youtube.com/vi/iHl-pFlLWk0/mqdefault.jpg)](https://www.youtube.com/watch?v=iHl-pFlLWk0&list=PLoEGujFfB4nYx8b4Wai0l75KsjzEruy6l)
**MERN Job Board** | [![Angular](https://img.youtube.com/vi/9UYugPpxlMQ/mqdefault.jpg)](https://www.youtube.com/watch?v=9UYugPpxlMQ&t=12s)
**Angular** | +| [![React](https://img.youtube.com/vi/qQ0Y-3JEeZ0/mqdefault.jpg)](https://www.youtube.com/watch?v=qQ0Y-3JEeZ0&t=9s)
**React** | [![Express and Mongo](https://img.youtube.com/vi/Jt52C0xIiA8/mqdefault.jpg)](https://www.youtube.com/watch?v=Jt52C0xIiA8)
**Express and Mongo** | [![Express](https://img.youtube.com/vi/P42D4IBtTVY/mqdefault.jpg)](https://www.youtube.com/watch?v=P42D4IBtTVY&t=2s)
**Express** | +| [![MEAN Stack](https://img.youtube.com/vi/aVyMru2nrP4/mqdefault.jpg)](https://www.youtube.com/watch?v=aVyMru2nrP4&t=8s)
**MEAN Stack** | | |