Fullstack Developer 

Pratik Sharma • Peerlist Profile

<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

Co-founder at Veet • Designer and Entrepreneur. Talks about UX, Startups, Design, and Community.

Full-Stack JavaScript Developer with skills in React, Redux and Node.js.

Co-founder at Peerlist • Product Designer • Amateur Photographer • Urban Sketcher

Assisting small businesses in establishing their digital footprint and creating a robust online presence.

Add UPI Donation option to your website under 60 seconds.

Pay Via UPI 

Where Developer get question based github gists. 

Subask

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.

Doodlerbook

Hare Krishna 🙏

A Frontend Developer passionate about building websites, and web apps with ReactJs, and JavaScript

Software Engineer | Open Source Contributor | Technical Writer 

Frontend Developer

Astrogeek Who Reacts at Night ✨ • Web Engineer 🌐• Building Scattr.io 🚀

Frontend Engineer @Skilzen 

Novice in everything, student for life! 

Have experience 1 yr experience in Flutter and currently working on ML and Game dev in Unreal 

Building Scattr.io

Product Design @ Peerlist


Product designer. Connect to work together. 

Software Engineer | ex-Peerlist |
JavaScript, React, Node.js | System Design | Databases & Cloud