See project deployed on Netlify here: https://reactshakennotstirred.netlify.app/
This is the second project after 2 instructional weeks (7 Mar - 18 Mar) on how to use React amd 1 project development week (21 Mar - 25 Mar) at General Assembly's Software Engineering Immersive programme (GA-SEI).
- The app essentially uses
React's basic create-react-app. Everything else was done withJS&CSS - Used
react-router-dom v6for the page navigation - Used
axiosto retrieve API requests
My MVP was to deliver a cocktail recipe search app. For example, if a user would like to look for how to make "Gin and Tonic", the app should be able to show what are the ingredients necessary (gin, tonic, optional: lime) and instructions (pour all into glass).
-
As there was a need to pass multiple information and further display it in a modal, the react app got complicated very quickly
(which I have yet organise them...)- Virtual DOM looks kind of like this:
-
React hooks that are "not-important-to-syllabus" functions such as
useReducer&useContextin combination was actually quite useful and simplified problems of passing information from one child node. The concept of propping information lifting states still key to React and is used.- Creating a "global" function since multiple things need to be done inside a modal. Storing the information in a "global" state was also pretty useful, it acted like a virutal store room, which was great!
-
Realised that Object destructruing was a key concept behind React & JS
-
Organise the foldersdone 27 mar -
Create the modal for Discover drinks. The cocktail API doesnt actually return the full drink information when searching by ingredients, but does have the drink ID.
- need to find a way to link them by ID
-
Refactor code - especially the modals
-
Material UI - look into improving the look & feel so it looks like an actual app