Fullstack Developer

github

Pratik Sharma  • Peerlist

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

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

<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.

Hiring Talent?

Pratik Sharma

Fullstack Developer