innovateninjas / paws-frontend Goto Github PK

Design requirements

• Campaign Title: A clear and concise title that quickly conveys the purpose of the campaign.
• Campaign Description: Detailed information about the campaign, including its goals, the specific activities involved, and the impact it aims to achieve.
• Campaign Image: Visuals that represent the campaign, (optional field)
• Location: The specific location(s) where the campaign activities will take place.This could include addresses for physical locations or details for virtual participation. (address)
• Start Date and End Date: The duration of the campaign, including both the start and end dates.
• Time Commitment: Expected time commitment from volunteers, which could be specified in hours per week or total hours for the campaign duration.
• Age Restrictions: If there are any age restrictions for volunteers, specify the minimum age requirement.
• Contact Information: Details of a contact person within the NGO for volunteers to reach out to with questions or for more information. (probably an email field)
• Volunteer Benefits: Any benefits that volunteers might receive, such as community service hours, certificates, or practical experience.
• send that data to backend

check if the user logged in by validating csrf token stored in the application storage redirect to login page if not logged in

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.

Before starting any page check if theri are similar background pages avaiilable or not if yes use component method and reuse them

• upload image location page - @rishicds
• #148
• user profile page @GhoshAditi
• contact information page @anirbanmajumder0
• nav bar , make sure actiive statte is shown in both user and ngo side create two diff componenet if not possible to show active state in one component - @anirbanmajumder0
• donation pages - @debayudh07
• dashboard styling fetching on db updtation - @codewarnab
• push notification to ngo on new report arrival - @codewarnab
• stats page - @codewarnab
• popup component for sending sms - @codewarnab
• view reports page - @shreyashaw05
• ngo profile page - @shreyashaw05
• make a reusable button component that can be used in all pages - @shreyashaw05
• filterarion in dashboard on basis of recued , in progress , recieved - @shreyashaw05
• NGO campaign page - @shreyashaw05
• home page revamp - @shreyashaw05
• user campaign pages - @shreyashaw05
• animal details page - @shreyashaw05

Is your feature request related to a problem? Please describe.
This type of project mobile first because mostly people will report using mobiles.

Describe the solution you'd like
Having a mobile app for the project will contribute to the mission of the project.

Describe alternatives you've considered
You can create a PWA also but mobile app will be more recommandable.

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

Is your feature request related to a problem? Please describe.
The current favicon is green in color and does not look appropriate for the site

Describe the solution you'd like
Add a new favicon that looks appropriate and related to the cause.

move the function that can be reused in other place in utils/functions and move the function that is not reusable but too long to the parent folder directory by creating a separate file for funtions in the parent folder of that page/component

• @rishicds Cover the component folder stuff
• i will cover pages folder stuff @codewarnab

• this page shows the recent donations to them from users of our app

create a beautiful landing page for the web app
probably contains hero section , screenshots , about us section testimonial section etc
feel free to discuss your ideas below

the website lacks a footer / about us section will like to integrate it

please assign this issue to me under gssoc'24

As seen below the websites logo is stretched on desktop devices

I'm willing to work on this issue.

1st of all check the components folder if its already present if not you will surely find the necessary library in this repo

https://github.com/brillout/awesome-react-components

this is assigned to @Bsodoge

hard code a specific color and border , remove opacity OR make the opacity and color suite all page and (add a boder highlight on nonscrollable page)

We have transitioned to using Tailwind CSS in our project. However, there are still some files using the old module.css approach. This issue aims to remove the usage of module.css files and replace them with Tailwind CSS classes(prefered) or inline css to maintain consistency across the project.

Tasks

• Identify all files using module.css.
• Replace all module.css with tailwind css or inline css classes
• Test to ensure everything works as expected after the changes.

read Contribution.md before Contributing

1. Create the ui for the Ngo registration page

• copy paste the base ui from Current registration page ( make sure to remove the ngo toggle in registration page )
• change name place holder to Ngo name (ph and email should be taken as before )
• supported animals input it will be a multiselect input ( libraries are their you can use like this https://github.com/sanusart/react-dropdown-select this one is not much beautiful if you find beautiful use them )
• add a website input field (optional field )
• location should be automatically taken ( no input field on ui needed ) fetch the lat long from the browser location api and send that to backend
• show the address of the place from where the ngo is registering in the input field make sure its editable if location permission is given , else leave the input box blank
• take emergency number input from ngo ( its optional to enter ngo ngo should be able to login without entering emergency number also )
• probably you need to make smaller input boxes component for this or else have to make the big input box component customizable in size try it else contact @codewarnab
• contact anirban for necessary changes to backend till then build the ui and console.log it just
• make sure to use reactive buttons https://arifszn.github.io/reactive-button/
• after registration it should lead to the home page of the ngo which is current /dashboard make sure split out the code and conditionally importing modules( watch this https://youtu.be/JU6sl_yyZqs?si=W_SlgmxiLl_xWt0A )

Currently there is no option to change user/NGO details once created.
Add an edit option that will enable users to change their name, and number.
Create suitable UI for the same.

you have to make neccesary end points in the backend also if needed

Currently on view reports page showing reports by all user

• only reports done by be me should be shown on my view reports page and so on . make necessary changes in backend and frontend for this .
• Add skeleton loading for this , probably using concepts like react lazy loading
• add infinite scroll , more cards when user scroll downs dont fetch all the cards/reports at once it will make the process much slower
• make the reports cards beautiful probably take inspiration from dashboard cards .
• make sure the recent reports comes first for this while submitting the report a date field also need to be send to backend

currently all the pages are mobile friendly make them desktop frienldy too , before starting working on any page discuss below get assigned than start working on the page

if you can make atleast one page responsive your PR will be merged

Pages to be Made Responsive

• #262
• #271
• #261
• #283
• campaign form page
• #302
• #260
• #282
• #269
• #284
• #285
• #294
• #248
• #295
• #280
• #279
• #272
• #273

Comment below which page you want to make responsive each page will be treated as a separate issue
Before contributing read Contribution.md

• Add function of adding a profile photo . proably this will work like this take the photo from user upload it in the cloudinary send the link to backened for persistence ,
• add option of removing photo also
• show the level of the user and collected badges which user earned for reporting (fetch them from backend)
• make the showcasing of the details beautiful take inspiration from similar apps

unique stuff

• create volunteer campaing applying system in user side design is available in excalidraw

• make the ui more beautiful
• make the cards stylish sleek morden, probably dont show all texts from outside add ...more or on click open modal of the card
• #147
  ( if @GhoshAditi need help adding this feature contact me or rishi )

in ngo Dashboard when their is no report in the selected catagory show a message that their is no report in that catagory

Example add a message no report is in progress in the middle of the page similarly for other catagories also

Please assign it to me as I'm a GSSOC'24 contributor @codewarnab

• add one option for donating to us
• add another option for donating to ngos it should show all listed ngos on our platform ( no need of showing nearby ngo )
• make the donation functional using strpe
• if possible give user badges on succesful payment

intregating the aiml stuff in report system changing the ui and fixing other things

would liek to make the UI more appealing and interactive
this looks very blank and basic will make it professional

please assign this to me under gssoc'24

Is your feature request related to a problem? Please describe.
The UI of the NGO register page has Poor layout form and a bad user Experience

Describe the solution you'd like
I would like to enhance the layout and user experience of the NGO register page by implementing a more intuitive design and improving its overall look and feel

Please Assign this issue to me under GSSoc'24 so that i can work on it

use react dev tool extension might help

• #177
• #175
• in view reports page when user is not logged show your are not logged in instead of loading animation

Currently, during registration, we are collecting the emergency contact number, but we haven't utilized it anywhere. We need to add a feature where users can view the emergency contact number of the nearest NGO. This emergency contact number will be fetched using the same endpoint used in the popup that appears during the reporting of an animal at the image location page.

Implementation Details

Frontend (React)

• Add a section to display the emergency contact number of the nearest NGO.
• Fetch the emergency contact number using the same endpoint used in the popup that appears during the reporting of an animal at the image location page.
• Implement the necessary frontend logic to display the emergency contact number.

Additional Notes

• Project Links:
  • Frontend

• notify users when their reports get resolved
• notify ngo when new reports arrived

Currently, the repository lacks a Code of Conduct file, which is an essential component for fostering a healthy and inclusive open-source community. A Code of Conduct serves as a guideline for expected behaviour, ensuring that contributors and participants feel safe, respected, and valued within our community space.

Please assign this issue to me.

when image is being loaded size its showing like probably giving some min height will fix it

Required stuff

• Number of Reports Received: Show the total number of reports received over a specific time period. This can help NGOs understand the volume of animal rescue needs in their area.
• Geographic Distribution: Map the location of reported cases and rescues to identify hotspots and allocate resources effectively.
• Donation Metrics: Display donation amounts, frequency, ( top donors)

Currently, on both NGO and USER sides, there is no option to upload the profile picture. We need to add the option to upload a photo in place of the profile icon on the profile page.

Solution:

Frontend (React):

1. Profile Page:
   • Replace the profile icon with an option to upload a photo.
   • Update the profile page to include the feature to upload a photo.

Backend (Django):

1. API Endpoints:
   • Create necessary API endpoints to handle profile picture upload.
   • Implement the necessary backend logic to handle profile picture upload.

Implementation Details:

Frontend (React):

1. Profile Page:
   • Locate the profile icon.
   • Replace the profile icon with an upload photo button.
   • Implement the functionality to upload a photo.
   • Display the uploaded photo in place of the profile icon.

Backend (Django):

1. API Endpoints:
   • Implement API endpoints to handle photo uploads.
   • Create an endpoint to receive the uploaded photo.
   • Implement logic to handle photo upload and storage.

Steps:

Frontend (React):

1. Profile Page:
   • Locate the profile icon component.
   • Replace it with an upload photo button.( Google similar component , discuss before implementing it )
   • Implement the functionality to upload a photo.
   • Display the uploaded photo in place of the profile icon.

Backend (Django):

1. API Endpoints:
   • Create an API endpoint to handle photo uploads.
   • Create a Django model for the user profile to store the uploaded photos.
   • Implement the logic to handle photo upload and storage.

Additional Notes:

• Project Links:
  • Frontend
  • Backend

@rishicds we can add a blog kind of cards gallery that can show the instances of pets being reported and getting the required help
will generate a trust and also add as a new feature

please assign me this issues under gssoc'24

add a good img as the centerpiece of the landing page and adjust all styles according.