DEV Community: TITAS MALLICK

[Boost]

TITAS MALLICK — Wed, 04 Feb 2026 04:31:45 +0000

BioNotes: Making Quality Biology Education Accessible to All Students (Class 5-12)

TITAS MALLICK ・ Feb 4

BioNotes: Making Quality Biology Education Accessible to All Students (Class 5-12)

TITAS MALLICK — Wed, 04 Feb 2026 04:29:06 +0000

As a biology teacher with over 10 years of experience, I've seen countless students struggle to find comprehensive, well-organized study materials that actually match their curriculum. Textbooks are dense, online resources are scattered, and quality notes are often locked behind paywalls. This frustration led me to create BioNotes — a completely free, open-source biology education platform that's changing how students learn biology.

What is BioNotes?

BioNotes is a comprehensive digital repository of biology notes, study materials, and resources designed specifically for students from Class 5 to Class 12. It's aligned with major Indian curricula including ICSE, ISC, CBSE, and CISCE, making it relevant for millions of students across the country.

🔗 Visit BioNotes: https://bionotes-liard.vercel.app/

With over 400+ study materials available and growing, the platform covers everything from basic cell biology to advanced genetics and biotechnology.

The Problem I Wanted to Solve

During my years of teaching, I noticed several recurring problems:

Scattered Resources: Students waste hours searching multiple websites for reliable information
Curriculum Mismatch: Generic content often doesn't align with what students actually need for exams
Cost Barriers: Quality study materials are expensive, excluding students from economically disadvantaged backgrounds
Lack of Practice: Finding good question banks for specific chapters is surprisingly difficult
Practical Confusion: Students often struggle with laboratory procedures and experiment guidelines

BioNotes addresses all of these challenges in one centralized, free platform.

Key Features That Make BioNotes Special

📚 Class-wise Organized Content

Instead of dumping everything into one massive library, BioNotes organizes materials by class level (5-12). This means:

Students find exactly what they need for their current academic year
Content difficulty matches the student's learning stage
No overwhelming information overload

🔬 Comprehensive Coverage

The platform covers eight major biology domains:

Cell Biology: From basic cell structure to complex cellular processes
Plant Physiology: Photosynthesis, respiration, plant hormones, and more
Animal Physiology: Digestive, circulatory, nervous systems, and beyond
Genetics & Evolution: Heredity, DNA, natural selection, and evolutionary biology
Ecology: Ecosystems, biodiversity, and environmental science
Human Health: Diseases, immunity, and wellness
Reproduction: Reproductive systems and developmental biology
Biotechnology: Modern applications and genetic engineering

❓ Question Banks

Each topic comes with chapter-wise practice questions, making exam preparation straightforward and targeted. No more hunting through multiple sources for relevant questions.

🎯 Competitive Exam Ready

While designed for school curricula, BioNotes also serves as excellent preparation material for:

NEET (National Eligibility cum Entrance Test)
Biology Olympiads
Other competitive examinations requiring strong biology fundamentals

🎞️ Interactive Slides

Beyond static notes, BioNotes includes topic-wise presentation slides (view here), perfect for:

Visual learners who prefer diagrams and flowcharts
Teachers looking for ready-to-use classroom presentations
Quick revision before exams

Who Can Benefit from BioNotes?

👨‍🎓 Students (Classes 5-12)

Access high-quality, curriculum-aligned study materials without spending a rupee. Whether you're preparing for board exams, competitive tests, or just want to understand biology better, BioNotes has you covered.

👩‍🏫 Teachers

Save hours of preparation time with ready-to-use content. Use the slides for classroom teaching, assign question banks for homework, or recommend specific chapters to students who need extra help.

👨‍👩‍👧‍👦 Parents

Support your child's home learning with reliable resources. No expertise in biology? No problem — the notes are clear, structured, and easy to follow.

🏆 Competitive Exam Aspirants

Build a rock-solid foundation in biology concepts essential for NEET and Olympiad success.

The Technology Behind BioNotes

For the developers and tech enthusiasts reading this, here's what powers BioNotes:

Frontend: Built with modern web technologies for a fast, responsive experience
Hosting: Deployed on Vercel for reliable, global access
Open Source: Available on GitHub for transparency and community contributions
Content Management: Structured documentation approach for easy updates and maintenance

The entire platform is designed with performance and accessibility in mind, ensuring students with varying internet speeds can access the content smoothly.

My Vision for Education

As an M.Sc. Botany graduate, B.Ed. qualified, and CTET certified teacher, I believe that quality education should never be a privilege. Every student, regardless of their economic background or geographic location, deserves access to excellent learning materials.

BioNotes is my contribution to democratizing education. It's built on the principle that knowledge shared is knowledge multiplied.

What's Next for BioNotes?

The platform is continuously evolving. Here's what's in the pipeline:

Expanded content library with more topics and depth
Video explanations for complex concepts
Interactive quizzes with instant feedback
Mobile app for offline access
Community forum for student discussions

How You Can Help

1. Spread the Word

Share BioNotes with students, teachers, parents, and anyone who might benefit. A single share could transform someone's learning journey.

2. Contribute Content

Are you a biology teacher or subject expert? Consider contributing notes, questions, or corrections. Check out the GitHub repository to get started.

3. Provide Feedback

User feedback drives improvement. Let me know what works, what doesn't, and what you'd like to see added.

4. Support the Mission

If you're a developer, help improve the platform's code. If you're an educator, help expand the content library. If you're a student, help us understand what you really need.

Join the BioNotes Community

Whether you're a struggling student looking for clear explanations, a teacher seeking quality resources, or simply someone passionate about biology education, BioNotes welcomes you.

🚀 Start Your Biology Learning Journey Today:

Main Platform: https://bionotes-liard.vercel.app/
Presentation Slides: https://bionotes-slides.netlify.app/
GitHub Repository: https://github.com/titasmallick/BioNotes

Final Thoughts

Creating BioNotes has been a labor of love, driven by a simple belief: every student deserves access to excellent education. With over 400 study materials already available and many more to come, we're just getting started.

The platform is completely free, with no ads, no premium tiers, and no hidden costs. It's education the way it should be — accessible, comprehensive, and focused entirely on learning.

Join thousands of students who are already benefiting from BioNotes. Whether you're in Class 5 just beginning your biology journey or in Class 12 preparing for NEET, there's something here for you.

Let's make biology education accessible to everyone, together.

About the Author: I'm Titas Mallick, a biology teacher with an M.Sc. in Botany, B.Ed., CTET qualification, and over 10 years of teaching experience. I created BioNotes to make quality biology education free and accessible to all students. Connect with me through the links above.

#Biology #Education #OpenSource #Learning #NEET #Students #Teaching #EdTech #FreeEducation #India

Digital Invitations & AI: A Small Effort to Make Wedding Planning a Bit Easier

TITAS MALLICK — Sat, 03 Jan 2026 06:58:12 +0000

Weddings are beautiful, but they can also be incredibly overwhelming. Between managing guest lists, answering the same questions about venues a hundred times, and trying to keep everyone updated, the "joy" of planning can sometimes feel like a second job.

While preparing for my own journey, I realized that most digital invitations were just static pages that didn't really solve these problems. I wanted to build something that could actually help—both the couple and their guests. What started as a personal project evolved into next-wedding-generator, a small CLI tool I’ve shared on NPM to help others scaffold their own interactive wedding sites.

🍃 Why a "Generator"?

I know how busy things get. Most of us don't have weeks to code a custom site from scratch. My goal was to create a "Quick Start" foundation. By running a single command, you get a full Next.js application that is already set up with the features I found most useful.

🤖 Bringing in a Helping Hand: AI Concierge

The most helpful part of this project, in my humble opinion, is the AI integration. By using Google Gemini 2.5-flash, I've included a simple floating assistant.

It’s not just a chatbot; it’s a way to give your guests instant answers. Once you provide it with your wedding details, it can tell guests where to park, what time the snacks are served, or even share a bit about the couple's story. It's a small way to ensure no guest feels lost.

✨ Some Features I Thought Might Help:

Personalized Links: I wanted every guest to feel special. The system generates unique IDs so guests only see the events they are invited to.
Digital Guestbook: A place for friends to share photos from their phones directly to a masonry wall (via Cloudinary).
A Shared Playlist: A simple queue where guests can request the songs they want to dance to at the reception.
Admin Control: A basic dashboard to manage the guest list and track RSVPs without needing to look at complex databases.

🛠️ The Simple Tech Behind It

I chose these tools because they are reliable and relatively easy to set up for anyone with a bit of web knowledge:

Next.js & HeroUI: For a clean, modern look that works well on mobile.
Firebase: To handle real-time wishes and RSVPs.
Resend: For those helpful "day-before" email reminders.

🚀 How to Use It (If You’d Like)

If you or a friend are planning a wedding, feel free to try it out. It’s a simple process:

Generate: Run npx next-wedding-generator in your terminal.
Setup: Fill in your own API keys in the .env file (I’ve included a guide in the README).
Personalize: Swap the placeholder photos in the public folder with your own.

📜 Closing Thoughts

I'm still learning, and this tool is just a small contribution to the community. My hope is that it saves a few couples some stress and adds a little bit of digital magic to their big day.

If you find it useful, or have ideas on how to make it better, I’d love to hear from you.

Explore the Project:

📦 NPM: next-wedding-generator
💻 GitHub: titasmallick/wedding-site-gen

Wishing you a stress-free and beautiful celebration! 💍✨

Google's New Open-Source LLM Gemma: A Speed Comparison

TITAS MALLICK — Mon, 26 Feb 2024 05:30:39 +0000

Watch The Video here

Google has recently introduced its latest open-source language model, LLM Gemma, promising faster performance and efficiency. In this blog post, we will delve into a side-by-side comparison of Gemma with two billion tokenizers and Meta's Llama 2 with seven billion tokenizers. Both models are considered as the base models and are being tested locally on the author's personal computer.

Speed Test Results

Upon testing Gemma and Llama 2, it became evident that Gemma outperformed Llama 2 in terms of speed and efficiency. Gemma completed the task at hand much quicker, showcasing its superior capabilities in handling language processing tasks.

Resource Consumption

To further analyze the performance of both models, we looked into how they stress the CPU during operation. A comparison between Llama 2 and Gemma unveiled that Gemma is not only faster but also more lightweight and less resource-intensive, making it a more efficient choice for processing language tasks.

Visualization

For a visual representation of the speed and resource consumption differences between Llama 2 and Gemma, we encourage you to refer to the time-coded video footage provided. The visuals clearly depict Gemma's dominance in terms of speed and efficiency.

Google's Gemini Gemma has made a significant mark in the realm of language models with its impressive performance metrics. What are your thoughts on Google's latest offering? Share your opinions in the comments section below.

How to generate dynamic OG image using new NextJs with App directory

TITAS MALLICK — Wed, 29 Mar 2023 18:20:17 +0000

AN API THAT YOU CAN USE NOW TO DO THE FETCHING AT ONCE
https://randomimagedesc.creativegunfilms.workers.dev/

//It will return something like this
{
  "id": 539,
  "imageURL": "https://picsum.photos/id/539/300",
  "description": "a black and white photo of some windows",
  "apiCreator": "Titas",
  "timestamp": 1680238902543
}

OG or opengraph images are important tool for improving website SEO. Most of the time we use a static image generally placed inside the 'public' directory and link it to the index.html or jsx if we are using React or NextJs.

<head>
  <title>Hello world</title>
  <meta
    property="og:image"
    content="https://domainname.tld/fieName.jpg"
  />
</head>

But sometime it is required to dynamically generate this og images. Use cases may include dynamic routes or dynamic product pages for an ecommerce site. If you are building your app using NextJs and planned to host that in Vercel, then vercel has a very good tool to cover you. 'Vercel Open Graph (OG) Image Generation', it does the same, it allows you to use an Api endpoint to fetch data if required and then dynamically create the og image at request time.
But the vercel documentation covers it's implementation using NextJs with older 'Page' or 'src/pages' folder structure. Where there is an dedicated 'Api' folder to handle api requests.
But it still doesn't covers how to implement the same feature using newly announce 'App' folder that replaces the older 'Pages' folder in version 13. In NextJs Beta Docs it is clearly mentioned that '/Api' is not supported inside the 'App' directory, though NextJs allows you to incrementally update to the newer structure and 'Pages' directory will be supported alongside the 'App' directory, it is good to know how to implement og image generation when using NextJs v13 or above using only 'App' directory.
Start with creating a new NextJs project.

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

Select the following options

? Would you like to use `src/` directory with this project? »** No** / Yes
// Select "NO"
? Would you like to use experimental `app/` directory with this project? » No / **Yes**
// Select "YES"

Now locally run your project using npm run dev and open the vscode using code ..
You will be represented with the 'App' directory instead of the 'Pages' or 'src/Pages' directory. And obviously there is no 'Api' directory inside the 'App' directory.
the 'layout.js' handles the layout obviously and 'page.js' is where you will write the codes for the index page of your app.
Please look into the NextJs Beta documentation to understand how the actual routing works in the new NextJs.
Now while 'Api' is gone, we now have 'route.js'. It can be present inside any route. But that route must not contain any 'Page.js'. Say for example create a folder, name it 'ogimage' inside the 'App', and place 'route.js' inside the folder. The 'route.js' acts as the route handler for that particular route. Please look into the route handler section in the NextJs Beta Docs. This route handler is now accessible through:

http://localhost:3000/ogimage

The 'route.js' inside a directory, here 'App/ogimage/route.js' receives the request from the client and send responses.
Where 'page.js' returns the rendered html the 'route.js' is supposed to send responses in form of json or other formats just like the api used to do.
Write the following code to test your route handler:

export async function GET(request) {
    return new Response('Hello, World!');
}

Refresh your browser, you will se 'Hello, World!' coming from your route handler.
Now install the vercel og image library to your project.

npm i @vercel/og
or
yarn add @vercel/og 
or
pnpm i @vercel/og

import the library in your 'route.js'.

export async function GET(request) {
   return  new ImageResponse(
      (
        <div
          style={{
            fontSize: 128,
            background: 'white',
            width: '100%',
            height: '100%',
            display: 'flex',
            textAlign: 'center',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          Hello world!
        </div>
      ),
      {
        width: 1200,
        height: 600,
      },
    );
}

Here you are returning an ImageResponse instead of the Response, alternatively you can also extend the request and response web api using 'NextRequest' and 'NextRespone', to do that you can import them using import { NextResponse, NextRequest } from 'next/server';, though for this example it is not required. Now if you refresh your browser you will get an image generated by your 'route.js' at request time.
Well we are almost done. You can render whatever dynamic data in your image you want and customize your image using og playground, you can even generate 'SVG' on request as the og image.
For this example we will fetch a random number from random.org api, then we will use that number as an id and fetch an image from Lorem Picsum, with the same image url we will fetch the description for the image from the Alt Image Generator and generate an image on request with the image that we fetched and the description we have fetched and use it in a design to create the og image. Kind of like that.

So first inside our async GET function we generate a random id:

//Inside 'App/ogimage/route.js'
let randomdid;
    const getRandom = await fetch(
      'https://www.random.org/integers/?num=1&min=0&max=1083&col=1&base=10&format=plain',
      { mode: 'no-cors', next: { revalidate: 10 } },
    );
    const numbget = await getRandom.json();
    randomdid = numbget || Math.floor(Math.random() * 1083);

We are fetching a random integer between 0 - 1083 (as we found lorem picsum provides 1084 images), the 'revalidate: 10' is to tell the server to revalidate the fetch in every 10 seconds if another request is received.
Now we will fetch the image from the lorem picsum by using the random id as the photo id.

var = URL;
 const imagef = await fetch(`https://picsum.photos/id/${randomdid}/info`, {
      next: { revalidate: 10 },
    });
    const imageD = await imagef.json();
    URL = `https://picsum.photos/id/${imageD.id}/300`;

We could have fetched the whole image and could have used the method 'await res.blob()' but we found it unnecessarily slows the process. So this step can be skipped.
Now, we will fetch the description of the image from Alt Text Generator by passing the image url as a parameter like the following.

var fetchdesc;
const res = await fetch(
      `https://alt-text-generator.vercel.app/api/generate?imageUrl=https://picsum.photos/id/${randomdid}/300`,
      { mode: 'no-cors', next: { revalidate: 10 } },
    );
    fetchDesc = await res.json();

We will wrap the whole fetching thing inside a 'try catch' block and handle any error.
Now we have the url of the image that we want to show, as well as the description.
Alternatively you can use OUR API to do the complete fetching at once.
Just fetch https://randomimagedesc.creativegunfilms.workers.dev/
It will return a JSON response like:

{
  "id": 232,
  "imageURL": "https://picsum.photos/id/232/300",
  "description": "a street light in the snow at night",
  "apiCreator": "Amit Sen",
  "randomQ": "Be polite to all, but intimate with few.",
  "qAuthor": "Thomas Jefferson",
  "c": "Extend Alt Text",
  "u": "https://extend-alt-text.vercel.app/",
  "g": "https://github.com/creativegunfilms/ExtendAltText.git",
  "timestamp": 1680252198911
}

By using this API, the fetch can be now done like that:

export async function GET(request) {
  //..
  let data;
  try {
    const fetchData = await fetch(
      'https://randomimagedesc.creativegunfilms.workers.dev/',
      { mode: 'no-cors', cache: 'no-store' },
    );
    data = await fetchData.json();
  } catch (error) {
    //Using Fallback to narrow error boundary
    //...
  }

  return new ImageResponse(
    //...
    // You can now use {data.imageURL} and {data.description} here.
  );
}

Anyway, now We will construct the og image inside the returned ImageResponse like the following:

return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#fff',
          fontSize: 32,
          fontWeight: 600,
        }}
      >
        <div
          style={{
            left: 42,
            top: 42,
            position: 'absolute',
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <span
            style={{
              width: 24,
              height: 24,
              background: 'black',
            }}
          />
          <span
            style={{
              marginLeft: 8,
              fontSize: 20,
            }}
          >
            Extend Alt Text
          </span>
        </div>
        <img height={300} width={300} src={URL} />
        <div
          style={{
            fontSize: '20px',
            marginTop: 40,
            background: 'black',
            color: 'white',
            padding: '25px',
            width: '300px',
          }}
        >
          {fetchDesc}
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );

We are done. We have now a dynamically generated og image.
The whole 'route.js' will now look like the following:

import { ImageResponse } from '@vercel/og';

export const config = {
  runtime: 'edge',
};

export async function GET(request) {
  console.log(request);
  //Setting the image url
  var URL;
  //Fetch the Alt Text Generator
  let fetchDesc;
  try {
    // Generating random id between 0 - 1083 to get the image
    // let randomdid = Math.floor(Math.random() * 1083);
    let randomdid;
    const getRandom = await fetch(
      'https://www.random.org/integers/?num=1&min=0&max=1083&col=1&base=10&format=plain',
      { mode: 'no-cors', next: { revalidate: 10 } },
    );
    const numbget = await getRandom.json();
    randomdid = numbget || Math.floor(Math.random() * 1083);
    //Fetching the alt text linked to id
    const res = await fetch(
      `https://alt-text-generator.vercel.app/api/generate?imageUrl=https://picsum.photos/id/${randomdid}/300`,
      { mode: 'no-cors', next: { revalidate: 10 } },
    );
    fetchDesc = await res.json();
    //fetching the actual image based on id
    const imagef = await fetch(`https://picsum.photos/id/${randomdid}/info`, {
      next: { revalidate: 10 },
    });
    const imageD = await imagef.json();
    URL = `https://picsum.photos/id/${imageD.id}/300`;
  } catch (error) {
    //Using Fallback to narrow error boundary
    URL = '/fallbackog.jpg';
    fetchDesc = 'Extend Alt Text Can Generate Descriptions';
  }

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#fff',
          fontSize: 32,
          fontWeight: 600,
        }}
      >
        <div
          style={{
            left: 42,
            top: 42,
            position: 'absolute',
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <span
            style={{
              width: 24,
              height: 24,
              background: 'black',
            }}
          />
          <span
            style={{
              marginLeft: 8,
              fontSize: 20,
            }}
          >
            Extend Alt Text
          </span>
        </div>
        <img height={300} width={300} src={URL} />
        <div
          style={{
            fontSize: '20px',
            marginTop: 40,
            background: 'black',
            color: 'white',
            padding: '25px',
            width: '300px',
          }}
        >
          {fetchDesc}
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    },
  );
}

Now refresh your browser you will see newly generated og image each time. Simply made a git commit and let it built on the vercel.
use the link of the route and place it in the

section of your 'layout.js' and your website now has an dynamically generated og image.

<meta
    property="og:image"
    content="https://domainname.vercel.app/directoryName"
  />

You can test it here.
As the route.js here is not handelling the incoming request you can send random request parameter to genarate og images in the hosted environment.

Refreshing http://localhost:3000/ogimage will generate new og image each time.

But refreshing https://extend-alt-text.vercel.app/ogimage will not generate new og image each time, as it is remaining as cache in the edge, refreshing is not an unique request.

Passing a request param like https://extend-alt-text.vercel.app/ogimage?=[anything_Random_here] will be treated as unique request and will generate new og image. Now this newly generated image can be cached for 10 second. Sending same parameter again will prompt the cached version of the og image.
The caching parameters are supposted to work like this -

   // Cached until manually invalidated
    fetch(`https://...`),
    // Refetched on every request
    fetch(`https://...`, { cache: 'no-store' }),
    // Cached with a lifetime of 10 seconds
    fetch(`https://...`, { next: { revalidate: 10 } }),
    // Cached
    fetch(`https://...`, { 'only-cache' }),
    // or,
    fetch(`https://...`, { 'force-cache' })

_Though after multiple times fiddling with the cache parameters even by setting 'cache-control' headers we didn't experienc any changes in the cache behaviors. At this moment it is safe to assume, may be the Apis are not fully ready yet, thus they are getting overridden forcefully to their default pattern, hopefully in the stable release these might get fixed. _
Frequently changing og image can influence the SEO, but it is absolutely okay to create Og images dynamically or for dynamic routes.
Handelling request and request.param to get the passed value can be used to dynamically add text in the og image by using {request.param} while structuring SVG in the returned imageResponse.
You can clone our project from our github repo. Our project is called Extend Alt Text and it takes the vercel Alt Text Generator and extends its functionality. It let users upload multiple files at once and generate alt texts in bulk. We can describe how we did that in a separate article.
By design the 'route.js' here is behaving like an 'edge function' here, which is strategically placed behind the 'edge network cache' inside the vercel infrastructure. So the response cache is automatically stored to reduce network latency. Alternatively middlewares can be placed as the 'edge middleware' which seats infront of the network cache and intercepts network requests before it actually hits the server.
Theoretically, we could have used this image generation on the middleware to override this caching behavior alltogether, but the middewares are not designed to run edge functions in them and can induce network latency, it is recommended to use middlewares to geolocate, authenticate and redirect and things like A/B testing.
NextJs Beta Document says 'To Do' in the 'middleware' section, it is not clear if it will be supported with the new 'App' directory or not as of now, we have tested implementing middleware with 'App' directory in NextJs Beta V13.2.4, the wrong 'matcher' gives error in the server console but the 'redirect' or 'rewrite' doesn't work as of now. It may change in the future, please look into the docs before you use it.
We tried to use edge cache control headers to control the caching behavior.

  return new ImageResponse(
    (...
    ),
    {...
    },
  ), {status: 200, headers: {
    'Cache-Control': 's-maxage=3600',
  }};
}

But with 'ImagResponse' setting up 'cache-control' headers didn't actually work. But it works fine with 'NextResponse'.
We will try to implement cache controlling in image generation in a future article.
Thanks for Now.