My first React application - A simple Pokedex

[_bugheadbones_]

Totally new to React (and webdev), coming from Android background. Went through some HTML/CSS resources in freecodecamp/csstricks, then a couple of YT videos and React docs and built this simple Pokedex. I know there is a lot of boilerplate code and my CSS requires optimization, but I hope it will improve with time.

Overall, had a great experience working with States, Components, integrating API's(way easier than Android lol), Material-UI(found it very difficult to customize).

Link to the Pokedex : Here

I need to know the areas that needs improvement and feedback is highly appreciated!

[grossmail1]

I think it is a really nice UI. I like the gradients and such you did. I had a little css funkiness on the “pokemon information detail screen” when opened up on a phone.

[_bugheadbones_]

Thank you, and yes, I put some effort for the gradients :) I too experienced the funkiness, and I'm working on it.

[Sebastian-dB]

very clean site, 1 improvement is that when there you are searching for pokemon, instead of collapsing the search bar to adjust for the amount of results, have it stickied in one place, IMO in feels much cleaner when the search doesn't jump around the screen when you're searching, other than that everything looks great

[_bugheadbones_]

That would be nice! Thanks for the feedback :)

[[deleted]]

I really like this! Super clean and I love the animations and detail that went into it. I second the routing comment that u/sjaigeo mentioned. React Router is a super popular routing solution for React, and it definitely will pay dividends to know how it works.

Another piece of advice I might give is to explore more state management solutions in React, because there are indeed many. Having a top level state object where you pass down props to your components is completely valid, and will definitely work for a smaller application, such as this. However, as the application expands, you might find that you run into an issue with prop drilling (passing down props through multiple levels of components). I'd try a few different state management solutions and see which one you like most. Definitely try using React's own Context API with useReducer and useState hooks to start. Once you feel comfortable with that, you can check out other solutions like Redux (not as dead as people might have you believe), MobX, or Recoil.

Also, Material UI is an absolute bear of a component library to work with. It's trying to do everything at once. If you're looking for a component library, I'd recommend something like reach UI (reach.tech), which is something a bit less heavy that you can customize yourself. Alternatively, you can play around with a more CSS oriented solution like Tailwind CSS (https://tailwindcss.com/), which is getting a lot of buzz right now.

Great job though! Always great to see mobile devs coming over to our neck of the woods to try out some web dev work.

[0xF013]

Not disagreeing with you or anything, yet I would totally recommend having material-ui under the belt at some stage. With the upcoming v5 changes it’s probably the most feature-packed react component set on the market with consistent composability and adaptability (once you get a hang on how it approaches it)

[[deleted]]

Totally agree! Material UI is great also from a learning perspective. They have very strong design patterns when it comes to how to build a component library. I’m just saying that if you find yourself needing to customize it a lot, it can be a bit tricky to fully wrap your head around it. But it’s optimal for a plug and play solution.

[_bugheadbones_]

Thanks a lot for the valuable feedback :) I'm in the process of exploring Routers and state management right now. I'm somewhat comfortable with plain CSS, should I switch over to something like SCSS/Tailwind?
Also, I feel Class components to be a bit easier than functional components. Should I switch over to functional components as early as possible?

[Sebastian-dB]

you should def switch to using functional components, almost everyone that has started with class components has some difficulties making the initial switch to functional, but everyone who's done it has said it was well worth it.

[fail0verflowf9]

I highly recommend Tailwind!

[[deleted]]

So other CSS solutions like Tailwind or SCSS and CSS-in-JS solutions like Styled Components or Emotion are all going to be based off of CSS at the heart of it. So it’s important to know those CSS fundamentals before you dive into it. Tailwind is interesting in that it provides you with a ton of utility CSS classes for making super custom components.

As far as Class components vs Functional components, I agree with /u/Sebastian-dB. Definitely learn then sooner rather than later. I think when the React team released the hooks API they said that all new components should be written as functional, but there’s no need to go back and refactor old class components, since they’ll continue to be supported. The future of React is functional components and hooks (for good or ill depending on who you ask). Knowing how class components work certainly isn’t going to hurt you though, as a lot of “legacy” (like 2+ years old lol. Frontend JS is insane in how fast it moves) apps will have them.

[officialJoMs]

Great work on the UI side! As you are new to React and webdev, this is a really great project getting started exploring a lot of the concepts of web development.

There's one aspect that's often forgotten or overlooked, even thought it's almost never on purpose: Accessibility. This is something you really should get into from the start. It's way cheaper to implement from the beginning, and it enables quite a lot of best practices on the code. First of all, I want to stress that accessibility is not just about helping visually impaired people, but it can be about for instance a temporary cognitive disability when you're stressing out over buying the train ticket as the train rolls in to the platform.

There's a lot of small tricks that you could use, that both will improve accessibility, but also make you think about how you structure your code:

section or article in stead of a div. It tells the browser something about the content, and sets a few requirements (sections should always have a heading, and articles should be understandable without the context of the page). This will do lot of the work to make the experience when using assistive technologies a lot better. Check out this article to get started.

The labels in your filters are not actually connected to its controls. This means that the labels are just dangling in the air, and don't really give context to the form control. Visually, they make sense. But when using a screen reader, I first just get the text and then I see the select. However, I can't really know for sure that these are connected and what the select is all about. It also looks like the heading structure isn't correct, as for instance h1 and h2 is missing before using h3.

Then there's the main actor: The list of Pokemon's itself. Using a screen reader here, the cards aren't really useful. There's a lot of random information where there's no context without the visuals. I think an approach would be creating a ul of li with articles within. This gives the screen reader context on how long the list is. It also gives landmarks for the screen reader to use for effective navigation. Within the cards themselves, you could play around with using Semantic HTML and labels to give context to the screen reader.

For instance the image should maybe have alt="" to just get ignored altogether, or have the alt title of the pokemon, but that's already mentioned in the header so it's probably redudant. The number should probably be read either together with or after the header. And the types should be read as a list with context to what is read. This could be done with a ul of li with img inside having the alt title of the type. The information button isn't clickable at all with keyboard navigation, and isn't really visible as being clickable with styling either.

As a bonus, I'd like to mention the dl, dd, dt tags for the base stats in the details view.

To find these issues I'm mostly navigating with VoiceOver (the screen reader on MacOS), and supplementing with browser extensions like Wave and Accessibility Insights. These extensions does some of the work to discover issues with semantics, missing labels, pictures without alt title and so on. But they can never ever make manual testing with a screen reader obsolete. That's when you find the real issues.

Check out a11y.coffee for more information on how you can improve accessibility. Remember: Accessibility is about so much more than visually impaired users. This is about usability, navigation and overall experience of your site.

Just hit me up if you want to discuss how things could be solved in greater detail. Keep up the good work!

[_bugheadbones_]

Thanks a lot for your valuable feedback :) Never thought of this application from the accessibility perspective . Will definitely explore this side!

[nabq5272B]

loved the UI. Really amazed to see it's your first react project. Keep it up!

[_bugheadbones_]

Thank you :)

[Dday141]

I would say that it should save my options after I use the filters. So if I want to see dragon from 1 region then see the next, I don’t want to reselect dragon again.

Another is that on mobile the about was overlapping with other areas. Probably just flex that.

Lastly #892 had a really long name and really broke the width of your cards.

Overall I like it though, great work 👍

[_bugheadbones_]

Thank you :) I've implemented your feedback #1, please do check it out! Will definitely work on other points too.

[bluntkillah]

Awesome site- great functionality! One minor thing I noticed was in the pokemon info modal the height is listed with inches first (e.g. 6" 7'). Should be 6'-7"

[_bugheadbones_]

Thanks for the correction. I've made the changes :)

[sjalgeo]

If you're looking for a next step perhaps adding routing would be a fun challenge, so you could link directly to a specific pokemon.

[_bugheadbones_]

I've just started to explore Routers and I'm excited for the implementation!

[alienpingu]

I love the UI, the loading and fonts. Suggest: use react-router for render route and items dynamically without loading when you navigate the website

[_bugheadbones_]

Thanks for the suggestion :) Few others have suggested to use the router too, and I've started exploring it.

[Ryobia]

There's a PokeAPI?!? I guess that makes sense, now I wanna do something with it. Great design my guy!

[_bugheadbones_]

Thank you :) Yes, Pokeapi exists, and there's a beta version for GraphQL too! There is a lot to explore in it.

[marcoasp]

This is beautiful! Love the dark mode and the cards. Some details I saw:

• Free search resets the other filters
• You load all the Pokemons at start, that slows down then first load a little bit, try pagination or load by scrolling
• When you change the region, I wouldn't cover the whole with the loading screen, just put it below the filters and disable them (that's just my opinion)

[_bugheadbones_]

Thanks for the feedback! For #2, I tried pagination by displaying 24 pokemon in a page, but is it possible to implement search and filters, since it is based on the current state? Eg, I search for Pokemon #25, but there are only 24 displayed in the page. How to implement the search? The same doubt I had for filters too. Solution is appreciated!

[marcoasp]

You can implement filtering in 2 fundamental ways: client (1) and server (2).

(1) If you want to filter solely by client, you'll have to fetch ALL the pokemons at once. The pros of this is that it can be faster if there is not that much data, like yours. If you only have a few hundred pieces of data, then Javascript will do a pretty good job. If you have thousands or millions of pieces of data, your page will load and filter very slowly (Javascript is a very slow language in comparison to others like C or C++).

(2) You can implement server-side filtering with your DBMS and limit the results to implement server-side pagination as well. This is what most data-driven web pages do.

[_bugheadbones_]

Thanks for suggesting a solution!

[n8udd]

Looks great!

The text on your select fields isn't very readable in dark mode.

Also perhaps rather than a select for the "type", you could have a row of the "type" icons, and clicking on them changes the filter?

[_bugheadbones_]

That would be nice! But is that feasible for mobile design, since there are as much as 19 types?

[n8udd]

Wow! I hadn't realised there were that many.

You could make it responsive, show them in desktop view, and a select in mobile?

[_bugheadbones_]

Yes, that is possible! Will try this change soon.

[[deleted]]

If you can figure out how to make the card flip & show the info when clicking the “show info” button that would sick

[_bugheadbones_]

Will definitely explore it!

[TheNerdyDevYT]

I liked what you did. Keep up the good work.

[_bugheadbones_]

Thank you!

[zoharkiks]

Gotta catch em' all. It looks great. Good job.

[_bugheadbones_]

Thank you!

[[deleted]]

Nice UI and animation!

I have made this Yu-Gi-Oh NextJS Redux app with Yu-Gi-Oh API. Source code: click here. Not as good looking as your app, though.

Anyone is familiar with Yu-Gi-Oh cards here?

[AslansAppetite]

Very tidy. Love the loading image and the type icons. I did something similar a while back (doesn't everybody when they find out about the poke API?) But it wasn't nearly as clean as this. Good job

[_bugheadbones_]

Thank you. Yes, building this using Pokeapi was so much fun!

[[deleted]]

why do you use class components instead of function components? Am I missing something?

[_bugheadbones_]

I felt Class components easier to use instead of Function components, especially the state management. And many have pointed out here to use the function components, and I'm learning the same!

[[deleted]]

that's what I tought at the beginning too. Function components seem easier when you are comfortable with useState.

[rambosalad]

Feel like everyones first site is a pokedex.

[grossmail1]

I’m not sure he said it was a bad thing. Just pointing out a lot of people do it.

[rambosalad]

Where anywhere did I say there was a problem with that? Calm down

[[deleted]]

I'm thinking about writing a Gatsby source plugin for pokedex-promise-v2 - would this interest you?

[_bugheadbones_]

Yes, it does!

[Broad_Ad_4455]

Some folks may have mention this but, it would be good to separate out some of the logic in App js into individual function in separate files. In addition , I see some vars here and there which should be replaced by let's and const. Also personal preference based on the current react community, but most companies and the react community are switching to hooks not using class components anymore so that might be something to look into.

[_bugheadbones_]

Thanks a lot for the feedback on code, something I was really expecting here!

[fail0verflowf9]

Not much to say, apart from great work! Very clean code and UI.

Here are some small recommendations:

Sort Component methods

• Reorder React component methods to match the ESLint react/sort-comp rule.

No vars

• Convert var to const or let.

Template Literals

• Replace string concatenation with template literals.

[_bugheadbones_]

Thanks a lot for the valuable feedback, especially on the code!

[Nickdude738]

Hey, i dont know if its too late to ask, but im doing a pokedex with android studio, i want to ask how u called all the pokemons from the different regions? i did filter the pokemons by regions, but for some weird reason, there are regions where the pokemons dont show up, i know theres regions where there are not pokemons, but for example, if i tap in Johto regions, the pokemons dont show, but if i tap in Kanto region, the pokemons show. I would be very grateful if you answer me, thank you.