All solutions

I made it to test framer-motion,

I still didn't push the animation, for the sake of the screen of the template,

Is this the best way to use framer motion in NextJs ?? Any info is appreciated, Cheers !!

notes:

• I didn't feel the need to use many components
• The design provided is just terrible

well... This is my first NextJs project ever, I admit that I haven't leveraged all its good features, yet it was quite fun.

Difficulties:

• images: if you try the live demo you can see that the images are losing quality once they got optimized with <Image/> component (if you got a good resource hope you drop it here)

• Suspense: for some reason suspense had a weird response when I tried to use it and it gave me a hard time although I use it often in React.

• Hydration: it's just annoying once in a while I get a hydration error and keep debugging until I realize it's just a random extension causing it.

• Components: I forgot not to add margins/paddings to components, the thing that made it a bit hard to maintain the same sizes as shown in the designs.

• Mongoose: I found it hard to know how to establish a single connection in the entire app and make use of it unlike using Mongodb

Things I should have considered:

• Drawing a workflow Schema: once I got the project; I started building it without even considering having spare time to classify the components ( Client / Server ), what strategy for acquiring data to go for (use Mongoose directly / use API routes i end up using both :) ) especially once many events happened and entrapped the journey.
• Starting with something easier: this is a fairly easy project, but I made it harder by not considering my lack of knowledge of the framework and its catches especially when it comes to Nextauth, (it's a disaster, manually using JWT/node would have been easier).

In case you have a good info/advice /resource I would be grateful to see it

I struggled the most with CSS by looking around and searching for classes, I recommend using CSS modules or styled-components. If you have any better suggestions let me know.

issues :

• I have a huge down impact on performance when it comes to mobile (71%) compared to desktop (99%) due to image handling.
• if you have any better way to handle a huge load of images I would be grateful to hear it.

Note :

• context here was so simple that I didn't have to use any complex filtering of reducer or anything else.

It's not that accurate since I don't have the exact sizes / Figma design but it looks good and responsive ass it should be

Css writing style here is not the best and I recommend using grid-area it was amazing and Easy to maintain. However, I used the regular approach (span 2, 1 span / ...)

It took me two days due to my busy schedule and due to the fact I'm new to framer-motion relatively to React too

I hope it looks like the design :)

Problems: I feel like I struggled a bit with how to structure my components to make them suitable for animation rather than just fast-writing code, animations are way too repetitive and maybe I could have made a component that animates the children but I found it to be a bit higher than my framer motion knowledge.

I am gonna do better for sure next one but if you got any advice about:

• React
• Responsive-layouts
• Framer-motion
• Performance (I got 90 on mobile and 98 on desktop how to do better ?)

let me know , cheers

The screenshot couldn't get a better one maybe due to animation so I recommend checking out the preview

there is Nothing difficult that's just a warmup, if this could improve let me know <3