Submitted almost 3 years ago

Mobile first with React.js, Framer Motion and Tailwind CSS

accessibility, framer-motion, react, tailwind-css, vite

Karol Binkowski•1,620

@GrzywN

A solution to the Time tracking dashboard challenge

Preview Code

Solution retrospective

This is my first project in React and I've learned a lot 😇 The components may be too big and the code is not as clean as it could be, but I'm really happy with the final result, especially the animations. For the first time I used some other tools like Tailwind or Framer Motion and it was a pleasure. Any feedback is welcome here 😁.

Code

Please log in to post a comment

Community feedback

ApplePieGiraffe•30,525
@ApplePieGiraffe
Posted almost 3 years ago
Hi, Karol Binkowski! 👋

Good job on this challenge! 👏 Your solution looks great and responds nicely! 🙌 I really like the animations that you added to the components, as well! 😀

A tiny suggestion I have is to wrap the meatballs menu icons in button tags since they would typically open some sort of menu when clicked.

I took a look at your code and noticed that you were doing this in your components:
```
export default function Component(props) {
  const { prop1 } = props;
  const { prop2 } = props;
  const { prop3 } = props;

  // etc.
```
It's much easier (and nicer-looking, haha) to simply grab those props using object destructuring syntax, as in:
```
export default function Component({ prop1, prop2, prop3 }) {
  // etc.
```
You can then reference those props normally in the rest of your function. If you'd like to learn more about object destructuring/assignment, check out this helpful video on the topic.

Hope this helps. 😊

Keep coding (and happy coding, too)! 😁
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord