mriiad / warid-initiative

A blood donation application for "Warid Initiative" moroccan association

Warid Initiative Blood Donation Application

The Warid Initiative Blood Donation Application is a project aimed at facilitating blood donation activities for the Warid Initiative association based in Morocco. This application streamlines the process of blood donation, making it easier for donors to contribute and for the association to manage donations.

Getting Started

Prerequisites

• Node.js and npm installed
• MongoDB account

Installation and Setup

Database

• Go to https://www.mongodb.com/ and create an account if you don't have one
• Create a cluster with the name: "warid"
• Go to "Database Access" tab and "Add new database user" (button in top right) with the "Read and write to any database" access
• Enter a custom password or generate one automatically
• Go back to the "Database" tab and then click "Connect"
• Choose the desired connection and copy the connection string
• Replace the in the string the one already submitted when creating the user
• Connect to the database

Node server

• Go to "warid-app\config.json" and replace the password in the dbConfig with the same one used to connect to the database
• Go to the app's root "warid-app"
• Run npm install
• Run npm start
• If everything above was done as mentioned, you must see the following message in the logs: "Connected successfully to MongoDB server"

API Testing

In order to the the routes you can already use POSTMAN to make API calls. API automated tests will be created later, but as of now, our API can be tests using a REST caller.

Here are some functionalities to test (please replace the port by the one mentioned in the config.json, by default it's 3000):

• Signup: URL: http://localhost:/api/auth/signup PAYLOAD:

{
    "username": "username",
    "email": "[email protected]",
    "password": "password",
    "phoneNumber": "0000000000",
}

Contributing

We welcome contributions to improve and enhance the application. Please feel free to open issues for bugs, enhancements, or feature requests. Stay tuned for issues created by the maintainers for specific tasks and improvements.

Note

Ensure that config.json is ignored in your Git repository to protect sensitive information. Use the following commands as needed:

To ignore changes: git update-index --assume-unchanged ./config.json To track changes: git update-index --no-assume-unchanged ./config.json

Contact

For any inquiries or issues, please open an issue on the GitHub repository.

Enjoy contributing to the Warid Initiative Blood Donation Application!

Please make sure to replace in the API call example with the actual port number specified in your config.json file. Additionally, ensure that all the information is accurate and relevant to your project.

Enjoy!

warid-initiative's Issues

Use error handling mechanism in all components based on `useTypedMutation` custom hook

Handle `/events/${reference}?participate` route

• check if the user is allowed to participate in the event
• if so, display all the event's information (+ the lastDonationDate) in a CardComponent and add a confirmation button
• otherwise, display a message to tell the user that he isn't allowed to participate
• add checks on accessing the /confirmation path directly via URL

Improve the donation's logic

[Back] - Implement User Deletion Endpoint

Develop a backend endpoint that allows the admin to delete a user by username. This functionality enhances the admin's ability to manage users directly from the user list in the admin page.

Details:

• Create a new API endpoint /deleteUser that handles DELETE requests. The endpoint should take the username as a parameter.
• Implement logic in the endpoint to find and delete the user from the MongoDB database using the username as the key. MongoDB's findOneAndDelete function can be utilized to efficiently accomplish this task.
• Only admin users should have the capability to delete users (use isAdmin check)
• Provide appropriate responses based on the outcome of the delete operation:
  • If the delete operation is successful, return a success message along with a 200 OK HTTP status code.
  • If the user to be deleted is not found, return a message indicating that the user does not exist along with a 404 Not Found HTTP status code.
• Handle any server errors by using ApiError (see existing examples)

[Server] - Mark user as donor - admin only

Add new route: /api/donation/mark-as-donor

Add user donation's data to the Donation collection with the sysdate
The same way as it's done when calling: /api/donation

[Server/Client] - Implement Blood Group Pre-selection and Disable Editing in DonationComponent

When users access the DonationComponent to register for a donation, the blood group field should be pre-populated and disabled if it has already been set in the user's profile. This feature is essential since the blood group might have been chosen during profile completion, and it's important to maintain consistency in user data.

1. Pre-population of Blood Group: If the user's blood group is already specified in their profile (accessible via donation.user.profile.bloodGroup), this value should automatically populate the relevant field in the DonationComponent.
2. Disabling the Blood Group Field: If the blood group is pre-populated, the corresponding menu or selection field in the DonationComponent should be disabled to prevent the user from changing this value. This is to ensure data integrity and consistency.

[Front] - Display users list - admin only

TO BE DONE AFTER: #74

Add New 'Display All Users' Button in Admin Page

• Objective: The purpose of this issue is to implement a new feature in the admin page of our React application, which will allow the admin to view a list of all users without applying any filters.

• Details:

1. Add a new button labeled 'Display All Users' on the admin page.
2. Upon clicking this button, send a request to the Node.js backend to fetch all user data.
3. Display the fetched user data in a new page "/users".
4. Ensure that the design of the button and user list is consistent with the existing UI/UX of the admin page.

[Back] - Display users list - admin only

• Objective: The goal of this issue is to develop a secure backend endpoint in our Node.js application that allows the admin to retrieve a list of all users without any filters.

• Details:

1. Create a new API endpoint to handle requests for fetching all user data.
2. The endpoint should retrieve user data from the database without applying any filters.
3. Ensure that this endpoint is secure and can only be accessed by admin users.

Add Cypress E2E Tests

• Set up Cypress.
• Create a suite of E2E tests that cover the critical user flows.

Add donation page

• Get the user's most recent donation and initially set the last donation date to his previously set one (or reelDonationDate

[Client] - Add Contact Us Page

We need to add a "Contact Us" page to our website to allow visitors to get in touch with us. The page should include a contact form that dynamically adjusts based on the user's authentication status.

For Authenticated Users:

• Call the getProfile query to fetch the user's profile.
• If the firstname and lastname are available in the profile, do not display these fields in the form.
• Do not display email and phone number fields as these are assumed to be set in the user's profile.
• Display only the message field for input.

For Unauthenticated Users:

• Display all fields: firstname, lastname, email, phone number, and message.

[Server/Client] - Configure dependabot

Implement Route and UI Logic for Pre-populating `UserProfileForm` with Existing Profile Data

The UserProfileForm allows users to update their profile information, including firstname, lastname, birthdate, gender, and bloodGroup. Currently, even if users have previously set some of their profile data, the form does not pre-populate with this data upon subsequent logins. The requirement is to fetch existing profile data from the MongoDB Profile collection and initialize the UserProfileForm fields with this data, while keeping non-set data fields empty or at their current default values.

• Backend:

  • Create a new API endpoint (e.g., GET /api/user/profile) that retrieves the authenticated user's profile data from the Profile collection.
  • Ensure that the endpoint is secure and only returns data for the authenticated user.

• Frontend:

  • In the UserProfileForm, use useEffect to call the newly created backend endpoint when the component loads.
  • Use the response from the backend to initialize the form fields in UserProfileForm.
  • Ensure that the form allows submission even if not all fields are filled, as some profile fields are not mandatory.

Remove git tracking index from `config.json` and `package-lock.json` files

[Front] - Correctly handle retries on token refresh

Implement Uploaded Image Size Limit in Event Creation

• Integrate a file size limit within the existing multer configuration in the event creation route.
• Modify the route to handle errors related to file size, using ApiError for consistent error responses.
• Ensure that the application handles these errors gracefully and informs users when their upload exceeds the size limit.

Add new form to create Event

Update Node.js version from 16.14.2 to latest

Setting up react-query in order to optimize data fetching

[Client] - Create Landing Page

We need to create a landing page for the Warid Initiative Blood Donation Application. This page will be the first point of interaction for users with our application. It should provide essential information about the application and the Warid Initiative association.

Objectives

• The landing page should be accessible at the /home route.
• After logging in, users should be redirected to the landing page.
• Clicking the application logo from anywhere within the app should redirect users back to the landing page.

[Server] - Implement Request Validation for API Endpoints

using express-validator, here's an example of payload validation:

donationRouter.post(
  '/api/donation',
  isAuth,
  [
    body('bloodGroup').not().isEmpty().withMessage('Blood group is required'),
    body('lastDonationDate').isISO8601().withMessage('Invalid date'),
    body('donationType').not().isEmpty().withMessage('Donation type is required'),
  ],
  (req, res, next) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      // this is a quick implementation but the real one must use ApiError to specify the errorKeys
      return res.status(400).json({ errors: errors.array() });
    }
    
    // If validation passes, call the donate controller function
    donate(req, res, next);
  }
);

Create dedicated mobile event's style

Fix Token Synchronization Issue Post Logout/Login

The old authentication token is used in Axios requests after the user logs out and logs in again, leading to incorrect user identification on the server.

• Steps to Reproduce:

  • User logs in to the application.
  • The user's authentication token is stored in localStorage, and Axios requests are configured to use this token.
  • User logs out, and the authentication token is cleared from localStorage.
  • User logs in again, receiving a new authentication token.
  • Subsequent Axios requests do not use the new token but continue with the old one, causing inconsistency in user identification on the server.
  • Expected Behavior:
  • After a user logs out and then logs in again, the new authentication token should be used for all subsequent Axios requests. This ensures that the server correctly identifies the user based on the latest token.

Optimize style

• Use styled-components for all containers
• Use makeStyles from MUI for the rest of style
• Refactor style & export the common ones

[Server] - Contact Us Form Submission

Implement a backend route to handle submissions from the "Contact Us" page. The route should validate and process the form data, and send an email to the "warid" team with the information provided by the user.

• Create a new route (e.g., POST /api/contactus) to handle form submissions.
• Validate the incoming data to ensure all required fields are present and valid.
• For authenticated users, fetch additional details (if needed) from the user's profile using the getProfile query.
• Format the received information into a structured email.
• Send the email to the "warid" team's designated email address. Ensure that the email includes:
  • User's firstname and lastname (if the user is unauthenticated or if these fields are not in the profile).
  • User's email and phone number (only for unauthenticated users).
  • The message provided by the user.

Handle errors to send response with more details

example:

{
    "errorMessage": "You're already participating in another future event: WEVENT20240202",
    "details": {
        "title": "Event's title",
        "reference": "WEVENT20240202",
        "date": "2024-02-02T00:00:00.000Z"
    },
    "errorKeys": []
}

with the StatusCode = 403

this JSON displays the errorMessage and the details as an object

errorKeys is an array containing all keys generally extracted from the req.body to mention those causing the error, for example:
"errorKeys": ["reference", "username", "email"]
if the errorKeys array is empty, this means the error is generic

[Client] - Add Storybook

Add a page to show more Event's detail

On the event's card click the user must be redirected to a new page: /events/{eventId}

This page must show:

• Title
• Subtitle
• Image (large size)
• Description
• Interested button
• Delete button for Admin
• Edit button for Admin

[Front] - Implement Search Functionality on Admin Page

Enhance the admin page with a search bar that allows admins to search for users by username. Manage the display of search results in a user-friendly manner, ensuring a seamless integration with the existing user list.

Details:

• Add a search bar component to the admin page, specifically designed for username searches. This component should be visually integrated with the current /users page.
• Implement the search interaction where the admin can enter a username and submit the search. This interaction should trigger a request to the new /searchUsers endpoint.
• Display search results in a manner that distinguishes them from the paginated list of users. Given the uniqueness of usernames, the search will either return a single user or no result. Consider the following UI approach:
  • Replace the list of users with the search result, providing a clear option to return to the full list of users (e.g. adding a 'X' in the search bar)

[Server] - Implement Winston Logging for Backend Services

As our backend services are growing, it's becoming increasingly important to have a robust logging system in place to track errors, debug issues, and monitor the system's health. After evaluating different logging libraries, we've decided to use Winston due to its flexibility and wide community support.

Tasks:

• - Set up a new logger.js file in the utils or config directory to hold the Winston logger configuration.
• - Configure Winston to log errors to an error.log file and all logs to a combined.log file.
• - In development environments, Winston should also log to the console for easier debugging.
• - Replace all console.log and console.error statements in the backend files with the new Winston logger.
• - Ensure that logging statements include enough context to be useful, such as the error message, any relevant variable values, and the part of the code where the log is being generated.

Acceptance Criteria:

• - All backend services use the Winston logger for logging.
• - Logs are written to the specified files and, in development environments, the console.
• - Logs provide useful and clear information that aids in debugging and monitoring.
• - Resources:

Winston Documentation

Translate all the UI to arabic

POC: Replace Email Verification with WhatsApp Message Verification

We propose to enhance user signup verification by integrating WhatsApp message verification, replacing the current email verification system. This approach will involve sending a secure, automated message directly to the user's registered phone number upon account creation. The user will confirm their account by responding to the WhatsApp message. This method aims to streamline the verification process, offering a more accessible and immediate confirmation method, while ensuring the phone number's validity. Feedback on this proposed change is welcome.

Solution:

• Using whatsapp-web.js to automate WhatsApp interactions.
• Sending a personalized message to the user's WhatsApp number after signup.
• Awaiting user confirmation to verify the phone number.
• Once it's done, the admin must change isActive flag to true for the new user.

Create mobile version's navbar

Create a Custom 404 Page

• Create a user-friendly and visually consistent 404 page.
• Ensure the 404 page matches the application's existing color scheme and styling.
• Provide a navigation option for users to return to the home page.

[Server/client] - Configure Unified Development Workflow for Frontend and Backend Integration

This issue tracks the implementation and configuration of a unified development workflow to seamlessly integrate our React frontend with the Node.js backend. The goal is to streamline the development process, ensuring efficient communication between the frontend and backend during development.

1. Setting Up Proxy in React App (package.json):

• Configure the proxy setting in the React application's package.json file. This will forward all API requests made from the frontend to the backend server during development.
• Ensure the proxy points to the correct backend port (e.g., http://localhost:5000 if the backend is running on port 5000).

2. Updating Backend Server Configuration (app.js):

• Modify app.js in the Node.js backend to serve the static files from the React app's build directory in production.
• Implement a catch-all route to direct all non-API requests to the React frontend, ensuring that the SPA routing works correctly.

3. Remove Hardcoded Backend URLs from Frontend Requests:

• Update Axios calls in the frontend to use relative URLs instead of hardcoded backend URLs. This leverages the proxy setup for API requests.

[Client] - Configure translation using i18next library

Improve cards' style for EventsComponent

[Server/Client] - Implement Frontend Page for User Profile Completion and Backend Verification Route

• Backend:

1. Create a new route (/api/user/check-profile) to verify user's profile completeness.
2. This route should return a flag indicating whether the user needs to complete their profile.

• Frontend:

1. Design and implement a new page for profile completion.
2. The page should include a form for firstname, lastname, birthdate, and gender.
3. Implement client-side logic to redirect users to this page or /home based on the response from the new backend route.
4. Ensure the page follows the existing style guide and form design of the application.
5. Properly handle and display any errors or success messages.

[Server] - Implement Profile Model and Link to User Model for Extended User Information

• Create a Profile schema in Mongoose with fields for firstname, lastname, birthdate, and gender.
• Update the User schema to reference the Profile model.
• Refactor the updateUserInfo method to:
  • Check for an existing profile linked to the user.
  • Update the profile if it exists, or create a new one if it doesn't.
  • Properly handle cases where the user is not found or other errors occur.

[Back] - Implement a New Search Endpoint

Develop a new endpoint that allows the admin (isAdmin to be used) to search for users by username. This endpoint should return the user matching the username or indicate if no user is found.

Details:

• Create a new API endpoint /searchUsers to handle search requests for users by username. This endpoint should only accept requests with a query parameter for the username: /searchUsers?username=XXX.
• Update the service to query the User model for a single document matching the username. Since usernames are unique, use MongoDB's findOne method for efficiency.
• Ensure the endpoint is secure and can only be accessed by authenticated admin users, maintaining the application's security standards.
• The response should include the user's details if a match is found or an appropriate message indicating no user was found.
• Include error handling by using ApiError.

Bug: Event's image is not displaying

Setting up a refresh token mechanism using interceptor

Add search bar and button to mark user as a donor in the users list - Admin only

Add button to mark user as an admin in the users list - Admin only

Fix responsive for mobile app appearance

Using a library

Handle reset password - Logic

Handle reset password - UI

Create news/feed page