The app is now finished - check it out here: https://www.monicaspastrycakes.com/
This post is about various open source components I used to build this project.
In this post I will cover:
- ToggleSwitch
- Firebase Storage & Gallery
- Cruip CSS
- MaterialUI Date & Time Pickers
ToggleSwitch
I really liked how these toggle buttons looked on my app with an iOS feel.
Documentation: https://www.digitalocean.com/community/tutorials/how-to-build-a-custom-toggle-switch-with-react
![](https://static.wixstatic.com/media/c37be2_a59f697a16dc48d8a0fcb98b99af63d5~mv2.gif/v1/fill/w_980,h_444,al_c,usm_0.66_1.00_0.01,pstr/c37be2_a59f697a16dc48d8a0fcb98b99af63d5~mv2.gif)
Firebase Gallery
I used Firebase to store the images in the portfolio, and I used this tutorial to bring animation to my image gallery.
![](https://static.wixstatic.com/media/c37be2_20ae92a58bd84d35ade9b59e033d9e77~mv2.gif/v1/fill/w_980,h_444,al_c,usm_0.66_1.00_0.01,pstr/c37be2_20ae92a58bd84d35ade9b59e033d9e77~mv2.gif)
Cruip CSS
Cruip CSS framework provides pre-styled elements to use for your projects. The elements I really liked and incorporated were the section dividers, accordion, and carousel. Documentation: https://docs.cruip.com/
![](https://static.wixstatic.com/media/c37be2_cb4f6eac4ed44d8784e6d2683a557ebb~mv2.gif/v1/fill/w_980,h_444,al_c,usm_0.66_1.00_0.01,pstr/c37be2_cb4f6eac4ed44d8784e6d2683a557ebb~mv2.gif)
MaterialUI Date & Time Pickers
MaterialUI is a popular React UI framework that provides components without any additional setup and don't pollute the global scope. I used these date and time pickers for customers to select when they want to pick up their orders.
Documentation: https://material-ui.com/components/pickers/
![](https://static.wixstatic.com/media/c37be2_666bbdd25a844ab6b3c9fdabeb156d4e~mv2.gif/v1/fill/w_980,h_444,al_c,usm_0.66_1.00_0.01,pstr/c37be2_666bbdd25a844ab6b3c9fdabeb156d4e~mv2.gif)
Comments