14
17 Comments

After learning React for a week I 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!

posted to Icon for group Developers
Developers
on October 5, 2020
  1. 3

    Awesome design Brayden! You should seriously try making a UI component library and open sourcing it. It would do great for your reputation and give you something to put on your portfolio. 👍

    1. 1

      Thanks! I will consider doing somehting like that in a week or so. Stay tuned :D

  2. 2

    Nice one mate! That's a great way to learn something new.

    Similarly, a few years back when I was learning Vue.js, I built Emoji Homepage (~200 visits per day for the last year)

    Given that your emoji-search is open-source, it could stick for quite some time. Good luck!

    1. 1

      Thanks! I’ll do my best :)

  3. 2

    This looks great! Looks like you're making a lot of good progress.

    Quick tip... depending on the situation, I like to destructure my props in my functional components. Helps me see the props/arguments more clearly.

    So instead of:
    function Item(props) { }
    Try:
    function Item({ id, symbol, title }) { }

    This way, you can also supply default props like so:
    function Item({ id, symbol, title = "No Title" }) { }

    Keep up the great work!

    1. 1

      Thanks for the tip :D

  4. 2

    Great work! I am wondering if you can share some good resources to learn React and maybe a short roadmap.
    I think you already have some experience with this kind or frameworks that’s Why your learning process was so fast.

    1. 1

      Actually no. This is my first time learning a framework like React or Vue. Any info is helpful. Thanks :D

  5. 2

    Wow, you are doing a great learning process.

  6. 2

    Great work mate.

    I noticed on mobile I wasn’t getting any results when searching, turns out it’s because of auto capitalisation on iOS. Where you’re doing your filter you might want to do a .toLowerCase() on your values so it doesn’t matter if the user is using caps or not.

    1. 1

      Also you can't see results when searching on phone because of the keyboard.

    2. 1

      Good idea! I'll be sure to fix that :D

  7. 1

    This comment was deleted 6 years ago.

Trending on Indie Hackers
I built a tool directory that doesn't pretend every founder has the same needs User Avatar 64 comments I Was Picking the Wrong SaaS Tools for Two Years. Here's the Mistake I Finally Figured Out. User Avatar 54 comments Drop your landing page URL. I'll use Ferguson to tell you why visitors might be leaving User Avatar 52 comments AI helped me ship faster. Then I forgot what my product actually does. User Avatar 38 comments Most early-stage SaaS companies miss churn signals — here’s how to catch them early User Avatar 31 comments How I Run a 1.7M Product Search Engine at 66ms on a $0 Hosting Budget User Avatar 19 comments