kudah99 / finhub Goto Github PK

MedSearch

MedSearch is a user-friendly online platform designed to facilitate the seamless discovery of medical specialists and healthcare facilities. This platform employs advanced artificial intelligence to provide an efficient and personalized experience for users seeking healthcare professionals based on specific conditions or symptoms.


View Site · Report Bug · Request Feature

(back to top)

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

1. Clone the repo

   git clone https://github.com/kudah99/medsearch.git

2. Install dependencies

   pip install -r requirements.txt

3. Setup environment variables .env. Below is an example .env file

   DB_NAME=postgres
   DB_USER=user
   DB_PASSWORD=123
   DB_HOST=127.0.0.1
   DB_PORT=5432
   DB_ENGINE=postgresql
   SECRET_KEY=your-django-key
   DEBUG=True

(back to top)

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Kudakwashe Chris Chipangura - @kudachipangura

Project Link: https://github.com/kudah99/medsearch

(back to top)

• Free Hosting By Vercel
• Free Postgreql Database Hosting

(back to top)

To create a filterable list using Tailwind CSS and JavaScript with "chips" (tag-like filters), and assuming the data is being loaded from a Django backend, you'll follow these general steps:

1. Setup your Django backend to serve the data. This might be in the form of a REST API using Django REST Framework, or through server-rendered Django templates.

2. Create the HTML structure with Tailwind CSS for styling.

3. Write JavaScript to handle the filter logic based on selected chips.

Here's a step-by-step guide to achieve this:

You could use Django REST Framework to create an API that your frontend can query to get the data. Here’s a simple model and API setup:

# models.py
from django.db import models

class Item(models.Model):
    name = models.CharField(max_length=100)
    category = models.CharField(max_length=100)

# serializers.py
from rest_framework import serializers
from .models import Item

class ItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = Item
        fields = ['name', 'category']

# views.py
from rest_framework import viewsets
from .models import Item
from .serializers import ItemSerializer

class ItemViewSet(viewsets.ReadOnlyModelViewSet):
    queryset = Item.objects.all()
    serializer_class = ItemSerializer

# urls.py
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import ItemViewSet

router = DefaultRouter()
router.register(r'items', ItemViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

Let's create a simple page layout using Tailwind CSS:

I am recent completed my university studies where i undertook a degree in Mechatronics engineering. I also had acquired varous certifications in programming, AI/ML and devOps engineering to add my knowledge beyond the classroom. I have much interest in software engineering and am particalary more delving into artififial intelligence. I believe most system will incooperate/intergrated with AI , so i believe it essentiall to have knowdge of AI to become an effective software/system engineer. I am also very much interested in opensource i had contributed to some popular libraries of technologies that I use, and I have developed libraries, one of which is Flutter_ThingsSpeak, whose most of its functionality is from my final year project, which I decided to wrap into this library. I could say I am a big fan of open source, seek to grow in it, and am participating in some open source programs like All in Open Source. I am a hackathon enthusiast. I have won three hackathons, one international and two local. I love to participate in local tech conferences and meet-ups. I had also been attending national tech events and had the opportunity to meet government officials, influence certain policy changes, and interact with them about the accessibility of the internet in most remote parts of the country, which is something that I am passionate about. Last year, I was accepted into the AWS AI and ML Scholarship, which gives $2500 scholarships to underrepresented individuals in tech across the world. Further to this, I was also selected for an additional program offered to the top 500 students of the program.

Finalists will undergo rounds of interviews by the AU departments/organs 
and the best 16 will be confirmed as fellows. Selected fellows will be
 mandated to attend the Fellows Induction Workshop and a virtual pre-deployment 
training before traveling to Addis Ababa and to be deployed to the AU departments/organs.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <title>Filterable List</title>
</head>
<body>
    <div class="p-5">
        <div id="chips" class="flex flex-wrap gap-2">
            <!-- Chips will be dynamically inserted here -->
        </div>
        <ul id="itemList" class="mt-5">
            <!-- Items will be listed here -->
        </ul>
    </div>

    <script src="main.js"></script>
</body>
</html>

Create a main.js file to handle fetching data, rendering chips, and filtering the list:

document.addEventListener('DOMContentLoaded', function() {
    const apiUrl = '/api/items/';
    let items = [];
    let filters = new Set();

    const fetchItems = async () => {
        const response = await fetch(apiUrl);
        const data = await response.json();
        items = data;
        renderItems(items);
        renderChips();
    };

    const renderItems = (itemsToRender) => {
        const itemList = document.getElementById('itemList');
        itemList.innerHTML = '';
        itemsToRender.forEach(item => {
            itemList.innerHTML += `<li class="border p-2">${item.name}</li>`;
        });
    };

    const renderChips = () => {
        const chipContainer = document.getElementById('chips');
        const categories = [...new Set(items.map(item => item.category))];
        chipContainer.innerHTML = '';
        categories.forEach(category => {
            const chip = document.createElement('button');
            chip.textContent = category;
            chip.className = 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded';
            chip.onclick = () => toggleFilter(category);
            chipContainer.appendChild(chip);
        });
    };

    const toggleFilter = (category) => {
        if (filters.has(category)) {
            filters.delete(category);
        } else {
            filters.add(category);
        }
        filterItems();
    };

    const filterItems = () => {
        if (filters.size === 0) {
            renderItems(items);
        } else {
            const filteredItems = items.filter(item => filters.has(item.category));
            renderItems(filteredItems);
        }
    };

    fetchItems();
});

• JavaScript: This script fetches items from your Django API, dynamically creates filter chips for each category, and filters the displayed items based on selected chips.
• CSS: Tailwind is used for quick, utility-first styling.

Note: Ensure Tailwind CSS is included in your project, and you have set up CORS correctly if your frontend and backend are served from different origins. Adjust API URLs as necessary based on your actual setup.