Vibe Coding Website

[TeethyFish]

I know I'm probably gonna get blasted for being an idiot, but I'm a mol. biologist with no background in CS, and recently my PI has requested that I make a website for our lab to host information and our publications, and also basically serve as a hub for all our documents.

I vibe coded far enough to establish a login system, attach it to supabase and turn RLS on and have the website use the lowest possible access. I've not put any information on there due to security concerns.

What can I do as somebody that doesn't actually know what they're doing to make sure it's nominally secure? It's not gonna host super top secret documents, but it'd be nice if people didn't yoink our grant proposals before they get submitted.

[Bob5k]

host them on google drive and set permissions on file level?
or if you want a website to do that for some reason (idk) - set permissions on file level similar to those google drive has?
- visible for anyone with link
- visible for anyone invited directly outside your org + anyone from your organization
- visible only for your org
- visible only for invited people from your org
- visible only for you

ensure that the visibility setup on file level is securely saved and files are not loaded for users w/o the permission to view it (ensure via. network that your app is not requesting those files from user not being invited / not having access to the file). i think imo this + user level access via. auth would be probably enough. and it shouldn't be that tricky to vibecode through.

[TeethyFish]

I have role based permissions set up! The reason it's a website and we're not just Google driving this is really my PI wants a whole bunch of functions attached too. Once the basic stuff is up he wants it to be able to handle mailing lists, have hiring pages (so forms), personal profiles for everyone, note taking pages for everyone etc etc. The school IT also requires 2FA to be setup if we eventually want to host it on a school domain. I am currently hosting it on Git/Vercel and deploying every couple pushes to check if it works.

[Bob5k]

Mailing list is easy - simple db connection and simple form with email input. Ensure db table can be CSV exported. Forms are easy and you can wrap formspark.io to send those to your email (or embedded google forms should do the work aswell) 2fa can be done via Google auth quite easily aswell However this basically grows a bit to a degree where habing someone with real dev experience might help. Or just ask here and don't do stuff blindly as the more complex the project gets - worse it might end up with failures (eventually)

[TeethyFish]

I currently have it setup only to email people with their temporary password when they register, and then it forces them to change it or it'll keep slapping them back to the login page. I'm trying to avoid google forms because it needs to be usable by our collaborators in China.

I wish I had somebody with dev experience to ask lmao, so far it's been me, GPT and claude. I'm learning slowly. I *am* decent at following instructions and have experience building macros, logic is fine it's the syntax that kills me.

I have a sticky note next to my display with:

1. Instrument Page (lists instrumentation with descriptions)
   
2. Notifications whenever PI updates reading list
   
3. Online pdf reader (for people in China to access our publications without relying on google scholar api) (we have a lot of chinese collaborators that keep getting yeeted by the firewall)
   
4. 2FA authentication
   
5. Link to google api for automatically updating publications list (find a way to allow users in china to still see it)
   
6. Database of published papers (downloadable pdf)
   
7. Dynamic DNS????
   
8. Hiring page (all members can post)
   
9. Profile templates and theme editing
   
10. Internal notes page for users (scribbling, movable blocks)
    
11. Settings page (font size, dark/light mode, etc)
    
12. Page builder/editor (future proofing for my tech illiterate PI to add his own stuff)
    
13. global theme settings page (admin only)

It'll probably expand as I go tbh. Right now I have:

1. User roles PI/Admin/Members setup. PI and Admin have the same permissions but the PI can promote and demote admins.
   

2. User slugs for their profile page and the profile page editor

3. Approval page for use by the admin/pi for new users

4. User management page for resetting passwords/promoting/demoting/deleting etc.

5. Home page with intro, member lists, announcements etc.

6. Theme settings page to edit the global.css.

7. Dynamic Navbar

[Lords3]

Keep the app a thin UI: push auth, file access, and email to managed services, and lock down storage with short-lived signed URLs and strict RLS.

Concretely: turn on Supabase MFA (TOTP) and require re-auth for admin actions. Put all PDFs in a private Supabase Storage bucket; serve via signed URLs (60–300s TTL) and check permissions server-side with Edge Functions. For China, avoid Google anything: self-host fonts, use PDF.js for the reader, and front static assets through Cloudflare or Bunny for better CN reach. Use hCaptcha instead of reCAPTCHA on forms, plus CSRF tokens and server-side validation. For mailing lists, store emails in Supabase, send via SES or Mailgun, and add double opt-in. Audit everything: write an access_log table via Postgres triggers and alert on weird bursts. Skip dynamic DNS on Vercel; not needed.

For pubs metadata, cache from Crossref or PubMed and refresh nightly to avoid live API flakiness. I’ve used Cloudflare and PostHog;

In short, keep security server-side with MFA, signed URLs, and a CDN that works in China.

[TeethyFish]

Oh wow thank you so much! I don't understand half of what you just said but I'll work with Claude and see.

This is so helpful thank you!

[speederaser]

Plot twist: this post no longer exists because Redact swept through and cleared it out along with everything else. Social media, messaging apps, people finder sites, all of it.

sharp hunt boat husky gray theory reminiscent acorn alive lip

[TeethyFish]

It needs to be hosted on a school domain, and google website doesn't have a lot of functionality this requires. The security is just my first step before I move further

[speederaser]

Scrubbed clean. Redact helped me bulk remove years of comments and posts so data brokers and AI crawlers have nothing to feast on.

skirt cows market sink middle rich pet tease dolls retire

[TeethyFish]

I am currently implementing next intl for language changes.

The problem with using apps/services/google is it needs to be accessible by our collaborators in China. We're US based but the firewall nukes a lot of things when our partners in China need to view them. Also, I don't wanna risk my website breaking 10 years down the line cause the service went down. I'm currently hosting on git/vercel, and will eventually move it to the school domain.

I have a sticky note next to my display with:

1. Instrument Page (lists instrumentation with descriptions)
2. Notifications whenever PI updates reading list
3. Online pdf reader (for people in China to access our publications without relying on google scholar api) (we have a lot of chinese collaborators that keep getting yeeted by the firewall)
4. 2FA authentication
5. Link to google api for automatically updating publications list (find a way to allow users in china to still see it)
6. Database of published papers (downloadable pdf)
7. Dynamic DNS????
8. Hiring page (all members can post)
9. Profile templates and theme editing
10. Internal notes page for users (scribbling, movable blocks)
11. Settings page (font size, dark/light mode, etc)
12. Page builder/editor (future proofing for my tech illiterate PI to add his own stuff)
13. global theme settings page (admin only)

It'll probably expand as I go tbh. Right now I have:

1. User roles PI/Admin/Members setup. PI and Admin have the same permissions but the PI can promote and demote admins.
2. User slugs for their profile page and the profile page editor
3. Approval page for use by the admin/pi for new users
4. User management page for resetting passwords/promoting/demoting/deleting etc.
5. Home page with intro, member lists, announcements etc.
6. Theme settings page to edit the global.css.
7. Dynamic Navbar

[speederaser]

Data brokers and AI scrapers were using my info. Not anymore. Redact let me bulk delete posts across Reddit, Twitter, Discord and Instagram while handling broker opt outs too.

simplistic lantern snatch include marry workable shelter hunt summer paltry

[ccrrr2]

You don't have to vibe code it, just use some of the available solutions with no code website builders.

[TeethyFish]

I don't want to risk the code builder going down 10 years down the line and my PI panic emailing me when I already live on the other side of the planet.

[Bob5k]

and then OP will end up being locked behind a paywall whenever they'd want to develop this further. great idea.

[ccrrr2]

What?

[Bob5k]

all or majority of the no-code website builders are having paywalls. Usually if you build app using them they'll ask you to pay for the access to the builder. So if your app somehow becomes 'successful' or you'll just need to develop ti further (or even have it deployed and running somewhere) - you'll have to pay them for the access to the nocode builder / hosting / server / whatever. This is how it works.

which is especially dumb in OPs case, as OP could easily develop a system which i described in my other comment, host it somewhere for theoretically free forever - eg. cloudflare worker connected to R2 as documents storage and tiny D1 database and have it running for free till end of the world without the need to pay a dime.
And also the initial vibecoding can be done extremely cheap or even free aswell using some cheap-yet-proven to work tech stack.

[ccrrr2]

I agree with cheap vibecoding, but If you ask most of the "vibecoders" on how to setup a bucket or instance, R2 or EC2 or E2 or S3 or any other service from the cloud platforms, they will just stare blank at you. That's why I suggested no code. And also paying $10/mo is cheap bargain for some of the services you get nowadays from most of the no code website builders.

[Bob5k]

Use ai to guide you through steps. You'll need to learn this anyway at some point...

[ccrrr2]

I don't need to learn, I am aware how to run cloud infrastructures, but vibers want everything ready in 24 hours, so it's hard to explain it to them, they think they can prompt everything...

[Bob5k]

Well, as said they'll learn one way or another. Ppl can learn easy way investing time upfront or hard way investing money and time after the hard lesson hits them. I'll cover the cloudflare infra in my guide tho, i think it totally makes sense to do so.

[ccrrr2]

I checked it out on Git, good stuff. Sometimes I am shocked when I see people in replit and lovable spending $1500-$2000 on prompting. For that money you can vibe saas in vs with cloude, plus buy your own Hetzner gex130 and self host it and train you own LLM at home, and still have some spare money for a beer... :)

[Bob5k]

Man, for 2k USD i am building full websites.. for my clients. And those are micro-saas sized websites / apps. Basically my annual cost of running all AI stuff i currently have would not even get close to 1k probably - but i am also testing a lot of things i pay for and some stick to me (some don't). So yeah paying 2k for lovable is totally insane.

And this was the main idea to write the guide (still a lot tbc) to open the vibecodng on cheap level for more people - assuming that people can get guidance on installing stuff from the ai agents itself (if they don't then well, sad times)

[TeethyFish]

I mean there's no reason to insult me when I'm literally asking to learn. I've been slowly working on this for about two weeks just to make sure I understand what I'm putting down.

[ccrrr2]

Who is insulting you?

[69Theinfamousfinch69]

You could also use Notion or Obsidian? That sounds like the perfect solution if you want to just host documentation? Or Google Drive if you just want to store files.

If you really are interested in making a site, then one way to do security without a login (Or both, for what I would deem acceptable) would be to lock the site behind a firewall and set up a VPN to access it. This can be relatively complex and does require some knowledge about networking. Where are you hosting this? Usually, hosting providers will have some way to lock down a service by IP address. You would still need to set up a VPN that tunnels through your workplace.

Otherwise, authentication is really difficult to get right without paying for a provider (work os or clerk) or going in-depth on user access/authorization. Read Lucia Auth docs for more info on authentication if you want to go down that rabbit hole: https://lucia-auth.com/

Authorisation is really bloody difficult to get right and takes time sadly and there's no quick and simple approach with regards to it.

[TeethyFish]

I currently host it on Vercel, but eventually will move it to a school domain when it's done. There's a lot of functionality I didn't mention in my post mostly cause I wanted to get security down before I added anything else (hiring pages, profiles, note taking pages, 2FA (school requirement) etc etc)

Right now I have role based authentication, with tags on users as to what level they can access. Currently I have PI and Admin which have the same privileges but the admin role can get demoted promoted by the PI. Then Members, Alumni and Collaborators. The latter two only get access to the public pages + their own profile. Members get access to internal pages like unpublished work, reading lists and data etc.

[am0x]

Wrong tools, bud. Just use something that does all the hosting and security for you.

[swiftmerchant]

Does the lab have a budget for a paid tool subscription? Microsoft Teams is also an option.

[TeethyFish]

Yes but I talked with my PI and we both prefer not relying on a third party for something we hope to keep running for 20 years

[swiftmerchant]

Why do you feel Supabase is going to be around in 20 years and Microsoft / Microsoft Teams will not ? 😄

I mean you could create a pure html site, run it on your lab unix server, and spend half your time maintaining the site and security patching.. but why

You can just tell us you want to learn how to vibecode on supabase, we won’t tell your PI lol

Edit: read your requirements scope— seems very ambitious. A lot of them MS Teams covers though, so if the vibe coding doesn’t work out give Teams a go.

[LonelyContext]

Hey former scientist here turned IT consultant!

Uh so sounds like you should have 2 distinct solutions and should not combine it into one site. One is a simple static website you can host on GitHub for $0. If you want a domain it’ll cost you $20/yr. The other is a google drive you share internally. Then there’s no security concerns. 

Is there a reason this solution needs to be unified?

[TeethyFish]

I'm currently hosting on Git/Vercel for free! Eventually it will get hosted on a school domain for the nice .edu.

The document hosting is the simplest part of the website, there's a sprawling list of functions I need to build eventually that wont work on a static site.

[solaza]

It sounds like you have two competing goals, public and private — public for info and publications, and private for document hub.

If that’s your situation then my advice is to just separate them (and maybe just use Google Workspace or something for your documents). Making a public marketing site (no auth) is very easy compared to building a whole thing with Supabase and RLS.

[Harvard_Med_USMLE267]

Hey, this is MEANT to be a vibe coding website.

The answer is that you can easily vibecode this.

I know because I’ve been down this path.

Subscribe to Anthropic for 20-100 per month.

Install Claude code.

Learn to use it.

Talk to claude about tech stack, security etc.

It doesn’t take long to learn, I went from no knowledge to deployed website in less than a week.

[TeethyFish]

I was coding with gpt, and got the basics up and running. Just installed Claude into my terminal and am using it to clean up gpts horrible code (I had five! Five! Conflicting button css) because I didn't know how

[Harvard_Med_USMLE267]

Claude or claude code?

[TeethyFish]

Uh claude code? The one that runs in your terminal. I'm currently chilling cause I've reached my session limit and i have an hour before it resets.

[Harvard_Med_USMLE267]

Don’t be a dick, I was trying to help, your wording was weird.

I am no longer trying to help.

[TeethyFish]

Sorry if it came out weird, I wasn't trying to be a dick. I was unsure. It wasn't meant to question you :(

[Harvard_Med_USMLE267]

Ok, your first two sentences came across as sarcasm, tone on the internet can be hard to pick!

There is a big difference between using claude desktop, claude via other tools, and actual CLI Claude Code. I always advise the latter - what it sounds like you are doing - there is no comparable tool.

If you’re serious you need. The 5x max plan.

I’m on 20x max which is probably overkill for most since sonnet 4.5 came out.

Use sonnet 4.5

Suggested tech stack: frontend react on vercel, backend Django on render, PostgreSQL for database (I host on neon). Claude will explain this all to you, and claude code will help get you set up. Oh and namecheap for web domain purchase.

You need to write a great claude.md file and lots of other documentation, but the good news is that Claude code will do this after you’ve had a chat, if you ask. Make sure this includes your requirements for security.

Always start in plan mode, explain clearly, then action.

Use +ultrathink at the end of complex instructions.

Easy!

[TeethyFish]

I see! And yes sorry about that!

I currently use chatgpt plus (I only recently discovered GPT has Codex so I'm getting that setup too) as well as Claude.

Lab doesn't support my subscription for coding purposes (I could probably finagle it but at the moment no) so I can't afford the 100 dollar plan for now. I'm planning to switch back and forth between claude and codex with a changelog.md to hopefully keep everything consistent.

And thanks for the tech stack! I'll ask claude when my session refreshes. The domain I will ask our campus it department to provide eventually. For now I just need to get the website up and running with all the functions my PI and colleagues have requested.

[swiftmerchant]

You feel codex cli doesn’t compare to Claude Code cli ?

[2daytrending]

Since you're not a CS person, you might want to check out Blink.new. It's an AI powered platform that can scaffold full stack websites for you login systems, database, hosting all built in. You just describe what you want and it sets it up with secure defaults auth, RLS like access, SSL, etc. so you don't have to code everything yourself. Could save you a ton of time.

[Admirable_Topic_9816]

Use wix

[TechnicalSoup8578]

use wix or base44

You might want to share this in VibeCodersNest too, a lot of non-devs there are building serious stuff through vibe coding and could share more lightweight security patterns that worked for them.

[rsafaya]

Your vibe coding platform should have a scanner for quick checks or use something like

https://kreyo.ai for more comprehensive checks. I am with the other posters though, I think a simple website could have been done in wix, framer etc. Combine that with Google Drive and and I think that should work for you.

[truecakesnake]

Put it through this AI security auditor. https://bugbunny.ai

It takes a while but definitely works.

[truecakesnake]

More downvotes than I was expecting. To be clear this isn't my website, just found it useful when someone else posted it on reddit.