DR-6671 - Add Typefully clone guide #7412
Conversation
Dangerous URL checkNo absolute URLs to prisma.io/docs found. |
Redirect checkThis PR probably requires the following redirects to be added to static/_redirects:
|
WalkthroughAdds a new Vibe Coding tutorial MDX (TweetSmith — an AI-powered tweet polishing tutorial), registers it in the AI > Vibe Coding Tutorials sidebar, and updates cSpell vocabulary to include "Ollama" and "Typefully". Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Pre-merge checks✅ Passed checks (3 passed)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🍈 Lychee Link Check Report
📊 Results Overview
Errors per inputErrors in 800-guides/380-vercel-app-deployment.mdx
|
Deploying docs with
|
| Latest commit: |
98aace5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://9ecf8c2d.docs-51g.pages.dev |
| Branch Preview URL: | https://dr-6671-tweet-saas-guide.docs-51g.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
content/900-ai/tutorials/typefully-clone.mdx (2)
573-592: Clarify the file location or adjust the import path.The import path
"../app/generated/prisma/client"implieslib/prisma.tssits at the project root alongsideapp/. However, the instruction says "Createlib/prisma.ts" without specifying the location relative to the project structure.Consider either:
- Explicitly stating the file should be at
<project-root>/lib/prisma.ts, or- Using
@/app/generated/prisma/clientwith the configured alias for clarityThis prevents confusion for developers who might place
libinsideapp/.
163-163: Minor: Redundant phrasing."a TweetSmith app called 'TweetSmith'" reads awkwardly. Consider simplifying to:
-I need you to create a minimalist single-page UI for a TweetSmith app called "TweetSmith". +I need you to create a minimalist single-page UI for a tweet polishing app called "TweetSmith".
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
content/900-ai/tutorials/typefully-clone.mdxsidebars.ts
🧰 Additional context used
🪛 GitHub Actions: Documentation Checks
content/900-ai/tutorials/typefully-clone.mdx
[error] 2-2: cspell: Unknown word 'Ollama'.
[error] 3-3: cspell: Unknown word 'Ollama'.
[error] 4-4: cspell: Unknown word 'Ollama'.
[error] 5-5: cspell: Unknown word 'Typefully'.
[error] 21-21: cspell: Unknown word 'Ollama'.
[error] 40-40: cspell: Unknown word 'Ollama'.
🪛 LanguageTool
content/900-ai/tutorials/typefully-clone.mdx
[style] ~298-~298: ‘exact same’ might be wordy. Consider a shorter alternative.
Context: ...y You might notice the LLM returns the exact same output every time. That's because LLMs ...
(EN_WORDINESS_PREMIUM_EXACT_SAME)
[style] ~326-~326: For conciseness, consider replacing this expression with an adverb.
Context: ...on" ``` --- ## 6. Add Filter Options Right now, every tweet gets the same treatment. B...
(AT_THE_MOMENT)
[style] ~702-~702: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... they're not ready to post yet, or they want to build a collection of polished content....
(REP_WANT_TO_VB)
[grammar] ~981-~981: Use a hyphen to join words.
Context: ...# Summary You've built a complete tweet polishing application with: - ✅ Local A...
(QB_NEW_EN_HYPHEN)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Check internal links
- GitHub Check: Cloudflare Pages
🔇 Additional comments (3)
sidebars.ts (1)
502-505: LGTM!The new tutorial entry follows the established pattern and is correctly placed within the "Vibe Coding Tutorials" category alongside the existing linktree-clone entry.
content/900-ai/tutorials/typefully-clone.mdx (2)
940-950: LGTM!The
postinstallscript for runningprisma generateis the correct approach to ensure the Prisma Client is generated during Vercel's build process.
12-26: LGTM!The introduction clearly explains what users will build and the technologies involved. The vibe coding info block is a helpful addition for users unfamiliar with the concept.
🍈 Lychee Link Check Report
📊 Results Overview
Errors per inputErrors in 800-guides/380-vercel-app-deployment.mdx
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
content/900-ai/tutorials/typefully-clone.mdx (2)
84-93: JSON example is simplified - consider noting this for readers.This example omits fields from the actual Ollama
/api/tagsresponse (likemodified_at,size,digest, and the nesteddetailsobject). While this keeps the tutorial focused, developers may be surprised when their actual API response differs.Consider adding a brief note like "(simplified for clarity)" or linking to Ollama's documentation for the full schema.
928-948: Consider adding a deployment note about Ollama's local-only limitation.The tutorial builds an excellent local development experience, but the "What's Next?" section doesn't mention that deploying to Vercel (or any serverless platform) will break the AI transformation feature since Ollama runs on
localhost:11434.A brief note would help readers understand they'd need to either:
- Switch to a cloud LLM API (OpenAI, Anthropic, Groq) for production
- Self-host Ollama on a server and update the endpoint
This sets proper expectations before users attempt deployment.
🧹 Nitpick comments (1)
content/900-ai/tutorials/typefully-clone.mdx (1)
667-677: Consider using the@/alias for cleaner imports.The prompt suggests
import prisma from "../../../lib/prisma", which works but is fragile if files move. Since the project uses the@/*alias (line 124), suggesting@/lib/prismawould be more maintainable and consistent with Next.js conventions.Suggested prompt update
-Import prisma from "../../../lib/prisma" +Import prisma from "@/lib/prisma"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
cSpell.jsoncontent/900-ai/tutorials/typefully-clone.mdx
🧰 Additional context used
🪛 LanguageTool
content/900-ai/tutorials/typefully-clone.mdx
[style] ~298-~298: ‘exact same’ might be wordy. Consider a shorter alternative.
Context: ...y You might notice the LLM returns the exact same output every time. That's because LLMs ...
(EN_WORDINESS_PREMIUM_EXACT_SAME)
[style] ~326-~326: For conciseness, consider replacing this expression with an adverb.
Context: ...on" ``` --- ## 6. Add Filter Options Right now, every tweet gets the same treatment. B...
(AT_THE_MOMENT)
[style] ~702-~702: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... they're not ready to post yet, or they want to build a collection of polished content....
(REP_WANT_TO_VB)
[grammar] ~930-~930: Use a hyphen to join words.
Context: ...# Summary You've built a complete tweet polishing application with: - ✅ Local A...
(QB_NEW_EN_HYPHEN)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Check internal links
- GitHub Check: Cloudflare Pages
🔇 Additional comments (6)
cSpell.json (1)
52-52: LGTM! New dictionary entries are correctly placed.Both "Ollama" and "Typefully" are inserted in proper alphabetical order within the words array, which will allow the new tutorial content to pass spellcheck.
Side note: There are pre-existing duplicate entries in this file (e.g.,
Postico,CASL,serverful,autoscale,Tabnineappear twice). Consider cleaning those up in a separate PR if you'd like.Also applies to: 87-87
content/900-ai/tutorials/typefully-clone.mdx (5)
1-10: Frontmatter looks well-structured.The metadata includes all necessary fields for documentation rendering. The 60-minute completion time is appropriate given the tutorial's comprehensive scope.
573-592: Verify the import path for the generated Prisma client.The import path
"../app/generated/prisma/client"assumeslib/is at the project root. Given the schema'soutput = "../app/generated/prisma"(line 553), the actual client would typically be imported from"@/app/generated/prisma"(using the configured alias) or"../app/generated/prisma"without the/clientsuffix, depending on how Prisma generates the output.Double-check this path works correctly after running
prisma generate. If users follow the tutorial verbatim, a mismatch here would cause a confusing import error.
869-924: Nice pattern for handling uploads.The "preview locally, upload only on save" approach at lines 892-910 is smart - it prevents orphaned files when users select an image but don't complete the save. This is the kind of UX consideration that separates tutorials that just work from tutorials that work well.
12-26: Well-structured introduction with clear learning outcomes.The introduction effectively sets expectations by listing the tech stack and end goals. The "What is Vibe Coding?" info box at lines 27-31 provides helpful context for readers unfamiliar with the concept.
951-959: Solid resources section.Good practice linking to primary documentation for all major technologies used. These give readers clear paths for deeper learning.
There was a problem hiding this comment.
Actionable comments posted: 1
Fix all issues with AI Agents 🤖
In @content/900-ai/tutorials/typefully-clone.mdx:
- Line 588: The import statement is pointing to the wrong path by including a
`/client` suffix; update the import that references PrismaClient so it imports
from the generated Prisma output directory without the `/client` suffix (i.e.,
change the import that currently reads import { PrismaClient } from
"../app/generated/prisma/client" to import { PrismaClient } from
"../app/generated/prisma") so it matches the Prisma generated output.
♻️ Duplicate comments (3)
content/900-ai/tutorials/typefully-clone.mdx (3)
96-105: The JSON example is simplified and doesn't match the actual Ollama API response structure.As noted in the previous review, the real
/api/tagsresponse includes additional fields (modified_at,size,digest) and nests metadata under adetailsobject. The current example could confuse developers when their API responses differ.Either update it to match the real structure or add a clear note that this is abbreviated for brevity.
567-569: The datasource block is missing the requiredurlfield.Prisma requires every datasource to specify a
urlfield. Without it, commands likeprisma db pushandprisma generatewill fail, breaking the tutorial for users.🔎 Add the missing url field
datasource db { provider = "postgresql" + url = env("DATABASE_URL") }
951-960: Add a note about Ollama limitations in production deployments.As flagged in the previous review, this tutorial builds an app that relies on
localhost:11434for Ollama, which won't work when deployed to Vercel or other cloud platforms. The AI transformation feature will fail in production.Consider adding a deployment note explaining this limitation and suggesting alternatives:
- Switch to a cloud LLM API (OpenAI, Anthropic, Groq, etc.)
- Deploy Ollama to a server and proxy requests
- Note required environment variable changes
This is important for users who follow the tutorial through to deployment.
🧹 Nitpick comments (1)
content/900-ai/tutorials/typefully-clone.mdx (1)
119-119: Consider removing horizontal rule dividers.Based on previous feedback, the horizontal rules (
---) throughout the document may not align with the preferred style. There are dividers at lines 119, 166, 225, 306, 334, 375, 451, 512, 710, 793, 833, 872, 938, and 961.If these should be removed, a quick find-and-replace would clean them up across the entire document.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/900-ai/tutorials/typefully-clone.mdx
🧰 Additional context used
🪛 LanguageTool
content/900-ai/tutorials/typefully-clone.mdx
[style] ~310-~310: ‘exact same’ might be wordy. Consider a shorter alternative.
Context: ...y You might notice the LLM returns the exact same output every time. That's because LLMs ...
(EN_WORDINESS_PREMIUM_EXACT_SAME)
[style] ~338-~338: For conciseness, consider replacing this expression with an adverb.
Context: ...on" ``` --- ## 6. Add Filter Options Right now, every tweet gets the same treatment. B...
(AT_THE_MOMENT)
[style] ~714-~714: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... they're not ready to post yet, or they want to build a collection of polished content....
(REP_WANT_TO_VB)
[grammar] ~942-~942: Use a hyphen to join words.
Context: ...# Summary You've built a complete tweet polishing application with: - ✅ Local A...
(QB_NEW_EN_HYPHEN)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🍈 Lychee Link Check Report
📊 Results Overview
Errors per inputErrors in 200-orm/050-overview/300-prisma-in-your-stack/01-rest.mdx
Errors in 200-orm/050-overview/300-prisma-in-your-stack/02-graphql.mdx
Errors in 800-guides/380-vercel-app-deployment.mdx
|
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.