All solutions

This project is challenging especially the full stack version, in this project I've used next js as a full stack framework, mongodb database hosted in Mongodb Atlas cloud, prisma to communicate between the backend and the database, also I've used Zustand as a library for global state management.

This project is a little bit challenging, with more features, an ideal project for use of global state management, functional components, presentational component, and sass for styling ( the need for optimization of code).

The next step in this project for me is to make it full stack, my plan is to use the API in the next js with graphql, and MongoDB.

The challenge for me in this project was how to make a carrousel by using VanillaJS ( it's so easy to use bootstrap, copy paste the carousel code from the web site), and use the Window interface's matchMedia() to take into account responsive design side and use mediaQuery inside javascript;

The challenge in this component is, how to transform the values of the JSON data to a shape and background color, and how in case of a change occurred in the data, the bars change also accordingly. The challenge was a great opportunity for me to get a deep understanding of some notions in React js especially the hooks, the event in javascript.

the use of useEffect enabled me to put the background for all the bars taking into consideration the bar with the maximum amount, also the use of the style inline for the height enabled me to draw the shape of the bar.

The challenging thing in this project is the responsive side, especially the image that has one side inside the body and another outside it, I think using the sass preprocessing has helped me a lot to optimize my css code and make it more reusable, also this way helped me a lot during testing and adjusting my code during testing on multiple devices. it's a css project par excellence.