gaperaltav / donor-app

This is a blood's donations app where you can have a repo of donation requests 🩸.

Blood donor project

This is a webapp for donate blood, the main purpose of this application is design an app that I can have an registry of the people who needs blood and at the same time enhance my Javacript and React.js knowledge.

Running the project

IMPORTANT: You should have the donor API. running in you machine.

After the project is cloned, first rename the .env.example file to .env and fill it with your mongo server's configurations data.

Second, open the terminal in the project directory and write the following commands:

# installing dependencies
npm install

# Run the app
npm start

donor-app's Issues

Change donations box for a donation table

Change donations box for a donation table because its better for list information.

Format donation request's Created date

In the donation donation request's table, format the way of the created date is formatted, use dd/mm/yy format.

Donation Request Detail's page

Allows the user to view a Donation details, for do this is necessary to:

• Add new page and route for the donation detail.
• Add selected donation's fields to the store.
• Create an action and reducer for fetch donation data.
• Create an Axios method to call the 'donations/get/:id' API method.
• Create the reducer for fill donationRequest object.
• Create the action and reducer to reset donationRequest to Initial state.
• The page filled whit donationRequest data.

Create a 404 not found Route and page.

Add a 404 not found page in the client project, with the steps below:

• Create the not found page.
• Add the new page in the routes file, when a route not match with none of the above.

Dockerize donor project

Create a container for the donation's app.

Erase input fields when the user create a new donationRequest

when the User is creating a new donationRequest, input fields can't be erased completely.

Implements a way for manage errors in the store.

Search about a way for manage errors in the store.

Implement multi-language

The app mus support multi-language.

Crete new donation.

Allows the user to create a new Donation in the app with these elements:

• Add a new material-ui button in the bottom of the page.
• Add the new donation to the sate.
• Design a modal for showing up in the app.
• when the user clicks the button a modal should open with the donation form.
• Allows to save the donations only when the form is valid.
• Close the modal when the donation is created.

Add a custom favicon

Add a custom favicon to be showed in the chrome's app tab.

Configure linter

Configure linter and lisnt-fix commands.

Create constants for Route's Paths

Define an approach for access to route's paths using constants instead of plain text.

Create donation reducer and actions in store.

Create donation reducer with initial state object, action and action creators.
The initial state of the donation should contain this structure:

bloodDonorId: null,
    bloodDoneeId: new ObjectId('5d2bc2680ef58a2f8a24d438'),
    title: 'Transfusion for an operation',
    bloodType: 'A+',
    description: 'I Will be in a operation tomorrow and I need a blood transfusion ',
    accepted: true,
    created_at: new Date(),
    updated_at: new Date(),