Giter Club home page Giter Club logo

blazorfluentuiwithedamanapi's Introduction

Playing with Blazor Fluent UI by using the Edaman and Youtube APIs

documentation

Portuguese

Educational Purpose

This project was developed as a way of learning and exploring the capabilities of Blazor Fluent UI. The main objective is to get to know and experiment its various components and standards. Additionally, the YouTube API was incorporated to broaden the scope of exploration, allowing for experimentation with integrating multimedia features into the application. The Edaman and YouTube APIs were used to obtain recipe data and multimedia content, respectively, to test the frontend and explore their capabilities.

Learning Objectives

  • Gain familiarity with Blazor Fluent UI components and their usage.
  • Understand how to integrate external APIs into Blazor applications.
  • Practice building responsive and user-friendly web interfaces.
  • Explore data visualization and presentation techniques.

Work in Progress

Please note that this project is currently a work in progress. While it provides basic functionality for recipe search and access to the Edaman and Youtube APIs, it is expected to evolve over time.

Future Enhancements

  • Additional Components: The project may incorporate new components and features to enhance usability and functionality.

  • Improved User Experience: Efforts will be made to enhance the user interface and overall user experience.

  • Bug Fixes and Optimization: Any reported bugs will be addressed, and code optimization will be performed for better performance.


Overview

BlazorFluentUI_FL is a web application that leverages multiple APIs to provide a comprehensive cooking and multimedia resources.

  1. Edaman API: This application utilizes the Edaman API for recipe search functionality and access to a comprehensive food database. It allows users to search, browse, and save their favorite recipes.

  2. YouTube API: The application also integrates the YouTube API for browsing any videos on YouTube. Additionally, it stores video content in a SQLite database for easy access.

Built with Blazor Fluent UI, the application offers a user-friendly interface for an enhanced culinary and multimedia experience.

Features

  • Recipe Search: Users can search for recipes based on keywords, ingredients, or dietary preferences.
  • Food Database: Access to a vast database of ingredients, nutritional information, and recipes.
  • User-friendly Interface: Intuitive design and navigation for a seamless user experience.
  • Responsive Design: The application is optimized for various screen sizes and devices.
  • Fast Responses: Users can select recipes from prior searches, thus avoiding trips to the Edaman API, allowing offline searches for quick access.
  • YouTube Video Search: Users can browse and watch any videos on YouTube.
  • Video Database Storage: Video URLs can be stored in a SQLite database, allowing users to keep track of videos that have caught their attention, are marked as favorites, or found useful.
  • Settings: Configure the application theme (light or dark).
  • Video Categories Management: Add, edit, delete, and search video categories.

Screenshots

Recipes


fluentUI_Recipes fluentUI_Recipes_Output fluentUI_Recipes_Favories fluentUI_Recipes_ViewInSite fluentUI_Recipes_CuisineType

Food Database


fluentUI_FoodDatabase

Youtube


FluentUI_Youtube FluentUI_Youtube_Search FluentUI_Youtube_Edit FluentUI_Youtube_Player

Settings (App themes)


fluentUI_Settings_Themes fluentUI_Settings_CategoriesManager fluentUI_Settings_CategoryEdit fluentUI_Settings_CategoryDelete fluentUI_Settings_CategoryDelete_InUse fluentUI_Settings_CategoriesSearch


Installation

To install the Edaman API with Fluent UI locally, follow these steps:

  1. Clone Repository: git clone https://github.com/fauxtix/BlazorFluentUI_FL

  2. Navigate to Directory: cd EdamanFluentApi

  3. Install Dependencies: dotnet restore

  4. Update appsettings.json: Include your Edaman APP_ID and API_KEY keys Include your Youtube keys (YouTubeApiKey, YouTubeApplicationName, ClientId and SecretClientId)

  5. Run Application: dotnet run

  6. Access Application: Open a web browser and go to http://localhost:<port>.

Usage

  1. Search for Recipes: Enter keywords, ingredients, or dietary preferences into the search bar and press enter to see relevant recipes. User choices for saving favorite recipe searches are stored in JSON files for easy access and retrieval.

  2. View Recipe Details: Click on the 'Preparation' button in the recipe card, and navigate to the 'source' site, to view detailed information including ingredients, instructions, and nutritional facts.

  3. Explore Food Database: Browse through the food database to discover new ingredients, recipes, and nutritional information.

  4. Explore Video Database: Browse through the database to discover a wide range of videos covering various topics of interest. Videos from YouTube can be accessed and their information stored in a SQLite database for future reference.

Technologies Used

  • Blazor Server
  • Blazor Fluent UI components
  • .NET Core 8

Contributors

Acknowledgments

Special thanks to the contributors and the community for their support and feedback.

Contributions

Contributions are welcome! If you have suggestions for new features or improvements, feel free to submit a pull request or open an issue on GitHub.

Disclaimer

This project is a work in progress and may undergo changes and updates without prior notice. It is being developed for educational purposes and may include experimental features and components. It does not serve any commercial or production purposes.

License

This project is licensed under the MIT License - see the MIT-LICENSE.TXT file for details.

blazorfluentuiwithedamanapi's People

Contributors

fauxtix avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.