Vibe Coding
What tools to use for vibe coding?
• v0
• Replit
• Rork
• Cursor
• Loveable
What are some things I am building?
What are my concerns with vibe coding?
CyberSecurity of the app I build from hackers.
Reliability for mass amounts of users.
Transitioning from a vibe code to a scalable product with a technical developer.
Ownership of the code since it’s generated by AI using another platforms API.
Here’s a bunch of words I’m learning to understand how to build an AI SAAS.
• Javascript Library: Is a collection of pre-written code that can be reused later so you don’t have to rewrite code from scratch every time. Like if you’re building a LEGO set, there are pieces already put together that other coders have tested and used a lot so we know it works.
• React: Is what makes a website feel alive. It is the code that lets websites respond to interaction. Like when you type a button on the keyboard a letter pops up on the screen. Or when you hover over a button, it get bigger. React is a library of user-interface (UI) code for these thigns. So it’s a collection of pre-written code within Javascript Library that lets you make the buttons and windows and cards and all of the visual stuff people can see and play with on a website actually respond to interaction. And now vibe coding AI tools let you design these user-interfaces by just speaking in natural language about how you want everything to look and … react. React is used for Instagram and Airbnb and ChatGPT.
• Next.js: Is a framework. It is the overall shape and structure of a website. It has the structure for API calls and pages already. There are a lot of websites that have already been built. This is a blueprint structure for how websites can and should be built. It has the rules and flows for how a website will be run. Then React libraries can fill in information within this Next.js framework rulebook. It’s like the plumbing and urban planning of a city where as React is then the street paint and buildings and signs.
• CSS: Cascading Style Sheets. It’s the code that gives a website color and style.
• HTML: Is the code that decides what is on the website. But without CSS, it’s just gray boxes.
• Tailwind: Let’s you write css within html without changing languages or files. I believe you;d previously have a a folder with a line of code about everything that is on the page written in html. But to style it with color and shape you’d have to make a separate file written in css that directly addresses each item from html. But with Tailwind you can just write both the item and its style in one line of code.
• GitHub: Is like a Google Drive for code. It hosts code that tools like Vercel pull the code from. And a lot of apps and websites can be serverless now so they will just pull the code as it’s needed instead of running it on server computers all of the time. Other people with permissions or publicly can tap into the GitHub to contribute or edit code.
• Auth
• Database
• Postgres
• Edge Functions
• Vercel
• AWS Lambda
• Bedrock
• Cloudflare Workers
• Servers to patch
• SageMaker Serverless Inference
• Neon
• Supabase Postgres
• pgvector
• pinecone
• Weaviate
• Qdrant
• Vector search
• Clerk
• Supabase auth
• Auth0
• Copy-paste SDK
• Helicone
• Sentry
• Plausible
• PostHog
• Cursor IDE
• Pipelines by default
• Infra as code
• Terraform
• Pulumi
• LangChain
• LangSmith
• RAG Evaluation
• Regression Testing
• EC2 Boxes
• Exposes a simple HTTPS endpoint
• Row-Level Security
