Building Scalable, Secure, and Feature-Rich Apps with Appwrite: A Technical Overview

Appwrite is an open-source, end-to-end Backend-as-a-Service (BaaS) platform designed to simplify the process of building web and mobile applications. %[https://appwrite.io/] Core Components of Appwrite User Authentication and Management Appwrite offers built-in user authentication and management services, supporting multiple authentication methods such as email and password, OAuth2 providers (e.g., Google, Facebook), and more. It also provides APIs for user registration, login, password recovery, and session management. This simplifies the implementation of secure user management in your app. ...

March 24, 2023 · 5 min · Chris Achinga

Building a GraphQL API with NodeJS: A Step-by-Step Guide

GraphQL is a powerful query language for APIs that allows developers to request and receive the data they need efficiently. In this step-by-step guide, we will walk you through the process of building a GraphQL API using Node.js, using airport data as a sample for the demo. Whether you’re a beginner or an experienced developer, this tutorial will provide you with the necessary knowledge to easily create your GraphQL API. ...

March 6, 2023 · 3 min · Chris Achinga

How To Convert HTML templates to NextJS (v13)

Now that Next.JS is an awesome frontend tool. How can we get HTML/CSS/JS Templates to work perfectly in a Next.JS project? This article will take you through the steps. Requirements To fully grasp the content, it’s highly recommended that you have the following tools installed on your development environment: NodeJS Text Editor (Maybe VIM?) Basic React.js and Next.JS knowledge Finding a Template For the demo, we will use one of the open-sourced templates from Startbootstrap. We will use the Freelancer theme, a perfect template for a personal portfolio website. ...

February 22, 2023 · 4 min · Chris Achinga

Unlocking the Power of Headless CMS for Seamless Content Delivery

A headless content management system (CMS) is a back-end-only content management system (CMS) built from the ground up as a content repository that makes content accessible via an API for display on any device. In this article, we will explore the benefits of headless CMS and how it can unlock the full potential of your content delivery strategy. Before we list out examples, let’s see what makes Headless CMS has to offer; ...

February 1, 2023 · 5 min · Chris Achinga

Developer Communities In Kenya

2022 has seen growth in Developer communities and Tech events in Kenya. There are now many communities that developers can benefit from just by being a part of. This article will list some of them and how to join the communities. Only Devs Only Devs is a developer Community from Mombasa. It started from a Payment Integration Hackathon, and they have been active ever since. They have weekly sessions on Fridays at Techbridge Invest, where they share skills and knowledge and hold hands-on code sessions. ...

January 12, 2023 · 2 min · Chris Achinga

My 2022: Setting my Pace!

2022 was a great year for my career and personal growth. I had my most “first times,” and memorable moments were made. Here is a sneak peek into my 2022: Career Growth Technical Writing I started getting money from writing articles in February 2022. It’s something I had not planned for at all. A friend of mine, who we used to co-manage a developer community, Meta Developer Circles, referred me to Hackmamba as a Technical writer. ...

January 5, 2023 · 3 min · Chris Achinga

How to Test APIs on Mobile using API Tester

Imagine testing APIs using your mobile device, either iPhone or Android. All APIs, including REST, GraphQL, WebSocket, SOAP, JSON RPC, XML, HTTP, and HTTPS. This article will show how we can test APIs on mobile devices using API TESTER. Prerequisites API TESTER Mobile Application Ready to Use API endpoints The API TESTER application is freely available for the following devices: iOS: Download Link Android: Download Link Huawei: Download Link This article will use demo API endpoints from JSONPlaceholder, which offers free fake REST API. ...

November 29, 2022 · 3 min · Chris Achinga

How to configure Bootstrap SCSS and JS into a NextJS Project

Bootstrap is one of the simplest and most used CSS libraries. This article will guide you on configuring a NextJs project with Bootstrap SCSS and JS files. Codesandbox Demo %[https://codesandbox.io/p/github/achingachris/next-bootstrap-template/draft/zealous-archimedes] GitHub: %[https://github.com/achingachris/next-bootstrap-template/tree/config-bootstrap-scss-and-js] Creating a Next.js Project If you already have a NextJS project, skip to the next step. On a terminal, run the following script to set up a NextJs project: npx create-next-app@latest After installation, run: npm run dev A successful setup will run on localhost:3000. ...

November 15, 2022 · 3 min · Chris Achinga

How To Create and Deploy a json-server

json-server is a tool for creating mock REST API fast! To get started, ensure you have the following requirements: NodeJS (npm) Let’s get started! On an empty folder, initiate a nodejs application by running the following on your terminal/CMD: npm init -y Once that is complete, you install the following packages: json-server json-serve cors nodemon (as a dev dependency) npm install json-server json-serve cors npm install -D nodemon After the installation, create a new file: index.js. This is the entry point for the json-serve. Add the following inside the file: ...

October 18, 2022 · 2 min · Chris Achinga

How to fetch and Add Data in React from an API

In my first week in phase 2 of Moringa School Software Engineering classes, I covered the basics of getting data from APIs and working with forms. The Code Challenge for the week had the following tasks: Fetch Transactions from an API and tabulate them. Add new transactions. The transaction added should be posted to the backend API. FIlter out transactions by description The initial code for the challenge is in this commit. ...

September 26, 2022 · 6 min · Chris Achinga

Creating A Weather Search App in Vanilla JavaScript

This post covers creating a simple weather search application using plain JavaScript, HTML, and CSS. Demo and Source Code The project demo is live on codesandbox, and the source code is available on GitHub. %[https://codesandbox.io/embed/weather-robot-phase-1-lzt9z9?fontsize=14&hidenavigation=1&theme=dark] Prerequisites Openweathermap API Keys JavaScript Fetch API and DOM Manipulation Basic HTML and CSS Creating the HTML and CSS Files Create a new file (index.html) and add the following: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Weather Robot</title> <link rel="stylesheet" href="./weatherRobot.css" /> </head> <body> <section class="section-head"> <div class="container"> <h1 class="heading">Weather Robot</h1> <form> <input type="text" placeholder="Search for a city" autofocus /> <button type="submit">GET WEATHER</button> <span class="msg"></span> </form> </div> </section> <section class="city-array"> <div class="container"> <ul class="cities"></ul> </div> </section> <script src="./weatherRobot.js"></script> </body> </html> Create separate files for the styles and JavaScript. Inside the CSS file, add the following: ...

September 22, 2022 · 2 min · Chris Achinga

Using JavaScript in JupyterLab

TL;DR This post will take you through installing JupyterLabs and how to add a NodeJS kernel to it in Ubuntu. Installing JupyterLabs For a better experience, you should install Jupyter Lab inside a virtual environment. sudo apt install python3-venv After the installation is complete, create a new environment: python3 -m venv jlab Note that you can replace the jlab with any name of your choice. Now activate the environment: ...

August 20, 2022 · 1 min · Chris Achinga

State Management in React

A state is the current data passed in React components. State management in React enables you to dynamically update data in Components. This post will take you through creating an initial state and an event to trigger a state update in Reactjs. Prerequisites: NodeJS Installed Knowledge of React Source Code and Demo GitHub Repo Link Creating A New React App: # create a new react app npx create-react-app state-management-demo # move into the new app's directory cd state management-demo # start the app to see if everything is okay npm start For the Demo, clean the App.js to have the following: ...

July 9, 2022 · 2 min · Chris Achinga

How to add Cloudinary to Strapi CMS for Image/Video uploads

Strapi is an open-source Headless CMS. TL;DR: The demo source code to this article can be found on GitHub. To get started, you need to have the following on your computer: NodeJS v14 + Cloudinary Account Creating a Strapi Project To create a new strapi project, run the following: npx create-strapi-app@latest my-project --quickstart After a successful installation, Strapi will automatically open a new browser for you to create a local account: ...

June 12, 2022 · 2 min · Chris Achinga

How to set up Rust and NEAR for Blockchain/Web3 Development

Near protocol is a decentralized application platform that gives developer-friendly features to build and develop smart contracts. Near offers the platform to build smart contracts in Rust and deploy them. By default, Near supports Rust and AssemblyScript. Rust is recommended for its greater developer experience when it comes to memory allocation and a minimal runtime, among other great reasons. Installing Rust (Ubuntu/Linux) To install Rust, follow the steps below: Install Curl If you don’t have curl installed, use the scripts below: ...

June 8, 2022 · 2 min · Chris Achinga