DEV Community: martinpeak

Making a Website Application (Belafonte Food Hub) using the React Library

martinpeak — Sun, 31 Jul 2022 20:59:39 +0000

Belafonte Food Hub Using React

Author : Martin Chege 26th July 2022

Using a JSON server I came up with a list of meals that are available on a website: Belafonte Food Hub website that offers users a variety of meals where one can scroll and learn how to cook the meal and add their own meal in the website.

Getting:
1.List of meals/dish.
2.Name of the meal.
3.Category: such as Soup or side dish.
4.Origin of the meal.
5.Add your meal

SCREENSHOTS

Getting Files

Fork the repo
Create a new branch in your terminal (git checkout -b improve-feature)
Install the prerequisites.
Make appropriate changes in file(s)
Run the server to see the changes
Add the changes and commit them (git commit -am "Improve App")
Push to the branch (git push origin improve-app)
Create a Pull request
Open the folder location on terminal and use the following command to run app:

How To Run It
start server and npm start

Technologies Used

HTML
CSS
JavaScript
React Library

My First Blog

martinpeak — Sun, 26 Jun 2022 20:42:43 +0000

My First Blog

Making a Website Application (Belafonte Food Hub) using a public API

martinpeak — Sun, 26 Jun 2022 19:49:51 +0000

When learning Javascript, using a FETCH API to come-up with a website is one of the milestones that you could achieve as a weekend task.You get to experience different types of API and a variety to choose from.
Below are a few sites that have API feel free to go through as you follow along:

https://github.com/public-apis/public-apis

Things you need before starting:

A Design of the website: Figma will give you an idea: https://www.figma.com/login
A public API

Using a fetch API ("https://www.themealdb.com/api/json/v1/1/search.php?s=") to get a list of meals I came up with Belafonte Food Hub website that offers users a variety of meals and using a button one can watch how to prepare the meals, like or dislike based on their preference and Submit a review at the button of the page.
Getting:
1.List of meals/dish.
2.Name of the meal.
3.Category: such as Soup or side dish.
4.Origin of the meal.
5.Youtube link to learn how to prepare the meal with the aid of a video.

SCREENSHOTS

Repo link: https://github.com/Martinpouh/Belafonte-Food-Hub