sayakongit / sangnet

Sangnet swiftly connects compatible blood donors with recipients, prioritizing privacy and security. We simplify the process, enabling donors to help during emergencies and medical procedures, ultimately saving lives in our communities.

[](#contributors-)

🚀 Sangnet | Connecting blood, saving life

This repository contains a project that combines Django, Django REST Framework, React, and Vite to create a web application with a robust backend and a dynamic frontend.

Project Structure

The project is organized into two main folders:

• backend: Contains the Django application responsible for handling API requests and database interactions.
• frontend: Contains the React application built using Vite, providing a modern and efficient development experience for the frontend.

Backend (Django) 📦

The backend is built using Django and Django REST Framework, providing a RESTful API to communicate with the frontend. The key features of the backend include:

• API endpoints to manage various resources, such as users, data models, and more.
• Integration with a database (e.g., PostgreSQL, SQLite) to store and retrieve data.
• Authentication and authorization mechanisms to secure API endpoints.
• Custom views, serializers, and models to tailor the API to your project's needs.

Setting Up the Backend 🛠️

1. Navigate to the backend folder:

   cd backend

2. Setup the environment variables:

   Rename the .env.example to .env and update all the env variables.

   • EMAIL_HOST_USER is your gmail.
   • EMAIL_HOST_PASSWORD will be the App Password in your gmail. Refer this doc to create your app password.
   • DATABASE_URL is typically a external Postgres db URL hosted on cloud. You can create a free one on Render.
   • PS: If you don't want to setup a cloud db, you can still use a local db for development purpose. For that uncomment line 88-93 in core/settings.py and comment out line 95-97

3. Create a Python Virtual Environment (Optional, but recommended):

   Create and activate a virtual environment to isolate project dependencies.

   On macOS and Linux:

   python3 -m venv venv
   source venv/bin/activate
   

   On Windows:

   pip install virtualenv
   virtualenv venv
   ./venv/Scripts/Activate.ps1
   

4. Install the required Python packages:

   pip install -r requirements.txt

5. Run database migrations:

    python manage.py makemigrations
    python manage.py migrate

6. Start the Django development server:

    python manage.py runserver

7. Use http://localhost:8000 as the API base URL.

Frontend (React with Vite) ⚛️

The frontend is built using React and Vite, providing fast development and hot module replacement for efficient code changes. The frontend offers a user-friendly interface to interact with the API provided by the Django backend.

Setting Up the Frontend 🛠️

1. Navigate to the frontend folder:

   cd frontend

2. Install the required Node packages:

    npm install

3. Start the Vite development server:

    npm run dev

4. Navigate to http://localhost:5173 to view the frontend.

Postman API Public Workspace 📚

For detailed information about the available API endpoints and their usage, refer to the Post API Documentation.

Contributors

Sayak Saha 💻

Riddhick Dalal 💻

Shiwangi Kumari 🚇

Stefan Anevski 📖

Harith 💻

Credits 👏

• Django: https://www.djangoproject.com/
• Django REST Framework: https://www.django-rest-framework.org/
• React: https://reactjs.org/
• Vite: https://vitejs.dev/
• Material UI: https://mui.com/
• Material UI: https://mui.com/
• Formik: https://formik.org/

sangnet's Issues

Test Issue #1

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Dark mode support

Description

We are using Material UI for as design library with ReactJS in the frontend. Dark mode support is not yet added yet in the project. A button for users to switch between light and dark mode is all we want. Should follow all the standards from MUI and do the necessary CSS changes to maintain the projects current design standards.

Test issue

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[Frontend] Hard coded default map geo-locations

Describe the bug
The default long-lat of the map is hard coded.

To Reproduce
Steps to reproduce the behavior:

1. Go to Dashboard
2. See the map.
3. See error

Expected behavior
Remove hard coded values and get the values from the users system using geolocation API.

Screenshots

Improve the existing GitHub Actions

Improve the existing GitHub actions to add more tests such as version-check etc.

Unit test cases for backend

Description

For the backend, we need to write unit test cases for each existing modules with the maximum code coverage. These may be related to API test or functional test. The test cases would be both positive and negative ensuring a better end user experience and robust usage.

[Bug] Fix All Contributors Badge in README

Describe the bug
The all-contributors badge is breaking in the Readme file. Follow the expected behavior mentioned below.

To Reproduce
Steps to reproduce the behavior:

1. Go to README.md file in the repo

Expected behavior
The All-contributors badge should show up in the center below the Banner image.

Screenshots

Additional context
NA

[Backend] Donation Requests within custom radius

Donation Requests within custom radius

Description:

Pending donation requests should be within 3km radium by-default. There should be a dropdown from where users can increase and decrease the search results. For Requests with 'emergency' tag, the default radius should be 5km.

Don't bother about the front-end. It should be an API call, test it with Postman. After the backend is ready, we will add the dropdown in the UI too.

[Migration] SSR and Server Actions

Implement SSR and Server Actions

Description:

Currently The Next.js Branch uses regular React.js Like Client Side rendering with useState, useEffect hooks and authentication System using Local storage.

• Replace localStorage with Cookie based authentication
• Implement Server Side Rendering (SSR). Fetch the data from backend in server components, then pass it to client components through props.
• Implement Server actions on form submissions instead of regular API calls from client side.
• Implement proper loading state on server components and form submissions

[Frontend] Dark mode support

Dark mode support

Description:

Add a toggle button to toggle between light mode and dark mode in the UI. Add dark mode styles for the whole UI. Refer to MUI docs.

[Backend] Check if last donation date is within last 3 months

Check if last donation date is within last 3 months

Description:

Ideally a donor should not donate if they have already donated in last 2-3 months. So we will keep a check on our system. In this case, they must not be able to see any pending requests. Although, all other features should work.

This should be checked/updated from two ways:

1. While registering as a donor, we are taking donor's last donation date
2. After a successful donation from our platform

Improve the front-end code quality

The project being made in a hackathon, it includes a lot of hacky and not-recommended code in the front end side. Need to improve the code with utmost best practices keeping the UI/UX same.

Integrate Dependabot with the repo

Setup a dependabot to auto update the versions after every PR merge.

Test Bug Report

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[Frontend] All blood banks are appearing in Map

Describe the bug
The nearby blood banks are filtered in the left but all the blood banks are shown in map.

To Reproduce
Steps to reproduce the behavior:

1. Go to dashboard.
2. Click on Nearby Blood banks
3. Zoom out the map
4. See error

Expected behavior
Only nearby blood banks should appear in the map.

Screenshots

[Frontend] Put a marker/dot on Map for User's location

Put a marker/dot on Map for User's location

Description:

Currently there is no marker for the user's current geo location. Add a marker similarly it is done for donors and blood banks.

[Infra] Migrate from React to Next

Migrate from React to Next

Description:

The front end is made with React + Vite + Material UI. This is a great stack in my opinion. But the entire stuff was built during a hackathon so the code quality and structure is not even a bit standard. Most of the things are hacky in some ways. So it would be great help if the stack can be converted to NextJs (only Vanilla CSS and Tailwind can be used) keeping the look and feel of the current UI. Please everything with re-usable components and you may keep a better folder structure.

Bonus 🥳
The one who will complete the task, will receive a cool t-shirt from me personally.