DEV Community: Ansh Saini

WorkFlow. Your AI Powered Secretary.

Ansh Saini — Sun, 01 Sep 2024 17:01:00 +0000

This is a submission for the Nylas Challenge: AI Expedition.

What I Built and Why

When you unlock the power of accessing people's email, the possibilities become endless. I've created an assistant which has the email context of not just yourself, but your entire company! So in essence, it can act as a knowledge powerhouse for your entire organization.

WorkFlow is your ultimate personal secretary:

Effortlessly find the best time to meet with anyone.
Schedule meetings
Keep track of your daily tasks.
Instantly see who's on leave and even manage your own leaves.
Get information about colleagues at your fingertips.
Access critical company details like employee count, company vision, or who to reach out to for feedback.

And the cherry on top? It’s Channel Agnostic ✨! Whether it’s WhatsApp, Slack, Discord, or even a website or mobile app, WorkFlow integrates seamlessly with whatever communication platform you’re already using. Just plug it in and let it do the work!

Demo

To bring this to life, I’ve set up a website where you can interact with the assistant. I’ve also integrated it with WhatsApp to demonstrate just how effortlessly it connects with popular communication platforms.

WorkFlow

Your AI Powered Secretary. Delegate your mundane tasks like scheduling meetings, getting task summary, etc to WorkFlow.

workflow-ai-assistant.vercel.app

Here's a video demo

WhatsApp Integration

Code

ansh-saini / workflow-assistant

Your AI Powered Secretary.

WorkFlow. Your AI Powered Secretary.

I've created an assistant which has the email context of not just yourself, but your entire company! So in essence, it can act as a knowledge powerhouse for your entire organization.

This assistant is your ultimate personal secretary:

Effortlessly find the best time to meet with anyone.
Schedule meetings
Keep track of your daily tasks.
Instantly see who's on leave and even manage your own leaves.
Get information about colleagues at your fingertips.
Access critical company details like employee count, company vision, or who to reach out to for feedback.

And the cherry on top? It’s Channel Agnostic ✨! Whether it’s WhatsApp, Slack, Discord, or even a website or mobile app, this assistant integrates seamlessly with whatever communication platform you’re already using. Just plug it in and let it do the work!

View on GitHub

My Journey

The thing I loved about Nylas was the simplicity of APIs and SDKs. They were intuitive to use. I utilised various Nylas APIs to make the assistant capable of handling complex prompts.

Development and testing with Nylas was also straightforward. I liked that I could jump straight in using Test Grants. There was no barrier to entry.

It was a new experience for me to have control of users's email data. This project gave me a perspective on handling sensitive data and writing secure code with good practices.

This was my first time building an AI Agent. I loved that, through the medium of this challenge, I was able to push the limits of my boundaries and dive into seemingly overwhelming topics like Embeddings and RAGs. I've personally learned A LOT throughout the process of building this project.

Through this challenge I've come away with knowledge that I am surely going to implement in my personal as well work projects.

Technology & Integrations

Future Scope and Improvements

In future, If Nylas rolls out support for Storage access like Google Drive, Microsoft OneDrive, It can easily be integrated into WorkFlow. This will allow users to share files using the assistant.
Knowledge Store implementation using RAGs. Switching from a traditional database to a vector database will make the the assistant work much more efficiently and scale for large companies with hundreds of thousands of employees.

Thank You

A huge shoutout to Nylas and the DEV team for organizing such an incredible challenge! This experience has pushed me out of my comfort zone, allowing me to explore new technologies and grow as a developer.

Free up some space on your VS Code

Ansh Saini — Sun, 04 Aug 2024 08:35:20 +0000

This is the first of a series of opinionated posts that I'm going to make about becoming an absolute master of VSCode shortcuts.

This Activity Bar is just something that takes up screen real estate and honestly its just useless.

Just setup keyboard shortcuts for the tabs that you use. These are what I use.

Cmd + Shift + E: File Explorer
Cmd + Shift + F: Find in files (Already the default)
Cmd + Shift + G: Source Control
Cmd + Shift + A: Active pull request
Option + Shift + D: Debug Panel

For panels which you use often, but not on the daily (for example: the extensions panel), you can just use the command palette. Cmd + Shift + P and type 'focus on...'.

Now you can safely get rid of it and on the off chance you might need to access the Activity Bar, you can just use the command palette again to bring it back :)

Finally, a scalable folder structure for your frontend code

Ansh Saini — Sun, 04 Aug 2024 06:32:41 +0000

Problem with "pages"

Well, its simple. Not all features are pages. Then you end up developing features in your re-usable components folder.

Solution

A folder-based structure which aims to keep a feature and its dependencies together. I'll be referring to this structure as The Base in the rest of this post.

FolderName
├── index.tsx // Entry point
├── FolderName.module.css // Styles
├── components // Components that are specific to this feature
│   ├── ComponentName
│   │   ├── index.tsx
│   │   └── ComponentName.module.css
│   └── AnotherComponentName
│       ├── index.tsx
│       └── AnotherComponentName.module.css
├── hooks // Hooks that are specific to this feature
│   ├── useHookName.ts
│   └── useAnotherHookName.ts
├── utils // Utils that are specific to this feature
│   ├── utilName.ts
│   └── anotherUtilName.ts
└── assets // Assets that are specific to this feature
    └── someImage.png

The beauty of this structure is that if you don't need something, just don't create the folder for it.

Here's an example of a react app

src
├── components // Generic re-usable components
│   ├── ui
│   │   ├── Button
│   │   │   ├── index.tsx
│   │   │   └── Button.module.css
│   │   └── TextField
│   │       ├── index.tsx
│   │       └── TextField.module.css
│   └── Navigation
│       ├── Link
│       │   ├── index.tsx
│       │   └── Link.module.css
│       ├── BottomNavigation
│       │   ├── index.tsx
│       │   └── BottomNavigation.module.css
│       ├── TopNavigation
│       │   └── index.tsx
│       └── hooks
│           └── useExcludeShadow.ts
├── features
│   └── Notifications
│       ├── index.tsx
│       ├── Notifications.module.css
│       ├── components
│       │   ├── NotificationRowCard
│       │   │   └── index.tsx
│       │   ├── NotificationsList
│       │   │   ├── index.tsx
│       │   │   └── NotificationsList.module.css
│       │   └── NotificationsPopup
│       │       └── index.tsx
│       └── hooks
│           ├── useNotificationAction.ts
│           ├── useNotifications.ts
│           └── index.tsx
├── api
│   ├── axios.ts
│   └── resources
│       ├── auth
│       │   ├── index.ts
│       │   └── types.ts
│       ├── notifications
│       │   ├── index.ts
│       │   └── types.ts
│       ├── payment
│       │   ├── index.ts
│       │   └── types.ts
│       └── settings
│           ├── index.ts
│           └── types.ts
├── assets
│   ├── lotties
│   │   └── confetti.json
│   ├── icons
│   ├── placeholders
│   │   └── user-avatar-placeholder.svg
│   ├── fonts
│   │   ├── Inter.ttf
│   │   └── Switzer.ttf
│   ├── logos
│   │   ├── logo-primary.svg
│   │   ├── logo-stacked.svg
│   │   └── logo-alternate.svg
│   └── icons
│       ├── apple-icon.svg
│       ├── facebook-icon.svg
│       ├── google-icon.svg
│       ├── linkedin-icon.svg
│       ├── refresh-icon.svg
│       ├── telegram-icon.svg
│       └── whatsapp-icon.svg
├── global
│   ├── AppContext
│   │   ├── context.ts
│   │   └── index.tsx
│   ├── FeatureToggles
│   │   ├── useFeatureToggle.ts
│   │   └── index.tsx
│   └── UserPreferences
│       ├── useUserPreferences.ts
│       └── index.tsx
├── utils
│   ├── routes.ts
│   ├── formatDate.ts
│   └── hooks
│       ├── useArray.ts
│       └── useDeviceOrientation.ts
└── tracking
    ├── googleAnalytics.ts
    ├── firebaseTracking.ts
    └── useTracking.ts

This structure has been working and scaling well for us for over 3 years.
Let me know if you guys want a detailed explanation about the api setup. Maybe I'll convert this post into a series of chapters.

Ready for the iPhone 16?

Ansh Saini — Mon, 15 Jul 2024 00:15:33 +0000

This is a submission for the Wix Studio Challenge .

What I Built

Have you seen those long lines in front of stores before a sale is about to begin? That's exactly what I've built using Wix Studio.

The website showcases a landing page where the upcoming product is revealed. In this case, The iPhone 16 Pro. You can join the queue, you'll be assigned a position in the queue.
When the sale begins, you'll be emailed that its your turn to purchase.
Then you can access the website and make the purchase.

I've also added multiplayer cursors on the landing page for a sense of 'crowd'. I couldn't implement real-time cursors because I would need to use custom elements to make it work which was against the rules, so I had to compromise and just make some fake ones 😅.

Demo

Here's the link to the website

Development Journey

I was thinking of innovation on e-commerce websites, things that came to mind were 3D experiences within the website, or maybe Augmented Reality. I also thought of building a fancy landing page full of animations, but that wouldn't be something innovative in the shopping experience, that would just be a fancy landing page from which you click "Buy Now" and then its a standard checkout process.

So I thought of making an online store-front for a product launch. People can see each other's cursors moving around and they can reserve their spot in the queue.

This was my first time using Wix, or any low-code website builder.
I spent a few days consuming wix tutorials and blogs. Exploring Velo documentation to see what all possibilities are there. The tutorials were really helpful.

Took me a few days to get the hang of it. It was a nice challenge to accomplish everything "The Wix Way". Using $w instead of the JavaScript window.

After the user is authenticated, I save their position in the queue in a Velo Database

APIs

Velo Members API
Velo Databases and Permissions
Velo Products
Velo DOM apis to manipulate DOM elements

Some feedback for Wix

This was my first time using Wix Studio. The tutorial videos were really helpful, I didn't have to search for the tutorials for each thing I needed to do. They were right there in the platform itself. I loved that.
The tutorials were well made and covered decent variety of use cases
Managing store listings is really convenient. Adding products, managing inventory is really intuitive.
Keyboard shortcuts for hiding/revealing the code editor. Much needed.
There's no 'onMouseMove' event listener built-in to Velo. It prevented me from implementing real-time multiplayer cursors which I was really excited about. There is a workaround but it requires custom elements.

Recycling comes to WhatsApp ♻️

Ansh Saini — Fri, 21 Jun 2024 03:44:11 +0000

This is a submission for Twilio Challenge v24.06.12

What I Built 🛠️

A WhatsApp bot which gives you recycling ideas at your fingertips.
WhatsApp is such a popular and convenient platform, that almost everyone has it. Just message the bot and tell it what you want to recycle.
It works with text as well as images 🖼️✨

Motivation

Often times while cleaning my house, I come across stuff I don't need anymore. Wouldn't it be nice to just snap a picture with the most used app on my phone and get instructions on how to recycle it? Well, think no more...

Demo📱

Watch the full working demo on GitHub

Currently the app is running in a sandbox environment.
Text join want-correctly to +14155238886 OR scan the QR code below.

Link to code

ansh-saini / recycle-whatsapp-bot

This is my submission for the DEV Twilio Challenge

WhatsApp Recycle Bot ♻️

A WhatsApp bot which gives you recycling ideas at your fingertips. WhatsApp is such a popular and convenient platform, that almost everyone has it. Just message the bot and tell it what you want to recycle. It works with text as well as images 🖼️✨

Just tell it what you want to recycle

Even works with images!

View on GitHub

Twilio and AI ✨

I used the Twilio Messaging API to setup communication through WhatsApp. I've used Google Cloud Vision API to detect what object the sender has captured. Then I've engineered a prompt and fed that to Open AI's GPT 3.5 Turbo to get instructions on recycling the object.

Additional Prize Categories 🏆

Impactful Innovators

Some thoughts 🩵

Working with Twilio has been quite easy. Things are pretty straight forward. I absolutely loved the fact that I didn't have to provide any billing information to get started.
I was surprised by the simplicity of the steps needed to started with creating a WhatsApp Bot. Great job Twilio! Definitely going to continue using Twilio for building some cool stuff.
Thank you DEV Team for organising awesome contests like these :)

Deadlock

Ansh Saini — Thu, 13 Jun 2024 02:57:29 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

When two or more processes are unable to proceed because each is waiting for another to release a resource. It results in a stalemate where none can progress, requiring intervention like resource reallocation or termination to resolve.

A headless hook-based exam proctoring system with React

Ansh Saini — Thu, 16 Feb 2023 14:39:25 +0000

What I built

I built a headless online exam proctoring system using React.

Features

Force full-screen mode
Warns when user switches tabs
Prevents user from opening the context menu (menu opened by pressing right-click from the mouse)
Prevents user from copying website content
Works well with custom proctoring logic (which you might want to implement separately)
Webcam detection (Coming Soon)

Category Submission

SaaS Superstars✨

App Link

Checkout the demo app here

Screenshots

Description

This is a headless proctoring library which only gives you some flags. What you do with that information is totally upto you. The UI for handling various use cases is completely in your hands. For more details, check out the project README.

Link to Source

ansh-saini / react-proctoring

Headless proctoring system for react

Overview

This is a headless library which only gives you some flags. What you do with that information is totally upto you. The UI for handling various use cases is completely in your hands.

Features

Force full-screen mode
Warns when user switches tabs
Prevents user from opening the context menu (menu opened by pressing right-click from the mouse)
Prevents user from copying website content
Works well with custom proctoring logic (which you might want to implement separately)
Webcam detection (Coming Soon)

Why should you use this?

There are lots of browser specific issues that show up when you are working with browser APIs. This package tries to cover most if not all of them. So you can focus on whats actually important for your business. All features are set up in a way that you can opt out of any feature that you do not wish to use.

Why do

…

View on GitHub

Background

I was looking for a ready-to-use proctoring system for an online exam. I found a few solutions but all of them were coupled very closely with the UI. I could not find a headless proctoring system. So, I decided to build my own. It is perfect for having full control over the UI while reaping all the benefits of a proctoring system.

How I built it

I utilized Linode's web server to deploy the demo application to the web. I had never configured a web server before. I learnt how to do that from Linode's awesome documention.
I'm thinking of adding a face detection feature to this library. I'm planning to host machine learning models on Linode then use it as an API in this library.
I learned about various browser APIs. Like page visibility detection, requesting camera permissions, requesting full screen permission from the browser etc.
I learned about ways of getting around cross-browser issues when it comes to native APIs.

Final thoughts

This was my first time using Linode. Things were very easy to setup. I followed this guide to understand how to deploy my application. I think Linode is a great platform and I'm definitely going to figure out how to utilize my free $100 credit in a better way 😁

How to download fancy QR Codes with React

Ansh Saini — Sun, 08 Jan 2023 10:48:45 +0000

Generating QR codes on the web is easy. There are lots of libraries out there who help us do it. One of them is qrcode.react which we will be using for the purpose of this tutorial.

Code to download a plain QR Code

We're rendering a <canvas> element in the DOM using QRCodeCanvas supplied by qrcode.react. We can convert it to a png using JavaScript and then download it as a file.

// QRCodeDownload.tsx
import React from "react"
import { QRCodeCanvas } from "qrcode.react"

import Button from "components/Button"

const QRCodeDownload = () => {
  const url = "https://anshsaini.com"

  const downloadQRCode = () => {
    const canvas = document.querySelector("#qrcode-canvas") as HTMLCanvasElement
    if (!canvas) throw new Error("<canvas> not found in the DOM")

    const pngUrl = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream")
    const downloadLink = document.createElement("a")
    downloadLink.href = pngUrl
    downloadLink.download = "QR code.png"
    document.body.appendChild(downloadLink)
    downloadLink.click()
    document.body.removeChild(downloadLink)
  }

  return (
    <div className="p-3">
      <QRCodeCanvas id="qrcode-canvas" level="H" size={300} value={url} />
      <div className="my-5">
        <Button onClick={downloadQRCode}>Download QR Code</Button>
      </div>
    </div>
  )
}

export default QRCodeDownload

Voila✨ The QR Code is now saved in the file system as an image.

Taking it a step further

No one wants to share a QR code on its own. Its ugly. We want a nice UI surrounding the QR code, giving it some context. Maybe something like this:

Let's a create a wrapper component which will handle the styling. I'm using react-jss for styling but of course you can use whatever you want and style your QR Code however you like.

// QRCodeTemplate.tsx
import React, { FC, PropsWithChildren } from "react"

import DEV_RAINBOW_LOGO from "assets/qr_code/dev-rainbow.png"
import DEV_RAINBOW_BG from "assets/qr_code/dev-rainbow-bg.png"
import { createUseStyles } from "react-jss"

import Typography from "components/Typography"

const ICON_SIZE = 100

const useStyles = createUseStyles(theme => ({
  root: {
    backgroundImage: `url('${DEV_RAINBOW_BG}')`,
    maxWidth: 1060,
    maxHeight: 1521,
    borderRadius: "32px",
    border: "5px solid #EFEFF7",
    padding: theme.spacing(11),
  },
  logo: {
    boxShadow: "9px 3px 20px 1px rgb(0 0 0 / 10%)",
    height: 150,
    width: 150,
    borderRadius: 8,
  },
  icon: {
    borderRadius: 8,
    width: ICON_SIZE,
    height: ICON_SIZE,
    position: "absolute",
    // Need to offset the values due to `excavate: true` in qrcode.react
    top: `calc(50% - ${ICON_SIZE / 2 + 1}px)`,
    // Need to offset the values due to `excavate: true` in qrcode.react
    left: `calc(50% - ${ICON_SIZE / 2 - 5}px)`,
  },
  qrContainer: {
    position: "relative",
    backgroundColor: "#EFEFF7",
    borderRadius: "56px",
    margin: theme.spacing(8, 0),
    padding: theme.spacing(4),
  },
  qrInner: {
    backgroundColor: "white",
    borderRadius: "32px",
    padding: 90,
  },
  referredBy: {
    fontStyle: "normal",
    fontWeight: "600",
    fontSize: "24px",
    lineHeight: "29px",
    letterSpacing: "0.1em",
  },
}))

const QRCodeTemplate: FC<PropsWithChildren> = ({ children }) => {
  const classes = useStyles()
  return (
    <div className={classes.root} id="fancy-qr-code">
      <img alt="logo" className={classes.logo} src={DEV_RAINBOW_LOGO} />
      <Typography className="mt-7" variant="title1">
        To register, scan the QR Code.
      </Typography>

      <div className={classes.qrContainer}>
        <img
          alt="icon"
          className={classes.icon}
          height={ICON_SIZE}
          src={DEV_RAINBOW_LOGO}
          width={ICON_SIZE}
        />
        <div className={classes.qrInner}>{children}</div>
      </div>
      <Typography className={classes.referredBy} variant="emphasised">
        REFERRED BY
      </Typography>
      <Typography variant="largeTitle">Ansh Saini</Typography>
    </div>
  )
}

export default QRCodeTemplate

We can now pass our QR Code as children to the QRCodeTemplate

<QRCodeTemplate>
  <QRCodeCanvas
    // Passing image here doesn't render when we convert html to canvas. So, we handle it manually.
    // We are only using this prop for `excavate: true` use case.
    imageSettings={{
      src: "",
      x: undefined,
      y: undefined,
      height: 80,
      width: 80,
      excavate: true,
    }}
    level="H"
    size={640}
    value={url}
  />
</QRCodeTemplate>

Earlier we only had a canvas element in the DOM so we could directly convert it to a png. But now, our DOM includes HTML elements like <div>, <img> etc. for styling. So we need to parse our DOM as canvas and then convert it into a png. There's a libary which helps us do just that. html2canvas. We modify our downloadQRCode function such that first we get snapshot of our DOM as a canvas then we convert that into a png.

Final code

// QRCodeTemplate.tsx
import React from "react"

import html2canvas from "html2canvas"
import { QRCodeCanvas } from "qrcode.react"

import Button from "components/Button"
import QRCodeTemplate from "components/dashboard/QRCodeTemplate"

const QRCodeDownload = () => {
  const url = "https://anshsaini.com"

  const getCanvas = () => {
    const qr = document.getElementById("fancy-qr-code")
    if (!qr) return

    return html2canvas(qr, {
      onclone: snapshot => {
        const qrElement = snapshot.getElementById("fancy-qr-code")
        if (!qrElement) return
        // Make element visible for cloning
        qrElement.style.display = "block"
      },
    })
  }

  const downloadQRCode = async () => {
    const canvas = await getCanvas()
    if (!canvas) throw new Error("<canvas> not found in DOM")

    const pngUrl = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream")
    const downloadLink = document.createElement("a")
    downloadLink.href = pngUrl
    downloadLink.download = "QR code.png"
    document.body.appendChild(downloadLink)
    downloadLink.click()
    document.body.removeChild(downloadLink)
  }

  return (
    <div className="p-3">
      <QRCodeTemplate>
        <QRCodeCanvas
          // Passing image here doesn't render when we convert html to canvas. So, we handle it manually.
          // We are only using this prop for `excavate: true` use case.
          imageSettings={{
            src: "",
            x: undefined,
            y: undefined,
            height: 80,
            width: 80,
            excavate: true,
          }}
          level="H"
          size={640}
          value={url}
        />
      </QRCodeTemplate>
      <div className="my-5">
        <Button onClick={downloadQRCode}>Download QR Code</Button>
      </div>
    </div>
  )
}

export default QRCodeDownload

The Result

We have a beautiful QR code saved as a png. And with the power of React, we can create as many styles as we want.

Understanding stops property on LinearGradient in Flutter

Ansh Saini — Thu, 05 Jan 2023 05:53:31 +0000

This is what the official docs say

A list of values from 0.0 to 1.0 that denote fractions along the gradient.

Problem

Lets say we have to create a bar which has a gradient going from red -> green -> blue -> black.
The percentages are as follows:
10% red
30% green
40% blue
Rest of it black (20%)

We might write something like this:



LinearGradient(
  colors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.black,
  ],
  stops: [0.1, 0.4, 0.5, 0.2],
),

Here's what we get:
Of course this is not what we want.

How to fix it?

Before we jump into the solution let's look at the problematic code



LinearGradient(
  colors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.black,
  ],
  stops: [0.1, 0.4, 0.5, 0.2],
),

We have supplied stops=[0.1, 0.4, 0.5, 0.2]

How the `stops` property works

The stops property requires us to specify where the color should start from. So, if we have two colors, red and black and we want both of them to take 50% of the container, we can write



LinearGradient(
  colors: [
    Colors.red,
    Colors.black,
  ],
  stops: [0, 0.6],
),

Notice that I wrote 0.6 instead of 0.5. If we write 0.5, then it would look like a 40-60 split instead of 50-50.

0 to 0.5 would be red, then 0.6 to 1 would be black.
The following code would also give us the same result



LinearGradient(
  colors: [
    Colors.red,
    Colors.black,
  ],
  stops: [0.2, 0.6],
),

This is because as the docs mention, if the stops array doesn’t start with a 0, it implicitly means that it would start with 0 and the first color in the colors array. Same thing happens with last value of stops array. It should either explicitly end with a 1, or flutter will implicitly consider it as 1 with last color supplied in the colors array. So, actually flutter will interpret it as:



LinearGradient(
  colors: [
    Colors.red,
    Colors.red,
    Colors.black,
    Colors.black,
  ],
  stops: [0, 0.2, 0.6, 1],
),

Fixing the issue

Now that we know how the stops property works, we can get our desired gradient.



LinearGradient(
  colors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.black,
  ],
  stops: [0.1, 0.4, 0.8, 1],
),

Playground

I made a dartpad link if you want to play around with the examples above.

Multiplayer Logo Quiz? 😳

Ansh Saini — Tue, 10 May 2022 18:53:21 +0000

Overview of My Submission

Ever played Logo Quiz? Its a game where you see a logo and have to guess which brand owns that logo. I've played it a lot but have always felt that it would be more fun if I could play against my friends. That's exactly what "PvP Logo Quiz" is.

Submission Category:

🃏 Wacky Wildcards

Link to Code

ansh-saini / pvp-logo-quiz

Play Logo Quiz with Friends!

PVP Logo Quiz

Project setup guide

Install and run Appwrite.
Create a project on Appwrite.
Add a Web Platform to your project.
Head to API Keys section and create a new appwrite server key with the following permissions The command will fail if you have not provided the necessary permissions.

users.read, users.write, collections.read, collections.write, attributes.read, attributes.write, indexes.read, indexes.write, documents.read, documents.write.
Clone this repository
Create a copy of .env.example file. Rename it to .env and fill out the variables. You can find values for APPWRITE_ENDPOINT, APPWRITE_PROJECT on the Appwrite dashboard itself. APPWRITE_SERVER_API_KEY is the server API key secret that we generated. Rest of the variables will be generated by the setup script.
Run yarn setup. It will create the required collections and provide you with their unique IDs. Add them to your .env file. It will also add some logos to your database so you can get up and…

View on GitHub

Link to Website

PvP Logo Quiz

Play Logo Quiz with Friends!

pvp-logo-quiz.vercel.app

Additional Resources / Info

Tech Stack

🔥 Appwrite 🔥 (Backend)
Next.js (Frontend + Backend)
DigitalOcean + Vercel (Deployment)

Demo & Screenshots

Log in

Sign up

How to play

Home

Join Room

Share Room Code

Round in progress

Result

How it works

After creating an account or logging in on "PvP Logo Quiz", you can create a room and share the room code with your friends.
The game will start when all players have joined the room.
Players will be presented with 10 questions (logos). The first player to get the most questions right wins.
You only get three seconds to answer the question.
After the game ends for all players, you can see various stats like who won the game and how many questions each player got right and how much time they took overall.
Every thing is ✨Realtime✨. You can see you opponent's progress. And they can see yours ;)

Future Scope

✨Matchmaking✨. This will allow players to play with anyone in the world without needing to share an invite code.
Ability to have more than 2 players in a room.
Play as guest (No need to signup)
Ability to set number of questions per game.
Ability to play again in the same room.
Categories filter. Play a game with only a specific category of logos.
Mobile version so players can play on the go. 😁

Project Setup Guide

I have created a setup script. Just run one command and everything will be set up for you :).
See project README for more details.

Appwrite features used

Database
Authentication
Realtime
Users
Accounts

Thoughts about Appwrite

This was my first time using Appwrite. The tool is pretty awesome. It does so many things behind the scenes that would've taken ages to set up from scratch. Had an amazing time using Appwrite. However, there are a few things that I struggled with. Please please please let me know if there was something that I missed in the documentation which would have helped me with my problems. In no way I am trying to criticize Appwrite. This is just my personal feedback from using Appwrite to build this project.

I would've liked to have an option to list all documents of a collection. The limit of 100 seems like a good default. But it would be nice to be able to override it beyond 100.
Support for JSON field However, if I turn on Array mode for a string attribute, I can send a JavaScript Object as payload. It gets accepted but doesn’t show up properly in Appwrite admin. But when you retrieve it using the API, the data comes as it is. :)
It was a bit unclear to me how to verify the user's identity on my Next.js server. Reached out on Appwrite discord and someone told me that I needed to generate a JWT for the user and send it to my backend then I can perform actions on behalf of the user. I have personally never used this way for authorizing a user. It felt a little cumbersome.
Can’t use Query() with Users API :/ If I want to fetch data of two users, I have to write 2 get queries with their ID. I can not use the list API.
I accidentally exceeded the size limit of a string field. I got a very vague error (Generic 500 saying 'Internal Server Error') from which I was not able to figure out that I exceeding the size limit. I had to do some trial-and-error to figure out the root cause.
I was adding attributes to my collection from Appwrite admin. I was not able to add many attributes with a high size. This is not specified anywhere in the docs that I cannot add multiple high-value size fields. I got an error saying "Attribute limit reached." when I tried to add 2 fields with size=10000
db.getIndex function throws exception even when index exists. The API Key does have indexes.read and index.write permission. ```js

(await database.getCollection("6277923110f6559c7549")).indexes
// Response of getCollection
[
{
key: 'name',
type: 'unique',
status: 'available',
attributes: [ 'name' ],
orders: [ 'ASC' ]
}
]

// getIndex does not work on the same collection
await database.getIndex("6277923110f6559c7549", "name")
// Response of getIndex
AppwriteException [Error]: Index not found
at Client.call (\node_modules\node-appwrite\lib\client.js:162:31)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Database.getIndex (\node_modules\node-appwrite\lib\services\database.js:1046:16)
at async x (\setup.js:51:15) {
code: 404,
type: 'index_not_found',
response: {
message: 'Index not found',
code: 404,
type: 'index_not_found',
version: '0.13.4'
}
}

### Final Thoughts

This was my first time participating solo in a hackathon. Thank you so much Dev and Appwrite for this opportunity. I learned a lot of new things while building out this project. It was a lot of fun. Looking forward to using Appwrite in future projects.

Why you cannot pass location.reload as an argument

Ansh Saini — Sun, 17 Apr 2022 04:20:23 +0000

Let's say we have a function named blockUser which looks something like this

const blockUser = (afterBlock = window.location.reload) => {
  // Some code to block the user
  afterBlock()
}

The interesting thing about this function is the afterBlock argument which defaults to window.location.reload. We basically want to reload the page after a user is blocked. But not always. Hence, the argument.

Lets use our pretty function:

blockUser()

Oops

Firefox gives us a more descriptive error.

Why does this happen?

location.reload requires that this should point to location. When we are using javascript functions, this is bound to the scope from which the function was called.
if we call window.location.reload() directly, then the reload function is getting called through the location object. But lets say we do:

const test = window.location.reload
test()

We will still get the same error.
Let's try to create our own reload function to see what's going on.

const fakeWindow = { location: { reload: function() { console.log(this) } } }
fakeWindow.location.reload()

// Re-assigning
let test = fakeWindow.location.reload
test()

Whoa, looks like this is not the same anymore when we assign the reload function to a variable. If you remember the Firefox error, the reload function requires that it should be called from the context of Location. When we assign it to a variable, it gets called from the context of Window.

How can we fix it?

The fix is pretty simple, you can just wrap a function around your re-assignment.

const blockUser = (afterBlock = () => window.location.reload()) => {
  // Some code to block the user
  afterBlock()
}
const test = () => window.location.reload()

It works now! 😄

Bonus

Can you guess what will happen if we defined our fakeWindow object a little differently?

const fakeWindow = { location: { reload: () => { console.log(this) } } }
fakeWindow.location.reload()

Have you ever come across this problem in a real project? Drop your thoughts and experiences in the comments. Don't forget to answer the question in Bonus section :)

DEV Community: Ansh Saini

WorkFlow. Your AI Powered Secretary.

What I Built and Why

Demo

WorkFlow

Here's a video demo

WhatsApp Integration

Code

ansh-saini / workflow-assistant

Your AI Powered Secretary.

WorkFlow. Your AI Powered Secretary.

My Journey

Technology & Integrations

Future Scope and Improvements

Thank You

Free up some space on your VS Code

Finally, a scalable folder structure for your frontend code

Problem with "pages"

Solution

Ready for the iPhone 16?

What I Built

Demo

Development Journey

APIs

Some feedback for Wix

Recycling comes to WhatsApp ♻️

What I Built 🛠️

Motivation

Demo📱

Link to code

ansh-saini / recycle-whatsapp-bot

This is my submission for the DEV Twilio Challenge

WhatsApp Recycle Bot ♻️

Just tell it what you want to recycle

Even works with images!

Twilio and AI ✨

Additional Prize Categories 🏆

Some thoughts 🩵

Deadlock

Explainer

A headless hook-based exam proctoring system with React

What I built

Features

Category Submission

App Link

Screenshots

Description

Link to Source

ansh-saini / react-proctoring

Headless proctoring system for react

Overview

Features

Why should you use this?

Why do

Background

How I built it

Final thoughts

How to download fancy QR Codes with React

Code to download a plain QR Code

Taking it a step further

Final code

The Result

Understanding stops property on LinearGradient in Flutter

Problem

How to fix it?

How the stops property works

Fixing the issue

Playground

Multiplayer Logo Quiz? 😳

Overview of My Submission

Submission Category:

Link to Code

ansh-saini / pvp-logo-quiz

Play Logo Quiz with Friends!

PVP Logo Quiz

Project setup guide

Link to Website

PvP Logo Quiz

Additional Resources / Info

Tech Stack

How the `stops` property works