DEV Community: Ibrahim Joseph

DEV Education Track: Build Apps with Google AI Studio

Ibrahim Joseph — Thu, 10 Jul 2025 00:08:35 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I set out to build a word of affirmation app. This app helps you to generate words of affirmation from different books.

My Prompt
"Build an affirmation application that generates words of affirmation that enrich one's spirit from the bible. Let the resulting word of affirmation be a card with an image with the affirmation text on it. Don't forget to add the author, book, chapters, verse, etc. Not,e don't just use only bible but also other good financial books and autosuggestion books like Napoleon Hill's book, Think and Grow Rich, and other good faith-driven book. Let the image card be downloadable. "

Demo

My Experience

Built a simple word of affirmation app using HTML, CSS, and JavaScript, integrated with Google AI Studio and Gemini models. The app features a "Generate" button that produces a new AI-generated affirmation with each click. Used AI Studio to craft and refine prompts, enabling a lightweight and uplifting user experience. Planning future enhancements to expand interactivity and personalization.

You should try it out and see for yourself.

How to setup your Typescript server in three steps

Ibrahim Joseph — Mon, 11 Jan 2021 21:45:23 +0000

In three simple steps, I will show you how to set up your server.

Steps

Create a folder called 'typescript-server'
Create src folder inside 'typescript-server' and create index.ts file.
cd into the typescript-server folder and initialize your project by running;

Before we go on please add the following code we will be testing on into the index.ts file

console.log("Hello, Dev.to");

So that anytime we run our code we will be seeing some output on the console.

npm init -y

the above code will create a package.json file that will hold all your dependencies for the project.

install the needed dependencies:

yarn add -D @types/node

yarn add -D typescript

yarn add -D ts-node

yarn add -D nodemon

or you install all of them once

yarn add -D @types/node typescript ts-node nodemon

Create the ts config by running;

npx tsconfig.json

at the terminal, some options will pop up asking you to select which platform are you using, select node.

open your package.json file and add the following code under the script tag

"watch": "tsc -w",

then your package.json will look like this

{
  "name": "lireddit-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "tsc -w",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.14.20",
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}

to test if what we have done so far is correct, now run the app with yarn watch. Note, you must have npm, and yarn install in your system to avoid any complexity.

To use the Installed nodemon

you need to add another line onto your script section in the package.json file. Now add the follow to your package.json file;

"dev": "nodemon dist/index.js",

I know you will be wondering where do we have the dist/index.js from, don't worry about it. when you run the yarn watch, it compiles and generates a dist/index.js file.

For us to have all the different ways of running our project, I will just go ahead and add all the run scripts for you. after adding all the run script, this is how your package.json will look like now.

{
  "name": "lireddit-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "tsc -w",
    "dev": "nodemon dist/index.js",
    "devIn": "nodemon --exec ts-node src/index.ts",
    "start": "node dist/index.js",
    "startIn": "ts-node src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.14.20",
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}

You can now run your app using the following commands;

yarn watch

yarn dev

yarn devIn

yarn start

yarn startIn

Thank you for reading this little piece of my typescript set up!

Focus on the input, the output wouldn't fail.

Ibrahim Joseph — Fri, 18 Dec 2020 01:40:49 +0000

Focus on input and the output will not fail you if you get the input and operation right! Yes, that is it, I know you will be like... what? but don't worry I will explain myself.

The first time I made this statement, it was a shocker to some people until they read it again. Sometimes I find myself in such a situation where I am doing the right thing on the wrong input or vice versa. so I end up in a frustrated state of mind but after I have realized that I am doing something wrong and figure which is which...I get relief like am in heaven!

I am looking for a way to tell the world the thing(s) you have found yourself doing wrong but expecting the right output/expect result but until you figure out what you are not doing right, you have already wasted a lot of time. please let's help someone to not waste time on something you have encountered before by dropping a comment on that thing and how you figure it out. And I promise to add it to this post to help someone out there.