You are browsing as a guest. Sign up (or log in) to start making projects!

teakzc

@teakzc

Joined June 8th, 2026

  • 3Devlogs
  • 2Projects
  • 1Ships
  • 15Votes
Hey there, I'm 16 and I love programming. I mainly do games and I'm pivoting over to web dev!

(psst, I also like doing art. that banner? yeah I drew it :D)
Ship

@teakzc on Oceantype

I made a website where anyone can express any thoughts and leave it in the ocean for anyone to see. Messages are circulated (when no new messages are sent) frequently just like objects floating around in the ocean current.


The challenge of this is to learn supabase and nextjs. I already have experience with react, so just some guidance from ai taught me how it works. For example 'use client' on files to mark a clientsided component. It taught me how to communicate from server to public


I am proud as alot of messages have been left already, and the fact that a real website I made is actually running and working properly.


You can go to https://oceantype.vercel.app for testing.


Mobile is supported too

  • 3 devlogs
  • 3h
Try project → See source code →
Open comments for this post

@teakzc on Oceantype

1h 3m 14s logged

Bugs fixed

I have fixed the counter bar. Previously, It would just accept a initial message count from the server and increment every new message. This is prone is some issues and does not hydrate properly

I have now fixed this by just listening to postgresql changes and applying state immediantly on client.

Features added

Mobile is now more optimized, as it changed the interval to “roll” for recycled messages from 250ms to 1000ms on mobile. Same with the message spawning height, on mobile it would spawn on the visible page which is not very convincing as a effect.

I used a new package: react-device-detect to check for mobile.

Below is the code for counter, I fetch the initial counter in a promise, and apply. Then we also listen for changes and apply

@teakzc

Bugs fixed

I have fixed the counter bar. Previously, It would just accept a initial message count from the server and increment every new message. This is prone is some issues and does not hydrate properly

I have now fixed this by just listening to postgresql changes and applying state immediantly on client.

Features added

Mobile is now more optimized, as it changed the interval to “roll” for recycled messages from 250ms to 1000ms on mobile. Same with the message spawning height, on mobile it would spawn on the visible page which is not very convincing as a effect.

I used a new package: react-device-detect to check for mobile.

Below is the code for counter, I fetch the initial counter in a promise, and apply. Then we also listen for changes and apply

Replying to @teakzc
0
6
Open comments for this post

@teakzc on Oceantype

1h 50m 43s logged

New features and fixes:

I have added transitions between the main page and the info page, which is needed because it was very awkward without it

I also fixed the scrollbar in the text area so that it has no background when hovered.

Here is a demonstration video where I test out the websites (message filtering, rate limiting)

The messages here are left by real people who I have shared the website with!

But, there still is a problem with the counter, as it has stale data that is not hydrated from the database. Thus next devlog I will be fixing that.

If you want to drop by and say something: https://oceantype.vercel.app/

@teakzc

New features and fixes:

I have added transitions between the main page and the info page, which is needed because it was very awkward without it

I also fixed the scrollbar in the text area so that it has no background when hovered.

Here is a demonstration video where I test out the websites (message filtering, rate limiting)

The messages here are left by real people who I have shared the website with!

But, there still is a problem with the counter, as it has stale data that is not hydrated from the database. Thus next devlog I will be fixing that.

If you want to drop by and say something: https://oceantype.vercel.app/

Replying to @teakzc
0
22
Open comments for this post

@teakzc on Oceantype

27m 14s logged

Oceantype,

A website where you can leave a message into the ocean where anyone can read it. Old messages are recycled when no one is typing anything.

This is a project I made to learn more about web dev, before I discovered the stardance challenge.

I have now added text moderation (before this it wasn’t), by using the package obscenity found on npm.

Before this, I tried using openai’s moderation which they said was free, but it didn’t work for me. (Error, too many requests when i only sent one message)

Now if the message contains any profanities it will be filtered out!

Also this is a project I have started before stardance challenge. What I used to make this website:

  • nextjs
  • supabase
  • tailwind css
@teakzc

Oceantype,

A website where you can leave a message into the ocean where anyone can read it. Old messages are recycled when no one is typing anything.

This is a project I made to learn more about web dev, before I discovered the stardance challenge.

I have now added text moderation (before this it wasn’t), by using the package obscenity found on npm.

Before this, I tried using openai’s moderation which they said was free, but it didn’t work for me. (Error, too many requests when i only sent one message)

Now if the message contains any profanities it will be filtered out!

Also this is a project I have started before stardance challenge. What I used to make this website:

  • nextjs
  • supabase
  • tailwind css

Replying to @teakzc
0
157

Followers

Loading…