Fullstack Developer

github

Pratik Sharma  • Peerlist

Joined TBH by peerlist with goal to be able to create a tool through which i could visualize FMGC brand packaging. The End goal or my 7th day version of the app -"

Pacistry

<h3>🧩 [WIP] <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="http://form.coolhead.in">form.coolhead.in</a> — A Modern Library of Beautiful, Usable Forms</h3><h3>✨ Why Build a Form Library?</h3>After working at multiple startups, I noticed a recurring problem: badly designed forms. Forms are the most critical interface between a product and its users, yet they are often an afterthought.Designing a complex form is hard. But designing a simple and accessible form? That’s even harder.Filling out a form shouldn't feel like homework.Forms should guide the user, not block them. They shouldn't discriminate or frustrate. Whether it's an e-commerce checkout or a government form, every user deserves a clean, fast, and intuitive experience.🎯 What is <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="http://form.coolhead.in">form.coolhead.in</a>?A curated, developer-first collection of form templates, components, patterns, and best practices, crafted to make form building joyful — for both users and developers.<h3>🧪 Templates Available</h3>Ready-to-use, extensible form types:<ul><li>🛒 E-commerce Checkout</li><li>📄 Google Forms / Typeform Clones</li><li>🖼️ Image Upload Forms</li><li>🧾 Tax &amp; Legal Forms</li><li>🏥 Medical History</li><li>📚 Education &amp; College Admission</li><li>🏦 Banking &amp; Finance</li><li>🌴 Vacation Planner</li><li>💼 Job Applications &amp; Onboarding</li><li>💬 Surveys &amp; Feedback</li><li>🔐 OTP &amp; Password Reset</li><li>✉️ Email Verification</li></ul><h3>🛠️ Tech Stack Features</h3>Supports a variety of use cases, patterns, and state-handling strategies:<ul><li>Client-side &amp; Server Actions (Next.js)</li><li>URL State Management</li><li>Local Storage + Auto-Save</li><li>Zustand / Redux / React Query</li><li>Supabase (or any Server DB)</li><li>Retryable Error States</li><li>Accordion-based &amp; Stepper Forms</li><li>Fully Responsive &amp; Accessible</li><li>Keyboard Navigation</li><li>i18n (Internationalisation Ready)</li></ul><h3>🎨 Theming Support</h3><ul><li>🌞 Light &amp; 🌙 Dark Mode</li><li>Customizable via Tailwind / CSS Variables</li></ul><h3>🧱 Components Built</h3>Built with modularity and extensibility in mind, powered by [shadcn/ui] + headless logic.<ul><li>Dialog, Sidebar, Bottom Sheet</li><li>Progress Indicator, Tabs, Steppers</li><li>OTP Input, Calendar, Country Selector</li><li>Autocomplete, File Upload</li><li>Inputs (text, email, mobile, password, address)</li><li>Multi/Single Select (static &amp; server-based)</li><li>Slider, Tooltip, Collapsible Sections</li><li>Retry Indicators, Loading States</li><li>MCQ and Conditional Logic Forms</li></ul><h3>🎯 Goal</h3>Make forms not just usable — but delightful. A tool for:<ul><li>Designers: to prototype flows quickly.</li><li>Developers: to build robust, type-safe forms.</li><li>Startups: to plug-and-play form templates without reinventing the wheel.</li></ul>🚀 Try It Out👉 <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="http://form.coolhead.in">form.coolhead.in</a>“Forms are interfaces of trust. Make them work for the user — not the other way around.”—

Coolhead Forms

<a href="https://www.loom.com/share/160c57806e1e4039844731589ce6ec3e?sid=15a619c2-c838-4a4d-a323-2a5a0cb08327" class="break-all link-break text-gray-500 hover:underline" rel="noopener noreferrer" target="_blank">https://www.loom.com/share/160c57806e1e4039844731589ce6ec3e?sid=15a619c2-c838-4a4d-a323-2a5a0cb08327</a>

Coolhead

<h3 class="rich-heading">Bento-theme</h3>Hit Me Up(bento-theme) is a portfolio template for bloggers, indie developer, anyone who is on internet and wants to write and sell goods. The aim is to be composable, adaptable and plug&amp;play.Hmu =&gt; Link🏝️ + Hashnode + LemonSqueezyFeatures- SEO- Blogs from hashnode- Launch Site- Get Products from Lemon Squeezy- AI intergrations for writing + Editor- Link Preview + Link Preview api endpointTech Stack- Tailwind- Nextjs App router- [Lemon Squeezy](<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.lemonsqueezy.com/">https://www.lemonsqueezy.com/</a>) - using Lemon.js and official JS sdk- [Headless hashnode](<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://github.com/hashnode/starter-kit">https://github.com/hashnode/starter-kit</a>)- [ChatGPT](<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://chat.openai.com/">https://chat.openai.com/</a>)- [Nextjs Themes](<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.npmjs.com/package/next-themes">https://www.npmjs.com/package/next-themes</a>)- [Tailwind Animation](<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.npmjs.com/package/tailwindcss-animate#changing-animation-delay">https://www.npmjs.com/package/tailwindcss-animate#changing-animation-delay</a>)- [Lucide React icons](<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://lucide.dev/guide/packages/lucide-react">https://lucide.dev/guide/packages/lucide-react</a>)

HMU: Hit Me Up

I wanted to create an interactive site remembering the Chandrayaan-3 Mission of India. I took a lot of inspiration from eyes project of nasa, and few others.So, if you guys can visit and give feedback that would be great. You can move the rover as well with 'AWSD' or arrows keys. Rover might blast off (its a bug).Here the tech stacks :<ol><li>Blender : modelling and animations</li><li>ThreeJs :- canvas based 3d renderer</li><li>R3F - react-three-fiber</li><li>Zustand - for state management</li><li>React spring - for simple animations like lander landing animation and few othersUsed text to audio and wisper api of openai for created the subtitles like experience</li><li>React three rapier - for the physics engine.</li><li>React three XR - for the Augmented reality.</li></ol>The whole project is written in typescript, with react, python script for the subtitles sync thing.

Chandrayaan-3 Experience

<h3 class="rich-heading">Create WebStories from your hashnode Blog Posts</h3>No code tool to generate google web stories from your hashnode blog.Create web stories visit: <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://webstory.coolhead.in">webstory.coolhead.in</a>Features<ol><li>No Code</li><li>Code Generation for HTML and NEXTJS</li><li>Add google analytics, Add google adsense</li><li>Get content from Hashnode, and Unsplash.</li><li>Supports animations</li><li>Validate AMP code</li><li>Creating content is as simple as dragging and dropping.</li><li>learn</li></ol><h3 class="rich-heading">Idea</h3>Google's web stories have been around for a long time now. Short form of content has become the most consumed medium right now. Web Stories can get your ideas out to the reader quickly. I wanted to make a code generator for the amp stories.<h3 class="rich-heading">Zero to One</h3>There are multiple issues that I want to solve with a simple solution to create web stories from Hashnode blogs. A Few were<ol><li>I want to drag and drop my content and create stories from it, instead of writing and copy-pasting what I already have written.</li><li>Code Generation for the web stories,</li><li>Quick and fast.</li><li>Free.</li><li>Block-based editing instead of canvas based.</li></ol><h3 class="rich-heading">Prototyping</h3>I had used dndkit before and I knew it was the right dnd package that I would have to use to build a drag-and-drop editor. I created a simple code sandbox with the minimal features that I would need.Features:<ol><li>Drag-and-drop</li><li>Sortable List</li><li>Nested drag and drop</li></ol>The initial Editor layout was built with just boxes in mind. I didn't think there will be images, text, code, or different content types from the markdown.3 Weeks later I was able to make a good enough UI/UX.<h3 class="rich-heading">Learning &amp; Teaching</h3>I spend an extra week just to understand SEO better and amp pages. You can visite<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="http://webstory.coolhead.in/learn">webstory.coolhead.in/learn</a>I will write more about the optimization and improving SEO of your web stories. Follow me for future articles.<h3 class="rich-heading"> Validation</h3>My WebStory builder is way more different than Make Stories. Make Stories is more suitable for professional news media, where they can have a person make web stories.For someone like me, I just want my content to be present in a web story which does increase the organic impressions from the google search discovery feature.Here, is an example I create a web story about function scope vs block scope in javascript. It's life here: <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://webstory.coolhead.in/function-scope-vs-block-scope-in-javascript">Visit Live Page</a>I added a CTA for code examples, some people visited the main blog page from the web Story.<h3 class="rich-heading">1X to 100X</h3>There are so many things that I have to do to make it 100X. But before that, I would to get validation that the 1x product is even good.More features can be added :<ol><li>More font families</li><li>Support more layouts</li><li>Multiple texts</li><li>Multiple images</li><li>Improve UI/UX</li><li>Add support for audio, video and Twitter embed</li><li>Add Giphy.</li><li>Add File system support.</li></ol>Feedback &amp; Bugs Issues is highly appreciated.

Webstory Code generator

Doodlerbook is a collection of doodles with a doodle player so that you can play and pause to see how the doodle was made. This is one of the most challenging things that I have made. I am in love with the outcome. I made this for myself.