ryanpunwasi / pinnet

A web app where users can share and display maps with pinned locations

Pinnet

Pin the best part of your day 📍🌎

===========================

Pinnet is a web app that can share and display maps with many different points of interest. Want to see a map of the best Sushi resturants 🍣 ? How about a map of Art Museums 🖼 ? A map of hidden gems in the city 💎 ? Pinnet can do all these things and can be shared with anyone! Pinnet allows users to collaboratively create maps which list multiple "points". For example: "Best Places to Eat Around Town" or "Locations of Movie Scenes".

Open source library used: Leaflet¹

Geolocation script used: Geolet²

Pinnet is built as a midterm project for Lighthouse Labs Web Development Programe by:

• Tha God (Ryan)
• Admiral Michael Le Duong
• GOAT Sidney

List of Basic Functions

• users can see a list of the available maps
• users can view a map 🔍
• a map can contain many points 📍
• each point can have: a title, description, and image
• authenticated users can create maps
• authenticated users can modify maps (add, edit, remove points)
• users can favourite a map ⭐️
• users have profiles, indicating their favourite maps and maps they've contributed to 👤

Entity Relationship Diagram (ERD)

Wire Frames

Page Previews

Welcome Page

Adding New Pin

Main Map View

Editing Pin

List of Maps

Create a New Map

Getting Started

1. Install dependencies using the npm install command.
2. Start the web server using the npm run local command. The app will be served at http://localhost:8080/.
3. Go to http://localhost:8080/ in your browser.
4. Run the command 'npm run db:reset' to generate a sample database.
5. Explore the site! Maybe make your own maps 👀
6. Begin exploring the city! 🗺

Future Feature Implementation

• Delete created maps

Dependencies

• Node 10.x or above
• NPM 5.x or above
• PG 6.x
• bcryptjs
• cookie-session
• express

1: Refer to leaflet: https://leafletjs.com/ 2: Geolet created by Ruben Holthuijsen: https://github.com/rhlt