Fullstack Developer

github

Pratik Sharma  • Peerlist

<h3>StorLite is a Chrome extension designed to combat the storage bloat caused by auto-loading YouTube embeds. It intelligently replaces these embeds with lightweight placeholders, allowing users to choose when to load videos. This approach helps manage Chrome's storage, especially with its site partitioning feature, which can lead to repeated YouTube data across various websites.</h3><ul><li>Blocks auto-loading YouTube embeds: Prevents YouTube players from loading automatically in the background.</li><li>Lightweight placeholder: Replaces embeds with a minimal placeholder to save resources.</li><li>User-controlled video loading: Users can choose to open videos in Chrome's side panel or allow the embed on the current page when desired.</li><li>Manages Chrome storage: Addresses the issue of YouTube partitioned storage accumulating across different sites.</li><li>Privacy-focused: Processes embeds locally and does not collect or send browsing data.</li><li>Donation support: Users can donate to support the project, with donors receiving GitHub access.</li></ul>StorLite works by detecting standard YouTube and youtube-nocookie embed iframes. It then replaces the automatic player load with a placeholder. Users can still play videos intentionally, either in the side panel or by allowing the embed on the page. The extension does not delete existing cookies or log users out, focusing solely on reducing future automatic loads. While Chrome's storage partitioning is a privacy feature to reduce cross-site tracking, StorLite offers a solution at the embed layer to manage the noticeable side effect of bloat.

StorLite - Stop YouTube Embed Bloat in Chrome

<h3>Navigate the Delhi Metro with ease!</h3>This comprehensive tool helps you plan your Delhi Metro journeys efficiently. Discover the best routes with an interactive map, allowing you to search for stations and find the quickest way to your destination. Get accurate fare estimates, travel times, and understand the number of stops on your chosen line. Easily identify interchange stations and follow line-color guidance for seamless transitions. The planner supports multiple languages, including English, Hindi, Marathi, and Bengali, making it accessible to a wide range of users. Plan your commute with confidence and make the most of Delhi's metro system.<ul><li>Interactive route map</li><li>Station search functionality</li><li>Fare estimation</li><li>Travel time calculation</li><li>Stop count information</li><li>Interchange station details</li><li>Line-color guidance</li><li>Multilingual support (English, Hindi, Marathi, Bengali)</li></ul>

Delhi Metro Route Planner | Map, Fare, Stops

Discover the hidden personality traits of any Pinterest user with our innovative tool. Simply drop a Pinterest username, and we'll do the rest. Our system scans followers, analyzes tagged photos and pins, and cross-references liked pins to calculate personality traits. Instantly receive gift and dating suggestions tailored to the user's personality. <ul><li>No signup required</li><li>Instant results</li><li>Public profiles only</li><li>Data privacy ensured</li></ul> Our tool is designed for entertainment purposes and provides insights into core aesthetics, personality signals, and potential red and green flags. Whether you're looking for gift ideas or date suggestions, our tool offers a comprehensive analysis based on public Pinterest activity.

Check Her Pins – Personality Calculator

Beauty of DesignForm and shape and its ornamentation are highlights of Indian craftsmanship. As one surveys briefly in this chapter representative examples of carvings and embellishments on temples and historic buildings—the tracery on stone screens, the delicacy of inlay work and the mellow artistry of frescoes—one will find a kinship of inspiration and motif among them. This is an important feature in spite of the long periods of time between each series of artistic endeavour.

Motifs Of India | Traditional Indian Patterns

React Odontogram is a modern, interactive component designed for dental chart visualization and data collection. Built with SVG and React hooks, it offers a fully customizable and accessible solution for clinical or academic applications. Key features include:<ul><li>Interactive dental chart visualization using React and SVG.</li><li>Customizable and accessible design for various applications.</li><li>Integration with Storybook for component previews and demos.</li><li>Support for multiple dental notation systems such as FDI, Universal, and Palmer.</li><li>Easy installation via npm, pnpm, or yarn.</li></ul>Whether you're building a dental application or conducting academic research, React Odontogram provides a robust and flexible tool for managing dental data efficiently.

React Odontogram

I am looking for contributors for this project. HMU. Motionify is a powerful tool designed to help developers and designers create smooth, interactive animations for the web effortlessly. This innovative platform provides a seamless experience for crafting animations that enhance user engagement and bring web projects to life. Key features of Motionify include an intuitive interface, a rich library of pre-built animations, and the ability to customize animations to fit specific project needs. Whether you're a seasoned developer or a creative designer, Motionify offers the flexibility and functionality required to produce stunning visual effects.<ul><li>Intuitive interface for easy animation creation</li><li>Rich library of pre-built animations</li><li>Customization options for tailored animations</li><li>Enhances user engagement with interactive elements</li></ul> Embrace the power of Motionify to elevate your web design projects and deliver captivating user experiences.

Motionify

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.