Best souvenir stories from across the world

demo.mp4

🔖 About The Project

Best souvenir stories from travellers across the world.

"A thing that is kept as a reminder of a person, place, or event"

🧰 Built with

• HTML
• CSS
• React.Js
• Node.Js
• Express
• MongoDB
• React Mapbox
• styled-components

📲 Usage

Frontend

• Upload an image.
• Post a story(title, description).
• View profile page.
• Update profile image, username, email and password.
• User sign-up, sign-in and sign-out.
• View all posts and pins in the database.
• Pin on the map, add a title and a rating.

Backend

• RESTful.
• User can sign-in via bcrypt.
• Data saved on MongoDB.
• Provide the FE with the required data in a succinct and organized way.

Stretch Goals

• User can edit and delete post(s).
• Scroll to top of the page.
• Create a delete profile button
• Create a share button

📊 About the Data

Here's some of the data from MongoDB.

Pin

{
  "_id": {
    "$oid": "615f475dd99dc71a3407580a"
  },
  "username": "April",
  "title": "New York",
  "rating": {
    "$numberInt": "5"
  },
  "lat": {
    "$numberDouble": "41.07746661624368"
  },
  "long": {
    "$numberDouble": "-74.25950423478662"
  },
  "createdAt": {
    "$date": {
      "$numberLong": "1633634141721"
    }
  },
  "updatedAt": {
    "$date": {
      "$numberLong": "1633634141721"
    }
  },
  "__v": {
    "$numberInt": "0"
  }
}

Post

{
  "_id": {
    "$oid": "617610c59f377659e5f0fb87"
  },
  "title": "New York",
  "desc": "I love the energy and vibrancy that comes with living in one of the world's greatest cities.",
  "photo": "1635127493328new-york.jpg",
  "username": "April",
  "createdAt": {
    "$date": {
      "$numberLong": "1635127493383"
    }
  },
  "updatedAt": {
    "$date": {
      "$numberLong": "1635127706233"
    }
  },
  "__v": {
    "$numberInt": "0"
  }
}

Username

{
  "_id": {
    "$oid": "615f46e2d99dc71a340757fa"
  },
  "username": "April",
  "email": "april@gmail.com",
  "password": "$2b$10$yyRmp9NQt5mJm2YYWeJFb.JW2olz84RhYKXBgEDzxc15RKBDUVo2G",
  "profileAvatar": "1633634054292april.jpeg",
  "createdAt": {
    "$date": {
      "$numberLong": "1633634018833"
    }
  },
  "updatedAt": {
    "$date": {
      "$numberLong": "1633634054463"
    }
  },
  "__v": {
    "$numberInt": "0"
  }
}

🗂 Project management tool

I used Notion because I was already familiar with it and been using it for a while now.

📄 License

Distributed under the MIT License. See LICENSE.md for more information.