Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Fluffy Kas 7,735

    @FluffyKas

    Submitted

    Hey guys,

    I'd like to apologise to anyone who's only interested in the rating card component. Just click through the pizza creation, on the finish page you can see it as a popup, if you choose to give a feedback.

    Because that's what this component turned into. A pizza app. Somehow. I wanted to practice React so I kept adding new things to it and this is what I ended up with. Design wise it's not the fanciest (I'm really not a designer, sorry) but that wasn't really the point here anyway.

    I added a couple of features: a pizza creation function, signup/login function with Firebase (password reset as well), a light-dark theme, a contact form and a pizza-loader animation (thanks to my sister for the pizza images she made for this and for the home page background). And finally there's the rating card component as a modal, which was the original challenge.

    I learned a lot in the process: I got a tiny bit better at Framer Motion, I wrote a bunch of React code, used context and Firebase for the first time. I even managed to reuse some things from my other projects (like the mobile menu) - it felt great that I didn't have to do it again from scratch.

    I appreciate if you take the time to look at it. I take any sort of feedback regarding accessibility, React best practices, css (a bit messy at the moment), animations, how to make things more reusable... anything.

    If there's anyone who's a pro at Framer Motion and can give me a hint on how to do exit animations, I'd love it.

    And lastly I hope it isn't inappropriate to upload this app here. It really started out as the rating card component, just got carried away.

    Anyway, happy Easer/have a good weekend everyone!^^

    Interactive Rating Card - turned into a modal in a pizza app

    #firebase#framer-motion#react#react-router#sass/scss

    5

    pranav 120

    @PrAnAvViNaYaKjAdHaV

    Posted

    First, I am just confused but that animation is so cool I am also trying to learn that kind of animation nice job I like to order pizza from that application 😁😁😁😁

    1
  • P
    Fluffy Kas 7,735

    @FluffyKas

    Submitted

    Hey guys,

    This is my first React project. Well... there are some part I'm satisfied with and others, less so >.< I'm quite happy with an overall layout, especially the mobile and tablet view. The backdrop filter also looks super pretty (too bad Firefox still doesn't have support for it).

    What I'm not happy out is the layout shifts. Especially in the Crew tab, the content "jumps around" a fair bit. It only happens on the initial load. Tried to find a way around it with some animations but I'm still a bit clueless how to solve it, so if anyone has any idea, I'd be happy to hear it.

    I'd love to hear other feedbacks too on how to improve my work, as usual ^^ Have a great day!

    Space tourism - with React and Framer Motion

    #react#react-router#framer-motion

    2

    pranav 120

    @PrAnAvViNaYaKjAdHaV

    Posted

    Yo, your solution is a great nice one 😀😀😀😀

    0
  • pranav 120

    @PrAnAvViNaYaKjAdHaV

    Posted

    on desktop your website looking different means not looking exactly mentioned in the design on mobile, it looks very good you only need work on desktop and bigger screen 😃😃😃😃

    0
  • pranav 120

    @PrAnAvViNaYaKjAdHaV

    Posted

    I can suggest only one thing don't use <h3> there you need to go ascending order first <h1> then

    <h2> else use p tag and give font-size then you can read off ACCESSIBILITY ISSUES

    over all your solution is great, keep it up, and happy coding

    0
  • pranav 120

    @PrAnAvViNaYaKjAdHaV

    Posted

    I think you need to focus on your CSS advance concepts like flex grid to design this kind of web page my suggestion is

    1. don't give fixed width to any div use max-height ,max-width etc.
    2. if you want to learn advanced concepts like flex-box, grid and javascript then check out the frontend resources page there are free courses for these concepts.

    That's all you did a great job keep it up and happy coding

    Marked as helpful

    0
  • @KhaledMostafa990

    Submitted

    I just finish Bookmark Landing Page with animating the full content. Using Webpack for module bundling, in spite of the page not being much big, using Webpack is still much more efficient. Using grid system in 85% of the page to get more comfortable with. I tried to get the page pixel perfect as I can hope it be correct, any feedback or recommendations for better code structure || performance are very appreciated. Thanks.

    pranav 120

    @PrAnAvViNaYaKjAdHaV

    Posted

    bro if you can suggest any resources to learn animation like this, plz share it

    0
  • devbev 80

    @devbev

    Submitted

    Hello all,

    Please kindly check out my work and provide me any possible advice or suggestions for improvement.

    Thank you.

    pranav 120

    @PrAnAvViNaYaKjAdHaV

    Posted

    I think you need to improve your flex and CSS concepts I just open your web application and all sections are too big

    0
  • pranav 120

    @PrAnAvViNaYaKjAdHaV

    Posted

    That hover animation is too nice 😀😀😀😀😀😀

    1