Future: Anietie Brownson

Building a Card Matching Game with Gemini and Google AI Studio

Anietie Brownson — Fri, 04 Jul 2025 11:56:55 +0000

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

What I Built

So I decided to play around with the Google AI studio and in the process I built a Card Matching Game with an AI opponent. The game logic involves a human player and an AI taking turns to flip two face-down cards to find matching pairs. I prompted Gemini to define behavior like card flipping, score tracking, and memory-based AI decision-making. I also added a fun feature where the card image theme changes after each game from animals to emojis to space objects.

Key prompts I used:

“Build a card matching game where the player competes against an AI opponent. Cards are displayed face-down in a grid with a black back design. When a player (human or AI) takes a turn, they can click (or select) two cards. Each selected card flips to reveal its image. If the two revealed cards match, they remain face-up and the player earns a point and continues their turn. If they do not match, the cards flip back face-down after a short delay and the turn passes to the next player. The AI should remember previous card positions to make smarter choices. At the end of the game, the player with the most matched pairs wins. After each game, the theme of the card images e.g animals, fruits, space, emojis should randomly change for the next match. use Imagen api to generate the visuals and at the end of the game, a pop up modal shows announcing the winner and a button to start a new game”

“The AI opponent in the card matching game should follow the same rules as the human player. On its turn, the AI should only flip two cards, one after the other. If the cards match, they stay face-up and the AI continues its turn. If they don't match, the cards should flip back face-down after a short delay and the turn passes to the human player. Do not reveal or flip all cards on the board at any point. The AI can remember previously revealed card positions to make smarter decisions but it should never bypass the flipping rules or expose the full board.”

Demo

Below are some screenshots from the app

The initial loading screen

The new game screen

Opening moves

And here's the link to my applet where you can play the game for yourself

My Experience

I'm no stranger to working with AI tools so using Gemini in Google AI Studio felt intuitive. I was impressed by how responsive the model was to clear and structured prompts. I realized that prompt precision directly impacted how playable the game became especially in restricting the AI to just picking two cards at a time and stopping it from revealing the entire board all at once.

I also enjoyed customizing the game's design logic like flipping animations and dynamic themes purely through descriptive instructions. There were a few errors (what model doesn’t have them?) but Gemini was able to fix them with minimal intervention from me. This project highlighted how efficient AI can be at scaffolding interactive logic while significantly reducing iteration time.

All in all, it was a nice and well-spent 30 minutes of my time.

Hello Future 👋

Anietie Brownson — Fri, 17 Jan 2025 23:50:44 +0000

Testing out this new experimental subforem. I'm pretty excited to see what the future holds (pun intended).

My Hacktoberfest Journey: Contributing to Open Source and Building Skills

Anietie Brownson — Wed, 30 Oct 2024 23:04:23 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience

Introduction

Participating in this year's Hacktoberfest has been a particularly enriching experience for me. I was able to contribute to three exciting open-source projects: Tolgee, CopilotKit, and Webcrumbs. Not only did I complete the challenge of having four pull requests merged, I was also able to surpass the milestone, completing over four PRs. This reflection captures my journey, insights, and motivation throughout the process.

Why I Participated

I decided to participate in Hacktoberfest because I wanted to challenge myself and improve my skills as a developer and contributing to open-source provides a fantastic way to learn new technologies while working on real-world projects. Additionally, I wanted to connect with other like-minded individuals who share a passion for coding and technology and contribute to projects that I really enjoyed using. Finally, I participated because the sense of accomplishment that comes from collaborating with others and creating something valuable is truly rewarding.

The Projects

Tolgee: This is a project that helps developers easily implement in-context translation and edit translations directly in their applications. I contributed to this project by building demos that utilized the project's translation capabilities.

I was able to learn about translation and the documentaion was straightforward enough that I was able to work on the projects after reading through it. The maintainers were quite quite helpful in ensuring that we were able to contribute and merge our PRs successfully.

CopilotKit: In this project, I was able to dive into the world of AI chatbots tools. My contributions to the project included working on some demos which helped me gain a deeper understanding of AI applications in coding

I was also able to hangout on their discord channel where I had the opportunity to meet new people, share ideas and experiences and generally just have fun. Their maintainers were also helpful in answering questions and making sure we were all able to contribute successfully.

Webcrumbs: This is another cool project that I worked on. Webcrumbs has a nocode development tool called Frontend AI that enables you quickly create components. You just write some prompts and it outputs the component for you and you can get the code. My contributions included trying out the tool by writing prompts to create beautiful templates.

I also hung out on their discord channel where I met other people and and saw what beautiful components they were able to create with the tool. Their maintainers were also on hand to answer questions and help give feedback to contributors.

Accomplishments

Completing the required minimum of four PRs and even exceeding that number was a highlight of my Hacktoberfest journey. Each PR was an opportunity to learn and grow, from mastering Git workflows to understanding the intricacies of the projects to working on the projects. The feedback I received from maintainers and other contributors was incredibly beneficial, helping me improve my code quality and collaboration skills. The feeling I got when I saw my contributions merged was deeply satisfying and fulfilling.

Key Takeaways

One of the most significant lessons I learned during the event was the importance of effective communication within open-source communities. Clear and concise documentation not only helps contributors but also fosters a collaborative spirit. I also realized the value of constructive feedback which not only helps you grow as a developer but also strengthens the community as a whole.

Engaging with other contributors also helped me appreciate the diverse perspectives in problem-solving. The collaborative nature of open-source projects often leads to more innovative solutions and helps cultivate a supportive environment where everyone can thrive.

Conclusion

My Hacktober experience has been really rewarding, allowing me to work on my skills as a developer and connect with a vibrant community. Contributing to the Tolgee, CopilotKit, and Webcrumbs projects allowed me to develop my technical skills while making meaningful connections within the developer community and also deepening my appreciation for collaboration in the open-source community. With the experience I have gained, I look forward to continuing my open-source journey and applying the valuable lessons I have learned along the way. Thank you to all the maintainers, contributors and organizers that made Hacktoberfest such a memorable experience!

How I Built a Music Lyric Finder App with CopilotKit and Next.js: A Step-by-Step Guide

Anietie Brownson — Mon, 28 Oct 2024 01:10:26 +0000

Hello there, my fellow open-source warriors! As the season of Hacktoberfest draws to a close, I hope you are making good progress with your contributions. Today I want to share with you how we can use the AI capabilities of Copilotkit to develop a web app that lets users search for song lyrics. Below are the key technologies we'll be using to build this project:

Next.js: A React framework that enables server-side rendering and static site generation for building fast, scalable web applications.
Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
Shadcn UI: An open-source UI component library designed for modern web applications.
CopilotKit: An open-source tool that makes it easy to integrate production-ready Copilots into any application. With CopilotKit, you can seamlessly implement custom AI chatbots and AI agents to enhance the functionality of your application.

Project Setup

First, we'll create a new Next.js app. (At the time of writing this article, I'm using Next.js 14)

npx create-next-app@latest

Choose your preferred options and then cd into your project and install the following dependencies:

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime

Head on over to Groq Console, register for a new account if you don't have one and then in your dashboard, generate an API key

Now in the root of your project, create an .env.local file and paste in your API key and the following parameters like so:

GROQ_API_KEY="groq api key"
GROQ_MODEL="llama3-8b-8192"

Cool!, before we start working on the project, quickly install the ShadcnUI library:

npm install npx shadcn@latest init

Choose your preferred configuration and then use the command below to get the Card component

npx shadcn@latest add card

Optionally, you can also install the react-icons library

npm install react-icons --save

Now that we have that out of the way, let's dive into building the project

Building the Project

We'll first of all start with the backend part of our app. Inside the app folder create a api folder. Inside the api folder, create two folders namely: actions and copilotkit. Your folder structure should look like this:

├── app
│ ├── api
│ │ ├── actions
│ │ └── copilotkit

Create a file called lyric.ts inside the actions folder. Copy the code below:

"use server";

export async function fetchLyrics({ song, artist }: { song: string; artist: string }) {

    const URL = `https://api.lyrics.ovh/v1/${artist}/${song}`; // url to access the lyrics api

    try {
        const response = await fetch(URL);

        if (!response.ok) {
            throw new Error("Lyrics not found");
        }

        const data = await response.json();

        return data.lyrics || "Lyrics not found.";
    } catch (error) {
        console.error("Error fetching lyrics:", error);
        return "An error occurred while fetching lyrics.";
    }
}

Open the copilotkit folder and create a route.ts file. Copy the code below:

import {
  CopilotRuntime,
  GroqAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { Groq } from "groq-sdk";
import { NextRequest } from "next/server";

const groq = new Groq({ apiKey: process.env.GROQ_API_KEY });
const groqAdapter = new GroqAdapter({
  groq,
  model: process.env.GROQ_MODEL,
});

const runtime = new CopilotRuntime();

export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    serviceAdapter: groqAdapter,
    endpoint: "/api/copilotkit",
  });

  return handleRequest(req);
};

Now we're done with the backend of our app. For the frontend, open the components folder created for us and create a file called LyricFinder.tsx. Your folder structure should look like this:

├── components
│ ├── ui
│ ├── LyricFinder.tsx

Now copy the code below:

"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CiMusicNote1 } from "react-icons/ci";
import { fetchLyrics } from "@/app/api/actions/lyrics";
import { useCopilotAction } from "@copilotkit/react-core";

export default function LyricFinder() {
  const [lyrics, setLyrics] = useState<string | null>(null); // State to hold the lyrics
  const [artist, setArtist] = useState<string>(""); // State to hold the artist name
  const [song, setSong] = useState<string>(""); // State to hold the song title

  // The useCopilotAction hook enables the copilot to perform actions within the app
  // Here, we're using the searchLyrics action to search for lyrics of a song
  useCopilotAction(
    {
      name: "searchLyrics",
      description: "Search for lyrics of a song.",
      parameters: [
        {
          name: "SongLyrics",
          type: "object",
          description: "The song and artist to search for.",
          attributes: [
            {
              name: "artist",
              type: "string",
              description: "The name of the artist.",
              required: true,
            },
            {
              name: "song",
              type: "string",
              description: "The title of the song.",
              required: true,
            },
          ],
          required: true,
        },
      ],
      // Handler function that searches for lyrics using the SongLyrics parameter
      handler: async ({
        SongLyrics,
      }: {
        SongLyrics: { artist: string; song: string };
      }) => {
        const { artist, song } = SongLyrics;
        setArtist(artist); // Updates artist state
        setSong(song); // Updates song state
        const fetchedLyrics = await fetchLyrics({ song, artist }); // Calls the fetchLyrics function
        setLyrics(fetchedLyrics); // Updates state with fetched lyrics
        return fetchedLyrics; // Returns the fetched lyrics
      },
      render: "Searching for lyrics...",
    },
    []
  ); // Dependency array (empty in this case)

  return (
    <>
      <header className="p-4 fixed bg-white w-full">
        <span className="flex gap-x-8 items-center">
          <CiMusicNote1 size={30} />
          <h1 className="text-3xl font-bold">Music Lyric Finder</h1>
        </span>
      </header>

      <section className="overflow-x-auto pt-20 px-4">
        <Card className="p-4">
          <CardHeader>
            <CardTitle>
              <div className="flex flex-col gap-y-5">
                <p>Artist: {artist}</p>
                <p>Song: {song}</p>
              </div>
            </CardTitle>
          </CardHeader>
          <CardContent>
            {lyrics ? (
              <pre className="whitespace-pre-wrap">{lyrics}</pre>
            ) : (
              <p>Lyrics will be displayed here</p>
            )}
          </CardContent>
        </Card>
      </section>
    </>
  );
}

Open the page file in the root of your app folder and paste the code below:

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
import LyricFinder from "../components/LyricFinder";

export default function Home() {
  return (
    <>
      <CopilotKit runtimeUrl="/api/copilotkit">
        <CopilotSidebar
          instructions={
            "Help the user search for lyrics for their favorite songs."
          }
          labels={{
            title: "Xi 👩", // Title displayed in the sidebar
            initial:
              "👋 Hi! I'm Xi, here to help you find lyrics for your favorite songs. Just type the song title and artist, and I'll get the lyrics for you.", // Initial greeting message
          }}
          defaultOpen={true} // Sidebar will be open by default
          clickOutsideToClose={false} // Prevents the sidebar from closingwhen clicking outside
        >
          <LyricFinder />
        </CopilotSidebar>
      </CopilotKit>
    </>
  );
}

Sweet! We're done with building the app. Open your terminal and start the development server

npm run dev

Open http://localhost:3000 in your browser to view the app.

Conclusion

That’s a wrap! In this tutorial, we successfully used CopilotKit to build a Music Lyric Finder app, showcasing how easy it is to integrate AI into our application.

You can view the complete source code in this Github repo

Here's a live demo of the project here

Got any questions? Ask in the comments

Happy Hacking!

How to Build a Weather Forecast App with React, TypeScript, Tolgee and OpenWeather API

Anietie Brownson — Tue, 22 Oct 2024 00:46:59 +0000

Introduction

Weather apps are a great way to practice building real-world applications, and so in the spirit of Hacktoberfest and with the power of Vite, TypeScript, and Tolgee, we will create a beautiful and multilingual weather app. Vite provides us with a lightning-fast development environment, TypeScript ensures our app is type-safe, and Tolgee simplifies internationalization (i18n), allowing our app to support multiple languages with ease.

In this tutorial, we'll walk through the process of building the weather app using:

Vite: For a fast, modern development experience.
TypeScript: For type safety.
Tolgee: To effortlessly manage translations.
OpenWeather API: To fetch real-time weather data.

Let's dive in!

Project Setup

Before we can start coding, let's get our project set up.

Install Vite:

Start by creating a new Vite project. Run the command below:

npm create vite@latest weather-app --template react-ts
cd weather-app
npm install

This sets up a Vite project using React and TypeScript.

Install TailwindCSS
Next, let's install TailwindCSS, a utility-first CSS framework that provides us with a set of classes to style our app. Run:

npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS:
After installation, initialize Tailwind CSS. This will create a tailwind.config.js file in your project:

npx tailwindcss init -p

Open the tailwind.config.js file add the following code:

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind’s directives to your CSS:
Open the index.css file and add the following lines to include Tailwind’s base, components, and utilities:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

Install React Icons

To add icons to our app, we'll install React Icons. Run:

npm install react-icons

Install Tolgee:

Next, we'll install Tolgee. Tolgee makes it easy to implement in-context translation and edit translations directly in your app. Install it by running:

npm install @tolgee/react

Now visit the Tolgee website to create an account and get your API key.

Get your OpenWeather API key:

Go to the root of the project and create a .env file to store your API keys gotten from the Tolgee and OpenWeather websites:

VITE_APP_TOLGEE_API_URL=https://app.tolgee.io
VITE_APP_TOLGEE_API_KEY=your-api-key
WEATHER_API_KEY=your-openweather-api-key

Quickly install type definitions for our app

npm i --save-dev @types/node

Open your vite.config.ts file and paste the code below

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    define: {
      "process.env.VITE_APP_TOLGEE_API_URL": JSON.stringify(
        env.VITE_APP_TOLGEE_API_URL
      ),
      "process.env.VITE_APP_TOLGEE_API_KEY": JSON.stringify(
        env.VITE_APP_TOLGEE_API_KEY
      ),
      "process.env.WEATHER_API_KEY": JSON.stringify(env.WEATHER_API_KEY),
    },
    plugins: [react()],
  };
});

Building the App

With our project set up, it's time to dive into building the core functionality. Copy the following code into main.tsx:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Tolgee, DevTools, TolgeeProvider, FormatSimple } from "@tolgee/react";
import App from "./App.tsx";
import "./index.css";

const tolgee = Tolgee().use(DevTools()).use(FormatSimple()).init({
  language: "en",

  // for development
  apiUrl: process.env.VITE_APP_TOLGEE_API_URL,
  apiKey: process.env.VITE_APP_TOLGEE_API_KEY,
});

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TolgeeProvider tolgee={tolgee} fallback="Loading...">
      <App />
    </TolgeeProvider>
  </StrictMode>
);

Now, in the root of your project, create a components folder and two files inside it - LanguageSelect.tsx and Loader.tsx

Inside the LanguageSelect.tsx file, add the following code:

import { T, useTolgee } from "@tolgee/react";

export default function LanguageSelect() {
  const tolgee = useTolgee(["language"]);
  return (
    <div className="flex items-center space-x-2">
      <label
        htmlFor="language-select"
        className="block text-sm font-medium text-gray-700 mb-1"
      >
        <T keyName="label">Change Language</T>
      </label>
      <select
        value={tolgee.getLanguage()}
        onChange={(e) => tolgee.changeLanguage(e.target.value)}
        className="border border-slate-500 z-50"
      >
        <option value="en">English</option>
        <option value="es">Español</option>
        <option value="ar">العربية</option>
        <option value="zh-Hans">中文</option>
      </select>
    </div>
  );
}

Inside the Loader.tsx file, add the following code:

// import React from 'react'

const RippleLoader = () => {
  return (
    <div className="lds-ripple relative inline-block w-20 h-20">
      <div className="absolute border-4 border-current rounded-full opacity-100 animate-ripple"></div>
      <div className="absolute border-4 border-current rounded-full opacity-100 animate-ripple delay-100"></div>

      <style>{`
        .lds-ripple div {
          animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        }

        .lds-ripple div:nth-child(2) {
          animation-delay: -0.5s;
        }

        @keyframes lds-ripple {
          0% {
            top: 36px;
            left: 36px;
            width: 8px;
            height: 8px;
            opacity: 0;
          }
          4.9% {
            top: 36px;
            left: 36px;
            width: 8px;
            height: 8px;
            opacity: 0;
          }
          5% {
            top: 36px;
            left: 36px;
            width: 8px;
            height: 8px;
            opacity: 1;
          }
          100% {
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            opacity: 0;
          }
        }
      `}</style>
    </div>
  );
};

export default RippleLoader;

Now open your App.tsx file and add the following code:

import { useState, useEffect } from "react";
import { T, useTranslate } from "@tolgee/react"; // Importing translation functions from Tolgee

import "./App.css";

import { FaMapMarkerAlt } from "react-icons/fa";
import { FaDroplet, FaWind } from "react-icons/fa6";
import { BiSearch } from "react-icons/bi";

import LanguageSelect from "./components/LanguageSelect";
import RippleLoader from "./components/Loader";

// Defining types for weather data
interface WeatherData {
  name: string;
  main: {
    temp: number;
    humidity: number;
  };
  weather: {
    description: string;
    icon: string;
  }[];
  wind: {
    speed: number;
  };
}

// Defining types for forecast data
interface ForecastData {
  list: {
    dt: number;
    main: {
      temp: number;
    };
    weather: {
      icon: string;
    }[];
  }[];
}

function App() {
  // State variables to store city name, weather data, forecast data, loading state, and errors
  const [city, setCity] = useState<string>(""); // City input value
  const [weatherData, setWeatherData] = useState<WeatherData | null>(null); // Current weather data
  const [forecastData, setForecastData] = useState<ForecastData | null>(null); // Forecast data
  const [loading, setLoading] = useState<boolean>(false); // Loading state
  const [error, setError] = useState<string | null>(null); // Error message

  const { t } = useTranslate(); // Tolgee translation hook

  // Function to fetch weather and forecast data from OpenWeather API
  const fetchWeatherData = async (cityName: string) => {
    const apiKey = process.env.WEATHER_API_KEY; // Fetching the API key from environment variables
    const currentWeatherUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=metric`; // API URL for current weather
    const forecastUrl = `https://api.openweathermap.org/data/2.5/forecast?q=${cityName}&appid=${apiKey}&units=metric`; // API URL for 3-day forecast

    try {
      setLoading(true); // Setting loading state
      setError(null); // Resetting error state

      // Fetching current weather data
      const weatherResponse = await fetch(currentWeatherUrl);
      if (!weatherResponse.ok) {
        throw new Error("City not found! Try another one"); // Error if city not found
      }
      const weatherData: WeatherData = await weatherResponse.json(); // Parsing weather data
      setWeatherData(weatherData); // Setting the fetched weather data

      // Fetching forecast data
      const forecastResponse = await fetch(forecastUrl);
      if (!forecastResponse.ok) {
        throw new Error("Unable to fetch forecast data"); // Error if forecast data not available
      }
      const forecastData: ForecastData = await forecastResponse.json(); // Parsing forecast data
      setForecastData(forecastData); // Setting the fetched forecast data
    } catch (error) {
      // Handling any errors that occur during the fetch
      if (error instanceof Error) {
        setError(error.message); // Displaying error message
      }
      setWeatherData(null); // Resetting weather data
      setForecastData(null); // Resetting forecast data
    } finally {
      setLoading(false); // Resetting loading state
    }
  };

  // Handling form submission to fetch weather data based on city input
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    fetchWeatherData(city);
    setCity("");
  };

  // useEffect to fetch the user's location and display the weather for the current location
  useEffect(() => {
    const getUserLocation = async () => {
      if (navigator.geolocation) {
        // Checking if geolocation is available
        navigator.geolocation.getCurrentPosition(
          async (position) => {
            const { latitude, longitude } = position.coords; // Getting user's device location
            const apiKey = process.env.WEATHER_API_KEY;
            const reverseGeocodeUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`; // API URL for reverse geocoding (get location by lat/lon

            try {
              setLoading(true);
              const response = await fetch(reverseGeocodeUrl); // Fetching weather data by geolocation
              if (!response.ok) {
                throw new Error("Unable to fetch location data"); // Error if location data fetch fails
              }
              const data: WeatherData = await response.json(); // Parsing weather data
              setWeatherData(data); // Setting the fetched weather data
              setCity(data.name); // Setting the city based on fetched location
              await fetchWeatherData(data.name); // Fetching weather data for the fetched city
            } catch (error) {
              // Handling any errors that occur during the fetch
              if (error instanceof Error) {
                setError(error.message); // Displaying error message
              }
              setWeatherData(null); // Resetting weather data
              setForecastData(null); // Resetting forecast data
            } finally {
              setLoading(false); // Resetting loading state
            }
          },
          () => {
            // Handling geolocation errors (e.g., if user denies location access)
            setError("Unable to retrieve your location");
            setWeatherData(null);
            setForecastData(null);
          }
        );
      } else {
        // Handling case where geolocation is not supported by the browser
        setError("Geolocation is not supported by this browser.");
        setWeatherData(null);
        setForecastData(null);
      }
    };

    getUserLocation(); // Invoking the function to get user location on page load
  }, []); // Empty dependency array to run effect once on component mount

  return (
    <>
      <section className="flex flex-col items-center justify-center min-h-screen px-3">
        <LanguageSelect />
        <div className="mt-3 bg-slate-400/50 rounded shadow-lg border border-white/30 p-5 w-full md:w-[350px]">
          <div>
            <form className="relative" onSubmit={handleSubmit}>
              <input
                type="text"
                name="search"
                placeholder={t("search_city", "Search City")} // Translation for placeholder text
                className="w-full px-4 py-2 border rounded-full text-white/70 bg-[#668ba0] focus:outline-none border-transparent focus:border-[#668ba0]"
                value={city}
                onChange={(e) => setCity(e.target.value)}
              />
              <button type="submit" className="absolute top-3 right-3">
                <BiSearch className="text-white/70" size={20} />
              </button>
            </form>
          </div>

          {loading && (
            <div className="flex justify-center items-center">
              <RippleLoader />
            </div>
          )}
          {error && (
            <p className="text-red-600 font-bold flex justify-center items-center">
              {error}
            </p>
          )}

          {!error && weatherData && (
            <div>
              {/* Displaying current weather data */}
              <div className="flex justify-between items-center text-white font-bold">
                <span className="flex items-center gap-x-2">
                  <FaMapMarkerAlt size={20} />
                  <p className="text-xl font-serif">{weatherData.name}</p>
                </span>

                <div className="flex flex-col items-center">
                  <img
                    src={`https://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png`}
                    alt="weather icon"
                  />{" "}
                  {/* Weather icon */}
                  <span>
                    <p className="text-6xl font-bold text-white">
                      {Math.round(weatherData.main.temp)} °C
                    </p>
                  </span>
                </div>
              </div>

              <div className="my-5 flex justify-between items-center">
                {/* Humidity */}
                <div className="flex items-center gap-x-3">
                  <FaDroplet size={30} className="text-white/90" />
                  <span>
                    <p className="text-lg font-serif text-white font-bold">
                      <T keyName="humidity">Humidity</T>
                    </p>
                    <p className="text-lg font-medium text-white/90">
                      {weatherData.main.humidity}%
                    </p>
                  </span>
                </div>

                {/* Wind Speed */}
                <div className="flex w-1/2 items-center gap-x-3">
                  <FaWind size={30} className="text-white/90" />
                  <span>
                    <p className="text-lg font-serif text-white font-bold">
                      <T keyName="wind_speed">Wind Speed</T>
                    </p>
                    <p className="text-lg font-medium text-white/90">
                      {weatherData.wind.speed} km/h
                    </p>
                  </span>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>
    </>
  );
}

export default App;

In our code above, we wrapped some of the tags with the T tag from Tolgee to be able to provide multilingual support. We also used the useTolgee hook to get the current language and change the language when the user selects a different option.

Finally, open your App.css file and add the following styles:

body {
    background-color: #98c7da; /* Replace with your desired background color */
    background-image: url("./assets/mountain-view.jpg");  /* Replace with the file path to your background image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-repeat: no-repeat;
    background-position: inherit;
    background-size: inherit;
    filter: blur(5px);
    z-index: -1;
}

Now open the app in your browser http://localhost:5173/, you should see something like this:

Add translation support to our app

On your browser, hold down your ALT key and hover over the "Forecast for the next 3 days" text or any other text we wrapped with the T tag and tap on it. A popup should appear like so:

Write down the text you want to be translated in the English text box and scroll down and click the create button

Go to your Tolgee app dashboard, click on the translations tab and locate the new key you just created

On the right as in the picture above, select the language and choose the translation and then hit save. Now do the same for the other text wrapped with the T tag and there we've successfully added translation support to our app with Tolgee.

Conclusion

We've successfully built a weather app using Vite, TypeScript and TailwindCSS and integrated with the OpenWeather API to provide real-time weather data. With Tolgee, we added multilingual support, making the app accessible to users in different regions. This project demonstrates how modern tools can help us quickly build and scale applications while ensuring internationalization.

Got any questions? Ask in the comments

Happy Hacking!

Building a Country-to-Flag Emoji Converter App with Vite, TypeScript, and Tolgee

Anietie Brownson — Fri, 11 Oct 2024 14:39:55 +0000

Introduction

Hello there friends, we're still in the season of Hacktoberfest and in this blog post, we'll build a simple Country-to-Flag Emoji Converter App. We will utilize some great tools and technologies:

Vite: A modern build tool that significantly improves the development experience with its fast hot module replacement (HMR) and optimized build processes. Vite is perfect for building fast applications and is particularly well-suited for projects using frameworks like React.
TypeScript: A superset of JavaScript that adds static typing. By using TypeScript, we can catch errors early in the development process, making our code more robust and maintainable. It enhances the developer experience by providing better autocompletion and type-checking capabilities.
Tailwind CSS: A utility-first CSS framework that allows for rapid design and styling of components. With Tailwind, we can easily create responsive layouts without the need for writing extensive CSS. It enables us to focus on building our application without getting bogged down in design details.
Tolgee: A powerful localization tool that simplifies the process of adding internationalization (i18n) to our app. With Tolgee, we can easily manage translations, enabling users from different linguistic backgrounds to interact with our app comfortably.
REST Countries API: An API that provides detailed information about countries, including their flags, names, and codes. This API will be the backbone of our application, allowing us to fetch flag emojis based on user input.

Let's dive into building our Country-to-Flag Emoji Converter!

Section 1: Setting Up the Project

Hold up, before we actually jump into coding, let’s set up our project environment. In this section, we will initialize a new Vite project with TypeScript, configure Tailwind CSS for styling, and integrate Tolgee for localization. This foundational setup is crucial for building a well-structured and maintainable application.

1. Initialize the Vite App

To start, we need to create a new Vite project configured for TypeScript. Vite offers a simple and quick setup process. Follow these steps:

Open your terminal: Ensure you have Node.js and npm installed on your machine. You can check your installations with the following commands:

   node -v
   npm -v

Create a new Vite project: Run the following command to create a new Vite project. Replace country-flag-emoji-converter with your desired project name:

   npm create vite@latest country-flag-emoji-converter -- --template react-ts

Navigate to the project directory:

   cd country-flag-emoji-converter

Install dependencies: Once inside the project directory, install the required dependencies:

   npm install

Start the development server: Run the following command to start the Vite development server:

   npm run dev

Open your browser and navigate to http://localhost:5173/ to see your Vite app in action. You should see the default Vite welcome screen.

2. Install and Configure Tailwind CSS

Now that we have our Vite app set up, we can proceed to install and configure Tailwind CSS. Tailwind CSS allows for rapid and responsive UI development using utility classes.

Install Tailwind CSS: Use npm to install Tailwind CSS and its peer dependencies:

   npm install -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS: After installation, initialize Tailwind CSS. This will create a tailwind.config.js file in your project:

   npx tailwindcss init -p

Configure Tailwind to remove unused styles in production: Open the tailwind.config.js file and update the content array to include your HTML and TypeScript files:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };

Add Tailwind’s directives to your CSS: Open the src/index.css file (or create one if it doesn’t exist) and add the following lines to include Tailwind’s base, components, and utilities:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

Start your development server: If it’s not already running, start your Vite development server again with:

   npm run dev

You can now use Tailwind CSS classes in your components to style your app.

3. Install Tolgee

To make our app accessible to users in different languages, we’ll integrate Tolgee for localization. Tolgee simplifies the process of managing translations in React applications.

Install Tolgee: Run the following command to install Tolgee and its React package:

   npm install @tolgee/react

Copy the code below to wrap your App component in your main.tsx file:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Tolgee, DevTools, TolgeeProvider, FormatSimple } from "@tolgee/react";
import App from "./App.tsx";
import "./index.css";

const tolgee = Tolgee().use(DevTools()).use(FormatSimple()).init({
  language: "en",

  // for development
  apiUrl: process.env.VITE_APP_TOLGEE_API_URL,
  apiKey: process.env.VITE_APP_TOLGEE_API_KEY,

});

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TolgeeProvider tolgee={tolgee} fallback="Loading...">
      <App />
    </TolgeeProvider>
  </StrictMode>
);

Create an env file for your keys
Visit the Tolgee website to get your API key and put in your env file like so:

VITE_APP_TOLGEE_API_URL=https://app.tolgee.io
VITE_APP_TOLGEE_API_KEY=your-api-key

An error will popup in your main.tsx file so we're going to install type definitions for our vite app

npm i --save-dev @types/node

Now open your vite.config.ts file and paste the code below

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      'process.env.VITE_APP_TOLGEE_API_URL': JSON.stringify(env.VITE_APP_TOLGEE_API_URL),
      'process.env.VITE_APP_TOLGEE_API_KEY': JSON.stringify(env.VITE_APP_TOLGEE_API_KEY)
    },
    plugins: [react()],
  }
})

Now we have setup our project with Vite, TypeScript, Tailwind CSS, and Tolgee for localization. We’re ready to start building the core features of your Country-to-Flag Emoji Converter app. In the next sections, we will dive into creating the main functionality and user interface for our application.

Section 4: Building the main project

In your src folder, create a file called LanguageSelect.tsx and paste the code below

import { T, useTolgee } from "@tolgee/react";

export default function LanguageSelect() {
  const tolgee = useTolgee(["language"]);
  return (
    <div className="flex items-center space-x-2">
      <label
        htmlFor="language-select"
        className="block text-sm font-medium text-gray-700 mb-1"
      >
        <T keyName="label">Change App Language</T>
      </label>
      <select
        value={tolgee.getLanguage()}
        onChange={(e) => tolgee.changeLanguage(e.target.value)}
        className="border border-slate-500 z-50"
      >
        <option value="en">English</option>
        <option value="fr">Français</option>
        <option value="de">German</option>
      </select>
    </div>
  );
}

we import { T, useTolgee } from "@tolgee/react" to use the tolgee library

Here <T keyName="label">Change App Language</T>, we wrap the text in the T tag provided by tolgee to be able to translate the text to the other languages we listed in our option tags

Now open your App.tsx file and paste the code below

import { useState } from "react";
import { T, useTranslate } from "@tolgee/react";
import LanguageSelect from "./LanguageSelect";


export default function App() {
  const [country, setCountry] = useState("");
  const [flag, setFlag] = useState("");
  const { t } = useTranslate();

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCountry(e.target.value);
  };

  const fetchFlag = async () => {
    if (country.trim() === "") return;
    try {
      const response = await fetch(
        `https://restcountries.com/v3.1/name/${country}`
      );
      const data = await response.json();
      if (data && data[0] && data[0].flags) {
        setFlag(data[0].flags.png);
      } else {
        setFlag("Country not found");
      }
    } catch (error) {
      setFlag("Error fetching data");
    }
  };

  return (
    <>
      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
        <LanguageSelect />
        <div className="p-6 bg-white shadow-lg rounded-md w-full max-w-4xl text-center mt-4">
          <h1 className="font-bold text-3xl mb-4">
            <T keyName="app_title">
              Flagmoji | Country to Flag Emoji Converter
            </T>
          </h1>
          <T keyName="flag_emoji_short_text">
            Type a country name to see its flag emoji.
          </T>
          <div className="flex flex-col lg:flex-row lg:items-center lg:space-x-4">
            <div className="flex flex-col w-full lg:w-1/2 my-5 lg:mb-0">
              <input
                type="text"
                value={country}
                onChange={handleInputChange}
                placeholder={t("placeholder_country_name", "Enter country name")}
                className="border p-2 rounded-md mb-2 w-full"
              />
              <div className="flex items-start mt-3">
                <button
                  onClick={fetchFlag}
                  className="bg-slate-800 text-white py-1 px-4 rounded hover:bg-slate-900"
                >
                  <T keyName="button_fetch_flag">View</T>
                </button>
              </div>
            </div>
            {flag && (
              <div className="flex justify-center lg:w-1/2 mt-4 lg:mt-5">
                {flag.startsWith("http") ? (
                  <img src={flag} alt="Country flag" className="w-32 h-32" />
                ) : (
                  <p>{flag}</p>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

So we import { T, useTranslate } from "@tolgee/react" and in this line of code const { t } = useTranslate(); we use the destructuring assignment to extract the translation function t from the object returned by the useTranslate hook.

The function const fetch flag is to call the Rest Countries API and use it in our app

We wrap this text using the T tag to be able to translate them
<T keyName="app_title">Flagmoji | Country to Flag Emoji Converter</T> <T keyName="flag_emoji_short_text">Type a country name to see its flag emoji.</T>

and here as well placeholder={t("placeholder_country_name", "Enter country name")}

Now open the app in your browser localhost:5173/, you should see this:

Section 5. Translating our App

On your browser, hold down your ALT key and hover over the Change App Language text and tap on it. A popup should appear like so:

write down the text you want to translate in the English text box and scroll down and click create

Go to your tolgee app dashboard, click on the translations tab and locate the new key you just created

On the right in the picture above, select the language and the translation and save. Voila!, you just added translations to your app. Now do the same for the other text we wrapped with the T tag

Conclusion

In this blog post, we just built a simple Country-to-Flag Emoji Converter app. Leveraging the powerful combination of Vite for fast development, TypeScript for type safety, Tailwind CSS for responsive design, and Tolgee for seamless internationalization. The flexibility of these tools allowed us to efficiently implement key features and customize the app according to our needs.

Got any questions? Ask me in the comments

Happy coding!

MERN Stack: A Beginner's guide

Anietie Brownson — Wed, 15 Feb 2023 22:58:46 +0000

The MERN stack is a group of JavaScript-based technologies that are used for faster application development by developers worldwide. So therefore, if you have been coding with JavaScript and are quite familiar with JSON(JavaScript Object Notation) then learning and picking up this stack is going to be easier since the underlying language is just one - JavaScript.

Below we are going to examine each of them and you’ll find out what makes them so special and versatile in application development.

PREREQUISITES FOR LEARNING THE MERN STACK

To be able to pick up the stack, it’s imperative that you have a good grasp of the following technologies:

HTML
CSS
JavaScript

Let's now examine each component one by one

MongoDB

The first component in the stack is MongoDB which is a NoSQL database management system. By NoSQL, it means that it is a non-relational database and does not require a fixed schema or the traditional relational table model to store data. MongoDB stores the data using the BSON (Binary JavaScript Object Notation) format instead of rows and columns. This non-relational model for storing data makes for simplicity of design and easy scalability. Some features of MongoDB include:

It is document-oriented which means it stores data in document instead of rows and columns like SQL.
It provides data replication by creating multiple copies of data on different servers so that data is not lost in the event of a hardware failure.
Data retrieval is easier due to it's indexing feature. Every data stored is provided with primary and secondary indices which makes it easy to fetch data.

Express JS

Second on the list is Express JS which is a JavaScript server-side framework. It is a light and minimalist Node.js web framework and is used for building RESTful APIs and allows for faster and more scalable server-side web development. Some features of Express.js include:

It is easier and faster to build web applications using Express
It is easy to set up and is unopinionated.
It is single threaded and asynchronous which means it can process multiple tasks simultaneously.

React

This is the client-side or frontend component of the stack. React is a JavaScript library that allows developers to write reusable pieces of code that makes it easier to build scalable apps. Created by Jordan Walke from Meta Inc, it has grown to be one of the most popular JavaScript libraries in the developer ecosystem and is widely used to build web and mobile apps. Some features include:

It adheres to the declarative programming paradigm which means the developer specifies what the program will execute but not how the program will implement the execution.
Uses the component based approach which enables you to write reusable pieces of code that can be imported and used anywhere in the program.
React components can be written in JSX (JavaScript Syntax Extension) which is a syntax similar to HTML and this makes it quite intuitive to learn.
It uses virtual DOM(Document Object Model). React creates a virtual representation of the UI in memory and syncs it with the ‘real’ DOM whenever changes are made and this in turn loads pages faster as it only renders those components that actually changed.
Data flow is unidirectional and that means parent components pass down data to child

Node

Node is a cross-platform and open-source runtime environment that runs on the V8 JavaScript Engine and enables you to execute JavaScript outside of the browser. Node.js runs on various platforms (Unix, macOS, Windows, Linux etc.) and is one of the most popular tools for web development. Some features of Node.js include:

It is enables you write JavaScript outside of the browser
It uses asynchronous programming which means that it can start a potentially long-running task while still being responsive to other events without having to wait for the task to finish processing.
It is open-source and has a huge community of supporters which makes it easy to find help when need arises.

ADVANTAGES OF USING THE MERN STACK

It supports the MVC (Model View Controller) architecture which separates the presentation logic, the business logic and data.
It is open-source and has a large community of supporters. So therefore you can be sure of seeing answers to any questions or problems you might have.
It is easy to learn because all the web development stages from the front end to the back end uses the JavaScript language.
Apps built using the MERN stack are durable and scalable.

Real-life MERN stack examples

Some popular apps built using the MERN stack include Netflix, Uber, Coursera, Instagram, PayPal, Airbnb etc.

So in conclusion, we have been able to look at the different technologies that make up the MERN stack and why they are quite popular with developers.

Thank you for reading.

Does anyone still use Pattern Lab?

Anietie Brownson — Wed, 08 Jun 2022 20:26:32 +0000

In my bid to learn how to write better code, I started reading on design and UI best practices. I came across Brad Frost's Atomic Design and it was quite a good read. I would like to know if anyone still uses Pattern Lab nowadays

Working with Styled Components in ReactJS

Anietie Brownson — Wed, 16 Feb 2022 16:22:07 +0000

Does anyone know how to style images using Styled Components in React?
I can't seem to find a solution anywhere