I like Star Wars movies, I like Yoda and I like <a href="/blog/react-for-beginners-complete-guide-to-mastering-react-fundamentals/">coding in React</a>. Well I thought that maybe I could combine these three in my next React project. That's when I got the idea to create a React application that can translate English to Yoda (yodish).
<h2>Planning the application</h2>
For translating English to Yoda, I decided to use a <a href="https://funtranslations.com/api/yoda">R</a><a href="https://funtranslations.com/api/yoda">EST</a> <a href="https://funtranslations.com/api/yoda">API</a> that does all the heavy lifting for us. It is a public API so we don't need any authentication or api keys to use it. We can just send the text as a text parameter and we get the translation as a response.
On the front end I used create-react-app to initialise a React project and then added a simple UI with a text input, button and a couple of labels.
<img src="./images/Screenshot-2020-09-29-at-19.37.13-1024x375.png" alt="React project application UI.">
The UI of the finished application.
The text input takes the text we want to translate, the button initialises the API request and the labels are there for… well what are labels usually for.
<h2>Finished application</h2>
I recorded the whole process of building the app and uploaded it on YouTube. You can watch the video <a href="https://youtu.be/LT8hAGnju9g">here</a>.
I also got a little creative filming the video and added an intro which I strongly recommend you check out. I think it turned out pretty cool. Let me know in the comments what you think about it!
<a href="http://www.youtube.com/watch?v=LT8hAGnju9g"><img src="http://img.youtube.com/vi/LT8hAGnju9g/0.jpg" alt="Building Star Wars React application (REST API)"></a>
I also uploaded the finished project to Github if you want to take a look. You can find the project <a href="https://github.com/tumetus/yoda-translator-app">here</a>.
<h2>Conclusion</h2>
Even though the app was pretty straight forward and simple to make, I still had a lot of fun making it. And if you are new to React, I recommend watching <a href="https://youtu.be/LT8hAGnju9g">the video</a> because it teaches the basics on how to use a REST API with React, which itself is a must have tool in a React developers toolbox.


I like Star Wars movies, I like Yoda and I like [coding in React](/blog/react-for-beginners-complete-guide-to-mastering-react-fundamentals/). Well I thought that maybe I could combine these three in my next React project. That's when I got the idea to create a React application that can translate English to Yoda (yodish).

## Planning the application

For translating English to Yoda, I decided to use a [R](https://funtranslations.com/api/yoda)[EST](https://funtranslations.com/api/yoda) [API](https://funtranslations.com/api/yoda) that does all the heavy lifting for us. It is a public API so we don't need any authentication or api keys to use it. We can just send the text as a text parameter and we get the translation as a response.

On the front end I used create-react-app to initialise a React project and then added a simple UI with a text input, button and a couple of labels.

![React project application UI.](/blog-posts/react-project-i-coded-a-star-wars-yoda-translator-app/images/Screenshot-2020-09-29-at-19.37.13-1024x375.png)

The UI of the finished application.

The text input takes the text we want to translate, the button initialises the API request and the labels are there for… well what are labels usually for.

## Finished application

I recorded the whole process of building the app and uploaded it on YouTube. You can watch the video [here](https://youtu.be/LT8hAGnju9g).

I also got a little creative filming the video and added an intro which I strongly recommend you check out. I think it turned out pretty cool. Let me know in the comments what you think about it!

[![Building Star Wars React application (REST API)](http://img.youtube.com/vi/LT8hAGnju9g/0.jpg)](http://www.youtube.com/watch?v=LT8hAGnju9g)

I also uploaded the finished project to Github if you want to take a look. You can find the project [here](https://github.com/tumetus/yoda-translator-app).

## Conclusion

Even though the app was pretty straight forward and simple to make, I still had a lot of fun making it. And if you are new to React, I recommend watching [the video](https://youtu.be/LT8hAGnju9g) because it teaches the basics on how to use a REST API with React, which itself is a must have tool in a React developers toolbox.


In this React project you learn how to create a simple React application and how to use a REST API with React in your next React project.

React project: I Coded a Star Wars Yoda Translator App

Do you ever just wake up in the morning, open up VS Code, and think to yourself "Wow I wonder what other coders are doing around the world, what are they coding on?".
That's how Ben Awad starts his <a href="https://www.youtube.com/watch?v=ApR-kNXxLUs">video</a> where he introduces VS Code stories, an extension for <a href="/blog/top-10-keyboard-shortcuts-for-visual-studio-code/">Visual Studio Code</a> which adds stories to VS Code.
<img src="./images/vs-code-stories-screenshot-1024x576.png" alt="vs code stories">
He literally created an extension for VS Code that you can use to view Instagram like stories and upload your own ones for others to see. I think this was just hilarious and at the same time super awesome!
If you haven't already, be sure to check out the extension and his <a href="https://www.youtube.com/watch?v=ApR-kNXxLUs">video</a> introducing the extension, it is hilarious! All the code for the extension is <a href="https://github.com/benawad/vscode-stories">open source</a>.
That's all for now, I just wanted to share this with you guys because I think this was super funny and worth showcasing extension.
Comment below what do you think about the stories for VS Code?


_Do you ever just wake up in the morning, open up VS Code, and think to yourself "Wow I wonder what other coders are doing around the world, what are they coding on?"._

That's how Ben Awad starts his [video](https://www.youtube.com/watch?v=ApR-kNXxLUs) where he introduces VS Code stories, an extension for [Visual Studio Code](/blog/top-10-keyboard-shortcuts-for-visual-studio-code/) which adds stories to VS Code.

![vs code stories](/blog-posts/vs-code-stories-new-extension/images/vs-code-stories-screenshot-1024x576.png)

He literally created an extension for VS Code that you can use to view Instagram like stories and upload your own ones for others to see. I think this was just hilarious and at the same time super awesome!

If you haven't already, be sure to check out the extension and his [video](https://www.youtube.com/watch?v=ApR-kNXxLUs) introducing the extension, it is hilarious! All the code for the extension is [open source](https://github.com/benawad/vscode-stories).

That's all for now, I just wanted to share this with you guys because I think this was super funny and worth showcasing extension.

Comment below what do you think about the stories for VS Code?


Have you ever thought to yourself "It would be awesome to have Instagram like stories in VS Code". Wonder no more, it is now a reality!

VS Code Stories - New Extension

Visual Studio Code is one of the most popular code editors for writing Typescript and Javascript. I use VS Code for all my Typescript and Javascript projects.
<a href="http://www.youtube.com/watch?v=BnTy4IIa2hE"><img src="http://img.youtube.com/vi/BnTy4IIa2hE/0.jpg" alt="How to rapidly prototype Javascript in Visual Studio Code"></a>
If you are like me, using VS Code for writing Typescript / Javascript, you know that sometimes quick prototyping or testing is needed. For this kind of situations I use this extension called Quokka.js.
Read also: <a href="/blog/how-to-write-javascript-and-react-with-vs-code-faster/">How to write Javascript and React with VS Code FASTER!</a>
After installing the extension you can launch a new Typescript / Javascript file with live code execution and results, value explorer, live code coverage and much more. Or if you want to check your existing code, you can also start the extension for an existing file.
I made a <a href="https://www.youtube.com/watch?v=BnTy4IIa2hE">video</a> introducing the extension more throughly so go watch that if you want to learn more! Or if you just want to give it a try, you can install the extension from here: <a href="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode">https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode</a>.
What do you think about the extension? Let me know in the comments!


Visual Studio Code is one of the most popular code editors for writing Typescript and Javascript. I use VS Code for all my Typescript and Javascript projects.

[![How to rapidly prototype Javascript in Visual Studio Code](http://img.youtube.com/vi/BnTy4IIa2hE/0.jpg)](http://www.youtube.com/watch?v=BnTy4IIa2hE)

If you are like me, using VS Code for writing Typescript / Javascript, you know that sometimes quick prototyping or testing is needed. For this kind of situations I use this extension called Quokka.js.

_Read also: [How to write Javascript and React with VS Code FASTER!](/blog/how-to-write-javascript-and-react-with-vs-code-faster/)_

After installing the extension you can launch a new Typescript / Javascript file with live code execution and results, value explorer, live code coverage and much more. Or if you want to check your existing code, you can also start the extension for an existing file.

I made a [video](https://www.youtube.com/watch?v=BnTy4IIa2hE) introducing the extension more throughly so go watch that if you want to learn more! Or if you just want to give it a try, you can install the extension from here: [https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode).

What do you think about the extension? Let me know in the comments!


If you are using VS Code for writing Typescript / Javascript, you know that sometimes quick prototyping or testing is needed.

VS Code Stories - New Extension

Subscribe to the newsletter