Skip to content

This is our Hope2Hand Desktop and Tablet Fully Responsive Website

Notifications You must be signed in to change notification settings

hope2handteam/HopetoHand

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Welcome to our Hope2Hand Website Project!

Mockuph2h

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

Hope2handCover

Welcome & City Guide Section

welcomeCityguideSection

Social Services, Shop/Donations & Footer Section

SocialServicesShopFooterSection

Geolocalisation Map Section

GeolocalistationMapSection

Our Engineer Team!

TeamH2H

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

Screenshot 2022-08-17 at 10 57 38

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

Screenshot 2022-08-16 at 12 13 36

madewithlocofy

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!