@gabrielezizzari02Submitted 2 months ago
HANICHE Zahir
@ZahirHaniche-devAll comments
- @ZahirHaniche-devPosted 2 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 3 months agoWhat 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) => { 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 => { const country = data.find((c) => c.name.toLowerCase() == name.toLowerCase()); if (!country) throw new Error(`Country with name ${name} does not exists`); let borderCountries = country.borders?.map((border) => 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@ZahirHaniche-devPosted 3 months agoFantastic 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 helpful1 - @alanb4rtSubmitted 3 months ago@ZahirHaniche-devPosted 3 months ago
I really like how you structured the components. Congratulations on your project and keep up the good work! 😊
0 - @mongkolkhanit-dSubmitted 3 months agoWhat 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.
@ZahirHaniche-devPosted 3 months agoI 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 - @astnioSubmitted 3 months agoWhat 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.
@ZahirHaniche-devPosted 3 months agoGreat 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 - @evertznerSubmitted 3 months ago@ZahirHaniche-devPosted 3 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 - @Mahmoud-ElagamySubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
...
Hello FEM Community!😉
this is my solution for multi step form app challenge!😊.
I'm thrilled to share my solution for the multi step form app challenge, and building this app was a fantastic learning experience that solidified my understanding of React's core concepts.
🛠️ Built with:
- React✔
- Tailwind ✔
- TypeScript✔
- Framer Motion ✔
- Daisy UI ✔
Check out the live demo and feel free to leave any feedback or ask questions about my approach! Thanks a lot😊.
@ZahirHaniche-devPosted 3 months agoCongratulations on your very comprehensive project. I really like your project architecture and the way you managed the form steps. I have just submitted a solution that I will improve little by little because there are still things missing.
Once again, congratulations my friend and good luck!
Marked as helpful0 - @HeshamAliAhmaSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that I achieved this challenge using these tools because it was an application of some of what I had learned and I will use the chakra-ui in next time
What challenges did you encounter, and how did you overcome them?I've encountered some minor problems, but I consulted ChatGPT for help.
What specific areas of your project would you like help with?nothing
@ZahirHaniche-devPosted 3 months agoHi my friend, congratulations on your project, I find the result very beautiful!
The project architecture is excellent, and I think it’s great that you used Vite for the project, which makes things much easier. There’s just a slight color difference with the mockup, but it’s nothing serious.
Keep up the good work!
1 - @DimasAditya2Submitted 3 months ago@ZahirHaniche-devPosted 3 months ago
Hi my friend, congratulations on your project, I find the result very beautiful!
I have a few small remarks: I think you could improve the project architecture. Otherwise, congratulations once again and keep up the good work!
0 - @waquintero-iaSubmitted 3 months ago@ZahirHaniche-devPosted 3 months ago
Hi my friend, congratulations on your project, I find the result very beautiful!
I have a few small remarks: I think you could improve the project architecture by placing the images in a specific folder like ‘src/images’ and enhancing your README.
Otherwise, congratulations once again and keep up the good work!
0 - @alanb4rtSubmitted 3 months ago@ZahirHaniche-devPosted 3 months ago
Congratulations on your project! I find your code very good, but if I may make a small remark, I think your JSX is quite substantial. If you can make it even more modular, for example by creating a module for the select and filter (options), it would be great.
Once again, congratulations and keep up the good work.
0 - @alanb4rtSubmitted 3 months ago@ZahirHaniche-devPosted 3 months ago
Congratulations on your project, my friend! I just reviewed your code and I consider that the architecture of your project and the modules you created are perfect. I will keep your project aside.
Once again, congratulations and best of luck for the future.
0
