💻 Place-o-share

A web app where you can share different places all around the world

📌 Description

Bored in lockdown? Want to see amazing places all around the world? Then here You can see..

📌 Setup

npm install

npm start

📌 Tech Stack Used

• NodeJS - A JS Run Time Environment Used For Backend
• ReactJS - A JS Library Used For Frontend/UI
• Expressjs - A Nodejs Framework
• MongoDB - As a Database
• Google MAP API - For rendering map
• Geocoding API - For geocoding
• Socket.io - For Websockets(that connects frontend and backend via event based communication)

📌 Usage

# A web app where you can share different places all around the world

What did i learn ?

• Integrating Maps
• Authentication - Using Jsonwebtoken/Sessions
• Sending Emails - NodeMailer/Sendgrid
• Sending/Storing Files - Multer
• Socket.io - How to set up event based communication
• Geocoding - How to convert Address into Geo coordinates

Feature work

1. Real Time Chat -
   Chatting with users all around the world
2. 3D models of places -
   Adding 3D models of places so that user can feel like they are standing there
3. Adding Machine Learning model -
   Will add ML model to rate Places/Posts on the basis of number of users visited that Post/Places

Frontend quick navigation

# [{Host_Name}]/ - Users list
# [{Host_Name}]/:userId/places - Get Places of a specific user
# [{Host_Name}]/places/:placesId - Get a particular place
# [{Host_Name}]/places/new -  Add a new Place
# [{Host_Name}]/places/:pid -  Delete a Place
# [{Host_Name}]/auth -  Authentication page

Frontend structure

📦frontend
 ┣ 📂public
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜index.html
 ┃ ┣ 📜manifest.json
 ┃ ┗ 📜robots.txt
 ┣ 📂src
 ┃ ┣ 📂places
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┣ 📜PlaceItem.css
 ┃ ┃ ┃ ┣ 📜PlaceItem.js
 ┃ ┃ ┃ ┣ 📜PlaceList.css
 ┃ ┃ ┃ ┗ 📜PlaceList.js
 ┃ ┃ ┗ 📂pages
 ┃ ┃ ┃ ┣ 📜NewPlace.js
 ┃ ┃ ┃ ┣ 📜PlaceForm.css
 ┃ ┃ ┃ ┣ 📜UpdatePlace.js
 ┃ ┃ ┃ ┗ 📜UserPlaces.js
 ┃ ┣ 📂shared
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┣ 📂FormElements
 ┃ ┃ ┃ ┃ ┣ 📜Button.css
 ┃ ┃ ┃ ┃ ┣ 📜Button.js
 ┃ ┃ ┃ ┃ ┣ 📜ImageUpload.css
 ┃ ┃ ┃ ┃ ┣ 📜ImageUpload.js
 ┃ ┃ ┃ ┃ ┣ 📜Input.css
 ┃ ┃ ┃ ┃ ┗ 📜Input.js
 ┃ ┃ ┃ ┣ 📂Navigation
 ┃ ┃ ┃ ┃ ┣ 📜MainHeader.css
 ┃ ┃ ┃ ┃ ┣ 📜MainHeader.js
 ┃ ┃ ┃ ┃ ┣ 📜MainNavigation.css
 ┃ ┃ ┃ ┃ ┣ 📜MainNavigation.js
 ┃ ┃ ┃ ┃ ┣ 📜NavLinks.css
 ┃ ┃ ┃ ┃ ┣ 📜NavLinks.js
 ┃ ┃ ┃ ┃ ┣ 📜SideDrawer.css
 ┃ ┃ ┃ ┃ ┗ 📜SideDrawer.js
 ┃ ┃ ┃ ┗ 📂UIElements
 ┃ ┃ ┃ ┃ ┣ 📜Avatar.css
 ┃ ┃ ┃ ┃ ┣ 📜Avatar.js
 ┃ ┃ ┃ ┃ ┣ 📜Backdrop.css
 ┃ ┃ ┃ ┃ ┣ 📜Backdrop.js
 ┃ ┃ ┃ ┃ ┣ 📜Card.css
 ┃ ┃ ┃ ┃ ┣ 📜Card.js
 ┃ ┃ ┃ ┃ ┣ 📜ErrorModal.js
 ┃ ┃ ┃ ┃ ┣ 📜LoadingSpinner.css
 ┃ ┃ ┃ ┃ ┣ 📜LoadingSpinner.js
 ┃ ┃ ┃ ┃ ┣ 📜Map.css
 ┃ ┃ ┃ ┃ ┣ 📜Map.js
 ┃ ┃ ┃ ┃ ┣ 📜Modal.css
 ┃ ┃ ┃ ┃ ┗ 📜Modal.js
 ┃ ┃ ┣ 📂context
 ┃ ┃ ┃ ┗ 📜auth-context.js
 ┃ ┃ ┣ 📂hooks
 ┃ ┃ ┃ ┣ 📜auth-hook.js
 ┃ ┃ ┃ ┣ 📜form-hook.js
 ┃ ┃ ┃ ┗ 📜http-hook.js
 ┃ ┃ ┗ 📂util
 ┃ ┃ ┃ ┗ 📜validators.js
 ┃ ┣ 📂user
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┣ 📜UserItem.css
 ┃ ┃ ┃ ┣ 📜UserItem.js
 ┃ ┃ ┃ ┣ 📜UsersList.css
 ┃ ┃ ┃ ┗ 📜UsersList.js
 ┃ ┃ ┗ 📂pages
 ┃ ┃ ┃ ┣ 📜Auth.css
 ┃ ┃ ┃ ┣ 📜Auth.js
 ┃ ┃ ┃ ┣ 📜New-pass.js
 ┃ ┃ ┃ ┣ 📜Reset.js
 ┃ ┃ ┃ ┗ 📜Users.js
 ┃ ┣ 📜App.js
 ┃ ┣ 📜index.css
 ┃ ┗ 📜index.js
 ┣ 📜.firebaserc
 ┣ 📜.gitignore
 ┣ 📜firebase.json
 ┣ 📜package-lock.json
 ┗ 📜package.json

Backend structure

📦backend
 ┣ 📂controllers
 ┃ ┣ 📜places-controllers.js
 ┃ ┗ 📜users-controllers.js
 ┣ 📂middleware
 ┃ ┣ 📜.DS_Store
 ┃ ┣ 📜check-auth,.js
 ┃ ┗ 📜file-upload.js
 ┣ 📂models
 ┃ ┣ 📜http-error.js
 ┃ ┣ 📜place.js
 ┃ ┗ 📜user.js
 ┣ 📂routes
 ┃ ┣ 📜places-routes.js
 ┃ ┗ 📜users-routes.js
 ┣ 📂uploads
 ┃ ┗ 📂images
 ┃ ┃ ┣ 📜.DS_Store
 ┃ ┃ ┣ 📜3d1e619c-b95a-4234-98ab-04bec5bcc612.jpeg
 ┃ ┃ ┗ 📜cc474b26-c8d2-4337-a634-70a19684f6b9.png
 ┣ 📂util
 ┃ ┗ 📜location.js
 ┣ 📜.env
 ┣ 📜.gitignore
 ┣ 📜app.js
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜Procfile
 ┗ 📜socket.js

📌 Backend-APIS

💻 For Places

# GET- [{Host_Name}](https://placeoshare.herokuapp.com/)/api/places/:pid - Get Place By PlaceID
# GET - [{Host_Name}](https://placeoshare.herokuapp.com/)/api/places/user/:uid - Get Place By UserID
# POST - [{Host_Name}](https://placeoshare.herokuapp.com/)/api/places - Add a Place
# PATCH - [{Host_Name}](https://placeoshare.herokuapp.com/)/api/places/:pid -  Update a Place
# DELETE - [{Host_Name}](https://placeoshare.herokuapp.com/)/api/places/:pid -  Delete a Place

💻 For Users

# GET- [{Host_Name}](https://placeoshare.herokuapp.com/)/api/users - Get All users
# POST - [{Host_Name}](https://placeoshare.herokuapp.com/)/api/users/signup - Signup a user
# POST - [{Host_Name}](https://placeoshare.herokuapp.com/)/api/users/login - Login a user
# POST - [{Host_Name}](https://placeoshare.herokuapp.com/)/api/users/reset -  Reset password

Challenges faced

While developing a developer will surely face many challenges, some of them that i faced were -

1. How to add Web sockets on a HTTP server
2. How to integrate Google maps API
3. How to send email using Nodemailer

🖨 License

MIT License

💻 Demo

place-o-share.mp4