React scripts found in package.json:
- npm run start -- start script
- npm run build --build deploy
more info:
- Master-copy = non experimental build
- gh-pages build folder works with images loading properly if used outside of github
REBUILD WILD TIGER THAI WEBSITE - http://www.wildtigerwa.net/index.html
Wild Tiger Thai is a well established restaurant and bar in the heart of Vancouver, Washington (US). The restaurant is gorgeous, but the website does not reflect the quality of the dine-in experience, or the tasty foods. Engineers, you are tasked with reconstructing this web site into a beautiful and responsive web application! Feel free to work as a group or to take on this task solo. I will explain how the winner will be selected as we near the end date, but please understand, 2 individuals have the opportunity to win big this time around. The individual who is voted by the community as the winner may win the $250 reward, but the owner of Wild Tiger Thai may grant someone else a much bigger reward and a potential purchase of your source code!
My version of the rebuild Netlify link
For me the rewards don't matter since this is my first React.js project outside of a tutorial and my first time using Material-ui. It was fun in the beginning, I'm so thankful the MUI-devs created good docs, I basically had to figure things out. Therefore, I did use certain Material-ui components differently then their intended format. For example, I initially wanted to have a carousel of cards with the menu items overlayed for mobile like Outback Steakhouse(chalk font is $26). I'm 300% confindent I could implement it using MUI. However, due to a lack of images and I not being familiar & unable to identify items on the menu, I instead stripped the MUI-card component down and used the avatar={} to display the price of items. Unfortunately, I also had a bootcamp prep and other things going on so I didn't get around to completing the project with the initial vision I had (pen & paper sketch) despite the extension. Once, I have free time again, I most likey will convert this using React Hooks since I want to see if I understood Academind's Hooks Tutorial.
I need to start documenting my custom components in the ReadMe, and breaking out the components into smaller fragments even if I am using a third party lib. I am learning to use github markdown atm/testing documentation. I didn't see that much improvements with React.Loader || React.lazy/Suspense; Page loads too fast + small scale project so I stripped them out. 98% performance. Also, I may need to learn Photoshop, so I can create photo resizes. For example, I didn't add more images to the destop version in the banner(single images) because I only had one size. I did try squoosh but the quality loss from compression was terrible, but that was because the original images like the beer bottle was not high quality to begin with & and I wanted to keep the rebuild very close to the original design.