DEV Community

Cover image for Let's make a TLDR System In TypeScript (Part 1)
Grenish rai
Grenish rai

Posted on

Let's make a TLDR System In TypeScript (Part 1)

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


Enter fullscreen mode Exit fullscreen mode

or



npx create-next-app@latest .


Enter fullscreen mode Exit fullscreen mode

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.

NextJs Config

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



npm run dev


Enter fullscreen mode Exit fullscreen mode

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"
NextJs App

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>
  );
}


Enter fullscreen mode Exit fullscreen mode


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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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>
  );
}


Enter fullscreen mode Exit fullscreen mode


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


Enter fullscreen mode Exit fullscreen mode


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


Enter fullscreen mode Exit fullscreen mode

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 />
    </>
  );
}


Enter fullscreen mode Exit fullscreen mode

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>
  );
}


Enter fullscreen mode Exit fullscreen mode

The UI should look something like this

tldr structure

We'll continue this in the next part.

Top comments (0)