DEV Community

Brayden W ⚑️
Brayden W ⚑️

Posted on

I learned some React in a week and made an emoji-searcher tool πŸ˜€πŸŽ‰πŸ‘

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!

Top comments (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 ⚑️ •

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 ⚑️ •

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 ⚑️ •

Cool, thanks :D

Collapse
 
braydentw profile image
Brayden W ⚑️ •

Cool thanks! Very helpful :D

Collapse
 
achintyam1812 profile image
acm1812 •

Congrats on learning react! Looks good

Collapse
 
braydentw profile image
Brayden W ⚑️ •

Thanks :D

Collapse
 
akashthakur05 profile image
Akash Singh •

How to implement click to copy

Collapse
 
braydentw profile image
Brayden W ⚑️ •

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 ⚑️ •

Thanks :D

Collapse
 
tracycss profile image
Jane Tracy πŸ‘©πŸ½β€πŸ’» •

Looks amazing. Love the ux part of it.

Collapse
 
braydentw profile image
Brayden W ⚑️ •

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 ⚑️ •

Thanks so much!! :D

Collapse
 
patriscus profile image
Patrick Ahmetovic •

Nice work - I really dig it!

Collapse
 
braydentw profile image
Brayden W ⚑️ •

Thanks :D

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

Collapse
 
stef4nutz profile image
stephen •

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

Collapse
 
braydentw profile image
Brayden W ⚑️ •

Just React :D

Collapse
 
zdev1official profile image
ZDev1Official •

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

Collapse
 
braydentw profile image
Brayden W ⚑️ •

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