hibiadelei / myspot

MySpot App

License

This project is licensed under the GPL v3 license.

Heroku Deployment Link

MySpot App

Table of Contents

• Description
• Features
• Requirements
• Install
• Usage
• Technologies
• Contributors
• Future Features

Description:

• You can save your favorite and precious spots.

Features:

• You can create your own spots data with description, and tags.

Requirements:

• ADD

Install:

- Type "npm i"
- Type "node run seed"(optional)

Usage:

- To make a new spot, you must be signed up and logged in.
- When you click a spot to save, latitude and longitude appears automatically, then you type title, description and tags of the spot.

Technologies:

• Google Map API
• Heroku Deployment
• Boot Strap
• Node.js

Contributor:

• Lily Huang
• Daeyoung Bae
• Lilian Adelei

Future Features

• Users will be able to delete their spots.

myspot's Issues

Connect newspot view to JavaScript

Currently the newspot.handlebars shows a very empty form with no functionality. Use the functions in map.js and new.js to make it display a form where a user can add a new Spot and save it to the database.

Add unique constraint to user.username

Create New Spot Handlebars View

Create the New Spot handlebars view (new-spot.handlebars) which displays a form for creating a new spot for the user. The form should have space for an interactive Google Map (which will be rendered using JavaScript), a description box, a dropdown to select tags, and a submit button. When a location is selected on the Google Map, it should fill in lattitude and logitude coordinate boxes on the form as well.

https://wireframe.cc/9N12q5

Create API route to sign up a user

The API route should be: /api/signup. Remember that the password must be encrypted using bcrypt.

Create Homepage Handlebars View

Create the homepage.handlebars view.

https://wireframe.cc/PDKw0m

Create schema.sql and .env.EXAMPLE

Database name should be myspot_db. See homework and class activities for examples.

Presentation Elevator Pitch

Code style cleanup

Add proper indentation, line spacing, variable names to all code files. Add comments where possible. Remove unnecessary console.log().

Write README

Please write a detailed README.md featuring at least these sections:

• Table of Contents
• Description
• Features
• Requirements
• Installation
• Usage
• Technologies
• Contributors
• Future Features

Take a look at these READMEs for examples:
https://github.com/nodejs/node
https://github.com/discordjs/discord.js
https://github.com/Mojang/DefinitelyTyped

Create Models

Create the following models:

• User
  • id
  • username
  • password
• Location
  • id
  • title
  • longitude
  • latitude
  • description (this needs to be longer than 255 chars... what data type would solve that issue?)
  • user_id FOREIGN KEY
• Tag
  • id
  • title
• TagLocation
  • id
  • location_id
  • tag_id

Create associations between the appropriate models in index.js.
User has a one-to-many relationship with Location.
Tag has a many-to-many relationship with Location.

Change Tags input type from selections into inputs

• Type change (select into input)
• Two more tags must be available

Profile page does not render multiple static maps

When viewing a user with one spot, the static map renders properly. When viewing a user with more than one spot, none of the static maps render. This is probably because staticmap is treated as an id, rather than a class name in the html element.

Are user's able to delete a spot?

I didn't see any cards or anything in the wireframe to suggest that this was a feature. I would like to know if this is in the plan for the MVP.

Let User edit bio on their own profile

Currently, there is no way to edit a user's bio. That should be fixed by creating a text box input where a user can input a bio when they are on their own profile page.

Presentation Powerpoint

User bio form input

I noticed there is a user bio field in the user model but there doesn't seem to be a view in the wireframes depicting a field for the user to enter a bio.

Replace .env.EXAMPLE

Create Log In Handlebars View

Create a log in view (login.handlebars) which presents users with a form to log in to the site. An easy way to create this could be through Bootstrap modals: https://getbootstrap.com/docs/4.6/components/modal/ . The form should have a field for the user to put in their username and password. The view doesn't need to handle submitting the data (that is the job of the javascript).

However, the view should have a "Sign Up Instead" button that changes the form from Log In to Sign Up for a new user. The Sign Up form should look similar to the Log In form, but have an extra field for users to confirm their password.

https://wireframe.cc/qQOX0s

Create API route for logging in a user

The route should be called: /api/users/login.

Create a user seed

Create a user_seeds.js that adds sample users to the database.

seed.js must also call user_seeds.js.

spot_seeds.js also needs a user_id field.

Finally, add a "seed" script to our package.json so that it can be run with "npm run seed".

Remove tag_id column in Spot model

The Spot model doesn't require a tag_id column, since that data is already recorded in the SpotTag model.

This column should be removed from spot_seed.js as well.

Create Log In javascript logic

Create a login.js that will take the data from the form in login.handlebars and submit them to the server. Depending on the form that is filled out, the Javascript should either attempt to log in the user or sign them up as a new user. This file shouldn't create a new user in the database or do any credential checking - that is the role of the controller. See the homework and class activities for examples.

Create HTML routes

Create routes that serve HTML to the user depending on which url they visit. For best practice, each route should be in their own file. See the starter code for an example.

The routes are:

• / (homepage)
• /login
• /user/:id
• /spot/:id

The issue is complete when a user can connect to each page in their browser.

Fix longitude misspelling in Spot model

Longitude is misspelled in spot model

Create Profile Handlebars View

Created the profile page (also known as the 'My Spots' page) handlebars view in profile.handlebars. This should have the user's name, bio, and their added spots. Users are able to visit any other user's profile page. But if a user is logged in and viewing their own profile page, there should be a logout button, and a button to edit the bio.

https://wireframe.cc/U74ip4

Create navbar on main.handlebars

main.handlebars, which appears on every page, is a very boring line right now. Replace it with a proper Boostrap navbar that has links to Home, New Spot, and Login/My Spots, depending on if the user is logged in or not.

Deploy to Heroku

Take charge of deploying the app to Heroku. This issue will last through development.

Add map.js to profile.handlebars

Move the map.js and new-spot.js above the google api in newspot.handlebars also.

Create Main Handlebars View

This is a handlebars view that will appear on every page. It should pretty much be the navbar that appears on the top of every page. See homeworks and class activities for examples.

Create a Spot Details View

Call this spot.handlebars.

This should bring up more details about a spot, including a static Google Map displaying the spot with a pin.

This page should have all the details that were entered in the newspot page (in fact, it should look very similar to it, but without form fields).

This page should also have the name of the user who pinned the spot.

Create seed.js for models

Create a seed.js to insert development data into models. Should be done after #9 . See homework and class activities for examples.

This issue is complete when running "npm run seed" will seed the database with sample data.

UPDATE User API Route

Add a createStaticMap method to map.js

Add a createStaticMap(longitude, latitude) method in map.js that uses the Google Maps API to render a static (non-interactive) map in a #map div.

While you're there, please change var to let/const.

Create a new.js to send post when user pressed save btn

Get Google Maps API Key

Figure out what we need to get the Google Maps API working. Please document your findings on this issue.

Fix Seed Errors