Welcome to our Hope2Hand Website Project!

This is our Hope2Hand Desktop and Tablet Fully Responsive Website

Our first version is deployed here : https://hope2hand.netlify.app/

Description of the project

This local Assistance App. is here for you in the most needed time.

• We want to provide the quickest and most practical online help for newcomers, immigrants, and refugees.
• We strive to grant the most reliable alternatives in due time for fast integration.
• We connect the fastest way possible the persons with the things they could need in their local area.

Preview high-fidelity prototype

Header with NavBar & Hero Image Section

Welcome & City Guide Section

Social Services, Shop/Donations & Footer Section

Geolocalisation Map Section

Our Engineer Team!

Tech Stack used for this project

Main Features and Functionalities

• Beautiful and Fully Responsive Design for Desktop & Tablet Minimal Design made with cutting edge tools like Locofy
• Material UI & Bootstrap Library
• Google Authentification
• Special Contact Form, Forms & Login Users Secure Data Collection: Our user data goes to our Backend Database.
• Clear Navigation & Call To Action for the User
• Geolocalisation Map Plan Page
• API to get User infos and Picture in our Frontend Forms to our Backend Database
• Responsivesness & Accessibility
• SEO & Metadata

FRONTEND

• HTML5
• CSS MODULES
• JAVASCRIPT
• REACT.JS
• BOOTSTRAP
• MATERIAL UI
• LOCOFY BUILDER

BACKEND

• NODE.JS
• EXPRESS.JS
• POSTMAN
• AXIOS
• MONGO DB
• MONGOOSE
• MONGO ATLAS

OTHERS

• FIGMA
• ADOBE ILLUSTRATOR
• LOCOFY.AI PLUGIN
• GITHUB PROJECTS
• SLACK
• VS CODE
• TRELLO
• LOOM Video Recording

DEPENDENCIES

• FRONTEND: { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/material": "^5.2.5", "@mui/x-date-pickers": "^5.0.0-beta.0", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.0.3", "@types/node": "^16.11.14", "@types/react": "^17.0.37", "@types/react-dom": "^17.0.11", "axios": "^0.27.2", "bootstrap": "^5.2.0", "date-fns": "^2.28.0", "react": "^17.0.2", "react-bootstrap": "^2.5.0", "react-bootstrap-carousel": "^4.1.1", "react-dom": "^17.0.2", "react-file-base64": "^1.0.3", "react-icons": "^4.4.0", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "web-vitals": "^2.1.2" }

• BACKEND: { "bcryptjs": "^2.4.3", "body-parse": "^0.1.0", "body-validator": "^1.3.3", "cors": "^2.8.5", "dotenv": "^16.0.1", "express": "^4.18.1", "express-handlebars": "^6.0.6", "express-validator": "^6.14.2", "jsonwebtoken": "^8.5.1", "mongodb": "^4.8.1", "mongoose": "^6.5.2", "nodemailer": "^6.7.8", "nodemon": "^2.0.19" }

We also used the Locofy.ai Plugin to design our project and export our code to React.JS with Figma as main tool for our wireframe and design

Infos here : https://www.locofy.ai/

Thanks to all the Locofy.ai team for the precious help!

Credits

© The Third Team, 2022. All Rights Reserved.

Hope2Hand, Berlin, Germany

For Digital Career Institute DCI Final Project Presentation

Outlook

• Deliver a FullStack Responsive App. version for IOS and Androïds mobile phone

• It is a local application but we could promote it to global use and establish node app. hubs in every cities we can!

• Make a in house feature Free Map with Geolicalisation API

Thanks for your Support!