Secret Language App - React, Tailwind.css
Hey Guys, this video is a collaboration with Max Programming where he will be teaching how to create an awesome secret language app using React and Tailwind CSS and will be hosted on Netlify.
This is a very good project for beginners in Javascript and is starting to learn Reactjs. This project also implements Dark Mode using Tailwind CSS. More information about the project like the resources used and the timestamps will be down below, so feel free to check that out.
If you liked this video, feel free to check out Max Programming's channel, where he has a lot of React js tutorials and more programming related content:
/ @maxprogramming
Thanks a lot to all of you guys for watching this video. Hope you enjoyed this video. Please subscribe to the channel if you want more videos like this and also leave a like 👍 if you liked this video. See you in the next video!
Timestamps:
00:00 - Introduction
00:21 - App demo
01:21 - Secret text algorithm
02:57 - Tailwind CSS
04:08 - Creating the React app
06:50 - TailwindCSS setup
10:55 - The Header component
16:42 - The Info component
18:57 - Styling parent div
19:20 - Div for textboxes
20:47 - The TextInput component
26:36 - The CopyButton component
32:54 - Creating the textarea element
36:25 - Styling the textarea element
38:39 - Using a plugin for border gradient
43:00 - Adding state and props
46:35 - Function to translate text
01:08:10 - Using useEffect to call the function
01:10:49 - Final touches
01:11:31 - Copying text with the button
01:17:13 - Adding dark mode
01:22:42 - Responsive textareas
01:25:11 - Publishing to GitHub
01:27:56 - Deploying to Netlify
01:32:07 - Conclusion
Resources mentioned in the video:
Tailwind React: https://tailwindcss.com/docs/guides/c...
Heroicons: https://heroicons.dev
Tailwind Border Gradients: https://github.com/cossssmin/tailwind...
GitHub Repo: https://github.com/max-programming/se...
Netlify: https://netlify.com
Final website: https://secret-language.netlify.app
☕ Buy Me a Coffee: https://www.buymeacoffee.com/shanjairaj
If you want to support me, you could Buy Me a Coffee for just $2. If you can support me more, I would appreciate it a lot, however, If you are not able to support me, it is totally fine. You could support me in any other way you think is possible.
📕 My Favourite Designing Book:
Use Promo Code - "awesomeui200" to get 20% OFF
Purchase the Book here - https://bit.ly/purchase-designing-ebook
⚙ Equipment I use:
Laptop - https://amzn.to/2Wr7Wyg
Keyboard - https://amzn.to/2WqMeux
Mouse - https://amzn.to/392dg0d
Budget Microphone - https://amzn.to/2CKYvTV
📧 Drop me an email for any questions, suggestions, etc - [email protected]
Get in touch:
If you follow me on Instagram(shanjai_raj) or Twitter(shanjai_raj), drop me a message saying you came from my Youtube channel. It'll help me to know my audience and connect with each and every one of you.
🎥 Instagram - / shanjai_raj
🐦 Twitter - / shanjai_raj
If you want to support me:
🆘 Subscribe - https://bit.ly/subscribe-and-support
Thanks for watching, and I'll see you in my next video!
Watch video Secret Language App - React, Tailwind.css online without registration, duration hours minute second in high quality. This video was added by user Shanjai Raj 16 June 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 669 once and liked it 19 people.