This Website Portfolio showcase project is made by one of the students of Learn Computer Academy.

Hey dev.to community! 👋

I want to share a recent project I built that combines my two passions: coding and Bengali cuisine. As a developer who loves to cook, I've often struggled to find authentic Bengali recipes online that were both accessible and comprehensive.

The Problem I Was Solving

When looking for Bengali recipes, I'd typically find:

  • Overly simplified versions missing key techniques
  • Sites with poor UX making it hard to find specific dishes
  • No ability to filter by ingredients or categories

Sound familiar? If you're a foodie-developer like me, you probably understand the frustration!

Enter: Bengali Food Directory

So I decided to build my own solution: Bengali Food Directory - a searchable, filterable web app for authentic Bengali recipes!

Tech Stack: Keeping It Simple

I deliberately chose to build this with vanilla technologies:

  • HTML5
  • CSS3
  • JavaScript (no frameworks!)
  • JSON for the data layer

Why vanilla? I wanted to demonstrate that you don't always need complex frameworks to build something useful and functional. Plus, it keeps the app lightning-fast and accessible even on slower connections.

Key Technical Features

1. Dynamic Content Loading

The app loads recipe data from a JSON file and generates the UI dynamically. This makes it easy to add new recipes without touching the core code.

async function fetchRecipes() {
  try {
    const response = await fetch('recipes.json');
    if (!response.ok) {
      throw new Error('Failed to fetch recipes');
    }
    allRecipes = await response.json();
    filteredRecipes = [...allRecipes];

    initializeApp();
  } catch (error) {
    console.error('Error fetching recipes:', error);
    // Error handling
  }
}

2. Advanced Filtering System

One of the more complex parts was building a multi-tag filtering system that allows users to:

  • Filter by multiple categories simultaneously
  • Search by ingredients or recipe names
  • Sort recipes by different criteria 
function filterRecipes() {
  const searchTerm = searchInput.value.trim().toLowerCase();
  const selectedTags = Array.from(activeFilters);
  const sortBy = sortSelect.value;

  filteredRecipes = [...allRecipes];

  // Filter by search term
  if (searchTerm) {
    filteredRecipes = filteredRecipes.filter(recipe => {
      return (
        recipe.title.toLowerCase().includes(searchTerm) ||
        (recipe.tag_names && recipe.tag_names.some(tag => 
          tag.toLowerCase().includes(searchTerm))) ||
        (recipe.ingredients && recipe.ingredients.some(ingredient => 
          ingredient.toLowerCase().includes(searchTerm)))
      );
    });
  }

  // More filtering logic...
}

3. Responsive Design Pattern

The app uses a fluid layout that adapts to any screen size, using CSS Grid for recipe cards and Flexbox for UI components:

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .recipes-grid {
    grid-template-columns: 1fr;
  }
}

4. Image Loading Optimization

To improve perceived performance, I implemented a skeleton loading state for images:

function setupImageLoading() {
  const allImages = document.querySelectorAll('.recipe-image img');

  allImages.forEach(img => {
    const parent = img.parentElement;
    if (!parent.querySelector('.img-skeleton')) {
      const skeleton = document.createElement('div');
      skeleton.className = 'img-skeleton skeleton';
      parent.appendChild(skeleton);
    }

    img.onload = function() {
      parent.classList.add('img-loaded');
    };

    if (img.complete) {
      parent.classList.add('img-loaded');
    }
  });
}

Development Challenges

The biggest challenge was organizing Bengali cuisine's complex taxonomy. Many dishes are categorized by:

  • Season (summer, winter, monsoon)
  • Occasion (everyday, special, religious)
  • Ingredient type (fish, vegetarian)
  • Cooking method (fried, steamed)

I solved this by implementing a tag-based system that allows multiple categories per recipe, making discovery more intuitive.

Lessons Learned

  1. JSON Structure Matters - Designing a flexible yet consistent data structure early saved tons of headaches later

  2. Progressive Enhancement - Starting with basic functionality and adding features incrementally helped keep the codebase clean

  3. Vanilla JS Is Powerful - Modern JavaScript has excellent native capabilities that often don't require frameworks

  4. Loading States Are Essential - Adding skeleton loaders dramatically improved perceived performance

What's Next?

I'm planning several enhancements:

  • Adding a PWA wrapper for offline functionality
  • Implementing local storage to save favorite recipes
  • Creating a simple contribution form for community recipes
  • Adding a print-friendly view for recipes

Try It Out!

Check out the Bengali Food Directory and let me know what you think!

I'd love to hear your feedback, suggestions, or questions about the implementation. Have you built something similar? What challenges did you face?

Happy coding (and cooking)! 🍲💻