AI Blog Automation with ReactJs NextJs GoogleAI TypeScript

Set up a new Next.js project with TypeScript and Tailwind, enable the app router, install the UI library, and implement a starter home page with a button component.

Implement light and dark themes for the app using next themes and a theme provider. Add a theme toggle in the navigation and ensure the default is dark.

Build a top navigation in a Next.js app, display a logo, add home and blog automation links, and integrate a theme toggle within a layout gated for logged-in users.

Design a blog automation page in a React Next.js TypeScript app, using state and effect hooks to generate and manage categories, titles, content, and images with AI and Unsplash.

Create a blog automation page with a category input and a generate categories function. Build a client component card that shows AI-suggested categories as selectable buttons updating the state.

Learn to implement a title input with AI-generated suggestions, display them in a responsive grid, and let users select a title with visual feedback.

Integrate a React markdown editor for blog content by adding a content editor area, a generate content button, and a live preview powered by an AI-generated draft.

Design a generate image layout for blog automation with Unsplash API image previews. Provide controls for generate image and submit blog post, and plan Gemini AI integration.

Set up Google Gemini API keys and environment variables, configure MongoDB Atlas or local MongoDB and Unsplash API keys to enable AI-generated categories, titles, content, and images for blog posts.

Generate blog content with AI by integrating Google Generative AI in a Next.js app, configuring server actions, and using the Gemini-1.5-flash model to create categories, titles, and content.

Demonstrates generating ai category suggestions on a blog automation page by crafting prompts that return a categories array in json, while managing loading states and updating the ui.

Generate ai-powered title suggestions by selecting a category, crafting seo-optimized prompts, and returning three catchy blog titles designed to attract traffic.

Learn to implement the generate content function for AI blog posts, including title validation, loading states, async prompts, and producing SEO-friendly, semantically structured HTML with headings.

Fine tune ai prompts to output clean html by excluding doctype, html, body, head, meta, and including header and code blocks for blog content.

Add a breadcrumbs component to the navigation to show the current path, derive segments with use path name, and render linked crumbs including a home link.

Create a global authentication context with a provider and use-auth hook to manage login state and user data across pages, enabling role-based navigation and server action.

Create an authentication context provider to manage user state, loading, and a login modal with an initial user object containing name, username, role, email, and password, wired through the context.

Build a login form using the auth context to manage the user and loading state, toggle the login modal, and handle email and password inputs with form submission.

Open the login modal from navigation by wiring a login link to the auth context, importing the login modal, and toggling visibility with a client component button.

Set up a MongoDB connection using mongoose by creating a db utility, reading the connection string from an env file, and connecting to either Mongo Atlas or a local database.

Create a mongoose user model with a schema that timestamps records, and define required email and password, a unique username, optional website and about, and a default user role.

Hash and verify user passwords using bcrypt js by building auth utilities in auth.ts, with hashPassword and comparePassword, salt rounds of 10, and database integration for login.

Validate user emails during login with the deep email validator npm package and auto-create or log in the user. Enforce a six-character password and display toast errors for invalid inputs.

Generate a signed jwt from a user type payload with an env secret, expiry seven days, and set it in an http-only, sameSite strict cookie named auth.

Connects to the database to log in or register users by email, validates passwords, issues a token, and stores it in a cookie for seamless authentication.

Implement login or register action using cookies to store a token, decode it in a context with useEffect for persistence across page reloads, and show toast notifications.

Implement a server action to verify a jwt from cookies, return the current user and logged in status, and sync this data to state for dynamic navigation.

Implement a logout server action that deletes cookies, returns a logout message, updates the context state to false, and enables a top nav button with a dropdown menu.

Implement a dynamic dropdown menu for user actions by toggling login state, showing dashboard and logout options when a user is logged in, and displaying a login link otherwise.

Secure dashboard pages in a Next.js app by using a dashboard layout with a server action to check the user’s login status and redirect unauthenticated users to login.

Implement a login page that uses a login modal controlled by auth context and the use effect hook, redirecting authenticated users to the dashboard and centering the login button.

Create a blog model using mongoose, define fields (user, title, content, category, excerpt, image URL, published, slug), enable text based search indexing, and export the model.

Define a reusable block type in TypeScript for blog content by exporting an interface with fields such as _id, user, title, content, excerpt, and slug.

Create a server-side blog action that saves posts to the database, requires a logged-in user, generates a 160-character excerpt and slug from the title, and returns the blog as json.

Call the create blog db server action to save posts to the database, validate required fields, and display a success toast while updating category, title, content, and image.

Implement blog retrieval by id from MongoDB, populate author details, and expose actions to fetch, update, and display a single blog on the home page.

Update blog data on the same page by loading a blog via id, populating the form, validating the logged-in user, generating excerpts, and returning updated data.

Reuse the blog automation page to update posts by detecting an id in the url, pre-populating the form with block data, and dynamically submitting for update or create.

Create a dual create-update blog form that uses the id in the url to switch flows, submitting category, title, content, and image url via server actions with loading and notifications.

Implement server actions to fetch a user's blogs with pagination for the dashboard and home page, including total count, selective fields, and populated user info.

Fetch all blogs with pagination to populate the home page by querying the database, filtering published true, and populating user data.

Display the user's blogs on the dashboard by fetching blogs via server action, rendering them as interactive cards with links to view or update, and implement simple pagination.

Designs a reusable blog card for the home page, configures Next.js image remote patterns for Unsplash, and renders a responsive card with header, image, and layout.

Design a reusable blog card for ai blog app, with header image, title, category, and an excerpt as meta description. Use a reusable info item to show author and date.

Build a blog pagination component in React and Next.js by wiring page and total pages props, rendering previous, next, and numbered links with active states.

Reload the blog automation page with a regular anchor tag to reset the edit form when the id is gone, clearing fields to create a new blog.

Create a public blogs page by displaying dashboard blocks in the blog space, add a blogs link in navigation, and fetch all published blogs via a server action.

Create dynamic SEO metadata for blog pages by stripping HTML, generating 160-character meta descriptions, and setting open graph, canonical URLs, and image details for better search visibility.

Display reading time for blogs by building a dedicated blog view component, integrating a reading time plugin, and presenting a dynamic read-time label in a card-based layout.

Display blog cards with full-width images and overlaid titles, then show metadata and render content with dangerously set inner HTML using Tailwind CSS typography for SEO.

Showcase blog metadata with time-to-read and word count, display published date and, if updated, last updated date, plus author and category, using consistent button styles.

Learn how to integrate Google Fonts into a Next.js blog app, using the Comic Neue font, setting subsets and weight, and applying it via the body class name.