Enter fullscreen mode

Hello fellow developers,
On this article we'll be making TL;DR System in JavaScript that will take some story or news and convert it to useful TLDR.

What is TL;DR?

Too Long Didn't Read in short TL;DR. It is often used as a summary or quick recap of a longer piece of content. People use TLDR to provide a brief, concise version of the main points when the original text is too lengthy or complex. It's commonly found in online discussions, articles, and emails to help readers quickly grasp the key takeaways without going through the entire content.

Let's Get To It Now.

1. Prerequisites

Gemini API Key
Code Editor
Prompt Skills
Hand to write code

2. UI

Let's move on making an Interactive UI first. I know we can do it using Postman and Insomnia as well, but I'd like to do it in web.
The code base will be available on my GitHub repo here.
Our First step will be installing NextJs.
Why NextJs? Because it's the best.

npx create-next-app@latest tldr-system

npx create-next-app@latest .

Why's there two commands?
The first one creates a new directory named tlder-system for the project.
And the second one uses the current directory you're in, so you don't have to make another new directory under a directory you're already in.

After writing that command, you'll be prompted with few questions. Just click yes on everything blindly (don't worry nobody's gonna steal nothing from you). These are just going to define you NextJs project.

After initializing the app let's run the app and check if everything is working fine or not.

npm run dev

ctrl + LMB (Click) to open the URL. http://localhost:3000

If everything is good the page should look like the image below. If not? "It worked on my device"

Now, let's remove default styling of NextJs template.

// layout.tsx
import type { Metadata } from "next";
import { Montserrat } from 'next/font/google';
import "./globals.css";

const mont = Montserrat({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "TLDR System",
  description: "Super sexy and simple TLDR system",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${mont.className} antialiased`}>
        {children}
      </body>
    </html>
  );
}

// page.tsx
export default function Home() {
  return (
    <>
      <h1>Hello world</h1>
    </>
  );
}

and done.

2.1. Goal

File Upload (.docs,.md,.txt)
Content Write
Output

Let's make our initial UI first.
Head over to your /app directory. and create a new folder.

mkdir components

Inside /components create three files: ContentEditor.tsx, ContentOutput.tsx and FileUpload.tsx

Let's focus on the code first:

// ContentEditor.tsx
export default function ContentEditor() {
  return (
    <div>
      <h1>Content Editor</h1>
    </div>
  );
}

// ContentOutput.tsx
export default function ContentOutput() {
  return (
    <div>
      <h1>Content Output</h1>
    </div>
  );
}

// FileUpload.tsx
const FileUpload = () => {
  return (
    <>
      <h1>File Upload</h1>
    </>
  );
};

After finishing this, let's move on to the structure that we will have.

// page.tsx
import ContentEditor from "./components/ContentEditor";
import ContentOutput from "./components/ContentOutput";
import FileUpload from "./components/FileUpload";

export default function Home() {
  return (
    <>
      <ContentEditor />
      <ContentOutput />
      <FileUpload />
    </>
  );
}

This is the initial UI structure with no design, and we're going to work on that right now.

// page.tsx
import ContentEditor from "./components/ContentEditor";
import ContentOutput from "./components/ContentOutput";
import FileUpload from "./components/FileUpload";

export default function Home() {
  return (
    <div className="flex w-full h-screen">
      <div className=" w-full">
        <ContentEditor />
        <FileUpload />
      </div>
      <div className=" w-full">
        <ContentOutput />
      </div>
    </div>
  );
}

The UI should look something like this

We'll continue this in the next part.