DEV Community: Saurabh Nemade

Valentine day - Ask your girlfriend out in a geeky way

Saurabh Nemade — Mon, 12 Feb 2024 16:41:28 +0000

Recently I came across a #tiktok where they've shown an innovative concept of building a website to ask your girlfriend out on a date. So I decided to build it myself immediately a lot of comments were present on that #tiktok on how to create it.

Final Preview:

Git: https://github.com/saurabhnemade/will-you-be-my-valentine

Demo link: https://saurabhnemade.github.io/will-you-be-my-valentine/

Prerequisits

npm install -g pnpm

Let's Build this 🚀

First let's just create a react project with tailwindcss:

pnpm create vite will-you-be-my-valentine --template react-ts
cd will-you-be-my-valentine
pnpm install
pnpm install -D tailwindcss postcss autoprefixer
pnpm tailwindcss init -p
pnpm run dev

Now when you go the url generated like below where application is running. Visit it:

Update tailwinds.config.ts with

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

Go to src/index.css and replace everything with

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

Now update src/App.tsx with

"use client";
import { useState } from "react";

export default function Page() {
  const [noCount, setNoCount] = useState(0);
  const [yesPressed, setYesPressed] = useState(false);
  const yesButtonSize = noCount * 20 + 16;

  const handleNoClick = () => {
    setNoCount(noCount + 1);
  };

  const getNoButtonText = () => {
    const phrases = [
      "No",
      "Are you sure?",
      "What if I asked really nicely?",
      "Pretty please",
      "With a chocolate rice cake on top",
      "What about a matcha frostie",
      "PLEASE POOKIE",
      "But :*(",
      "I am going to die",
      "Yep im dead",
      "ok ur talking to nathan's ghost",
      "please babe",
      ":((((",
      "PRETTY PLEASE",
      "Estoy muerto",
      "No :(",
    ];

    return phrases[Math.min(noCount, phrases.length - 1)];
  };

  return (
    <div className="-mt-16 flex h-screen flex-col items-center justify-center">
      {yesPressed ? (
        <>
          <img src="https://media.tenor.com/gUiu1zyxfzYAAAAi/bear-kiss-bear-kisses.gif" />
          <div className="my-4 text-4xl font-bold">WOOOOOO!!! I love you pookie!! ;))</div>
        </>
      ) : (
        <>
          <img
            className="h-[200px]"
            src="https://gifdb.com/images/high/cute-love-bear-roses-ou7zho5oosxnpo6k.gif"
          />
          <h1 className="my-4 text-4xl">Will you be my Valentine?</h1>
          <div className="flex items-center">
            <button
              className={`mr-4 rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700`}
              style={{ fontSize: yesButtonSize }}
              onClick={() => setYesPressed(true)}
            >
              Yes
            </button>
            <button
              onClick={handleNoClick}
              className="rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-700"
            >
              {noCount === 0 ? "No" : getNoButtonText()}
            </button>
          </div>
        </>
      )}
    </div>
  );
}

Explaination: We are creating just two buttons on screen. When no button is clicked we invoke handleNoClick which updates count of noCount state. We calculate yes button size based on this noCount as const yesButtonSize = noCount * 20 + 16;

To know more about tailwindcss in depth and adjust styling quickly you can learn here: https://tailwindcss.com/docs/installation

You should have it like 🎉:

Happy Coding!!

Rancher Desktop on Mac 🚀

Saurabh Nemade — Thu, 22 Sep 2022 18:06:07 +0000

Note:
This is going to be purely technical short post focusing on getting Rancher desktop to work on Mac with Volume fixes!!

Setup Docker tools



brew install docker docker-compose

After running above commands you will get following commands. Simply execute them:



Compose is now a Docker plugin. For Docker to find this plugin, symlink it:
  mkdir -p ~/.docker/cli-plugins
  ln -sfn /opt/homebrew/opt/docker-compose/bin/docker-compose ~/.docker/cli-plugins/docker-compose

Setup Rancher Desktop



brew install --cask rancher

Once setup is done open it & it will look like this:

A sample docker-compose:



version: '3'
services:
  db:
    image: postgres:14.4-alpine
    ports:
      - '9432:5432'
    environment:
      POSTGRES_PASSWORD: docker
      POSTGRES_USER: docker
      POSTGRES_DB: postgres
      PGDATA: /var/lib/pg_data
    volumes:
      - ./data:/var/lib/pg_data

It will fail with following error:

Fixing Volume Permissions in Lima Config
Run



touch /Users/${USER}/Library/Application\ Support/rancher-desktop/lima/_config/override.yaml



echo 'mountType: "9p"' >> /Users/${USER}/Library/Application\ Support/rancher-desktop/lima/_config/override.yaml

Quit and Reopen Rancher Desktop
Run:



docker-compose up

And, congratulation!! you have it running. 🎉🎉🚀

Using Formik To Build Dynamic Forms In React - Faster & Better

Saurabh Nemade — Wed, 17 Jun 2020 16:21:44 +0000

Although React has made client-side development a lot easier, creating dynamic forms in React applications is still very complicated due to challenges, like form verbosity, validations and error handling.

Some engineers even resort to Redux-based solutions like Redux-form to simplify the development but there are still performance issues that make it a “less-than-ideal” solution. Formik however emerged as a clear winner here.

Checkout my blog post on Using Formik to Build Dynamic forms in React - Faster & Better.

You can find it at https://www.velotio.com/engineering-blog/using-formik-to-build-dynamic-forms-in-react