Explocal

Demo: https://www.youtube.com/watch?v=Mvarx_JUToY

Description

This is a website for travellers, new-comers or anyone who plan to travel or make new friends with the local people in their desired destinations. This fully responsive project has been built on React, Node.js, Express, MongoDB and styled with styled-components.

Contributers

Junhwan Im (Jun): https://github.com/junhwanim

Setup instructions

Fork the repository then clone the repository into your code editor.

Open a terminal and change directories into server by typing cd frontend hit enter, then run yarn install to install dependencies. Run yarn start to start the back-end.

Open another terminal and change directories into client by typing cd backend hit enter, then run yarn install to install dependencies. Run yarn start to start the front-end.

Head over to https://localhost:3000 to view the project.

Endpoints

Endpoints have been documented in backend/README.md

What has been implemented in this project

Home

Three different sections with scroll effect by react-scroll

Home section inlcudes : brief explanation about Explocal and link to sign-up page.
About section is to introduce Explocal to you.
Meet-Guides section is where you can choose your desired destination and see our locals in that specific destination.
Contact section is where you can contact Explocal's team about anything.

Locals Page

A list of locals living in the specific city you chose.
React-select implemented to let you change the city and the country within the same page.
Link to view local's details.

Local-Details Page

Link to go back to Locals Page.
View local's details.
View local's contact informations.
React-star-rating-component implemented to permit review system.
Link to view the reviewers profile.

Profile Page

View the current user's information.
Edit the current user's information.
Change password.
Placeholders move to Labels on top of the input once input is active.

Login Page

One form of Signup or Signin with animations.
When mobile viewport, animated button will disappear and link to Signup or Signin will appear.
Solid authentications implemented from backend.

Page Transition

Framer-motion is used to make smooth trasition between pages.

Mobile Responsiveness

All pages are mobile-friendly.
Hamburger bar is implemented when browser is on mobile-viewport.
Sidebar will drop from top of the browser when hamburger bar is clicked.

Dependencies used in the front-end:

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "framer-motion": "^4.1.17",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-rating-stars-component": "^2.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.2",
    "react-select": "^4.3.1",
    "styled-components": "^5.3.0",
    "web-vitals": "^1.0.1"
  }

Dependencies used in the back-end:

"dependencies": {
    "assert": "^2.0.0",
    "body-parser": "^1.19.0",
    "dotenv": "^9.0.2",
    "express": "^4.17.1",
    "file-system": "^2.2.2",
    "moment": "^2.29.1",
    "mongodb": "^4.0.0-beta.4",
    "morgan": "^1.10.0",
    "node": "^16.1.0",
    "nodemon": "^2.0.7",
    "path": "^0.12.7",
    "uuidv4": "^6.2.10"
  }