hyf-group2-fp / just4giving

Just4Giving : Full-Stack app used to connect people who want to donate goods with people in need (newcomers and refugees).

Just4Giving

A full-stack app used to connect people who want to donate goods (giver) to people in need (needer). ))

Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Authors

General info

There are many people in Brussels who want to get rid of objects they no longer use, like furniture, clothes, books, electronics, PCs and so forth, and at the same time want to help the ones in need. We call the first group Needers and the second Givers. The idea of the application is to offer a tool to connect those who have items to donate with those in need. This app provides an easy and secure connection between Givers and Needers.

Screenshots

Technologies

UX/UI

• Figma

Front-End

• HTML 5
• CSS 3
• BootStrap 4.6
• JavaScript
• React 17.0.2
• Axios 0.21.1
• Redux 4.1.0

Back-End

• Node.js 14.16.1
• Express 4.17.1
• Nodemon 2.0.3
• sequelize 6.6.2
• MySQL 2.2.5
• VSC 1.51
• Postman 8.3.0

Dev-OPs

• Heroku

Setup

• npm install in the root folder.
• cd client && npm install
• npm run dev

Quick Setup

• npm run db
• npm run quick

Code Examples

import React from "react";
import { Jumbotron, Button, Card, CardDeck } from "react-bootstrap";
import team from "../../assets/landingpage/team.png";
import trust from "../../assets/landingpage/trust.png";
import team1 from "../../assets/landingpage/team1.png";
import ReactPlayer from "react-player";
import video from "../../assets/landingpage/video.mp4";
import footer from "../../assets/landingpage/illustartion.png";
import { Link } from "react-router-dom";
function Demo() {
  return (
    <div className="Demo">
      <div className="bg">
        <Jumbotron>
          <h1>Welcome To JUST4GIVING!</h1>
          <p>
          <Link to={"/signupneeder"}>
            <Button className="btn-sm">I Need Something</Button>
          </Link>
          <Link to={"/signupgiver"}>
            <Button className="btn-sm">I Want to donate Something</Button>
          </Link>
          </p>
        </Jumbotron>

        <CardDeck className="cards">
          <Card className="shadow-lg rounded card1">
            <Card.Body>
              <Card.Title id="card1h">Donate</Card.Title>
              <Card.Text id="card1p">
                Don't throw it away, give it away. Help others to have a better
                life.
              </Card.Text>
              <Card.Img
                style={{ width: "120px", height: "120px" }}
                src={team}
              />
            </Card.Body>
          </Card>
          <Card className="shadow-lg rounded card2">
            <Card.Body>
              <Card.Title id="card2h">Help</Card.Title>
              <Card.Text id="card2p">
                We know you are strong but accepting help is its own kind of
                strength.
              </Card.Text>
              <Card.Img
                style={{ width: "120px", height: "120px" }}
                src={trust}
              />
            </Card.Body>
          </Card>
          <Card className="shadow-lg rounded card3">
            <Card.Body>
              <Card.Title id="card3h">Connected</Card.Title>
              <Card.Text id="card3p">
                Stay connected. The world is full with nice people. If you can't
                find one Be One!
              </Card.Text>
              <Card.Img
                style={{ width: "120px", height: "120px" }}
                src={team1}
              />
            </Card.Body>
          </Card>
        </CardDeck>

        <div className="container">
          <div className="player-wrapper">
            <h2 id="videoh">Our Vision</h2>
            <ReactPlayer
              className="react-player"
              width="80%"
              height="650px"
              controls={true}
              url={video}
            />
          </div>
        </div>

        <div>
          <img className="bg2" src={footer} alt="bg2" />
        </div>
      </div>
    </div>
  );
}
export default Demo;

Features

List of features ready and TODOs for future development

To-do list:

Status

Project is: in progress

Inspiration

Authors

Project Coaches :

• @Dirk Jacobs
• @Anthony Meirlaen
• @Jan Vanbuel

Project Owner :

• @Samir M.
• @Bermarte (Mentor)

UX/UI designer :

• @Anisya Purnama

Front-End :

• @Bermarte (Mentor)
• @Samir M. (Mentor)
• @Divya Sree
• @Sharaf

Back-End :

• @Samir M. (Mentor)
• @Bermarte
• @Kemi
• @Brain Ketunze

Dev-OPs :

• @Samir M.

---

just4giving's Issues

3-1-click on a button to go to the sign up page giver

• this issue developed on a branch 3-signupgiver

2-1-sign up giver

Summary

Create the page and back route to handle the sign-up of a giver.

• this issue developed on a branch i-signup-giver

Acceptance criteria

• Create backend endpoint /giver/signup

3- make a user account (giver)

7-2- a from to fill with all personal info needer

• this issue developed on a branch 7-signupneeder

1-2 navbar switch

This feature will be implemented in the branch 1-navbar-switch

1-5-links

• this issue is developed on a branch 1-landingpage
• add a link to about us page in the navigation bar nav
• add a link for privacy in the footer
• add a link for term and conditions in the footer

2-user (needer) open the landing page

Make sure version from "Milestone 1" is working on heroku

Make sure the version with all tickets from milestone 1 is fully working in the production envrionment.

Delete Good

Add button to delete a post

Acceptance criteria

• Add delete button to Good card
• When clicking the button the Good is deleted
• The overview is refreshed after a delete

Make sure backend does data validation

Make sure the submitted data is validated. If the data is invalid a relevant HTTP response code is returned.

• this feature is developed in the branch viii-validation

8-user (needer) search for needed object(s)

1-2-body for sign up

• this issue developed on a branch 1-landingpage
• create a description
• button for sign up for the needer
• button for sign up for the giver

5-authentication

1-user (giver) open the landing page

• write checklist

7-4- submit the form needer

• this issue developed on a branch 7-signupneeder

2 - 2 Privacy disclaimer

Summary

Create a page where you can find information about the privacy policy.
This feature is created on the branch 2-disclaimer.

Acceptance criteria

• Created the privacy policy according to the design on /privacy

4-database

• create the schema
• create the db file
• create fake data

3-2-a signup form to fill with personal info of giver

• this issue developed on a branch 3-signupgiver

5 - Create boilerplate for Redux store

Summary

Create an initial Redux store to hold the application data
This feature is created in the branch 5-redux

1-1- create the header and the navigation bar

• this issue devloped on a branch 1-landingpage
• create a nav tag with and add logo and 2 buttons about us and sign up

2-3-sign in giver & needer

Summary

• this issue developed on a branch ii-signin

Acceptance criteria

• Backend route /signin exists
• On successful authentication, a cookie with a session is returned

1-4-footer

• this issue developed on a branch 1-landingpage
• add img to express our application
• add a footer

2-2-sign up needer

Summary

Create the page and back route to handle the sign-up of a needer.

• this issue developed on a branch i-signup-needer

Acceptance criteria

• Create backend endpoint /needer/signup

2-8- get a good needer

Summary

• this issue is developed on a branch iv-posts-category
• get a single good data

Acceptance criteria

• Create a backend route GET /goods/{id}
  • Return all the details of a single good as the response.

2 - 1 About us page

Summary

Create a page where you can find information about the team. See the design on figma.
This feature is created on the branch 2-aboutus.

Acceptance criteria

• Create the about us page on the route /about-us

---

redo

redo of PR #75
This feature is created on the branch 2-aboutus-update.

2-7- get goods needer

Summary

• this issue is developed on a branch iv-posts-category-all and then in deveop
• get all the goods (of all categories)

Acceptance criteria

• Create a backend route GET /goods
  • The route should return all goods.

---

• this issue developed on develop
• get all the goods for a single category

Acceptance criteria

• create a route GET /goods/category/{id}
  • The route should return all goods matching the category.

Create the Giver profile

Create the profile page of the Giver that displays all the Goods owned by the Giver.
Developed in branch 8-giver-profile

Acceptance criteria

• Page that displays all the Goods from the Giver
• Component for a Good
• Add a button that links to the page where you can add a Good

3-3- validate the form of giver signup

• this issue developed on a branch 3-signupgiver

9-Extend the seed script so it creates categories and tags.

Make sure when running seed.js a set of categories and tags are created in the database.

7-user log out

• the user should logout

[Frontend] 2-1-sign up giver

Summary

Create the frontend sign up page

Acceptance criteria

• Link the sign-up page on the home screen
• The sign-up page according to the design
  • The form is validated
• Redirect to the sign-in page when successful

2-5-update a good giver

Summary

• this issue is developed on a branch iii-item-put
• update the data for a single good

Acceptance criteria

• Create a backend route PUT /goods/{id}

3-5- go to the giver profile

• this issue developed on a branch 3-signupgiver

Create a Good form/page

Create the page/form where a Giver can submit a Good

Acceptance criteria

• Entire create Good flow implemented
• On submit of the form request to backend is triggered

1-3-a video section

• this issue developed on a branch 1-landingpage
• write the text of the speaker
• add a video

2-routes

• create the routes

9-user (giver) post information about the donated object(s)

4 - 1 Database connection on production

Summary

Figure out the database connection on production heroku

Acceptance criteria

• Working database connection on the production instance
• Instructions for the rest of the team how to set it up locally

6.1 login

This feature is developed in the branch 6-login

2-6-delete a good giver

Summary

• this issue developed on a branch iii-item-delete

Acceptance criteria

• Create a backend route DELETE /goods/{id}

3-route handler

7-5-go to the needer profile

• this issue developed on a branch 7-signupneeder

7-3- from validation of needer

• this issue developed on a branch 7-signupneeder

Enhance alignment in the designs

Make sure the header and sections start at the same alignment.

1-server

2-4-create a good giver

Summary

• this issue developed on a branch iii-item-post

Acceptance criteria

• Create the backend route POST /good

3-4- submit the sign up form giver

• this issue developed on a branch 3-signupgiver

make a user account (needer)

8-user (needer) log out

7-1-click on a button to go to sign up needer profile

• this issue developed on a branch 7-signupneeder