Sagar Shah

⚡ Full Stack Developer (React & Node)
👨‍💻 Avid learner
🤞 Aspiring indie hacker

[Sagar Shah @shahsagarm]

@JayDwivedi_ Right, subtle card looks great to me

[bolt.new @boltdotnew]

Introducing Figma to Bolt

Go from Figma to pixel-perfect full stack app — just put bolt․new in front of the URL & start prompting!

[Lee Robinson @leerob]

How should you search, filter, and paginate data with Next.js? This demo has 50,000 books in a Postgres database.

• Page Load: When the page loads, we see the React Suspense fallback. This loading skeleton is displayed until the first page of books is retrieved from the database.
• Searching: The search input has a 200ms debounce. After 200ms of inactivity, the form submits, updating the URL state with `?q={search}`. The Server Component reads `searchParams` and queries the database. On form submission, a React transition starts, allowing us to read the pending status with `useFormStatus` to display an inline loading state.
• State Preservation: Navigating to an individual book page retains the search input state. Reloading the page or sharing the link preserves the search results.
• Client-side Filtering: Filtering authors in the left sidebar is done client-side. Authors are fetched by a Server Component and passed as props to the sidebar. Changing the input value updates React state and re-renders the sidebar.
• Optimistic Updates: The sidebar’s selected authors are optimistically updated with `useOptimistic`. Checkbox selections update instantly without waiting for the URL to change.
• State Preservation: Navigating to an individual book page retains the sidebar filter input and selected author state across navigations, giving it an app-like feel.
• Pagination: Navigating between pages updates the URL state, triggering the Server Component to query the database for the specific page of books. We also fetch the total book count to show the total number of pages.

This demo isn't perfect yet (still working on it) but it's been a fun playground for some of these patterns. You can imagine a similar experience for thousands of movies, cars, products, or any other very large dataset.

Demo → https://t.co/ym72YZdt6I
Code → https://t.co/BguuQMHgeO

[Tibo @tibo_maker]

I have ranked #1 on product hunt multiple times!

🏆 I even got "Maker of the Year 2022"

And it’s a Game changer…

You get validation, initial traction, and a ton of visibility.

But there’s a catch… to get all these benefits, you have to rank high.

Here's how you do it 🧵

———————————————————
𝗪𝗵𝘆 𝗣𝗿𝗼𝗱𝘂𝗰𝘁 𝗛𝘂𝗻𝘁?

Product Hunt is a gold mine for getting new customers. (especially Saas)

You can easily generate anywhere from 1000-3000 genuine leads for your business.

For the same of simplicity, let's divide our discussion into 3 segments -

1. Before the launch
2. During the launch
3. After the launch

Let’s dive in 👇

———————————————————

𝗕𝗘𝗙𝗢𝗥𝗘 𝗧𝗛𝗘 𝗟𝗔𝗨𝗡𝗖𝗛 🏆

The big day is arriving, you are scared, yet excited. You know you need to kill it, but perfection paralysis is kicking in.

Don’t worry, here is what you need to do:

𝟭. 𝗣𝗹𝗮𝗻 (𝗶𝗻 𝗮𝗱𝘃𝗮𝗻𝗰𝗲): If you start 3 days before the launch, yes it will be stressful.
𝟮. 𝗦𝘁𝗮𝗿𝘁 𝗴𝗶𝘃𝗶𝗻𝗴 𝘃𝗮𝗹𝘂𝗲: Social media, Slack communities, anywhere really. Get out there, and help people as much as you can.
𝟯. 𝗔𝗻𝗮𝗹𝘆𝘇𝗲 𝘆𝗼𝘂𝗿 𝗰𝗼𝗺𝗽𝗲𝘁𝗶𝘁𝗼𝗿𝘀 𝗮𝗻𝗱 𝘁𝗵𝗲 𝗽𝗹𝗮𝘁𝗳𝗼𝗿𝗺: If you need to win a game, you should be on top of the rules. Spend time diving deep into other launches that resemble your product. See who upvoted similar products, follow them on Twitter, and interact with them.
𝟰. 𝗕𝘂𝗶𝗹𝗱 𝘆𝗼𝘂𝗿 𝗮𝘀𝘀𝗲𝘁𝘀. Don’t be the person figuring it out on the go. There should be absolutely 0 guessing on the day of launch.

Here’s your checklist 👇

✅ Title
✅ Headline
✅ Product Description
✅ Thumbnail
✅ Images/videos/GIFs
✅ Maker comment (the main comment on the product)
✅ Social media posts

——————————————————

𝗟𝗔𝗨𝗡𝗖𝗛 𝗗𝗔𝗬 💀

𝟭. 𝗦𝗰𝗵𝗲𝗱𝘂𝗹𝗲 𝘁𝗵𝗲 𝗹𝗮𝘂𝗻𝗰𝗵 for 12:01 AM. This gives you the best chances of reaching the top.

𝟮. 𝗢𝘂𝘁𝗿𝗲𝗮𝗰𝗵: DM the few relevant people that matter. Don't blast everyone but talk to the persons who upvoted similar products. Ask your friends to upvote. And ask people in the community to check out the product and give you feedback.

𝟯. 𝗕𝗲 𝗮𝗰𝘁𝗶𝘃𝗲: Post the content you prepared and share live updates with people to give them a behind-the-scenes look. Use this tool to get your launch analytics live.

No need to panic today, if you have prepared - you should see the results. Just be present and interact as much as you can. Embrace yourself for the post-launch work.

————————————————————

𝗣𝗢𝗦𝗧-𝗟𝗔𝗨𝗡𝗖𝗛 🚀

The real work starts now, you have a ton of new visitors, data, and hopefully revenue.

Thank all the people who supported you and try to build relationships.

If you won a badge (top product) — add the badge to your website. And feel incredibly proud while doing so.

At this point, you probably have tons of feedback to work on. Understand what people truly mean, update your product.

Look forward and think about what's next.

And that’s how you launch to rank on Product Hunt!

BONUS:

If you want a super detailed, 5000+ document that goes into detail about the launch, with examples and case studies — reply ‘SEND‘ to this and I will DM it to you ⚡⚡⚡

[Fireship @fireship_dev]

To call yourself a “full-stack” developer in 2024, you must be able to:

- Build frontends
- Build backends
- Provision cloud infrastructure
- Handle UX in Figma
- Maintain efficient CI/CD pipelines
- Create 3D art in Blender
- Manage projects with Scrum
- Attend daily standup meetings without leaving the zone
- Make YouTube videos
- Train transformer models from scratch
- Code live on Twitch for 14 hours straight
- Run a side hustle with at least 10K MRR
- Tweet about cold plunges and fasting
- Beat the stock market with algotrading
- Deploy shit with Kubernetes
- Achieve the Ballmer Peak daily
- Invoke syscalls on Linux
- Optimize for ARM-based CPU architectures
- Publish research papers on quantum algorithms
- Maintain mental health while doing all of the above

Did I miss any?

[Jared Palmer @jaredpalmer]

The all new @openai dot com is built with @nextjs and hosted on @vercel 🫠

[Adham Dannaway @AdhamDannaway]

✨ Go-to design system resources 👇

Guide → https://t.co/PPQUjbjg8T
Checklist → https://t.co/sXXPwLeHuL
Database → https://t.co/Qjfq6BJ6Iw
Resources → https://t.co/pY4gwgiuls
Component research → https://t.co/3rDoKOVXbh

#designsystem #ux

[Delba @delba_oliveira]

React 19: forwardRef → ref

[Adarsh Gupta ✨ @Adarsh____gupta]

I'm going to sell this boilerplate for $199

[Vercel @vercel]

v0 is now open for everyone.

Generate UI in seconds with text or images.

https://t.co/nojFCpeGx1

[Danny Sapio @Dannysapio]

The difference between a senior designer and a junior designer is how soft their shadows are

[Vercel @vercel]

Introducing Geist, our free and open-source font. Created in collaboration with @basementstudio.

https://t.co/0EI9nxXBnf

[Vercel @vercel]

Learn more about the Vercel team, including (critically) their favorite memes and emojis.

[Guillermo Rauch @rauchg]

Excited to introduce https://t.co/IzUlJQAgug to the world.

Check out some of the examples we built, like a pricing component built in 22 chat-like instructions.

https://t.co/RTig1o9Jt1

[Matt Pocock @mattpocockuk]

Confused about TSConfig?

Here's a cheat sheet that will get you 90% of the way there.

[Sagar Shah @shahsagarm]

@layers_to @ensaktas Looks very neat & clean 🙌

[Sagar Shah @shahsagarm]

https://t.co/GDuhY4qQR3 by @nrwl_io is a fantastic tool for beginners who want to understand what a monorepo is and what tools can be used to develop a monorepo architecture with all of the advantages and downsides.

[Sagar Shah @shahsagarm]

Has anyone utilized the monorepo architecture for their MERN project?

[Sagar Shah @shahsagarm]

What if you wish to replace "React" with "Next.js" in the MERN stack?

What's the new name for the stack?

"MENN" Stack?

Is that a real thing? 😅

[Sagar Shah @shahsagarm]

@Nelsonyolemi1 @thewahabhq https://t.co/UtGCzZfbGP is also a good resource for inspiration.