As a beginner in web development, I recently completed a fun and educational project — a Recipe Explorer App. This project helped me practice HTML, CSS, JavaScript, and learn how to use JSON Server to handle data like a real API. In this blog post, I’ll walk through how I built it and what I learned in the process.
🧱 Project Overview
The main features of my Recipe Explorer App are:
Viewing a list of recipes with their ingredients and instructions.
Adding new recipes through a form.
All recipe data is stored and managed using JSON Server, which simulates a RESTful API and makes front-end development feel like it’s connected to a real back end.
🧩 Tools and Technologies Used
HTML/CSS – for structure and styling.
JavaScript – to handle logic and DOM manipulation.
JSON Server – to simulate a database and API.
VS Code – my development environment.
Git & GitHub – for version control and backup.
🔄 Displaying Recipes
I used the fetch() method to retrieve data from the JSON Server, and then displayed each recipe using dynamic DOM manipulation.
Here’s a basic example of the code:
javascript
Copy
Edit
fetch('http://localhost:3000/recipes')
.then(response => response.json())
.then(data => {
data.forEach(recipe => renderRecipe(recipe));
});
function renderRecipe(recipe) {
const recipeCard = document.createElement('div');
recipeCard.innerHTML =
<h3>${recipe.name}</h3>
<p><strong>Ingredients:</strong> ${recipe.ingredients}</p>
<p><strong>Instructions:</strong> ${recipe.instructions}</p>
document.querySelector('#recipe-list').appendChild(recipeCard);
}
This code gets the data from the server and calls a function to display each recipe on the page.
➕ Adding New Recipes
I created a form to allow users to add new recipes. When the form is submitted, it sends a POST request to JSON Server, which adds the recipe to the database and updates the UI.
Here’s how the add feature works:
javascript
Copy
Edit
form.addEventListener('submit', (e) => {
e.preventDefault();
const newRecipe = {
name: nameInput.value,
ingredients: ingredientsInput.value,
instructions: instructionsInput.value
};
fetch('http://localhost:3000/recipes', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(newRecipe)
})
.then(response => response.json())
.then(data => renderRecipe(data));
});
This allowed me to practice sending data to a server and updating the page without refreshing.
🤯 Lessons Learned
I became more confident using fetch() for GET and POST requests.
JSON Server is a great tool for simulating real APIs during development.
Building this app helped me understand the importance of separating logic into functions.
Small projects like this are perfect for learning how front-end and back-end parts connect.
📌 Final Thoughts
Creating this Recipe Explorer App helped me put everything I’ve been learning into practice. It showed me how front-end apps can interact with data, and gave me a taste of how full web apps are built.
In the future, I’d love to expand this project by adding edit functionality or search filters — but for now, I’m proud of what I’ve built.
If you’re a beginner like me, I highly recommend starting with a small project like this. You’ll learn a lot and have fun doing it!
🧠 Pro Tip
To start JSON Server and make it serve your data, use this command in your terminal:
bash
Copy
Edit
json-server --watch db.json
Make sure your db.json file contains your initial recipe data.
📚 References
MDN Web Docs: fetch()
JSON Server GitHub
Top comments (1)
This is extremely impressive for a first project, honestly. I remember the first time I wired up fetch and seeing it work was like magic for me