Frontend Mentor | HANICHE Zahir's profile

Latest comments

Gabriele•200
@gabrielezizzari02Submitted 7 months ago
Audiophile Site
#react#redux#sass/scss#vite#react-router
1
HANICHE Zahir•280
@ZahirHaniche-devPosted 7 months ago
Congratulations on this magnificent project, it is very inspiring and references many ReactJS concepts. I will keep your project in mind to learn more. Once again, congratulations and best of luck for the future.
0

@abdul-haseeb123Submitted 7 months ago

What are you most proud of, and what would you do differently next time?

I am very much proud of how I integrated shadcn ui select component which is using Radix UI Select Primitive, Although I am thinking of creating my own select component using Radix UI next time.

What challenges did you encounter, and how did you overcome them?

The challenge that I first encounter was how to handle json data and use typescript to only fetch the data that will be displaying on the screen and filter out other unnecessary properties from the data. Here is how I tackle this problem.

import data from "./data.json";
 const countries: CountryList[] = data.map((country) =&gt; {
    return {
      name: country.name,
      population: country.population,
      region: country.region as Region,
      capital: country.capital,
      flags: country.flags,
    };
  });
```ts

**As for country detail page, here is how get the data:**

```ts
export const getCountry = (name: string): CountryDetail =&gt; {
  const country = data.find((c) =&gt; c.name.toLowerCase() == name.toLowerCase());
  if (!country) throw new Error(`Country with name ${name} does not exists`);
  let borderCountries = country.borders?.map((border) =&gt;
    getCountryByAlpha3Code(border)
  );
  return {
    name: country.name,
    nativeName: country.nativeName,
    topLevelDomain: country.topLevelDomain,
    population: country.population,
    currencies: country.currencies,
    region: country.region,
    subregion: country.subregion,
    languages: country.languages,
    capital: country.capital,
    borderCountries: borderCountries,
    flags: country.flags,
  };
};
```ts

REST Countries API with color theme switcher

#next#react#tailwind-css#shadcn

HANICHE Zahir•280

@ZahirHaniche-devPosted 7 months ago

Fantastic project, excellently executed and completed. Kudos to you, my friend.

I have a crucial observation regarding the data reloading with each action on the site. I recommend you check out my project to see that the only loading I perform is fetching the list when we first access the application. In your case, you make API calls every time you trigger or use a feature, such as the filter or the detail page.

In my approach, I use a reducer with a getData function that I call once. Then, for filtering and other operations, I manipulate the array that I retrieve as a state.

Marked as helpful

alanbart•380
@alanb4rtSubmitted 8 months ago
Fylo Data Storage Component
#react#tailwind-css
1
HANICHE Zahir•280
@ZahirHaniche-devPosted 8 months ago
I really like how you structured the components. Congratulations on your project and keep up the good work! 😊
0
Mongkolkhanit_d•20
@mongkolkhanit-dSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
I experimented with HTML and CSS on my own and got it right.
What challenges did you encounter, and how did you overcome them?
I experimented with flex and grid to get the results I wanted, and eventually I settled on flex.
What specific areas of your project would you like help with?
I have insecurities about my coding. I'm not sure if it works or not.
My 1st CSS project
3
HANICHE Zahir•280
@ZahirHaniche-devPosted 8 months ago
I have a few comments on your code. Firstly, you should create a /src folder to have a more logical architecture. Secondly, create a /styles folder within /src and put your CSS file in it.

Congratulations on your project and keep up the good work! 😊
0
P
Austin•430
@astnioSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
I am not sure what else I would do differently next time, as all I used was basic CSS and HTML.
What challenges did you encounter, and how did you overcome them?
It was difficult to find out what the challenge asked for when it said "try not to use media queries." I had a hard time figuring that out, and ended up using media queries anyway.
What specific areas of your project would you like help with?
I would like to know more about solutions not using media queries for changing the font size at different screen sizes.
Blog Preview Card using CSS
5
HANICHE Zahir•280
@ZahirHaniche-devPosted 8 months ago
Great job on your project, my friend; the result is really impressive. After reviewing your code, I suggest implementing Vite, and perhaps even migrating your application to ReactJS to gain experience with this library. Once again, well done, and best of luck moving forward!
0
Esteban•670
@evertznerSubmitted 8 months ago
Pomodoro app
#astro#react#tailwind-css
1
HANICHE Zahir•280
@ZahirHaniche-devPosted 8 months ago
Honestly, congratulations my friend on your project. It is not only well-structured but also highly functional. I’ll be keeping it as inspiration, and once again, I want to congratulate you. There’s nothing more to add after seeing your code.
1