DEV Community

loading...

I learned some React in a week and made an emoji-searcher tool 😀🎉👏

Brayden W ⚡️
Developer 💻 • Designer 🎨 • Freelancer 💪🏼 • Creator 💭
・1 min read

Hi everyone!

About a week ago I posted about a CRM tool that I made with React after learning the framework for 24 hours. The final app turned out to be pretty cool and I got tons of feedback and compliments from you all. 🙏

But this time I wanted to step it up. 💪

I've been learning ReactJS for about a week now and learned concepts such as:

  • Components
  • Hooks
  • State Management
  • Styling
  • Optimization (kinda 😅)

So this is the final product after a week's worth of practicing.

How did it turn out?

I was looking online for some React project ideas that I can try out on my own. I stumbled across an emoji search-up tool that I thought looked pretty cool.

Fast forward a few days, I finished the design and functionality of the app.

📕 Github Repository: https://github.com/BraydenTW/react-emoji-search

💻 Live Demo: https://braydentw.github.io/react-emoji-search

A ⭐ on the repository is **very much* appreciated. Thanks :D*

Screenshot of app


Any feedback or ideas for what I should try next would be awesome.

Thanks again!

Discussion (27)

Collapse
yon1nja profile image
yon1nja

You should implement toLowerCase function on the search term because upper case search won’t bring back results

Collapse
braydentw profile image
Brayden W ⚡️ Author

Yep, I’m pushing those changes soon. :P

Collapse
darkdebo profile image
Debojyoti Chakraborty

Very nice bro love to fork it and do some more changes.

Collapse
braydentw profile image
Brayden W ⚡️ Author

Cool thanks! Very helpful :D

Collapse
braydentw profile image
Brayden W ⚡️ Author

Feel free to. I just marked it as an eligible Hacktoberfest repo :D

Collapse
darkdebo profile image
Debojyoti Chakraborty

Great love to collaborate

Thread Thread
braydentw profile image
Brayden W ⚡️ Author

Cool, thanks :D

Collapse
achintyam1812 profile image
acm1812

Congrats on learning react! Looks good

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks :D

Collapse
sharoskyy profile image
stephen

Nice, design looks also great. Also do you use framework or just React?

Collapse
braydentw profile image
Brayden W ⚡️ Author

Just React :D

Collapse
patriscus profile image
Patrick Ahmetovic

Nice work - I really dig it!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks :D

I hope to get some useful feedback and contributions. (It is a hacktoberfest repo as of now :P)

Collapse
zdev1official profile image
ZDev1Official

Nice!
I'll learn react!
It looks interesting!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks, I've been learning the fundamentals in the past week and it has made web apps so much easier.

Collapse
justjordant profile image
Jordan Taylor

Nice! good application!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks :D

Collapse
akashthakur05 profile image
Akash Singh [h3ck4rz]

How to implement click to copy

Collapse
braydentw profile image
Brayden W ⚡️ Author

I just used the onClick event on the item component and then used the Clipboard npm library.

Collapse
scroung720 profile image
scroung720

Nice stuff. Keep it up and congratz.

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks :D

Collapse
tracycss profile image
Jane Tracy 👩🏽‍💻

Looks amazing. Love the ux part of it.

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks :)

Collapse
hnrq profile image
Henrique Ramos

Keep up the good work, my man! So nice to see your progress in React!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks so much!! :D

Collapse
pavel_polivka profile image
Pavel Polívka

Hi looks awesome.

How did you get the data with the synonyms etc..?

Collapse
braydentw profile image
Brayden W ⚡️ Author

I just found a file with Json data