Overview of My Submission

There is no doubt that we love writing and that's the main reason why we're here. Sometimes we love writing about something we learned or tech news or even something personal that we think it might be beneficial for other people, but writing takes time and time is not something that can be easily found within our busy days. Speech to text technology appeared to solve that for us, but it was mainly used by story writers and reporters but not by web developers and tech content creators! For a long time we used that technology to serve the user but not to serve ourselves, and from here I created Wordleit Editor.

Wordleit Editor is a free in-browser markdown text editor that gives you a seamless experience as both a reader and a writer. It's supported with Deepgram AI Speech Recognition service.

If you're addicted to tech writing, Wordleit isn't going to help you recover anytime soon, as with Deepgram AI speech and it's super accurate transcription you will be able to speak what's on your mind into an article and then style it with only few clicks or vocal commands. The AI speech to text is also useful for writing articles from your phone anytime during the day.

It provides side by side preview and it's using MarkedJS so that you have everything Github Flavored Markdown offers and styled with TailwindCSS to match Dev.to dark theme. The toolbar has the most common markdown syntax including tables, code blocks and many more.

The idea is to make you write more, better, faster and help you write anytime and from anywhere. Currently working on vocal commands to apply the desired styles for your article so that I won't have to use the mouse or click anything at all.

Built with:

• Laravel 9
• VueJS 3
• Tailwind 3
• Deepgram
• MarkedJS
• Animate.CSS
• Deployed on Heroku

More about Wordleit:

My plans for Wordleit as overall is to build free products where AI Speech Recognition services is used for the benefit of developers and my first project on it is this Wrodleit Editor. I built it with Laravel as I have big plans for making it an essential tool for web developers and create user profile for each user where he/she can keep drafts and any unfinished work.

I really wasn't going to release this unless it's 100% ready but I just found out that my wife is pregnant 😊 so I will be a bit busy the upcoming days and wanted to just release the project for now and work on it whenever I can.

My next update on Wordleit Editor will include vocal commands to apply specific styles. This will make it extremely easy for the user to write articles if he talks while he's asleep 😁

Future improvements:

• Vocal Commands.
• Audio file uploads.
• Drafts section.
• Embed rich content.
• Code coloring.

Submission Category:

• Wacky Wildcards.

Link to Code on GitHub::

        <ul dir="auto">
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://avatars.githubusercontent.com/u/17422641?s=200"><img src="https://avatars.githubusercontent.com/u/17422641?s=200" alt="deepgram" width="40" height="40" style="max-width: 100%;"></a>
                    <a href="https://deepgram.com/" rel="nofollow">Deepgram</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23579958/143738613-d374adcf-24b8-4f44-8e75-673d5681c1a5.png"><img src="https://user-images.githubusercontent.com/23579958/143738613-d374adcf-24b8-4f44-8e75-673d5681c1a5.png" alt="plyr" height="20" style="max-width: 100%;"></a>
                    <a href="https://github.com/redxtech/vue-plyr">Plyr Vue</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/881b3d162f1a3fdb13e9c8507afe5f40be73e59b6c4b907901e06a1ccd7f70df/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667"><img src="https://camo.githubusercontent.com/881b3d162f1a3fdb13e9c8507afe5f40be73e59b6c4b907901e06a1ccd7f70df/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667" alt="deepgram" width="40" height="40" data-canonical-src="https://marked.js.org/img/logo-black.svg" style="max-width: 100%;"></a>
                    <a href="https://marked.js.org/" rel="nofollow">MarkedJS</a>
                </div>
            </li>
            <li>
                <div dir="auto">
                    <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/61d22c54c2d885e3364693b3a15d0a8d17d7f4294f14ff41622fdd64373b10b0/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67"><img src="https://camo.githubusercontent.com/61d22c54c2d885e3364693b3a15d0a8d17d7f4294f14ff41622fdd64373b10b0/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67" alt="animatecss" width="40" height="40" data-canonical-src="https://i.ibb.co/SKVJRns/animatecss.png" style="max-width: 100%;"></a>
                    <a href="https://animate.style/" rel="nofollow">AnimateCSS</a>
                </div>
            </li>
        </ul>

Link to the tool live demo:

https://wordleit.herokuapp.com/

Additional Resources / Info:

Small demo to show you how it works:

I didn't do any preparations before making this video so please excuse me for the many times you'll hear "as you can see" and "of course" 😅

Thanks for checking this out and stay tuned for my next updates on this 😍 Please let me know what you think below :)