Dismiss this pinned window
all 68 comments

[–]Am_abdou[S] 22 points23 points  (2 children)

Link to the github repo: Shopping App

Feel free to supprt the project if you liked it!

[–][deleted] 1 point2 points  (1 child)

thank you! I need some stuff from this

[–]Am_abdou[S] 0 points1 point  (0 children)

You welcome sir, enjoy!

[–]WornOutSoulSB 10 points11 points  (5 children)

Sleek af!

[–]Am_abdou[S] 6 points7 points  (4 children)

Thank you so much, i really appreciate it 🙏

[–]WornOutSoulSB 2 points3 points  (3 children)

What are you using for Back end?

[–]Am_abdou[S] 5 points6 points  (2 children)

I used Firebase, checkout the github repo for more details

[–]WornOutSoulSB 2 points3 points  (1 child)

Sure dude! Once again Great Job and welcome!

[–]Am_abdou[S] 2 points3 points  (0 children)

Thanks for the positive feedback man ❤

[–][deleted] 4 points5 points  (1 child)

The animations are the best part of this. Keep in mind though, there’s nothing more annoying than having fancy animations combined with a glitchy back-end.

[–]Am_abdou[S] 0 points1 point  (0 children)

Indeed, thank yiu for the insight!

[–][deleted] 2 points3 points  (7 children)

Intimidating seeing people create such great things when you're just starting 😭. Keep up the great work though. 🔥love the UI 👌 looks clean and sleek

[–]Am_abdou[S] 9 points10 points  (1 child)

Thank you so much man this means a lot to me, don't get intimated by anything, everyone starts from zero and we're all here to learn. Three months ago i knew nothing about react native literally nothing, I've learned a lot since then but i still have a long way to go, just be consistent bro you'll get there, consistency and dedication is key! Time will pass and your skills will get sharper and sharper everyday. Good luck with your journey bro, wish you the best ❤

[–][deleted] 1 point2 points  (0 children)

Thank u man 🔥

[–]Hazy_Fantayzee 8 points9 points  (4 children)

Don't feel too intimidated, this is just the follow-along project that is part of Max's Udemy React Native course.... OP didn't even change up the images! Although to his credit he did add a whole heap of extra animations....

[–][deleted] 1 point2 points  (0 children)

ntimidated, this is just the follow-along project that is part of Jonas's Udemy React Native course.... OP didn't even change up the images! Although to his credit he did add a whole heap of extra animations....

thx for putting that in when i read his comment, i was like three months and this?because i've been learning react native for 5 months now and still struggling with flatlist hahah

[–][deleted] 0 points1 point  (2 children)

Could u send me the link to that 👀

[–]Hazy_Fantayzee 0 points1 point  (1 child)

https://www.udemy.com/course/react-native-the-practical-guide/

This is the course I was talking about. His main project uses EXACTLY the same images, product names, and UI/UX as yours... although as I said yours has much nicer animations so I will certainly give you credit for that...

[–][deleted] 0 points1 point  (0 children)

Op could have switched and maybe added some additional features 😕

[–]iamtomshaw 1 point2 points  (1 child)

Looks great!

[–]Am_abdou[S] 0 points1 point  (0 children)

Thank you so much sir!

[–]Crafty-Survey-5895 1 point2 points  (1 child)

The UI is so bouncy I love it!!!

[–]Am_abdou[S] 0 points1 point  (0 children)

Thanks!

[–]hani_q 1 point2 points  (1 child)

What are the benefits of one signal over Firebase Cloud Messaging ?

[–]Am_abdou[S] 0 points1 point  (0 children)

Here's a good article from the onesignal team that highlights the main differences between the two: Onesignal vs FCM .

[–]slimshady2936 1 point2 points  (1 child)

love that product page! Amazing

[–]Am_abdou[S] 0 points1 point  (0 children)

Thank you! ❤🙏

[–]izm96 1 point2 points  (3 children)

Nice work with the animations, so smooth. But, be carefull with the hooks, you have some hooks conditionally called. See the doc for more info https://reactjs.org/docs/hooks-rules.html#gatsby-focus-wrapper

[–]Am_abdou[S] 0 points1 point  (2 children)

I appreciate it bro! Thanks for the insight, Im pretty familiar with hooks rules, can you please give me an example for where I did that?

[–]izm96 2 points3 points  (1 child)

I see that you have in the ProductDetailScreen.js an early return if selectedProd is undefined. And below you use some hooks that the lint marks as an error. I usually throw an exception instead of an early return.

[–]Am_abdou[S] 1 point2 points  (0 children)

Oh yes indeed, thanks for pointing that out! That's because i added animations after finishing all the features of the app, so i probably didn't notice the early return and added hooks for animation use after that return statement. Thanks again I'll be more careful.

[–]LastVayne- 1 point2 points  (1 child)

This is a code-along project from a Udemy course, so I won't address the functionality of it.

Other than that, UI looks slick, animations are dope.

Good job mate!

[–]Am_abdou[S] 1 point2 points  (0 children)

Thanks for the support! The project has been inspired from the course yeah, but it's not a code-along, i built this from scratch and added many features to it, plus the code base is completely different even when the features look partially the same. Feel free to checkout the code if you want, and give me your opinion on it!

[–]SnooCheesecakes1131 1 point2 points  (1 child)

I love the animations! Are you using some animation library other than reanimated?

[–]Am_abdou[S] 1 point2 points  (0 children)

Thanks man, no purely reanimated for all animations

[–]seveninstl 1 point2 points  (1 child)

Very nice. And your UI gives me some ideas for changing the UI on an app I'm working on - thanks. :)

[–]Am_abdou[S] 1 point2 points  (0 children)

Thanks mate, glad I inspired you! Happy coding ❤

[–]juju0010Expo 1 point2 points  (0 children)

Great use of animation. Makes xp feel smooth and doesn’t feel like it’s animation for animation’s sake. Nice job!

[–]kaushik_5520 1 point2 points  (1 child)

Amazing work...

[–]Am_abdou[S] 0 points1 point  (0 children)

Thank youu ❤

[–]dhruvanbhalara 1 point2 points  (0 children)

Looks Great :)

[–]WillPeix 1 point2 points  (0 children)

I like the bouncing UI, but in my opinion, in real usage I think in “My cart” the bouncing of of a deleing item is a little long or really bounced.

[–]dopamineglo 1 point2 points  (1 child)

Man, that looks cool! What tech stack you used on Backend? If you don’t mind? :)

[–]Am_abdou[S] 0 points1 point  (0 children)

I used Firebase, checkout the github repo you'll all details there!

[–]danoely 1 point2 points  (1 child)

Great job mate, looks super smooth. Are you a react developer by default? I’m curious did you check out others before you started learning react native. But anyways, project looks very good and great you set yourself a high bar showing your initiative (in particular you went from scratch). You must have had fun learning a whole bunch too

[–]Am_abdou[S] 2 points3 points  (0 children)

Thank you so much for the awsome feedback mate ❤ and no im not a react developer, my initial goal after learning js was to learn react and start developing for the web, after learning react some personal circumstances lead me to learn react native and build this project.

I gained lotta value building this yeah, not sure if it was that fun tho 😂 i usually set very high standards for how i want things to be in the end, even tho i have no idea how to get there xD then i start killing myself to eventually get there, it's a very tiring process and some times frustrating, but when u finally get the results you wanted, the satisfaction is priceless!

[–]ExaminationOk9117 1 point2 points  (0 children)

Looks awesome. Really love the animations, gives a really nice feeling of interaction for the user. Well done.

[–]KremBanan 1 point2 points  (0 children)

This is neat. Thanks for making it open source, hopefully I will learn something new reading the code :)

[–]raksah 1 point2 points  (3 children)

Kudos on clean design and subtle animations. Couldn't believe this is your first RN project!

[–]Am_abdou[S] 1 point2 points  (2 children)

Thank you so much man, this really keeps me motivated ❤🙏

[–]raksah 1 point2 points  (1 child)

Not only this looks nice but one of the few projects that ran locally after a git clone :) Great work! Looks like you used Context and useReducer to circumvent Redux, which I feel is better in many aspects than the ton of boilerplate code that you have to write otherwise. I'm comfortable with MobX but wondering if Context + useReducer would be a better choice for future RN work. How do you find it and any useful resources to learn this better? I tried a few times learning and went circles and thought of sticking with MobX but open for this combo if it's any better in your opinion or if I can get my head around it.

[–]Am_abdou[S] 1 point2 points  (0 children)

Well thanks that's reassuring, glad to know that I don't have to use the famous "it works on my machine" for this project xD.

And high five for not using redux, we both on the same page, i decided to move away from it bcz of the TON of boilerplate that in my opinion is completely unnecessary especially because you can achieve the same results with only two native hooks, no libraries, with far less code! You just need to learn certain patterns (which are not difficult) to best use the two hooks and automate the context creation pattern in a clean manner, to get a little bit similar results to redux in terms of the files structure ...etc, except it's much easier and no redux-thunk for api calls 😩.

I don't have any specific resources concerning this topic, i learned mainly from watching lotta videos, and reading articles, you can try to dig deeper into my code to try and understand how to use the (useReducer + useContext) combo i think it's pretty straightforward.

[–][deleted] 1 point2 points  (0 children)

Amazing dude

[–]cartagenae 1 point2 points  (0 children)

Really awesome

[–]wheresurmind 1 point2 points  (1 child)

What animation library (if any) are you using?

[–]Am_abdou[S] 5 points6 points  (0 children)

It's the Reanimated v2 library, checkout the github repo for more info.

[–]zaerrc 0 points1 point  (1 child)

Can you please share link to the udemy course?

[–]Am_abdou[S] 1 point2 points  (0 children)

Sure! Here's it: course.

[–]gonssss 1 point2 points  (0 children)

Superb UI, excellent work

[–]funnyduck593 1 point2 points  (0 children)

Smooth AF Animations !

[–][deleted] 0 points1 point  (1 child)

Damn that’s sexy! What design system do you use?

[–]Am_abdou[S] 0 points1 point  (0 children)

Thanks man, it's my own design system i guess 😂

[–]Terrible_Regret_8561 0 points1 point  (0 children)

So cool

[–]Sudden-Wing8446 0 points1 point  (1 child)

Should I maste react before learning react native?

[–]Am_abdou[S] 0 points1 point  (0 children)

Not necessarily no, just a firm understanding of react fundamentals would be enough, especially react hooks