Linkedin Post Maker

Getting Started:

Enter your name and LinkedIn username.
Upload your profile picture (small size recommended for faster loading).
Click "Save" to complete your profile setup. You only need to do this once.

Manual Post Generation:

Copy the provided JSON format text below.
Use an AI tool to generate a LinkedIn post from this JSON.
Once the post is generated, go to "Create New Post" and paste the JSON text into the text field.
Click "Create Post" to publish your content.

Automatic AI Post Generation:

Click "Create Post".
Enter your topic or idea in the input field.
Click "Generate" and let the AI create the post for you.
Review the generated post and click "Create Post" to publish it.

After Post Creation:

Select a design theme from the options on the right side.
If the text is too long or doesn't fit properly, you can resize the font by hovering over the text.
Once you're happy with the design, click "Download Post" to save the post.
Upload the document post to LinkedIn.
Click the "Copy Description" button to copy the text description, then paste it into your LinkedIn post and publish.

Example Object:

1{
2  "title": "Building Interactive Forms with Formik in React",
3  "description": "📋 Formik is a powerful library for handling forms in React. It simplifies form validation, submission, and state management, making it easy to build interactive and user-friendly forms.",
4  "hashtags": [
5    "JavaScript",
6    "React",
7    "Formik",
8    "Forms",
9    "webdev",
10    "frontend",
11    "development",
12    "developer",
13    "web",
14    "tech",
15    "tips",
16    "guide",
17    "learn",
18    "tutorial",
19    "webdevelopment"
20  ],
21  "content": [
22    {
23      "name": "Introduction to Formik",
24      "description": "📋 Formik is a popular library for managing form state in React applications. It helps you handle form validation, submission, and state management efficiently.",
25      "codeLang": "none",
26      "code": ""
27    },
28    {
29      "name": "Installing Formik",
30      "description": "📥 Start by installing Formik in your React project using npm or yarn.",
31      "codeLang": "bash",
32      "code": "npm install formik\n# or\nyarn add formik"
33    },
34    {
35      "name": "Creating a Basic Form with Formik",
36      "description": "🛠 Create a basic form using Formik. Define your form structure and handle form state using the `useFormik` hook.",
37      "codeLang": "javascript",
38      "code": "import React from 'react';\nimport { useFormik } from 'formik';\n\nconst BasicForm = () => {\n  const formik = useFormik({\n    initialValues: {\n      name: '',\n      email: ''\n    },\n    onSubmit: values => {\n      alert(JSON.stringify(values, null, 2));\n    }\n  });\n  return (\n    <form onSubmit={formik.handleSubmit}>\n      <label htmlFor=\"name\">Name</label>\n      <input\n        id=\"name\"\n        name=\"name\"\n        type=\"text\"\n        onChange={formik.handleChange}\n        value={formik.values.name}\n      />\n      <label htmlFor=\"email\">Email</label>\n      <input\n        id=\"email\"\n        name=\"email\"\n        type=\"email\"\n        onChange={formik.handleChange}\n        value={formik.values.email}\n      />\n      <button type=\"submit\">Submit</button>\n    </form>\n  );\n};\n\nexport default BasicForm;"
39    },
40    {
41      "name": "Adding Validation with Yup",
42      "description": "✅ Integrate Yup for schema-based form validation. Define a validation schema and pass it to Formik to validate form fields.",
43      "codeLang": "javascript",
44      "code": "import React from 'react';\nimport { useFormik } from 'formik';\nimport * as Yup from 'yup';\n\nconst validationSchema = Yup.object({\n  name: Yup.string()\n    .min(2, 'Must be at least 2 characters')\n    .required('Required'),\n  email: Yup.string()\n    .email('Invalid email address')\n    .required('Required')\n});\n\nconst ValidationForm = () => {\n  const formik = useFormik({\n    initialValues: {\n      name: '',\n      email: ''\n    },\n    validationSchema,\n    onSubmit: values => {\n      alert(JSON.stringify(values, null, 2));\n    }\n  });\n  return (\n    <form onSubmit={formik.handleSubmit}>\n      <label htmlFor=\"name\">Name</label>\n      <input\n        id=\"name\"\n        name=\"name\"\n        type=\"text\"\n        onChange={formik.handleChange}\n        value={formik.values.name}\n      />\n      {formik.errors.name ? <div>{formik.errors.name}</div> : null}\n      <label htmlFor=\"email\">Email</label>\n      <input\n        id=\"email\"\n        name=\"email\"\n        type=\"email\"\n        onChange={formik.handleChange}\n        value={formik.values.email}\n      />\n      {formik.errors.email ? <div>{formik.errors.email}</div> : null}\n      <button type=\"submit\">Submit</button>\n    </form>\n  );\n};\n\nexport default ValidationForm;"
45    },
46    {
47      "name": "Handling Form Submission",
48      "description": "🔄 Handle form submission using Formik's `onSubmit` handler. Process form data and perform necessary actions upon form submission.",
49      "codeLang": "javascript",
50      "code": "import React from 'react';\nimport { useFormik } from 'formik';\n\nconst SubmitForm = () => {\n  const formik = useFormik({\n    initialValues: {\n      name: '',\n      email: ''\n    },\n    onSubmit: values => {\n      console.log('Form data', values);\n      // Perform additional actions such as sending data to an API\n    }\n  });\n  return (\n    <form onSubmit={formik.handleSubmit}>\n      <label htmlFor=\"name\">Name</label>\n      <input\n        id=\"name\"\n        name=\"name\"\n        type=\"text\"\n        onChange={formik.handleChange}\n        value={formik.values.name}\n      />\n      <label htmlFor=\"email\">Email</label>\n      <input\n        id=\"email\"\n        name=\"email\"\n        type=\"email\"\n        onChange={formik.handleChange}\n        value={formik.values.email}\n      />\n      <button type=\"submit\">Submit</button>\n    </form>\n  );\n};\n\nexport default SubmitForm;"
51    }
52  ]
53}

Made with 💖 by C & D