mpamurao.github.io
Per Scholas Bootcamp Projects
Project 1 - Minesweeper
Technologies: HTML, CSS, and JavaScript
Github Pages: https://mpamurao.github.io/Project1_Minesweeper/
How to Play
Click on a square to display its value of a number, bomb, or blank. If it’s a bomb, the game is over and the player lost. If it’s a number, the number indicates how many bombs border it. If it’s a blank, the board will reveal all the bordering blanks until a number is revealed.
Right-click on a square to show a flag. The initial number of flags correspond to the number of bombs that are on the board. Flagged squares do not reveal the value underneath the square when left-clicked. Right-click on a flagged square to unflag it.
Once the board reveals all the blanks and numbers, the game is over and the player won.
Unsolved problems
For the larger grids (Medium and Hard), it takes longer to load the game and could freeze the browser temporarily. This is probably due to inefficiencies in the code.
The more times the game is reset using the smiley icon, the longer it takes to load.
Mid-Mod Project 2 - Meal Search App
Technologies: Javascript, React, HTML, CSS & Material-UI, Edamam API
Github Pages: https://mpamurao.github.io/mid-mod-2_React_Food_App/
Food application: Dish It Out
This food app is called Dish It Out. Dish It Out allows users to search for a food ingredient, meal name, or cuisine type and receive corresponding results in a list. Each recipe can be clicked on and led to an external site that contains detailed info on how to make the dish. As a user interested in finding a new recipe with an easy to use layout, or who just wants to scroll through a lot of food pics, this is a nice simple site!
Background Approach
I wanted to reinforce my knowledge of querying an API. Since there were several food APIs available, and I love food myself, I decided to follow the food theme. I styled my site similarly to the Google Homepage and Pinterest lists as these formats look clean and easy to engage.
As the API has a limit of 10,000 calls/month, I copied over an initial data set into dummydata.js for testing purposes. The code can also do live queries instead of using the dummydata.
App.js contains a BrowserRouter and routes for a Homepage, a list of “recommended” Recipes, and Searched Recipes. The user starts at the Homepage which contains a Nav Bar that re-directs back to the Homepage and also to the recommended Recipes. The user can generate a list of dishes by either inputting a specified word or clickling the “Indecisive and Hungry” button to randomly generate a search. The Indecisive button references the recipeTypes.js file which contains an array of keywords the API uses to determine results.
RecipeSearch.jsx takes the input and sends a query to the Edamam API. After, the results are mapped out and Recipe.jsx populates the DOM with Grid items stylized using Material-UI.
RecipesList.jsx is similar to RecipeSearch where it sends queries to the API. This is a pre-defined list that retrieves results for Lunch, Dinner, Snack, and Teatime meals.
Header.jsx contains the page name, SearchBar and NavBar components. These components are sticky positioned to the top of the browser.
Problems and Potential Improvements
The app works as intended with no known bugs when running via the virtual DOM. While the API contains a lot of info about dishes such as nutrients, I focused on providing basic details. Currently, there is a set number of results that are populated, whereas the total count in the database can be much larger. I’d like to be able to add a “next” button to show the next list of items. I’d also like to use more Material-UI to better enhance the web design.
I need a better understanding of how to deploy a React App to Github Pages. The GH Page URL is currently the main domain name for this project instead of githubpages.io/Mid-Mod2 and I’m unsure how to fix it. I also had to change the gh-pages branch to view the project on GH Pages. Since I’m using BrowserRouter and call a reload in the SearchBar, I receive a 404 error. I could restructure my code so my search state is in the main components instead of SearchBar, but I would need to think about how to not make the same search code repetitive.
Wireframe:
