Fujifilm camera can produce analog film color with its unique film simulation straight out of the camera. The idea of building this project wants to see more Fujifilm simulation settings shared across online platforms. The app is simple; the user uploads the photo, then adds the settings (or what we call the recipe) on the whiteboard. When the user finished the edit, they can export the recipe and share it online.
I started this project while learning React in early 2021. There were many uncertainties goes on the planning stage as I was very inexperienced with the framework and the overall structure of the app. A lot of things are figuring along the way, and look up different tutorials.
I break down the planning stage into three simple steps
There were a few roadblocks along with this project. Some tasks took me a few days to figure the solution, some new concepts I had to read serval times to understand.
Canvas vs. Dom
For the drag and drop component, this is where the component switches to a whiteboard after uploading. I first choose HTML Canvas as it seems promising when I do my research. However, it is a different story when I try to display the data on the whiteboard component. There are two critical things to be aware of in the whiteboard component: responsiveness and final export resolution. I realized that even canvas allows precise placement. However, it requires complex calculations to display it on the whiteboard component. So, I tried another solution which is drawing the div on the page. The advantage of this method is it is effortless and clean compared to the HTML canvas. A lot of calculations on the layout can replace by a CSS grid layout. In the end, you can do tons of research on a specific topic, but you only truly understand what your limitations are when working on the code.
State management is complex, very complex.
When I am starting, adding local state within the UI is relatively simple. I struggled a lot when it comes to global state management. How is this component going to behave when interacting with another component?
There were a few state management libraries out there. Redux, widely knowing, became my first choice. Regrettably, when looking up the documentation, I got overwhelmed by the documentation and did not understand a single thing. During that time, my brain clicked with useContext and considered only a few things I need to pass down from the app. I went with the useReducer + useContext method for my global state management.
I manage to get the hang of it after giving it a try, but I need to keep practising more to understand state management better.
Lessons and takeaways
When building a react app from scratch, the process is very time-consuming. Especially styling the fine details of the app, I should have picked a UI framework instead of SASS to speed up the development time.
The app is still far away from being perfect. Until now, I just manual test everything and looking forward to learn writing unit testing. As the project size starts to grow towards the end, I did not realize the lack of documentation on my code and how unorganized it became. It will put a reminder to refactor my code in the future.
When hard stuck on a project, step away, take a good long break and come back to it fresh. That works 90% of the time.