A full-stack app used to connect people who want to donate goods (giver) to people in need (needer). ))
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.
- Figma
- HTML 5
- CSS 3
- BootStrap 4.6
- JavaScript
- React 17.0.2
- Axios 0.21.1
- Redux 4.1.0
- 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
- Heroku
npm install
in the root folder.cd client
&&npm install
npm
run dev`
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;
List of features ready and TODOs for future development
To-do list:
Project is: in progress
- @Bermarte (Mentor)
- @Samir M. (Mentor)
- @Divya Sree
- @Sharaf
- @Peyman
- @Samir M. (Mentor)
- @Bermarte
- @Kemi
- @Brain Ketunze