Forem: Abhishek Mishra

Title: Building a Persistent Task Manager with JS and Bootstrap 🚀

Abhishek Mishra — Tue, 23 Dec 2025 15:24:29 +0000

Intro

Have you ever wondered how to build a functional CRUD (Create, Read, Update, Delete) application without a complex framework like React or Angular? Today, we're diving deep into a Task Management app built using Vanilla JavaScript, Bootstrap 5, and Local Storage for data persistence.

The Core Concept

**
The Tasky Project is designed to help users manage daily tasks by creating interactive cards. Each task includes a title, description, type, and an optional image URL.

Key Features:

Persistent Storage: Tasks stay even after a page refresh thanks to localStorage.
Live Search: Filter through your tasks in real-time.
In-Place Editing: Modify task details directly on the card.
Fully Responsive: A clean UI that works on mobile and desktop using Bootstrap.

1. The Power of localStorage

One of the most important aspects of this project is ensuring that user data isn't lost. We use a central state object and synchronize it with the browser's storage.

JavaScript

// Function to sync our local state with browser storage
const updateLocalStorage = () => {
  localStorage.setItem(
    "task",
    JSON.stringify({
      tasks: state.taskList,
    })
  );
};

When the application loads, it triggers loadInitialData() to fetch this stored string, convert it back into JSON, and render the cards on the screen.

2. Dynamic UI Rendering

Instead of hardcoding HTML, we use Template Literals to generate task cards dynamically based on the data. This allows for a much more scalable application.

JavaScript

const htmlTaskContent = ({ id, title, description, type, url }) => `
  <div class="col-md-6 col-lg-4 mt-3" id=${id}>
    <div class='card shadow-sm task__card'>
      <div class='card-header d-flex justify-content-end'>
          <button type='button' class='btn btn-outline-primary' onclick="editTask.apply(this, arguments)">
              <i class='fas fa-pencil-alt'></i>
          </button>
      </div>
      <div class='card-body'>
          <img src=${url || 'default-image.png'} class='card-img-top' />
          <h4 class='card-title'>${title}</h4>
          <p class='text-muted'>${description}</p>
          <span class='badge bg-primary'>${type}</span>
      </div>
    </div>
  </div>
`;

3. Implementing Search Functionality

The search feature uses the .filter() method to match the user's input against the task titles in our state. Every time you type, the UI clears and re-renders only the matching tasks.

JavaScript

const searchTask = (e) => {
  const resultData = state.taskList.filter(({ title }) =>
    title.toLowerCase().includes(e.target.value.toLowerCase())
  );

  resultData.map((cardData) =>
      taskContents.insertAdjacentHTML("beforeend", htmlTaskContent(cardData))
  );
};

4. Handling Edits with contenteditable

A cool trick used in this project is the contenteditable attribute. Instead of opening a new form, we make the existing card text editable, allowing for a seamless user experience.

JavaScript

// Making fields editable
taskTitle.setAttribute("contenteditable", "true");
taskDescription.setAttribute("contenteditable", "true");
taskType.setAttribute("contenteditable", "true");

Conclusion

Building this project highlights how powerful Vanilla JavaScript can be when combined with utility-first CSS frameworks like Bootstrap. It teaches fundamental concepts like DOM manipulation, event handling, and state management.

Check out the full source code here: GitHub Repository

Title: Building a "Smart" Markdown Note-Taker with Next.js 15 and OpenAI

Abhishek Mishra — Tue, 23 Dec 2025 14:45:20 +0000

Intro
In 2025, a standard CRUD app isn't enough to impress. Users expect applications to think. Today, we’re going to build a Smart Note-Taking App that doesn't just store Markdown but uses AI to automatically generate tags and summaries for your notes.

The Stack:

Frontend/Backend: Next.js 15 (App Router)
Styling: Tailwind CSS
Database: Prisma + PostgreSQL (via Supabase)
AI: OpenAI API

1. Setting Up the Project

**
First, initialize your project with the latest Next.js features:

bash

``
npx create-next-app@latest smart-notes --typescript --tailwind --eslint
cd smart-notes
npm install @prisma/client lucide-react openai
npx prisma init
``

2. The Database Schema

**
We need a simple but effective model. In prisma/schema.prisma:

PostgreSQL

`

model Note {
  id        String   @id @default(cuid())
  title     String
  content   String   @db.Text
  tags      String[]
  summary   String?  @db.Text
  createdAt DateTime @default(now())
}
`

3. The "Smart" Logic (Server Action)

**
Instead of a separate API route, we’ll use a Next.js Server Action. This keeps our logic bundled and secure on the server.

Create a file at app/actions/notes.ts:

typescript

"use server";
import { PrismaClient } from "@prisma/client";
import OpenAI from "openai";

const prisma = new PrismaClient();
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export async function createSmartNote(formData: FormData) {
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;

  // AI Magic: Generate Summary and Tags
  const aiResponse = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
      { role: "system", content: "Analyze the following note. Return a JSON object with a 'summary' (1 sentence) and 'tags' (array of strings)." },
      { role: "user", content: content }
    ],
    response_format: { type: "json_object" }
  });

  const { summary, tags } = JSON.parse(aiResponse.choices[0].message.content || "{}");

  const note = await prisma.note.create({
    data: { title, content, summary, tags },
  });

  return note;
}

4. The UI: Clean and Functional

**
In your app/page.tsx, create a simple form to handle the input. We'll use useFormStatus to show a loading state while the AI is "thinking."

typescript

import { createSmartNote } from "./actions/notes";

export default function Home() {
  return (
    <main className="max-w-4xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">Smart Markdown Notes 📝</h1>

      <form action={createSmartNote} className="flex flex-col gap-4 bg-gray-50 p-6 rounded-lg shadow">
        <input name="title" placeholder="Note Title" className="p-2 border rounded" required />
        <textarea name="content" placeholder="Write your markdown here..." rows={6} className="p-2 border rounded" required />
        <button type="submit" className="bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition">
          Save Smart Note
        </button>
      </form>

      {/* Logic to fetch and map notes would go here */}
    </main>
  );
}

5. Why this matters in 2025

**
Server Actions: We eliminated the need for complex useEffect and fetch calls.

AI Integration: We moved from "Full Stack" to "AI-Native" by integrating intelligence directly into the data flow.

Type Safety: Using TypeScript ensures that our AI response matches our database schema.

Conclusion

**
Building full-stack apps today is about orchestrating services. By combining the power of Next.js with AI, you can create tools that provide actual utility beyond just data storage.