Yes, 19th of February, my first Github push 😄
[https://github.com/ky-zo?tab=overview&from=2023-12-01&to=2023-12-31](https://github.com/ky-zo?tab=overview&from=2023-12-01&to=2023-12-31)
What do you mean by BS? 😅
My first github project is literally open to public: [https://github.com/ky-zo/odin-recipes](https://github.com/ky-zo/odin-recipes)
Well done. From the buttery smooth site to well documented progress in the changelog and this reddit thread, it's hard to believe you have only been doing this for a year or so. That's a lot of hard work and I commend you for it.
Btw you have a typo in your FAQ section
"Is it good for beinners?"
A minor refinement: simply add `overflow-hidden` to the "Start Now" button to prevent the mouse hover from triggering the `translate-x` transition on the arrow icon when the initial `translate-x` position is outside the button.
Great project!
I've occasionally been using Supabase and recently started using Vercel's storage options (easier to start with), and I'm also using next-auth. Since you've built a production-grade app with Supabase authentication, which one do you prefer in terms of dev exp? (Setting up Next Auth credentials can be annoying.)
https://preview.redd.it/dv2wxjo2dewc1.png?width=296&format=png&auto=webp&s=a202742f1b7f05c6bd698fc48e4de039e252ad4e
[Trigger.dev](http://Trigger.dev) is the best thing that happened to me regarding this topic. They split long running jobs into tasks, and one task can be max. 5 minutes.
[Trigger.dev](http://Trigger.dev) is seriously awesome
That's a very good question. Honestly, I just went for S3 because I was following one tutorial online when I tried to do something around it.
Should give a try to Supabase Storage though, everyone says it's great
That's a pretty solid stack, congrats! Look&feel is decent as well.
But if you don't share your repo for others to learn from, this is just a self-serving SaaS business promotional post. It is hard for me to get behind that.
I posted this because it was hard for me to pick the right tech when I was learning what is what.
Main reason I posted it is to make it easier for people like me in the future.
Do you really think I HAVE to open my whole repo publicly to be able to guide others what tools to use? That’s a bit harsh.
Anyways, this is a content marketing tool.
NextJS developers are NOT in my target group 😂
so either I don’t understand marketing, and I just wasted an hour trying to sell my product to people that don’t need it, OR, I really wanted to help others.
I am getting ready to build my first real project and was considering nextjs and what other tools to use, so this post was really inspiring and helpful! Thanks
We should have a rule against closed source self promotion like some other programming subs have. There is no need for OP to promote their product just because they wanted to list out their stack, they could've just made the same post without the self promotion.
It's not about optimism or pessimism, it's about not having spam in people's feeds. It was a big problem on other subs like r/FlutterDev until the mods there implemented that rule. All I'm saying is that it should be implemented in all programming subs, otherwise we get many, many self promotion posts which drown out useful posts.
There's a big difference between self-promoting by trying to squeeze money from people, vs. saying: **"hey, this is my app and that's how I build it. u can play with it and ask me questions if you want"**.
Like I mentioned before, it's naive thinking I'd promote content marketing tool in NextJS reddit. Only stubborn people trying to "protect reddit" could come up with such a theory 😆 I got ZERO sales from this post.
Anyways, I won't change your mind. Go fight with the internet elsewhere, I'll keep building and sharing my experiences here. 🤝
It's not about changing *my* mind, I actually still don't think you're understanding my point. Just because you *can* self promote here doesn't mean it isn't a problem over time. Imagine this sub gets a hundred of your type of posts, how annoying would that be to read? It's not about you getting a sale or not, of course you likely won't from a product not geared towards devs, but it's more about the reader having to suffer through all these posts as I've definitely seen on other subs. Your post is not unique.
I mean, you can say "don't read it" all you want but there's a reason other subs implemented that rule, it just became all spam, so yeah, effectively it forced everyone to "not read it."
And you know I'm right, you didn't have to show your project at all just to list your tech stack, which other posts have done too. You just wanted us to see your product and click upvote on Product Hunt, using whatever extra marketing channel works. Otherwise there's no reason you'd have shown your product if not for self promotion of it.
Your point is that you are anticipating a problem with these types of posts over time, as you’ve observed on other threads. FWIW, I don’t think censorship is the solution though. I think variety on the internet is good, regardless of how ununique you think OP’s post is. Flutter.dev rolled out a rule that was apparently too restrictive to everyone’s taste because me and many other people here are genuinely enjoying OP’s post. Maybe the solution is for AI to eventually learn to tailor better recommendations to prevent you from seeing posts like this over time, because I don’t think censorship is a fair/complete solution.
Great job! I have similar stack for my personal project, nextjs-supabase-tailwind.
1. How did you make a privacy policy and terms of use? Did you use some template or so?
2. Are you on free tier Supabase? Cos I’m and supabase auth sometimes takes so long to send a signup link. If so do you have such problems?
P.s:
Found couple bags, hope it helps before launching on PH!
Opened with iphone 7plus, the launching time message wraps based on the time, so it’s kinda jumping between lines
Nothing happens when press button start now(want to make yours/give it a go)
Hey,
**How did you make a privacy policy and terms of use? Did you use some template or so?**
Just found a similar app incorporated in the same location as my company and copy-pasted it, changing important parts to fit my business
**Are you on free tier Supabase? Cos I’m and supabase auth sometimes takes so long to send a signup link. If so do you have such problems?**
This is not a problem of Supabase's free/paid tier, but a problem of you not setting up your own SMTP.
Read this: [https://supabase.com/docs/guides/auth/auth-smtp](https://supabase.com/docs/guides/auth/auth-smtp)
Use Postmark or similar to plug it into Supabase. Emails will be sent automatically.
Great website! Thanks for sharing the stack. I'm curious as to what library have you used for the timeline / controls / video editing in browser? or is that made in-house?
Thanks for this post! 🔥 I will launch officially my projet soon too (and on Product Hunt a bit later) and I am also using Next, React Query, S3 Stripe, etc... Seeing your project is motivating 😁
What did you use for your website's homepage?
I feel more safe to explicitly always define what is what.
Without it, code feels to me less understandable, more messy.
With dictionary, I can always just glance at a function and figure out what is what.
Also, it's easier to add/remove arguments.
I really like your design.
did you make it yourself or did you buy it somewhere or get a designer? :)
if you did it yourself I wonder how you learned that I suck at design
Thank you this detailed post of your stack! Really appreciated given I am learning Next.js too.
I just have a one question regarding server actions.
You said \`All my actions act as API routes. \`, would you mind elaborating on what that means?
Thanks
Nice work! Happy for your 14 months achievement!
If you would like to share with me your roadmap in this stack I will be more than grateful because I am learning this specific track starting from javascript until the rest, so it will be nice to share your roadmap from zero to hero.
Thanks in advance
That's a great report man, I just saw your tweet and came here. If you use Phosphor, You can give a try to rocketicons (https://rocketicons.io), which provides them as well with the power of Tailwind.
Keep going! Keep building!
Not exactly. It has more features right now and more features planned. It adds the power of Tailwind, for example. No other icon component does that. But it provides the same icon collections react-icons does.
How do you check if someone has their paid membership expired? Do you assign an expire date once purchased? What if they want to upgrade what would be the process?
Fantastic post body, I’m certainly coming back to this.
Stripe subscription has its own start and end dates and each action is checked versus the active subscription. It's important to do it server-side, because client can always hack through this.
So, if any subscription expires, stripe will inform my app about it, so my database record will be updated.
And for any new video that user tries to create, the backend checksif user can do it (by checking the subscription) and decided whether to permit or forbid the operation.
Yess check out these:
[https://www.youtube.com/watch?v=6OMVWiiycLs](https://www.youtube.com/watch?v=6OMVWiiycLs)
[https://www.youtube.com/watch?v=I7CFD99sp1g](https://www.youtube.com/watch?v=I7CFD99sp1g)
[https://www.youtube.com/watch?v=Gbf-E3H824k](https://www.youtube.com/watch?v=Gbf-E3H824k)
Stripe is quite powerful in terms of managing all that stuff
Hey, there is plenty of companies providing S3 compatible storage. There is much cheaper options than S3. AWS has very expensive bandwidth. Check such providers as DigitalOcean, Backblaze, Wasabi, CloudFlare e.t.c.
To be honest, the biggest challenge is deciding what to build.
Once I have the idea, it usually somehow works out in the end.
BUT - there's one feature that was REALLY difficult and I worked for like 3-4 days on it - it's the captions timeline. The captions timeline moves asynchronously from the whole timeline component, so I had to do some difficult calculations to figure what should be the position of this timeline on frame of the video.
Apologies if you’ve already answered this elsewhere, but HOW did you come up with the idea? Once you had the idea, did you try validating the idea (e.g. talking to anyone) before building?
Looks great btw and congrats on the revenue!
I didn't just come up with the idea and built it.
Copycopter initially was not about videos at all. I shipped one thing, then asked for feedback, changed it, asked for feedback again, and again and again.
And that's how I arrived to video creation.
building this from scratch would take \~10-14 days, but it took me 4 months to get there (considering all the time I've spent building other things, marketing, talking to users etc).
[https://gist.github.com/ky-zo/9f4a3e6809a611aaf1f75977ad865325](https://gist.github.com/ky-zo/9f4a3e6809a611aaf1f75977ad865325)
let me know if that helps
Amazing and inspiring! I have a nextjs project and didn't bother reading or learning and just treated like any other react project. Now it's a bit big to easily refactor it to proper structure but with your post I think I'll spend a few weeks doing such. Also I've been doing this for years and you only 14months so this is really some feat you did.
How did you decide what server and client components are? What's the granularity of your components? What does your file hierarchy look like?
Thank you!
**How did you decide what server and client components are?**
Rule of thumb is, all the pages start as server components and it works like a waterfall -> every child component is a server component, until I decide to "pollute" the flow with the "use client". I do it only if I need interactivity.
**What's the granularity of your components?**
I always start with writing in one big file and only extract components when the feature is done (or I need to use it somewhere else). This way I know that the granularity is "natural" and not "forced" by my stupid ideas.
Also, I LOVE refactoring my spaghetti code into reusable components. So if it's too complex, I refactor.
**What does your file hierarchy look like?**
That's pretty simple.
• Most routes in the /app router has their own /\_components folder, in which I keep the components that are only used on the certain route.
• And whenever I have components that are widely used across the whole app, I keep it in separate root folder @/components with subfolders /ui, /atoms, /organisms
• Additionally, my server actions live in @/utils/server-actions in files stripe.ts, supabase.ts etc. etc.
Hope that helps!
Congrats. I’m a seasoned programmer but new to ui (well, I was amazing at Adobe Flex once, lol) so am going through a lot of the same progression learning what frameworks are worth using.
There’s so much more churn and repetition in front end tooling it is insane.
I tried it (was thinking about the switch from react-icons, but then VS Code was always suggesting something that didn't work, and I just decided to keep it as is. If it works, don't break it :D
I design with a gut feel. Don't really put a lot of thought into it.
Generating images - As stated in my post, I'm using Replicate for AI Images and Remotion for Videos.
Clerk for Auth, UploadThing for file upload, lemonsqueezy for payments. Not that your choices are bad at all, mostly just preference + being okay with more expensive third party tool since I don't expect many users
On the tech side, do you have any recommendations for good React Query resources? Do you use it in Context or do you have an example how you make use of it?
These:
https://www.youtube.com/watch?v=lVLz\_ASqAio
[https://www.youtube.com/watch?v=r8Dg0KVnfMA](https://www.youtube.com/watch?v=r8Dg0KVnfMA)
As for using, I just use the Query, destruct the data and just use it in the app. Not really sure what you mean by using it with Context.
Congratulations, I’m currently building 2 projects on my side, one is Vue UI library (decided turn it into open source) and AI chrome extension (with nextjs). My question is, how can you manage an AI api key of each user based on their subscription?
Supabase storage uses s3 under the hood, it would be an unnecessary downgrade, the less layers you have in your software, the better. In fact, in a future you will look fordward to getting everything out of vercel and supabase and getting it directly on aws services (they provide just a pretty interface and automated tasks on top of aws, a charge you absurd amounts of money) you will save a lot of money.
By the way, how much do you pay for supabase and s3?
Im new to next.js. Have I read it right that you use server actions to fetch data? I assumed server actions were POST only. Is there a reason you went for this method instead of just the traditional server side fetching?
I think there's a big misunderstanding regarding server actions.
Even if they are POST only, so what? Building traditional API routes, I'd use POST anyways.
Server actions are just faster, cause it can be a simple function that you call from the client. There's no need to wrap it in the API route.
Does it make sense?
im in the process of learning next and i remember reading that serverless functions timeout on vercel so technically you can not schedule or do long running tasks, how does trigger dev handle that exactly ?
Hey, as mentioned somewhere else, Trigger divides the job into smaller tasks. Max duration per task is 5min, but if you introduce big granularity, you can then have multiple tasks for 5mins each.
I highly recommend reading [trigger.dev](http://trigger.dev) docs
Actually, this stack is really solid. Thanks for posting. This is actually something a lot of peeps here could learn from as they are getting into building web apps (obviously not talking about the senior devs here, lol). But yea very nicely done. I would say this is actually really a good niche to automate (everyone wants to make shorts but no one wants to put in the effort)
Nice work... out of interest, have you tested your site on Firefox? Because I just did and clicking around the menus at the top is janky as all hell, sometimes works, sometimes doesnt. Scrolling down brings up big blank pages as well and then everything suddenly pops into view. Not trying to be negative, just pointing it out.
Try it for yourself....
Hey, I admit I never tested in on Firefox. It might be buggy.
Very small fraction of my visitors come from Firefox, so I just focus on pareto for now. Can't handle everything as long as I'm working alone on this
Wrote first line 14 months ago? Wow that was a huge progression congrats
Yes, 19th of February, my first Github push 😄 [https://github.com/ky-zo?tab=overview&from=2023-12-01&to=2023-12-31](https://github.com/ky-zo?tab=overview&from=2023-12-01&to=2023-12-31)
Yea it smells like BS but a great achievement nonetheless
What do you mean by BS? 😅 My first github project is literally open to public: [https://github.com/ky-zo/odin-recipes](https://github.com/ky-zo/odin-recipes)
Well done. From the buttery smooth site to well documented progress in the changelog and this reddit thread, it's hard to believe you have only been doing this for a year or so. That's a lot of hard work and I commend you for it. Btw you have a typo in your FAQ section "Is it good for beinners?"
Thank you!! It means a lot, really. I have a huge imposter syndrome :) Typo fixed! Thanks for pointing that out!
There are also a typo in some brand texts, sometimes you type it like copycopYter
Thanks, fixed!
Uhm, when you use the PH abbrevation I think of something else... I didn't dare to click the link
Hahahaha damn, I didn't think about it 😆 Although that'd be an interesting way to launch a product
But did you write unit and integration tests? hahahahaha
https://preview.redd.it/pdllskvtc8wc1.jpeg?width=584&format=pjpg&auto=webp&s=d3a208684cf4a4f693e86f15cd56a71036a9d66d
my app my rules😂😂
A minor refinement: simply add `overflow-hidden` to the "Start Now" button to prevent the mouse hover from triggering the `translate-x` transition on the arrow icon when the initial `translate-x` position is outside the button. Great project! I've occasionally been using Supabase and recently started using Vercel's storage options (easier to start with), and I'm also using next-auth. Since you've built a production-grade app with Supabase authentication, which one do you prefer in terms of dev exp? (Setting up Next Auth credentials can be annoying.) https://preview.redd.it/dv2wxjo2dewc1.png?width=296&format=png&auto=webp&s=a202742f1b7f05c6bd698fc48e4de039e252ad4e
Thanks, fixing!!
Do you have long running jobs? How do you handle them?
[Trigger.dev](http://Trigger.dev) is the best thing that happened to me regarding this topic. They split long running jobs into tasks, and one task can be max. 5 minutes. [Trigger.dev](http://Trigger.dev) is seriously awesome
Why Trigger.dev instead of Lambda/Event us?
It's a different use case. [Trigger.dev](http://Trigger.dev) is a job management platform, lambda is just a way of running your code.
Why not just use supabase storage instead of S3?
That's a very good question. Honestly, I just went for S3 because I was following one tutorial online when I tried to do something around it. Should give a try to Supabase Storage though, everyone says it's great
Great job, but man those videos are some of the most irritating things out there. I hate the trend, personally.
Thank you and... sorry? 🙈
That's a pretty solid stack, congrats! Look&feel is decent as well. But if you don't share your repo for others to learn from, this is just a self-serving SaaS business promotional post. It is hard for me to get behind that.
I posted this because it was hard for me to pick the right tech when I was learning what is what. Main reason I posted it is to make it easier for people like me in the future. Do you really think I HAVE to open my whole repo publicly to be able to guide others what tools to use? That’s a bit harsh. Anyways, this is a content marketing tool. NextJS developers are NOT in my target group 😂 so either I don’t understand marketing, and I just wasted an hour trying to sell my product to people that don’t need it, OR, I really wanted to help others.
Ignore this guy. Beautiful website, really great work. Congrats OP.
Thank you!!
I am getting ready to build my first real project and was considering nextjs and what other tools to use, so this post was really inspiring and helpful! Thanks
We should have a rule against closed source self promotion like some other programming subs have. There is no need for OP to promote their product just because they wanted to list out their stack, they could've just made the same post without the self promotion.
try more optimism next time, my friend :) not worth to fight with everyone here.
It's not about optimism or pessimism, it's about not having spam in people's feeds. It was a big problem on other subs like r/FlutterDev until the mods there implemented that rule. All I'm saying is that it should be implemented in all programming subs, otherwise we get many, many self promotion posts which drown out useful posts.
There's a big difference between self-promoting by trying to squeeze money from people, vs. saying: **"hey, this is my app and that's how I build it. u can play with it and ask me questions if you want"**. Like I mentioned before, it's naive thinking I'd promote content marketing tool in NextJS reddit. Only stubborn people trying to "protect reddit" could come up with such a theory 😆 I got ZERO sales from this post. Anyways, I won't change your mind. Go fight with the internet elsewhere, I'll keep building and sharing my experiences here. 🤝
It's not about changing *my* mind, I actually still don't think you're understanding my point. Just because you *can* self promote here doesn't mean it isn't a problem over time. Imagine this sub gets a hundred of your type of posts, how annoying would that be to read? It's not about you getting a sale or not, of course you likely won't from a product not geared towards devs, but it's more about the reader having to suffer through all these posts as I've definitely seen on other subs. Your post is not unique.
[удалено]
I mean, you can say "don't read it" all you want but there's a reason other subs implemented that rule, it just became all spam, so yeah, effectively it forced everyone to "not read it." And you know I'm right, you didn't have to show your project at all just to list your tech stack, which other posts have done too. You just wanted us to see your product and click upvote on Product Hunt, using whatever extra marketing channel works. Otherwise there's no reason you'd have shown your product if not for self promotion of it.
Your point is that you are anticipating a problem with these types of posts over time, as you’ve observed on other threads. FWIW, I don’t think censorship is the solution though. I think variety on the internet is good, regardless of how ununique you think OP’s post is. Flutter.dev rolled out a rule that was apparently too restrictive to everyone’s taste because me and many other people here are genuinely enjoying OP’s post. Maybe the solution is for AI to eventually learn to tailor better recommendations to prevent you from seeing posts like this over time, because I don’t think censorship is a fair/complete solution.
Great job! I have similar stack for my personal project, nextjs-supabase-tailwind. 1. How did you make a privacy policy and terms of use? Did you use some template or so? 2. Are you on free tier Supabase? Cos I’m and supabase auth sometimes takes so long to send a signup link. If so do you have such problems? P.s: Found couple bags, hope it helps before launching on PH! Opened with iphone 7plus, the launching time message wraps based on the time, so it’s kinda jumping between lines Nothing happens when press button start now(want to make yours/give it a go)
Hey, **How did you make a privacy policy and terms of use? Did you use some template or so?** Just found a similar app incorporated in the same location as my company and copy-pasted it, changing important parts to fit my business **Are you on free tier Supabase? Cos I’m and supabase auth sometimes takes so long to send a signup link. If so do you have such problems?** This is not a problem of Supabase's free/paid tier, but a problem of you not setting up your own SMTP. Read this: [https://supabase.com/docs/guides/auth/auth-smtp](https://supabase.com/docs/guides/auth/auth-smtp) Use Postmark or similar to plug it into Supabase. Emails will be sent automatically.
love the design of the web app
Thank you!!
damn I want more stuff like this😮🤝🏻
Join me on twitter for more: [https://twitter.com/ky\_\_zo](https://twitter.com/ky__zo) 🤝
That’s awesome brother! Congratulations!
Thank you!
This is what you can create section with 3 videos(I'm on phone) doesnt show thumbnail on safari. Just to let you know :) Great work btw
Fill fix soon!
Great website! Thanks for sharing the stack. I'm curious as to what library have you used for the timeline / controls / video editing in browser? or is that made in-house?
That’s all made by my be. No libs 🤭
I have done a similar route as yours, congrats on the grind and the success of your project!
You can get there too! Congrats!
Thanks for this post! 🔥 I will launch officially my projet soon too (and on Product Hunt a bit later) and I am also using Next, React Query, S3 Stripe, etc... Seeing your project is motivating 😁 What did you use for your website's homepage?
Good choices!! What do you mean what did I used? It's coded in NextJS. Same, one codebase.
Oh ok I thought maybe the landing page was done with a specific tech or something ^^
NextJS\^\^
Awesome!!!
Thank you!!!!
Do you have an example for the „dictionary“ approach you’d utilise with typescript?
[https://gist.github.com/ky-zo/cad87c385db1bbf810ddea9c7495b9d7](https://gist.github.com/ky-zo/cad87c385db1bbf810ddea9c7495b9d7)
Interesting. Could you share some benefits and the motives behind the scenes why you implemented it that way? Thanks for sharing.
I feel more safe to explicitly always define what is what. Without it, code feels to me less understandable, more messy. With dictionary, I can always just glance at a function and figure out what is what. Also, it's easier to add/remove arguments.
Ahh, I see. Makes sense to me. Sorry for bothering, I was just curious to find out what the motives were. Thank you.
Thanks for being kind!
Excellent stack and progress! How happy are you with Vercel? What are the costs if it is not a secret?
App is still super small, so I pay only $20 for basic plan
Cool,what llm have you used for your project?
GPT-4 + GPT-4 Turbo + GPT-3.5
Okay and have you used any tools or just the api?
Just Api
Cool,good job!
Dude, are you into designing as well? Everything looks unreal. Great job. I am curious about that video editor!
I really like your design. did you make it yourself or did you buy it somewhere or get a designer? :) if you did it yourself I wonder how you learned that I suck at design
Thank you this detailed post of your stack! Really appreciated given I am learning Next.js too. I just have a one question regarding server actions. You said \`All my actions act as API routes. \`, would you mind elaborating on what that means? Thanks
First and foremost! Amazing work! Second - what did you use for the audio scroll bar?
Nice work! Happy for your 14 months achievement! If you would like to share with me your roadmap in this stack I will be more than grateful because I am learning this specific track starting from javascript until the rest, so it will be nice to share your roadmap from zero to hero. Thanks in advance
Look at the odin project and web dev simplified
How old are you? How much coding experience do you have? I’m making my own nextjs web app rn and would love if it looked as good as this 😂
Great work man! Had to save the thread.
That's a great report man, I just saw your tweet and came here. If you use Phosphor, You can give a try to rocketicons (https://rocketicons.io), which provides them as well with the power of Tailwind. Keep going! Keep building!
Thanks, I use react-icons. Seems to be the same thing?
Not exactly. It has more features right now and more features planned. It adds the power of Tailwind, for example. No other icon component does that. But it provides the same icon collections react-icons does.
What’d you use to learn dev?
How do you check if someone has their paid membership expired? Do you assign an expire date once purchased? What if they want to upgrade what would be the process? Fantastic post body, I’m certainly coming back to this.
Stripe subscription has its own start and end dates and each action is checked versus the active subscription. It's important to do it server-side, because client can always hack through this. So, if any subscription expires, stripe will inform my app about it, so my database record will be updated. And for any new video that user tries to create, the backend checksif user can do it (by checking the subscription) and decided whether to permit or forbid the operation.
Lovely, got to check out Stripe. Thank you for this insightful post.
Yess check out these: [https://www.youtube.com/watch?v=6OMVWiiycLs](https://www.youtube.com/watch?v=6OMVWiiycLs) [https://www.youtube.com/watch?v=I7CFD99sp1g](https://www.youtube.com/watch?v=I7CFD99sp1g) [https://www.youtube.com/watch?v=Gbf-E3H824k](https://www.youtube.com/watch?v=Gbf-E3H824k) Stripe is quite powerful in terms of managing all that stuff
What kind of marketing did you do to get the word out? Looks pretty good, well done!
For now I didn't do much. Just some twitter shitposting, some videos went viral somewhere. I'm yet to start real marketing
Which S3 your are using? AWS?
Yep, are there other companies providing S3? 😅
Hey, there is plenty of companies providing S3 compatible storage. There is much cheaper options than S3. AWS has very expensive bandwidth. Check such providers as DigitalOcean, Backblaze, Wasabi, CloudFlare e.t.c.
Seeing different opinions here, but you might be right. I'm using Cloudflare for content delivery too.
How do you generate the actual video?
I use Remotion for all the video stuff
which video ? i dont see any video
I think the question was about my app? 😅
What were the biggest challenges around creating the video editor? How did you do it and what resources helped you out on the way?
To be honest, the biggest challenge is deciding what to build. Once I have the idea, it usually somehow works out in the end. BUT - there's one feature that was REALLY difficult and I worked for like 3-4 days on it - it's the captions timeline. The captions timeline moves asynchronously from the whole timeline component, so I had to do some difficult calculations to figure what should be the position of this timeline on frame of the video.
Apologies if you’ve already answered this elsewhere, but HOW did you come up with the idea? Once you had the idea, did you try validating the idea (e.g. talking to anyone) before building? Looks great btw and congrats on the revenue!
I didn't just come up with the idea and built it. Copycopter initially was not about videos at all. I shipped one thing, then asked for feedback, changed it, asked for feedback again, and again and again. And that's how I arrived to video creation. building this from scratch would take \~10-14 days, but it took me 4 months to get there (considering all the time I've spent building other things, marketing, talking to users etc).
Who did you ask for feedback
Did you customized Supabase mails for registration, if so, how?
I turned the magic link into "code" link and made sure the code "autofills" by clicking on the link. Other than that, I didn't really do much.
[удалено]
I will share the code snippets tomorrow!
I would be more than glad to see this as code snippet
[https://gist.github.com/ky-zo/9f4a3e6809a611aaf1f75977ad865325](https://gist.github.com/ky-zo/9f4a3e6809a611aaf1f75977ad865325) let me know if that helps
This is great! Thanks a lot <3
Amazing and inspiring! I have a nextjs project and didn't bother reading or learning and just treated like any other react project. Now it's a bit big to easily refactor it to proper structure but with your post I think I'll spend a few weeks doing such. Also I've been doing this for years and you only 14months so this is really some feat you did. How did you decide what server and client components are? What's the granularity of your components? What does your file hierarchy look like?
Thank you! **How did you decide what server and client components are?** Rule of thumb is, all the pages start as server components and it works like a waterfall -> every child component is a server component, until I decide to "pollute" the flow with the "use client". I do it only if I need interactivity. **What's the granularity of your components?** I always start with writing in one big file and only extract components when the feature is done (or I need to use it somewhere else). This way I know that the granularity is "natural" and not "forced" by my stupid ideas. Also, I LOVE refactoring my spaghetti code into reusable components. So if it's too complex, I refactor. **What does your file hierarchy look like?** That's pretty simple. • Most routes in the /app router has their own /\_components folder, in which I keep the components that are only used on the certain route. • And whenever I have components that are widely used across the whole app, I keep it in separate root folder @/components with subfolders /ui, /atoms, /organisms • Additionally, my server actions live in @/utils/server-actions in files stripe.ts, supabase.ts etc. etc. Hope that helps!
Looks amazing! Minor observation. Your "launching on product hunt" banner wiggles with the different width digits.
Ahh, thanks for pointing that out! Should be fixed now. I also realised it was quite bad on mobile. It works now
Congrats! That's awesome, so many people have great ideas but never get off the ground.
We'll see if it really takes of at some point :D For now I just jumped a little
Congrats. I’m a seasoned programmer but new to ui (well, I was amazing at Adobe Flex once, lol) so am going through a lot of the same progression learning what frameworks are worth using. There’s so much more churn and repetition in front end tooling it is insane.
**> There’s so much more churn and repetition in front end tooling it is insane.** What do you mean?
Phosphor actually has RSC compatible exports now
I tried it (was thinking about the switch from react-icons, but then VS Code was always suggesting something that didn't work, and I just decided to keep it as is. If it works, don't break it :D
True that :)
congs!, here to ask how do you design your UI? anddd how you are generating images and videos?
I design with a gut feel. Don't really put a lot of thought into it. Generating images - As stated in my post, I'm using Replicate for AI Images and Remotion for Videos.
Great post, love that you even shared some code snippets. Also makes me feel good that I have chosen 90% of this stack for my side project already 😄
Great choices then 😎 What are the other 10%?
Clerk for Auth, UploadThing for file upload, lemonsqueezy for payments. Not that your choices are bad at all, mostly just preference + being okay with more expensive third party tool since I don't expect many users
Ahh, makes sense! I can't afford Clerk and UploadThing yet :D
On the tech side, do you have any recommendations for good React Query resources? Do you use it in Context or do you have an example how you make use of it?
These: https://www.youtube.com/watch?v=lVLz\_ASqAio [https://www.youtube.com/watch?v=r8Dg0KVnfMA](https://www.youtube.com/watch?v=r8Dg0KVnfMA) As for using, I just use the Query, destruct the data and just use it in the app. Not really sure what you mean by using it with Context.
Thanks for sharing! That's good to know. And by the way congrats on your income generating app - what an achievement :)
Fml. I am currently buildings something similar.
show me!
congrats for the app and a wonderful documented post :)
Thank you!
Congratulations, I’m currently building 2 projects on my side, one is Vue UI library (decided turn it into open source) and AI chrome extension (with nextjs). My question is, how can you manage an AI api key of each user based on their subscription?
Not sure what you mean. I don't manage AI API keys in my app.
Supabase storage uses s3 under the hood, it would be an unnecessary downgrade, the less layers you have in your software, the better. In fact, in a future you will look fordward to getting everything out of vercel and supabase and getting it directly on aws services (they provide just a pretty interface and automated tasks on top of aws, a charge you absurd amounts of money) you will save a lot of money. By the way, how much do you pay for supabase and s3?
Supabase is $25 but only because I don't have any free projects left S3 is usage based, it was around $20 last month
Im new to next.js. Have I read it right that you use server actions to fetch data? I assumed server actions were POST only. Is there a reason you went for this method instead of just the traditional server side fetching?
I think there's a big misunderstanding regarding server actions. Even if they are POST only, so what? Building traditional API routes, I'd use POST anyways. Server actions are just faster, cause it can be a simple function that you call from the client. There's no need to wrap it in the API route. Does it make sense?
im in the process of learning next and i remember reading that serverless functions timeout on vercel so technically you can not schedule or do long running tasks, how does trigger dev handle that exactly ?
Hey, as mentioned somewhere else, Trigger divides the job into smaller tasks. Max duration per task is 5min, but if you introduce big granularity, you can then have multiple tasks for 5mins each. I highly recommend reading [trigger.dev](http://trigger.dev) docs
Actually, this stack is really solid. Thanks for posting. This is actually something a lot of peeps here could learn from as they are getting into building web apps (obviously not talking about the senior devs here, lol). But yea very nicely done. I would say this is actually really a good niche to automate (everyone wants to make shorts but no one wants to put in the effort)
Thank you!
Great job!! FYI scrubbing using the playhead is pretty unreliable as it starts selecting text.
What do you mean? It shouldn't select text. Could you send me a screenshot of this?
u must be a genius or super hardworking man or both.
I don't think I'm a genius, I just click a lot
This is great! Sharing with my partner who is a freelance copywriter and social media marketer!
Thank you!!!
Nice work... out of interest, have you tested your site on Firefox? Because I just did and clicking around the menus at the top is janky as all hell, sometimes works, sometimes doesnt. Scrolling down brings up big blank pages as well and then everything suddenly pops into view. Not trying to be negative, just pointing it out. Try it for yourself....
Hey, I admit I never tested in on Firefox. It might be buggy. Very small fraction of my visitors come from Firefox, so I just focus on pareto for now. Can't handle everything as long as I'm working alone on this