Forem: Iuliia Shnai

How we migrated our open source Next.js project website to new domain in 3 hours?

Iuliia Shnai — Wed, 12 Mar 2025 15:41:24 +0000

Over the weekend, we migrated our website and application on the new .com domain

We considered that for some time, but started from very cheap io domain and literally did not have money for better, as we are 2 founders bootstrapped company. And generally believe domain is not important until the business start growing.

One month ago, we decided it was time for a change. Our Next.js project, which has been running on papermark.io, was ready for to papermark.com.

We broke down the process into simple, manageable steps to tackle in one day, as it kind of was scary, the scarier was only to buy this domain for $20k.

What you will find in this article?

We’re walking you through our journey from papermark.io to papermark.com in these steps:

🥚 Step 1. Research and defining core steps
🥚 Step 2. Deciding what to migrate and what not
🥚 Step 3. Verifying the new .com domain in GSC and Bing
🥚 Step 4. Adding the new domain in Vercel
🐣 Step 5. Adjusting dependencies: S3 buckets & NextAuth cookies
🐣 Step 6. Updating login callback URLs (LinkedIn, Google, etc.)
🐣 Step 7. Changing all occurrences from to papermark.com
🐣 Step 8. Updating the sitemap
🐥 Step 9. Changing environment variables in Vercel
🐥 Step 10. Deploying the application
🐥 Step 11. Turning on permanent 308 redirects
🐥 Step 12. Using Google Seach Console tool for domain migration

It took us 3 hours to complete it, couple of steps in GSC were made a week ago. Like adding new website there.

What is our project about?

Papermark is on open source document sharing infrastructure with built-in page by page analytics. Alternative to Docsend.

Check out our project on GitHub: papermark GitHub Repository

Don't forget to leave a ⭐ if you find it useful!

Below, we share all the essential details about the migration process and the key adjustments we made.

Why migrate from io to papermark.com?

Credibility and trust I think one of the main reasons.

Papermark started as a side project, and we did not think about domain, but it turned out that we hit a nerve.

Companies were sick and tired of outdated interfaces, slow websites, and overpriced fees for sharing documents and data rooms.

An early M&A customer told us "this market is ripe for an 'open source' disruption". So, we are doing it.

Domain is just another investment in our brand, which we don't know gonna be hit or miss. As we were doing good on our current domain so far. But we got more confident we want to grow Papermark brand further.

Though we would never spend $20k on domain on day 0.

Let’s dive into what we did step by step technically to guarantee smooth transition.

Main challenge in transition: Breaking down some connections between different parts of projects and possible traffic loss.

🥚 Step 1. Research and defining core steps

Before any changes, we took time to research best practices for domain migrations. Posted on Twitter also, asking around what we should do and GPTin it of course. We compiled a checklist and start

🥚 Step 2. Deciding what to migrate

Since Papermark consists of:

A main website for marketing,
A dedicated application for users, and
Shareable links used by our community.

we had to decide whether to migrate all parts together, or just keep some parts on current domain. After careful planning, we opted for a unified domain—ensuring consistency across the board.

🐣 Step 3. Verifying the.com domain in GSC and Bing

Before switching, we verified papermark.com in both Google Search Console and Bing Webmaster Tools. This crucial step ensured that our new domain was recognized and ready to be crawled by search engines.

🐣 Step 4. Adding the new domain in Vercel

Next, we added papermark.com in Vercel. We updated our project settings in the market_pages application to point to the new domain. This step was straightforward thanks to Vercel's user-friendly dashboard.

🐥 Step 5. Adjusting other domain dependencies

We then updated all other dependencies associated with our domain:

S3 Buckets: We ensured that storage configurations pointed to the new domain.
NextAuth Cookies: Adjusted cookie domains to work seamlessly with papermark.com.

// Example NextAuth configuration adjustment
export default NextAuth({
  cookies: {
    sessionToken: {
      name: `papermark.com.session-token`,
      options: { domain: "papermark.com", secure: true }
    },
  },
  // Other configuration options...
});

🐥 Step 6. Updating login callback URLs

With the new domain, we needed to update our OAuth callback URLs for services like LinkedIn and Google. This ensured that logins remained smooth and secure for our users.

// Example configuration for Google OAuth
{
  "client_id": "YOUR_GOOGLE_CLIENT_ID",
  "client_secret": "YOUR_GOOGLE_CLIENT_SECRET",
  "redirect_uris": ["https://papermark.com/api/auth/callback/google"]
}

🐥 Step 7. Changing all occurrences to papermark.com

A critical step was updating all occurrences of papermark.io in our codebase and marketing content to papermark.com. This included hard-coded URLs, metadata, and social links.

🐥 Step 8. Updating the sitemap

To help search engines quickly understand our new structure, we updated the sitemap on our marketing page. This update included the new domain references, ensuring a smooth SEO transition.

<!-- Example sitemap snippet -->
<url>
  <loc>https://papermark.com/</loc>
  <lastmod>2025-03-11</lastmod>
</url>

🐥 Step 9. Changing environment variables in Vercel

We then updated the environment variables in Vercel to reflect the new domain. This included variables for API endpoints, OAuth settings, and any third-party integrations.

# Example Vercel environment variable update
vercel env add NEXT_PUBLIC_DOMAIN papermark.com

🐥 Step 10. Deploying the application

Once all configurations were updated, we deployed our application. This step was crucial for testing that everything worked correctly on the new domain before the official switch.

Actually there were some downtime for a moment, as we needed to roll back, as some custom domain links stopped working for a moment

🐥 Step 11. Turning on permanent redirects (308)

To preserve SEO and guide users seamlessly, we set up 308 (permanent) redirects. This ensured that any traffic to the old domain was automatically redirected. 308 is the new version of 301, but you still can use 301.

308 is important for api redirects where you have POST requests because some browsers may change the HTTP method to GET when they see a 301.

🐥 Step 12. Using Google Search Tool Transition

Finally, we utilized Google’s Search Console migration tool. We set up separate transitions for our app and marketing domains, ensuring a smooth and tracked handover to the new domain.

What’s Next for Papermark?

With the migration complete, our focus is now on enhancing the user experience and bringing more amazing contributors.

If you’re following our journey or thinking about migrating your own project, I’d love to hear your thoughts or questions!

If you’re building something similar in the Open Source space, share your project with me—I’m always curious to see new ideas and innovations. Follow our journey and check out our evolving projects at Papermark.

Feel free to give us a star on GitHub if you enjoyed this walkthrough. Happy coding and migrating!

Follow my journey for more insights into tech, development, and digital transitions:

Twitter | LinkedIn | Papermark

Happy migrating!

5 UI component libraries to build custom apps in 2024

Iuliia Shnai — Wed, 24 Jan 2024 10:59:56 +0000

So, we all love to design apps quickly, that will be functional and look good at the same time.

There are 3 main ways to do it:

with code
low-code
no-code

I use all of them depends on what I want to build and how fast.

Check them below:

Next JS+ Tailwind UI

Framework Base: Built on Tailwind CSS for utility-first styling.
Component Library: Offers a wide range of pre-designed UI components.
Responsive Design: Components are designed to be fully responsive.
Customization: Extensive customization using Tailwind CSS utilities.
Productivity: Aims to speed up UI development with ready-to-use components.

NextJS + shadcn/ui

Design Aesthetic: Focuses on modern and visually appealing components.
Component Range: Includes a variety of UI elements.
Customization: Likely offers customizable components.
Accessibility: Emphasizes accessible design.
Usage: Suitable for app development.

Next js+ Next UI

UI Library Focus: Modern React UI components.
Built On: Tailwind CSS.
Developer Experience: Full TypeScript support.
Theme Support: Automatic dark mode recognition.
Pricing: Free with sponsors options
Customization: Flexible customization options.
Use Cases: Suitable for a wide range of web applications.
Design: Offers both light and dark UI options.

UI Bakery

Type: Low-code dashboard solution.
Functionality: Real-time data visualization and analytics.
Data Integration: Connects with databases, spreadsheets, and APIs.
User-Friendly: Drag-and-drop interface for ease of use.
Target Users: Suitable for users with basic technical skills.
Customization: Customizable for various business needs.
Real-Time Insights: Designed to aid informed decision-making.

Perfect to build: Internal apps and admin dashboards

https://uibakery.io/solutions/specialized-apps

Bubble

No-code Development: Enables building web apps without coding.
Customization: Offers extensive customization options for app design.
Database Management: Includes built-in tools for database creation and management.
Scalability: Suitable for both simple prototypes and complex applications.
Plugin System: Access to a wide range of plugins for extended functionality.
Responsive Design: Supports building mobile-responsive applications.

Full comparison:

Thanks for reading

Did I miss some good tools?

Did anyone built online store with Next.JS?

Iuliia Shnai — Wed, 16 Aug 2023 15:09:22 +0000

I am working on new e-commerce project and would like to set up online store. Simple one.

I drafted it in Shopify. As it looks like the easiest way, but still build a good looking store kind of challenge.

I am not sure if there are any open source projects, or recommendations for it.

Building smth cool this weekend? Built👩‍💻 🔜 Launch 🚀

Iuliia Shnai — Fri, 28 Jul 2023 13:35:13 +0000

I decide to launch on Product Hunt the project I build last months.

Here I created the page for the future launch, if you interested to support, please follow.

https://www.producthunt.com/products/linkedin-post-generator

Are you building smth cool? And planning to launch it on Product Hunt?

Building Next.js app in 7 different languages 🇫🇷 🇩🇪🇧🇷 with i18n. Open Source.

Iuliia Shnai — Wed, 26 Jul 2023 13:45:05 +0000

Localisation is one of the ways how to make your project open and accessible for more users.

So I decided to add different languages to my app.

Project I am working on

Post Generator - Linkedin Post Generator I wrote full story how I started it (Open Source)

You can fork it here https://github.com/shnai0/linkedin-post-generator

Resources I used to build it?

Using ChatGPT
Using next-i18next
https://github.com/i18next/next-i18next

What you will find in this article?

How install and select localisation library?
How I create each common.js file
Adding dropdown for languages

Step 1. Select library and install

There were two which ChatGpt recommend me. I selected i18next. No big clue why, but it works well with my pages directory.

I installed it here:

npm install i18next
npm install react-i18next

Step 2.Create next-18next.config.js and next.config.js

next-18next.config.js

module.exports = {
  debug: process.env.NODE_ENV === "development",
  i18n: {
    locales: ["en", "de", "pt", "es", "ch", "fr", "it"],
    defaultLocale: "en",
  },
  localePath:
    typeof window === "undefined"
      ? require("path").resolve("./public/locales")
      : "/locales",

  reloadOnPrerender: process.env.NODE_ENV === "development",
};

next.config.js

/** @type {import('next').NextConfig} */

const { i18n } = require("./next-i18next.config.js");
const nextConfig = {
  i18n,
  reactStrictMode: true,
};

module.exports = nextConfig;

Step 3. Create locales structure

Step 4. Add variables in each common.js file

After that I had all variables I asked chat

{
  "title": "Linkedin Post Generator 🚀",
  "posts_generated": "50.000 amazing posts generated 💫",
  "subtitle": "Generate high quality posts with AI like top LinkedIn creators. Time to go viral.",
  "inside_post": "Type or copy your post here",
  "submit_button": "Generate your post",
  "generated_post": "Your generated post",
  "post copied": "Post copied to clipboard",

  "prompts.story": "prompt",
  "prompts.crisp": "prompt",
  "prompts.list": "prompt",
  "prompts.unpopular_opinion": "prompt",

  "meta.viewport": "width=device-width, initial-scale=1",
  "meta.favicon": "👩‍💼",
  "meta.description": "Meta.",
  "meta.og.title": "LinkedIn Viral Post Generator with AI",
  "meta.og.type": "website",
  "meta.og.image": "https://postgenerator.app/cover.png",

  "vibes.story": "Story",
  "vibes.crisp": "Crisp",
  "vibes.list": "List",
  "vibes.unpopular_opinion": "Unpopular opinion",
  "vibes.case_study": "Case Study"

Step 4. Replace hard coded code in index

In your JavaScript/TypeScript code, you would then import the relevant locale file based on the user's chosen language.

First imports use translations.

import { useTranslation, Trans } from "next-i18next";

💡 Prompts, if your application using OpenAI can be also variables.

You would replace all the hard-coded text in your application with the respective keys from the locale files.

<button className="bg-blue-700 font-medium rounded-md w-full text-white px-4 py-2 hover:bg-blue-600 disabled:bg-blue-800">
  {loading && <LoadingDots color="white" style="large" />}
  {!loading && `Generate new post `}
</button>

Instead I use this- as I am adding variable

<button className="bg-blue-700 font-medium rounded-md w-full text-white px-4 py-2 hover:bg-blue-600 disabled:bg-blue-800">
  {loading && <LoadingDots color="white" style="large" />}
  {!loading && locale.submit_button }
</button>

Step 5. Create menu in NavBar to connect different languages

const languages = [
    { name: "English", flag: "🇬🇧", code: "en" },
    { name: "Deutsch", flag: "🇩🇪", code: "de" },
    { name: "Português", flag: "🇧🇷", code: "pt" },
    { name: "Français", flag: "🇫🇷", code: "fr" },
    { name: "Español", flag: "🇪🇸", code: "es" },
    { name: "中文", flag: "🇨🇳", code: "ch" },
    { name: "Italiano", flag: "🇮🇹", code: "it" },
    // add more languages as needed
  ];

  const currentLanguage =
    languages.find((language) => i18n.language === language.code) ||
    languages[0];

  console.log("currentlanguages", currentLanguage);

  const [isOpen, setIsOpen] = React.useState(false);
  const toggle = () => setIsOpen(!isOpen);

What am I doing now?

I am building different micro-tools for LinkedIn and actively develop Post generator https://www.postgenerator.app

If you like this article and would like to support me on my coding journey, here one of the open source project I am on.

Papermark.io - open source alternative to Docsend. Check it ⭐️

If you are building something in Open Source, share, I am curious to fork it 👀

Follow my journey, more micro-projects here https://linktr.ee/shnai

My Twitter https://twitter.com/shnai0

How much does it cost to build on top of Open AI API: building👩‍💻 + covering cost💰

Iuliia Shnai — Wed, 19 Jul 2023 15:57:33 +0000

Over the past two months, I've developed five distinct micro-products using the OpenAI API. So called, ChatGPT wrappers. The goal was to leverage the power of ChatGPT and understand if it is worth to build on top of it's API.

What you will find in this article?

Projects I build
How to build on top of Open AI API
How much it costs for different projects
How to cover costs

1.The Projects I've Built/Building

LinkedIn Post Generator: This open-source tool employs ChatGPT to create engaging LinkedIn posts. https://github.com/shnai0/linkedin-post-generator

Startup Funding: With the help of ChatGPT, this tool generates a tailored list of funds and investors for your startup, considering factors like your location, funding round, and industry sector. https://www.startupfunding.to

Posts-to-Blog: This mmicro-tool transforms a tweet or LinkedIn post into a comprehensive blog article, utilizing ChatGPT's writing capabilities.https://post-to-blog.vercel.app

ReportX: An AI teaching assistant that employs ChatGPT to generate informative teacher reports.https://www.aiteacherassistant.co

Infinite UI: 1000+ UI components which can be regenerated
https://infiniteui.co

This one is not public yet so not costs.

2.How to build on top of OpenAI API?

Step 1: Create an OpenAI Account

The first step to using OpenAI's GPT-3 is to create an account on the OpenAI website. This will give you access to the API key needed to make requests.

Got to API https://platform.openai.com/apps

Step 2: Generate API Key

After creating an account, you'll have access to the OpenAI Dashboard. From here, you can generate an API Key, which you will use to authenticate your requests to the API.

Go to API Keys and generate new

Step 3: Create API folder and ts file which handling it

import { OpenAIStream, OpenAIStreamPayload } from "@/utils/OpenAIStream";

if (!process.env.OPENAI_API_KEY) {
  throw new Error("Missing env var from OpenAI");
}

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

const handler = async (req: Request): Promise<Response> => {
  const { prompt } = (await req.json()) as {
    prompt?: string;
  };

  if (!prompt) {
    return new Response("No prompt in the request", { status: 400 });
  }

  const payload: OpenAIStreamPayload = {
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: prompt }],
    temperature: 0.7,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
    max_tokens: 500,
    stream: true,
    n: 1,
  };

  const stream = await OpenAIStream(payload);
  return new Response(stream);
};

export default handler;

Step 4. Change env.file

If you are using Open source project, or you can use my project, there is file generate.ts/optomixe.ts which handling api. So it all will be set except your own key in env.

Create new or add in existing Key you get from Open AI api

It is secret key. Don't share it with anyone.

Step 5. Change prompts

In the index file for most simple apps and for me ,I was handling prompt.

 const handlePrompt = () => {
    let prompt;
    switch (vibe) {
      case "Student":
        prompt = `Your Prompts`;
 break;
    }
    return prompt;
  };

3. How much does it cost to build with OpenAI?

If you're building something new, it's definitely worth considering.

The initial costs will be relatively low while you establish your user base.

*So, 0 users 0 costs *

To give you some idea of costs, I connected ChatGPT API to my five tools and currently spend less than a dollar per day.

1000 request = 1 dollar

**
On a peak day, when I launched the LinkedIn Post Generator and received 6,053 requests, the cost was around $6. This translates to roughly one dollar for 1,000 requests.

90% of costs come from Linkedin Post Generator

How to avoid paying , prepare to it or cover expenses?

You might be wondering, how do you manage these costs or prepare for the expenses? Here are some strategies that have worked for me:

1️⃣ Put limit: in case your API got leacked you can always put the limit on it

2️⃣ Evaluate useage: If you addigin functionality with ChatGPT in existing tool with exisitng users or traffic, consider that there could be much more requests, than new tool

3️⃣ Introduce subscribtion: Think on subscribtion model, which would work that cover your costs

4️⃣ Coffee donation: If you want to keep the tool free, think about adding small coffee donation. I added this one in Linkedin Post generator and it covered the expenses on ChatGpt for couple of months.

5️⃣ API key from users: Offer users to add their own API key. In that case they connect to your product there API key and you dont need to pay anything there.

And is it worth it or not ?

If you are building smth new, i think it is definitely worth it as costs will be very low for the beggining while you get your user base.

Benefits: you will be able to build smth cool, faster, and explore AI power.

So the idea was to test and see how it will work and how much it will cost.

Are you building on top of OpenAI or adding new feature with it?

Looking for stars

I am growing Papermark.io - open source document insfrastructure.

Place to leave your precious stars ⭐️

Share with me your developer journey:) Happy to meet more exciting friends here.

Here my Twitter for new projects update https://twitter.com/shnai0

🔴 Live now: I am building Post generator with Next.js, PrismaDB, OpenAI

Iuliia Shnai — Mon, 03 Jul 2023 16:42:34 +0000

This is not just post, it is live post, everyday couple of times a day I share updates how I am building Ultimate Post Generator with help of ChatGPT.

Latest updates

Update 1. Sunday 02.07 23.00 CEST -Custom generation
Update 2. Monday 03.07 18.00 CEST -Login Page

Project I am building

Project I am working on is Open Source LinkedIn Post Generator. I am updating working on it this week.
https://www.postgenerator.app

Here full story how I build first part of it. https://dev.to/shnai0/how-i-build-my-first-open-source-project-with-chatgpt-and-nextjs-10k-users-in-24-hours-2m7n

Currently it is purely LinkedIn Post Generator wanna turn it into Ultimate post generator and improve it for sign up users. All the setting which need to sign up and see your posts there.

Update 1. Sunday 02.07 23.00 CEST

I updated the features during weekend and previous week not it is not one feature post generator.

But I added different types of generation and different prompts:

Generate posts with custom prompts
Generate posts via templates
Create enhancement for your posts
Create post ideas

Here is my button component.

import Link from "next/link";

interface CustomButtonProps {
  currentTab: string | number;
}

const CustomButton = ({ currentTab }: CustomButtonProps) => {
  const buttons = [
    {
      link: "/",
      text: "Styles💃",
      tooltip: "Generate posts using styles from top LinkedIn creators.",
      tabName: "vibe",
    },
    {
      link: "/custom",
      text: "Custom 🏗️",
      tooltip: "Use your custom prompt to generate post",
      tabName: "custom",
    },
    {
      link: "/template",
      text: "Template 📋",
      tooltip: "Generate post based on example",
      tabName: "template",
    },
    {
      link: "/enhancer",
      text: "Enhancer 💫",
      tooltip: "Enchance your post, make it shorter, longer, correct gramamr",
      tabName: "enhancer",
    },
    {
      link: "/ideas",
      text: "Ideas💡",
      tooltip: "Generate ideas for your post",
      tabName: "ideas",
    },
  ];

  return (
    <>
      {buttons.map((button, index) => (
        <Link href={button.link} key={index}>
          <div className="relative group">
            <button
              className={`px-3 py-2 rounded-md text-xs font-medium ${
                currentTab === button.tabName
                  ? "bg-gray-300 text-black"
                  : "border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50"
              }`}
            >
              {button.text}
            </button>
            <span
              className="tooltip-text text-sm bg-gray-100 text-gray-700 p-1 rounded-md absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition duration-300"
              style={{ width: "150px" }}
            >
              {button.tooltip}
            </span>
          </div>
        </Link>
      ))}
    </>
  );
};

export default CustomButton;

Update 2. Monday 03.07 18.00 CEST - Login Page

Step 1. I built login page

Step 2. Next authentication file

Step 3. Prisma. prisma schema for it

Step 4. Also connected all API. keys, to Prisma DB and next Auth

import { signIn } from "next-auth/react";
import { useRouter } from "next/router";

export default function Login() {
  const router = useRouter();
  const { next } = router.query as { next?: string };

  return (
    <div className="flex h-screen w-screen justify-center">
      <div
        className="absolute inset-x-0 top-10 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
        aria-hidden="true"
      >
        <div
          className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
          style={{
            clipPath:
              "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
          }}
        />
      </div>
      <div className="z-10 mt-[calc(30vh)] h-fit w-full max-w-md overflow-hidden border border-blue-900 rounded-lg sm:shadow-xl">
        <div className="flex flex-col items-center justify-center space-y-3 bg-blue-900 px-4 py-6 pt-8 text-center sm:px-16">
          <h3 className="text-xl text-white font-semibold">
            Sign in to Linkedin Post Generator
          </h3>
          <p className="text-sm text-gray-400">
            Start generating posts with no limitations
          </p>
        </div>
        <div className="flex flex-col bg-blue-900 px-4 py-8 sm:px-16">
          <button
            onClick={() => {
              signIn("google", {
                ...(next && next.length > 0 ? { callbackUrl: next } : {}),
              });
            }}
            className="rounded px-10 py-2 font-medium transition-colors text-gray-900 bg-gray-100 hover:text-gray-100 hover:bg-gray-500"
          >
            Continue with Google
          </button>
        </div>
      </div>
    </div>
  );
}

Update 3. Tuesday 03.07 18.00 CEST - Generation of posts from templates

So I spend all day, figuring out how to build the format that way that there the template is taken and from this template the post can be generated for your own topic.

I messed up with variables in my component. So I needed to change it all.

return (
    <>
      <div className="w-full">
        <textarea
          maxLength={10000}
          onChange={(e) => {
            setInputData(e.target.value);
            processData(e.target.value); // process the text
          }}
          value={selectedTemplate ? selectedTemplate.text : inputData}
          placeholder="Add existing post which you wrote before so it would be clear which format you are writing in and can write the same"
          className="text-black w-full h-32 p-2 text-s bg-white border border-gray-300 rounded-md shadow-inner md:h-240"
        />
        {/* {selectedTemplate && (
          <img src={selectedTemplate.img} alt={selectedTemplate.name} />
        )} */}
      </div>

      <Menu as="div" className="relative block text-left w-full">
        <div>
          <Menu.Button className="inline-flex w-full justify-between items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue">
            {selectedTemplate ? selectedTemplate.name : "Select template"}
            <ChevronUpIcon
              className="-mr-1 ml-2 h-5 w-5 ui-open:hidden"
              aria-hidden="true"
            />
            <ChevronDownIcon
              className="-mr-1 ml-2 h-5 w-5 hidden ui-open:block"
              aria-hidden="true"
            />
          </Menu.Button>
        </div>

        <Transition
          as={Fragment}
          enter="transition ease-out duration-100"
          enterFrom="transform opacity-0 scale-95"
          enterTo="transform opacity-100 scale-100"
          leave="transition ease-in duration-75"
          leaveFrom="transform opacity-100 scale-100"
          leaveTo="transform opacity-0 scale-95"
        >
          <Menu.Items className="absolute left-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
            <div className="">
              {templates.map((template) => (
                <Menu.Item key={template.name}>
                  {({ active }) => (
                    <button
                      onMouseEnter={handleMouseEnter(template)}
                      onMouseLeave={handleMouseLeave}
                      onClick={() => {
                        setInputData(template.text);
                        setSelectedTemplate(template);
                        processData(template.text); // process the text
                      }}
                      className="px-4 py-2 text-sm w-full text-left flex items-center space-x-2 justify-between"
                    >
                      <span>{template.name}</span>
                      {selectedTemplate === template && (
                        <CheckIcon className="w-4 h-4 text-bold" />
                      )}
                    </button>
                  )}
                </Menu.Item>
              ))}
            </div>
          </Menu.Items>
        </Transition>
      </Menu>
      {showImage && previewTemplate && (
        <div className="absolute top-4/6 left-2/3 transform -translate-x-1/3 -translate-y-1/2 w-256 h-256">
          <img
            className="w-full h-full object-scale-down"
            src={previewTemplate.img}
            alt={previewTemplate.name}
          />
        </div>
      )}
    </>
  );
};

I am gonna share more updates today.

https://github.com/shnai0/linkedin-post-generator

All contributions are welcome here, it is an open source project:)

Building any open source projects this weekend?

Iuliia Shnai — Fri, 30 Jun 2023 15:18:07 +0000

I feel like weekend is the best time to build micro-project

I am building Infinite UI - UI components collection which has a lot of Tailwind style components and on top you can generate your own.

https://infiniteui.co

This project is a result of my previous project

https://everything.to - where you can generate any type of components. Next/JS+ Tailwind UI
By the way it gives a lot of errors in generation.

Update 1: Saturday 18.00 CEST)
Here I am trying to turn React component into HTML that it generates better.

But that is where I am at now -Satarday evening - designing the page for each generated component.

It does not look good so far hahah

The slug page already created still does not look great.

Update 2: Sunday 12.00 (CEST)

Slug page is there. Need to work on generation that from existing component you need to generate new one.

I have a small collection of nice looking component and will continue fill more, by generating it.

I am gonna share more updates soon:)

So definitely, the plan to make it open source.

Interesting what r you working on this weekend? Any open source projects?

7 tools to code your first project in a week.🚨 Alert: this story from newbie to newbies 😂

Iuliia Shnai — Mon, 19 Jun 2023 16:19:13 +0000

You wanna start coding? You did first attempts but did not launch your project yet.

Welcome, my similar mind. This article than can be for you.

What you will learn here?

I will share with you 7 free tools I used to code my first project.

Which got viral and got many awesome users.

Thank you all who tested it, YOU ROCK 🤘

This is the project- Linkedin Post Generator https://github.com/shnai0/linkedin-post-generator

It is an Open Source. So you can start building one top of it.

If you interested to learn more, check my other article there all details
„ How I built my first Open Source project with ChatGPT and Next.js. 10k users in 24 hours 🤯“

7 tools which helped me to code it in 1 week

1. Visual Studio Code by Microsoft

This is a code editor. Which I had on my computer. But you easily download it from website.

Install here (https://code.visualstudio.com

2. tea.xyz

This is a package manager from creator of Homebrew. I needed to install it, that it runs on my computer.

Good news you need to do it only once.

After if you start the new project, tea will do it on the back and install necessary dependencies for you to code.

It will take care of installing node, npm, vercel and any other packages you may need for development.
Just type the command and the package becomes available - even if you didn't install it before.

Here how to install it:

sh <(curl https://tea.xyz)

# --- OR ---
# using brew
brew install tea

TEA documentation https://docs.tea.xyz/getting-started/install-tea

As I got that, your environments coding will not work if you not installing all necessary packages.

So all packages for installation of components to work inside my developer environment. (Dont ask more details on it:) 😁

3. GitHub

I recovered my long existing but not active GitHub account.

GitHub was needed to find open source projects and copy them in my visual studio.

When I found the Open Source projects.

I actually just pressed download the zip and had it on my computer. So I did not copy repository.

And then I did in my visual studio.

npm install

Than GitHub was also needed to push the project. So I created the separate repository there.

Create new repository on GitHub

$ git remote add origin https://github.com/shnai0/linkedin-post-generator.git
git branch -M main
git push -u origin main

Push the updates there

git add .

git commit -m “fix type”

git push

4. ChatGPT and OpenAI

So ChatGPT I used from the first moment to ask questions. Which commands to run to copy open source project?

Would I be able to build the project without it so fast? No.

I asked ChatGPT to explain code, change code, solve bugs and just code smth for me.

So basically, as soon as you go to copy the Open Source projects on GitHub, I actively used this one.

I also used Open AI API. As a project was AI generator , you need in order for it to work, create your own env.file and copy API Key inside of it.

So create account on Open AI API https://openai.com/blog/openai-api

5. Tailwind UI

This one is essential for editing the components of your front end. You can just search there directly for what you want to change and see how it looks like.

They have website with all this components, if you need it you can use it.
https://tailwindui.com

Though you can take them from there open source projects open source.
https://github.com/tailwindlabs/tailwindcss

You dont need to install Tailwind if you use OpenSource project. Just copy it is already there.

6. Vercel

Time to deploy.

This one was super helpful. As it is help you in one click host you project and check all errors.

So, steps are:

Create account via GitHub
connect to GitHub project

So every time you will push smth it will go directly to Vercel and Vercel shows you if there are errors or project automatically hosted.

Push

If there are many errors use command to first eliminate errors.

npm run build

7.Plausible Analytics

For analytics I used Plausible. I mean you can use Google Analytics. But I think you definitely need one, it is so crucial to see how what you build is used.

Recommendations:

💡 Starts small
💡 Check existing open source projects
💡 Ask help from friends for initial setup
💡 Ask ChatGPT everything you don't get
💡 Document each step

Hit me with a star

I am building new mirco-projects and grow Papermark.io - open source document insfrastrcute.

Place to leave your precious stars ⭐️

Share with me your developer journey:) Happy to meet more exciting friends here.

Here my Twitter for new projects update

How I built my first Open Source project with ChatGPT and Next.js. 10k users in 24 hours 🤯

Iuliia Shnai — Mon, 12 Jun 2023 17:57:18 +0000

Small intro, I never coded before and it looked super hard to me and 2 months ago I decided why not now.🤷‍♀️

My friends suggested me to start with Open Source projects and also helped me with first simple steps for the set up.

I used ChatGpt practically for every move I made from figuring out how to set smth up, install, connect API to what the code means, how to rewrite the functions or change the sizes.

Now I am gonna tell a bit more about the first project I build.

What you will find in this article?

Me evolving from 🥚 to 🐥

🥚 Step 1. Setup environment
🥚 Step 2. Find open source projects and build on top
🐣 Step.3 Figuring out the code
🐣 Step 4 Building the project
🐥 Step 5 Pushing the project
🐥 Step 6.Sharing on social (stats here)

It took me a week to figure out everything and launch the project on Linkedin. From moment I set up things (which was quick, 1-2 hours with some help). Then managing existing code from OS projects (3-4 days). And push to Github and Vercel (took one day).

What is the project I built?

Linkedin Post Generator - post generator to create AI generated posts on LinkedIn. https://www.postgenerator.app

On GitHub https://github.com/shnai0/linkedin-post-generator
Use it to build your own post generator.
👀 for new forks and stars :)

Below I share all the stats for first days of launch and becoming viral on LinkedIn.

Why Linkedin Post Generator?

First I was experimenting with Linkedin platform for quite some time.

I spend a lot of time for writing posts on linkedin, like 1 hour per post at least and was thinking on shortcut.🤯

So, I analysed 100+ different creators and 300+ different prompts to find the ways to generate more effective posts faster.

So, here I am gonna share the basics of what I did step by step.

🥚 Step 1. Setup environment

Set up tea

Before I get started, I get recommendation to set up a package manager, like tea to handle development environment.

🥹 These words are still unknown at this point "a package manager"

sh <(curl https://tea.xyz)

# --- OR ---
# using brew
brew install tea

As I get it tea help installing node, npm, vercel and any other packages I need for development.

So all in one.

Setting up Next.js with TypeScript and Tailwindcss

I had a basic understanding that I need smth for front end.

I was taught to start by generating a new Next.js project. Also using TypeScript and Tailwind CSS, so followed these steps:

npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias

🥚 Step 2. Find open source projects and build on top

I used these two Open Source projects:

Twitter Alghoritm https://github.com/coryetzkorn/twitter-algorithm So I could rate the post input from users based of what is the algorithm of Linkedin.

2.Twitter Bio generator

https://github.com/Nutlope/twitterbio
This one helped me to figure out how to connect Open.AI and generate with it posts for Linkedin. In current code it generated BIO

To set and open each of the projects separately I downloaded them as zip on my computer

🐣 Step.3 Figuring out the code

So I kind of was shocked with what I see and could not figure out anything in the beggining.

So what I did I asked ChatGPT about basic structure of my application.

I copied every page code in it and ask what it does, and basically ask how to make changes. So I start getting a better idea, where is front of application, where is CSS.

I still have no full idea of everything and missing the stuff but I think it is definitely quick learning.

Some of the request I made to ChatGPT were super basic, and now look really clear to me, at those point I asked everything, all stupid questions.

🐣 Step 4 Building the project

So after figuring out some basics I move on making my own changes. start building application on top of these projects.

It has two parts =Ranking + Generator

Linkedin Post Generator Alghoritm

Ranking is ranking your post based on different criteria which increase performance.

I adapted algorithm for what is know for Linkedin, using the functions:

Function to detect multiple hashtags
Function to detect image or video
Function to detect urls in post
Function to favor posts that use emojis
Function to promote negative content
Function to prioritize break like post formatting.
Function to reduce line length
Function to ask questions

In comparison with Twitter algorithm, Linkedin is not public.


// function to detect multiple hashtags
function multipleHashtags({ post }: PostData): Rank {
  const regex = /#[\w-]+/g;
  const hashtags = post.match(regex);
  const lowerCasePost = post.toLowerCase();

  if (hashtags && hashtags.length > 3) {
    return {
      score: 0.5,
      message: `Too many hashtags.`,
    };
  }
  if (hashtags && hashtags.length <= 3) {
    if (
      lowerCasePost.includes("#follow") ||
      lowerCasePost.includes("#comment") ||
      lowerCasePost.includes("#like")
    ) {
      return {
        score: 0.5,
        message: `Avoid using hashtags like "follow," "comment," or "like".`,
      };
    }
    return {
      score: 1,
      message: `Combine general and specific hashtags.`,
    };
  }

  return {
    score: 1.0,
  };
}

// function to detect image or video
function imageVideoBoost({ postMedia }: PostData): Rank {
  const has_media = postMedia;
  if (has_media) {
    return {
      score: 2.0,
      // message: `Contains image or video.`,
    };
  }
  return {
    score: 1.0,
  };
}


// function to detect urls in post
function postHasUrl({ post }: PostData): Rank {
  const regex =
    /https?:\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?/g;
  const urls = post.match(regex);
  if (urls && urls.length > 0) {
    return {
      score: 0.5,
      message: `Remove the link from post and add in comments.`,
    };
  }
  return {
    score: 1.0,
  };
}


/**
 * Function to favor posts that use emojis 
 */
function emojis({ post, sentiment }: PostData): Rank {
  const regex = new RegExp("[\uD800-\uDBFF][\uDC00-\uDFFF]", "g");
  const emojis = post.match(regex) || [];
  const totalMatches = emojis.length;
  if (totalMatches > 0) {
    return {
      score: 1.5,
      // message: `Included ${totalMatches} emojis in the post.`,
    };
  }
  return {
    score: 1,
    message: "No emojis found in the post.",
    type: "negative"
  };
}


/**
 * Promote negative content because it's more likely to go viral.
 * Hide anything positive or uplifting.
 */
function sentiment({ post, sentiment }: PostData): Rank {
  if (sentiment.comparative >= 0.5) {
    if (sentiment.comparative > 1.5) {
      return {
        score: 1.5,
        // message: `Exceptionally positive.`,
      };
    } else {
      return {
        score: 1.1,
        // message: `Positive sentiment.`,
      };
    }
  } else if (sentiment.comparative <= -0.5) {
    if (sentiment.comparative < -1.5) {
      return {
        score: 0.5,
        // message: `Exceptionally negative.`,
      };
    } else {
      return {
        score: 0.9,
        // message: `Negative sentiment.`,
      };
    }
  } else {
    return {
      score: 1,
    };
  }
}

/**
 * Prioritize break like post formatting.
 */
function lineBreaks({ post, sentiment }: PostData): Rank {
  const breaks = post.split(/\n\s*\n/);
  const totalBreaks = breaks.length - 1;
  if (totalBreaks >= 1) {

    return {
      score: 1.5,
      // message: `Used ${totalBreaks} line breaks.`,
    };
  } else {
    return {
      score: 1,
      message: `Add line breaks between the lines.`,
      type: "negative"
    };
  }
}

/**
 * Reduce line length
 */
function lineLength({ post }: PostData): Rank {
  const lines = post.split('\n');
  let score = 1.0;
  for (let i = 0; i < lines.length; i++) {
    if (lines[i].length > 200) {
      return {
        score: 0.9,
        message: `Reduce line length to improve readability (200 characters).`,
      };
    }
  }
  return {
    score: 1,
    // message: `Good, keep line length 200 characters or less.`,
    type: "positive"
  };
}
/**
* Function to ask questions
*/
function questions({ post, sentiment }: PostData): Rank {
  if (post.includes("?")) {
    return {
      score: 1.5,
      // message: "Great! Questions can help to activate discussion"
    };
  } else {
    return {
      score: 1,
      message: "Add questions to activate discussion",
      type: "negative"
    };
  }
}

User interface of algorithm

It detect all function in the above code and for some of them shows how to improve post. I did not adjust it for all functions.

  return (
    <>
      <div>
        <div className="slider bg-gray-300 h-4 rounded-full relative overflow-hidden">
          <div
            className={classNames(
              "absolute top-0 transition-width duration-250 ease-linear h-20",
              sliderColor
            )}
            style={{ width: percentage }}
          />
        </div>
        {/* <p className="explanation text-gray-600 italic text-sm mt-2">
          Positive rankings result in greater reach 
        </p> */}

        <ul className="mt-5 p-0">
          {positive.map((item, index) => (
            <li
              className="positive text-green-600 flex items-center space-x-2 list-style-none my-5 text-sm"
              key={`positive-${index}`}
            >
              <span>👍</span>
              <span>{item.message.replace(/\(\s*[+-]?\d+\s*\)/, '')}</span>
            </li>
          ))}
          {negative.map((item, index) => (
            <li
              className="negative text-red-600 flex items-center space-x-2 list-style-none my-1 text-sm"
              key={`negative-${index}`}
            >
              <span>👎</span>
              <span>{item.message.replace(/\(\s*[+-]?\d+\s*\)/, '')}</span>
            </li>
          ))}
        </ul>
      </div>
      <style jsx>{`
        .slider:after {
          content: " ";
          display: block;
          width: 2px;
          height: 20px;
          position: absolute;
          top: 0;
          left: calc(25% - 1px);
          background: #000;
        }
      `}</style>
    </>
  );
};

Open AI Api and Prompts Generator

I use handle Prompt to generate the post. Also there were filter for types, so I had 5 different prompts based on type.
I just connected my OpenAI API for it.

const handlePrompt = () => {
    let prompt;
    switch (vibe) {

Prompt below

 prompt = `Generate post using this prompt, based on ${post}.  You are a LinkedinGPT, a large language model that generates viral posts for Linkedin. You are given a prompt of a post and must generate a post that is more likely to be liked and reposted than the original post.
The Linkedin algorithm contains boosts and demotions based on what you are writing. Positive boosts are:

- in each post add emoji
- 200 characters in sentence maximum
- Start each sentecnce from new line and ad numbers in first 2 lines
- add 3 hashtags which 2 are generic and one very specific (at the end) Tags relate to post theme
- add a question at the end of the post to start a discussion. Before the hashtags
- first two lines should be catchy
- Dont add links - links are not good.
- If post copied in the field contain some numbers keep them the same.

Add idea about which image or visual can be added at the end of the post (this text is not counted as part of post)
${post}
---
Generated post length must be more than 800-1200 characters
---
Between each line must be a space
---
Keep all mentions of people in there
---
Start the firs line from smth like: I did smth, In year, I do, Tired of, Sometimes it is just, A path toward, Because this is not,I've been struggling,  (change the begginign depends on the context )
---
Add emoji if it fits
---
It should be a story`;

Generator interface

This is my index file. From of the post generator.


      <main>
        <nav className="bg-blue-900 text-white ">
          <div className="px-5">
            <div className="max-w-5xl mx-auto">
              <div className="flex justify-between items-center h-16 ">
                <div className="flex items-center text-base ">
                  <a target="_blank"
                    href="https://www.linkedin.com/in/iuliia-shnai/"
                    rel="noreferrer"
                    className="text-white flex max-w-fit items-center justify-center space-x-2 text-xl"
                  >
                    <p>👩‍💼</p>

                  </a>
                </div>

              </div>
            </div>
          </div>
        </nav>
        <section className="py-10 lg:py-20 ">
          {/* bg-[url('/image1.svg')] */}
          <div className="px-4">
            <div className="max-w-5xl mx-auto">
              <div className="w-full mx-auto">
                <h1 className="text-6xl text-center font-bold pb-1 text-slate-900">

                  Linkedin Post Generator  🚀
                </h1>
                <p className="mt-3 mb-10 text-center">
                  See how your post performs and generate a better one with AI. Time to go viral. <br />

                </p>
                <div className="flex flex-col md:flex-row w-full md:space-x-20">
                  <div className="flex md:w-1/2 flex-col">
                    <h2 className="text-xl font-bold">
                      Your Ranking
                    </h2>
                    <div className="pt-1">
                      <Ranking ranking={ranking} />
                    </div>

                    <div className="w-full my-1 mx-auto">
                      <Post
                        post={post}
                        setPost={setPost}
                        media={media}
                        setMedia={setMedia}
                      />
                    </div>

                    <div className="flex mb-5 items-center space-x-3">


                    </div>
                    <div className="block">
                      <DropDown vibe={vibe} setVibe={setVibe} />
                    </div>
                    <div className="my-4">
                      <button
                        disabled={loading}
                        onClick={(e) => optimizePost(e)}
                        className="bg-blue-800 font-medium rounded-md w-full text-white px-4 py-2 hover:bg-blue-600 disabled:bg-blue-800"
                      >
                        {loading && <LoadingDots color="white" style="large" />}
                        {!loading && `Generate new post `}
                      </button>
                    </div>

                  </div>
                  <div className="flex md:w-1/2 md:flex-col">
                    <Toaster
                      position="top-right"
                      reverseOrder={false}
                      toastOptions={{ duration: 2000 }}
                    />
                    {optimizedPost && (
                      <div className="my-1">
                        <div className="flex justify-between items-center pb-2 border-b border-gray-300">
                          <h2 className="text-xl font-bold">
                            Your Generated Post
                          </h2>
                        </div>
                        <div className="max-w-2xl my-4 mx-auto">
                          <div
                            className="bg-white rounded-xl shadow-md p-4 hover:bg-gray-100 transition cursor-copy border"
                            onClick={() => {
                              navigator.clipboard.write([
                                new ClipboardItem({
                                  "text/html": new Blob([optimizedPost], { type: "text/html" }),
                                }),
                              ]);
                              toast("Post copied to clipboard", {
                                icon: "📋",
                              });
                            }}
                            key={optimizedPost}
                          >
                            <p className="text-black-700" dangerouslySetInnerHTML={{ __html: optimizedPost }} />
                          </div>
                        </div>
                      </div>
                    )}

                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <div className="max-w-5xl mx-auto">
          <Footer />
        </div>
      </main>
    </>
  );
}

🐥 Step 5 Pushing the project

Final step, I was ready to push.

I create repository on GitHub

$ git remote add origin .. 
git branch -M main
git push -u origin main

And further on created account on Vercel, to push it with Vercel and check errors.

Every updates than I pushed via

git add .

git commit -m “fix type”

git push

For checking errors I used, so that I dont push with all errors. ChatGPT helped with fixing errors a lot, while I did not even understand how to find them.

npm run build

🐥 Step 6.Sharing on social and gathering feedback

As it was linkedin project I dropped the post there. and it got Viral with 200k views and haters even:)

Link to post
https://www.linkedin.com/feed/update/urn:li:activity:7053373191133499392/

Stats in first 24 h:
⭐️ 20000 Linkedin impressions
⭐️ 7000 website views
⭐️ 600 likes
⭐️ 11000+ posts generated
⭐️ 3+ haters
⭐️ 3+ joint project offers

What am I doing now?

I am building different micro-tools and contributing to existing open source projects.

If you like this article and would like to support me on my coding journey, here one of the new open source project I am on.

Papermark - open source alternative to Docsend

Give us a star ⭐️

It is a document/Pitchdeck sharing with analytics build in. I had so many troubles with Docsend before, when I was trying to raise capital that it annoyed me a lot.

So I think, it would be cool to have Open Source alternative, if project will grow.

If you are building something in Open Source, share, I am curious to fork it 👀

Follow my journey, more micro-projects here https://linktr.ee/shnai

My Twitter https://twitter.com/shnai0

How to create 700+ SEO optimised pages for website in 1 h using Next.JS, OpenAI, Postgres

Iuliia Shnai — Thu, 08 Jun 2023 16:37:27 +0000

Small intro, I started learning coding couple of months before and since then experimenting with different small side projects.

So this I show coding still looks for me:)

Follow my journey on Twitter https://twitter.com/shnai0

What did I build this time?

I built the new side project Startup Funding startupfunding.to - generated lists of funds and investors for different countries, rounds, and industries. It can help founders obtain the list of investors faster.

Before I started learning how to code I was discovering SEO game and used no-code tools and website builders to multiply pages.

As I learnt how to build website it looked super interesting, if I can multiply pages faster by coding.

This project was a perfect fit for it as multiply pages can be simply based on different countries and funding rounds:

startupfunding.to/india
startupfunding.to/seed-uk
startupfunding.to/pre-seed-sweden
...

How did I multiply 1 page in 700?

This is my step by step instruction:

1. Find right keywords in Semrush

2. Build the page with variables from the database

Here are 4 variables which change:
slug
country
header
meta

Meta is super important every page should have different meta for google to identify the difference.

return (
    <>
      <Head>
        <title>Investors for startups</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <meta name="description" content={page.meta} />
        <meta property="og:site_name" content="startupinvestors.vercel.app" />
        <meta property="og:description" content="Startup funding" />

        <meta name="StartupFunding:card" content="summary_large_image" />
        <meta property="og:image" content="/cover.png" />
      </Head>

      <div className="flex flex-col min-h-screen justify-between bg-slate-900">
        <main className="h-full bg-slate-900">
          <nav className="bg-black text-white ">
            <div className="px-5">
              <div className="max-w-5xl mx-auto">
                <div className="flex justify-between items-center h-16 ">
                  <div className="flex items-centertext-base ">
                    <a
                      target="_blank"
                      href="/"
                      rel="noreferrer"
                      className="text-white flex max-w-fit items-center justify-center space-x-2 text-xl"
                    >
                      <p>Startup investors</p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </nav>
          <section className="py-10 lg:py-20 bg-slate-900">
            {/* bg-[url('/image1.svg')] */}
            <div className="px-4">
              <div className="max-w-5xl mx-auto">
                <div className="w-full mx-auto">
                  <h1 className="text-6xl text-center font-bold pb-1 text-white ">
                    {page.header}
                  </h1>
                  <p className="mt-3 mb-10 text-center text-white">
                    Raise capital with help of AI generated list of investors{" "}
                    <br />
                  </p>
                  <div className="max-w-5xl mx-auto px-8 lg:px-28">
                    <div className="max-w-5xl mx-auto">
                      <div className="w-full my-1 mx-auto "></div>

                      <div className="w-full my-1 mx-auto">
                        <div className="flex space-x-4">
                          {" "}
                          {/* Add this wrapper div with flex and space-x classes */}
                          <div className="w-full ">
                            {" "}
                            {/* Add w-1/2 class to the parent div */}
                            <CountrySelect
                              country={country}
                              setCountry={setCountry}
                              slug={page.country}
                            />
                          </div>

3. Generate CSV file for 700 pages with ChatGPT

Next step is to fill in database. I used chatgpt for generating the content.

Further I moved the data to Excel so I have my CSV file ready

This actually took most of the time.

4. Connect TablePlus with my CSV and Postgres database

As I am using Postgres in Railway, I connected Table Plus with imported inside data for 730 pages.

5. Check that all pages are indexed in Google Search Console

If you are building new website it maybe will be a manual work to index pages in the beginning. And there is also limit for indexing request per day. (I am still on it)

If you know how to speed this up, appreciate the advice:)

Result: 730 pages in 1 hour

You can find this pages by changing slug practically on each country.

Check these different pages examples:
www.startupfunding.to/india
www.startupfunding.to/seed-india
www.startupfunding.to/pre-seed-india

Asking for a friend: help me reach 1000 ⭐️⭐️

I am on the new challenge to grow Papermark.io on GitHub to 1000 stars in 1 month.

papermark.io - open source alternative to Docsend

https://github.com/mfts/papermark

The project is close to my heart for 2 reasons:

I started coding only because availability of Open Source projects, either I think I would never attempt it.
I was raising capital before and always looking for cool alternative to Docsend for sending Pitchdeck.