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.
| Table of Content |
|---|
| Built with |
| More about Wordleit |
| Submission Category |
| Link to Code on GitHub |
| Link to the tool live demo |
| Additional Resources and Tutorial |
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::
MooseSaeed
/
wordleit
Wordleit is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition.
Welcome To My Wordleit π
Wordleit Editor is a free open source markdown text editor that gives you a seamless experience as both a reader and a writer. Supported with AI Speech Recognition. Text to speech - Speech to text - Mp3 to Text.
Wordleit Streamer is a free open source video streamer and online transcriptor tool.
Wordleit Grammy AI Bot AI speaking Bot created to serve your purposes.
π Homepage
β¨ Editor Demo
β¨ Streamer Demo
β¨ Grammy Demo
Hackathon Submissions:
- Wordleit Editor
1- https://dev.to/moose_said/write-articles-with-ai-speech-recognition-and-live-preview-508k
2- https://dev.to/moose_said/use-vocal-commands-to-apply-markdown-to-your-article-99
3- https://dev.to/moose_said/text-editor-with-text-to-speech-and-speech-to-text-4l37
- Wordleit Streamer:
https://dev.to/moose_said/online-video-streamer-and-audio-transcription-2ein
- Wordleit Grammy
https://dev.to/moose_said/add-ai-robot-to-your-portfolio-or-company-website-3045
Author
π€ Mostafa Said
- Website: https://twitter.com/Moose_Said
- Twitter: @Moose_Said
- Github: @MooseSaeed
- LinkedIn: @moosesaid
π€ Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
βοΈ Built with:
<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/3cbc2c83e8970766a734b785bdc273512467ac80682fc66e037f6306f9629be4/68747470733a2f2f6d61726b65642e6a732e6f72672f696d672f6c6f676f2d626c61636b2e737667"><img src="https://camo.githubusercontent.com/3cbc2c83e8970766a734b785bdc273512467ac80682fc66e037f6306f9629be4/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/41324664372bf68511a4de3f96e22675e3560528231e5f31c00022f268a681a1/68747470733a2f2f692e6962622e636f2f534b564a526e732f616e696d6174656373732e706e67"><img src="https://camo.githubusercontent.com/41324664372bf68511a4de3f96e22675e3560528231e5f31c00022f268a681a1/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>
Show your support
Give a βοΈ if this project helped you!
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 :)
Top comments (6)
Oh! Thank you so much! Your comment made all my efforts worth it β₯οΈ :)
I don't know if they'll view both of our projects as duplicates...such a bummer. Good work nonetheless.
Thank you! There are many aspects and differences though :)
Haha...We have been on the same line of thinking actually. I considered voice commands for formatting texts in a certain way too. In my use case I found that it might be a mouthful trying to speak out a command in the middle of the article. You're designs are mouthwatering man.
See? Completely different in code, implementation, features, design and even category of submission π Thanks buddy and best of luck :)