DEV Community

Cover image for How to Build a Recipe App with Vanilla JavaScript

Posted on

How to Build a Recipe App with Vanilla JavaScript

In this video, I'll show you how to build a recipe app using API and JavaScript. We'll use a dark and light theme and responsive design so that your app looks great on any device.

If you're looking to learn how to build a web application using API, then this is the video for you! We'll show you everything you need to know to build a real world web application. This is a great beginner's guide to web development and working with API. so be sure to watch it!

Starter file

⏱️ Timestamps
0:00 - Demo
14:02 - File structure
15:16 - Project initial
35:10 - Home page - Header
47:10 - Light and dark mode
52:35 - Mobile nav
59:17 - Home page - Hero section
1:06:58 - Home page - Tab section
1:46:24 - Home page - Slider section
1:53:40 - Home page - Tag section
2:04:46 - Footer
2:08:01 - Setup API
2:15:19 - JavaScript - Tab section
2:40:34 - JavaScript - Slider section
2:51:17 - Snackbar
2:58:24 - Recipe page
4:25:18 - Recipe page - Rander recipe
4:40:48 - Detail page
2:37:26 - Detail page - Randar recipe detail
5:16:33 - Bookmark page
5:26:31 - Media queries

Top comments (8)

sabihasamha22 profile image
Sabiha Samha

OMG! this is 🔥

codewithsadee profile image


bkpecho profile image
Bryan King Pecho

Thank you for sharing this tutorial on building a recipe app with Vanilla JavaScript. It's a great resource for learning and I appreciate your effort in providing the timestamps for easy navigation!

codewithsadee profile image

Thanks 😊

dongdongzhang profile image
dongdongzhang • Edited

It‘s so rare to see someone build something through vanilla js.
great work

codewithsadee profile image


smith76432 profile image

Building a recipe app with Vanilla JavaScript involves several steps. Here's a general outline of the process:

Set Up the Project Structure:

Create a new project folder with an index.html file.
Create a CSS file for styling (e.g., style.css).
Create a JavaScript file for your app logic (e.g., app.js).
Design the User Interface:

Determine the layout and components needed for your recipe app.
Create the necessary HTML elements to display recipes, search functionality, and other relevant features.
Apply CSS styles to enhance the visual appearance of the app.
Fetch Recipe Data:

Identify a source for your recipe data, such as an API or a local JSON file.
Use JavaScript's Fetch API or XMLHttpRequest to retrieve recipe data here
Parse the JSON response and extract the relevant information.

shittu_olumide_ profile image
Shittu Olumide

This is really awesome.