When I first approached this project. I came into it with a lot of confidence (overconfidence). I really enjoyed the previous JavaScript project and was assuming I would be able to write React as well as Javascript and be able to add more features and add more polish!
I was sorely mistaken!
- I made the same mistake as last time, spending way too long choosing an API and not planning ahead. The API I chose also was not as interesting as I hoped which meant I could not rely on just images to make it look interesting
- React requires more planning as it became very frustrating to import the correct files if you need to rewrite or reorganise the relationship between parent and child components.
I started out by creating my NavBar and adding a few routes/pages to ensure the Information Architecture was sorted first. Then I started to work on the page components and creating container components to house the logic.
It was quite time consuming designing out components so I made use of the Material UI and Bootstrap UI react components to speed up the development process but created my own custom layout components to house them such as the HomeContainer, PrimaryBanner and CardContainer components.
I had to remove a few features such as filtering, searching as I was having trouble making my web app look good and interesting. However relying on components definately sped up my work flow as well, as I reused the banners, gallery view and details panel but simply populated them with different data
Some difficulties I ran into were handling unsuccessfully handling objects that remained as promises, not being able to properly update the button state based on my database, difficulty with useEffect and trying to read arrays that were empty because of the renders.
Improvements that I made in my approach to coding:
- Creating simpler functions that perform a single action
- Commenting my code as I write and going back to make them clearer and easier to understand when I review my code.
- Writing less specific function and variable names
Need to get better at
- Planning out the development instead of rushing in. Especially when it comes with Presentation and Container components
- Handling multiple parameters when working with events
- Working with useEffect, it still feels a little too much like trial and error and just hoping it works
- Getting good with useState but still need more practice to handle complex states
- Creating more complex props to component
Overall I had a great time building the app! I can definately see the power of reusable components and props.
I have got a long way to go to get better however and need to spend more time working on tutorials as I definately took a lot of shortcuts and wrote a lot of hacks to get it to work.
