mpowers1113 / eggdropfinal Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 26.26 MB

A full-stack location-based application for sharing photos and building scavenger hunts.

Home Page: https://egg-drop.herokuapp.com/

Shell 0.28% JavaScript 80.64% HTML 1.52% CSS 17.56%

eggdropfinal's Introduction

eggDROP

Log in as 'Guest' to try it out here.

Watch My Live Demonstration on Youtube!

Technologies Used

-React.js -Node.js -SQL -PostgreSQL -MapBox -React Router -Webpack -Express -AWS-S3 -Heroku -CSS3 -HTML5 -JavaScript ES6

EggDrop is a PokemonGo meets Instagram. It’s a mobile, location-based, geocaching web application for users to share pictures and messages in the form of a scavenger hunt.

What is an Egg?

An 'egg' consists of a picture and image of the user’s choice.

To ‘drop’ an egg is to pin that picture and image to the map in the form of a marker - fixing it to that location’s coordinates.

The conceit of EggDrop is that users can only ‘claim’ an egg and view its contents if they’re within 300-feet of the drop location.

Why eggDROP?

EggDrop was an idea that came to me while taking on online course on UI/UX design. In fact, I loved the idea so much it propelled me study web design.

"How can I make a social-media application fun and maintain a high degree of privacy?"

Geolocation answers both parts of that question:

Using EggDrop, a user can limit who sees their content by location, and even specify a single user who can claim their egg.

By hiding the egg contents from the client until they claim the egg, and adding a random ID generator to image URLs, the egg contents are further protected.

Creating an Egg:

Claiming an Egg:

Features:

User can create a password protected account.
User can send a follow request to another user.
User can accept or reject follow request.
User can live search for another user.
User can upload a file and text-based message.
User can 'pin' that file and text message to the map in the form of an egg.
User can view the distance between themselves and an egg.
User can claim an egg if they're within 300 feet of that egg.
User can view all their claimed eggs in their profile, along with their followers and following.
User can view notifications when another user claims their egg or requests to follow.
User can create three types of eggs:
- Public Eggs (claimable by anyone)
- Followers Only Eggs (claimable by followers)
- Private Eggs (claimable by only one of their chosen followers)

Stretch Features

User can drop an egg that they currently own:

Rather than having to create a new egg, the user can drop an egg that they currently own. By limiting the total number of eggs a user can own to 12 (their 'egg carton'), users would be encouraged to reshare their claimed eggs. This would help ensure a more linear claim-to-drop ratio and limit the total number of eggs in the database.
User can only see eggs within an X mile radius:

Rather than rendering an egg in New York when the user is in Los Angeles, the user would only see eggs within X miles of their current location. With Postgres's earth_distance function, this would be a rather simple addition to the current select statement that would improve the app's efficiency.
Users can trade eggs:

Eggs are quite similar to NFTs in that only one user can own a given egg, and the egg contains a unique ID and details about it's creator. With an added 'Marketplace' feature, users would have the option to trade eggs with other users, or purchase eggs from other users based on perceived value.

Furthermore, a business could create eggs for product promotion in the same way Nike 'drops' a limited supply of new sneakers. The eggs would then be redeemable for discounts, free-products, or anything of the business's choosing.

Development

System Requirements

Node.js 17 or higher
PostgreSQL 14 or higher
npm 7 or higher

Clone the repository.

git clone [email protected]:mpowers1113/eggDropFinal.git cd eggDropFinal

Install dependencies with NPM.

npm install

Import the example database to Postgres.

npm run db:import

Start the project. Once started you can view the application by opening http://localhost:3000 in your browswer and allowing the app to use your current location.

npm run dev

eggdropfinal's People

Contributors

Watchers

eggdropfinal's Issues

Feature: User can upload profile image

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to upload their own profile image.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user clicks the edit icon, they'll be able to click an 'upload profile image' button to add their own image.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

☁️ Server

Update server/index.js to accept post requests for profile image and insert them into the proper table.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Update profile page component to allow users to upload a profile photo.

🧑‍⚕️ Clean Up

Feature: User can accept or reject follow requests

⚙️ Feature

What capability will users have when this feature is merged?

User can choose whether to accept or reject a follow request.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user checks their notifications, they will have the option to accept or reject a follow request.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

☁️ Server

Update server/index.js to update the followers table and set isFollowing to 'TRUE'.
Update server/index.js to delete egg notifications and any follow requests that have been accepted or rejected when the user navigates away from the notifications page.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Update profile component to include follower count.
Add button to notifications page to accept/reject/follow back.

🧑‍⚕️ Clean Up

Feature: User can drop an egg exclusively claimable by followers

⚙️ Feature

What capability will users have when this feature is merged?

When the user creates an egg, they can choose whether or not they want it claimable by everyone or only followers.

📐 Functionality

A description of how the application will work from the perspective of the user.

Upon creating an egg, the user will see two options for "Who can claim this egg?" They can choose between "anyone" and "followers" so that the egg is only claimable by those who follow them.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

Update schema.sql to include a "canClaim" column in the "egg" table which will default to "anyone".

☁️ Server

Update server/index.js to store eggs with the new "canClaim" value.
Update server/index.js to query all public eggs and follower eggs for the current user.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Update createEgg component to include radio options for who can claim the egg.

🧑‍⚕️ Clean Up

Bug: User submitted images must be private and only visible to that user

🐛 Bug

Desired Behavior

The app should ...

Only users who've claimed a particular egg should ever be able to view that egg's contents.

Actual Behavior

The app does this instead ...

The images are not completely private, and others could find and view them via url.

✅ Task List

Commit checklist for tasks needed to fix the bug.

Feature: User can view an events feed of egg-claims, egg-drops, and new users.

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to view a feed that displays events like egg-claims and egg-drops, ie "Matt just dropped an egg!" or "Matt just claimed an egg"!

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user clicks the 'feed' icon, they will see a list of 'events' or 'actions' taken by other users.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

☁️ Server

Add additional sql insert statements to existing requests to update events table
Configure 'server/index.js' to accept fetch requests from the client and return events table
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Create a fetch request for the events table
Create a component to display events
Configure navbar to route user to events component
Update component to ...

🧑‍⚕️ Clean Up

Add a router to simplify navigation.

✅ Task List

Check list items that need to be done in order to complete the refactor.

Add a router to conditionally render pages
Remove all console logs.
Remove all commented out code.
Remove all CSS properties that have no effect.
Check all code for proper formatting and indentation.
Confirm that there are no errors in the console while using the application.
Confirm that all previous functionality still works without errors.
Confirm that the user interface looks natural on both mobile and desktop screens.

Feature: User can view instructions

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to learn how eggDrop works.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user clicks the question mark in the upper right hand corner, they'll be able to scroll through modals (effectively slides) that describe how the application works.

🖼️ Wireframes

⚡ Client

Create a component to display instructions
Create functionality to navigate through instructions

🧑‍⚕️ Clean Up

Feature: User can see how far they are from an egg

⚙️ Feature

What capability will users have when this feature is merged?

The user should be able to click an egg and view its distance, creator, and whether or not it's claimable.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user clicks the egg, they should see a description of its distance from their current position.

🖼️ Wireframes

✅ Task List

Commit checklist for tasks needed to complete the feature.

Modal created for egg details
Distance calculated for egg
Modal displays whether or not it's claimable.

⚡ Client

Create a component to display egg details when eggs are clicked.

🧑‍⚕️ Clean Up

Feature: User can see all eggs

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to see all eggs on the map when logged in.

📐 Functionality

When the user logs in, the map will render with all other eggs.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

Fetch eggs from database and render to map

☁️ Server

Update server/index.js to accept GET requests for eggs
Test with HTTPie
Handle all errors and respond to the client

🧑‍⚕️ Clean Up

Bug: Map getting stuck on default location

🐛 Bug

Desired Behavior

The app should ...

Load immediately and the viewport should center on the user's location with the rendered eggs.

Actual Behavior

The app does this instead ...

Half the time, the app gets stuck trying to find the user's location.

Steps to Reproduce

To trigger the bug, you must ...

Hit refresh a few times, it seems to be random.

✅ Task List

Commit checklist for tasks needed to fix the bug.

Bug: User images should be compressed.

🐛 Bug

Desired Behavior

The app should ...

Compress user submitted images, which would be essential for scaling the app.

✅ Task List

Commit checklist for tasks needed to fix the bug.

Install image compressor client-side.
Clean Up
- Remove all console logs.
- Remove all commented out code.
- Remove all CSS properties that have no effect.
- Check all code for proper formatting and indentation.
- Confirm that there are no errors in the console while using the application.
- Confirm that all previous functionality still works without errors.
- Confirm that the user interface looks natural on both mobile and desktop screens.
- Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in the Pull Request.

Feature: User can create a password protected account

⚙️ Feature

What capability will users have when this feature is merged?

The user can create an account to log into the application.

🖼️ Wireframes

☁️ Server

Update server/index.js to accept post requests to create new users, hash passwords, and validate passwords.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Create a component to accept log in information
Create a component to accept sign up information

🧑‍⚕️ Clean Up

Feature: User can live search for another user.

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to search for another user.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user navigates to the search page, they can search for a user and see the results filtered live.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

☁️ Server

Update server/index.js to accept get requests for usernames.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Create a search page to display users.
Update component to live filter by user input.

🧑‍⚕️ Clean Up

Feature: User can create an egg-marker on the map.

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to add an egg to the map that contains a message and photo. The egg will save at that location.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user double-clicks, a modal will request they add a message and image to their 'egg'. When they click "drop egg", an egg will appear at their desired location.

🖼️ Wireframes

✅ Task List

Commit checklist for tasks needed to complete the feature.

Add the map
Create a modal for adding an egg
Create double-click feature with modal
Make sure the data is being sent to database

☁️ Server

Update server/index.js to accept post requests to database for eggs.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Create a component to submit egg data (message, image).

🧑‍⚕️ Clean Up

Feature: User can send follow requests to other users.

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to search for another user and send a "follow" request to another user. The recipient will receive the notification in their notifications page.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user navigates to the search page, they will see a search input that will live filter users. Once the desired user is found, they can then click "follow" to send a follow request.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

Update schema.sql to include a 'notifications' table.

☁️ Server

Update server/index.js to insert a 'notification' when the user requests to follow.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Create a notifications page.
Add a 'notification' post request to communicate to the backend.
Include options for the follow request "Accept" / "Ignore".

🧑‍⚕️ Clean Up

Feature: User can click on the egg photo in their profile to view the image in full size.

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to view a full-size image of their chosen egg.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user clicks on an egg in their profile, they'll be redirected to an "egg Display" component that will display the image in full size along with details like "created on", "from", and "claimed on"

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

⚡ Client

Create a component to display egg details and full size image from the profile page.
Create click handlers to open the egg display when egg images are clicked in the profile.

🧑‍⚕️ Clean Up

Feature: User can click an egg and view egg info.

⚙️ Feature

What capability will users have when this feature is merged?

Users will be able to click an egg and view details about that egg.

📐 Functionality

When the user clicks an egg, a modal will pop up to display details about that egg.

🖼️ Wireframes

Commit checklist for tasks needed to complete the feature.

☁️ Server

Update server/index.js to accept get requests for eggs and return details
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Create a component to display egg data
Create a click function to identify the egg
Render data in modal.

🧑‍⚕️ Clean Up

Feature: User can drop a "private" egg, only claimable by one specific user.

⚙️ Feature

What capability will users have when this feature is merged?

The user can send an egg that's only claimable by one, user-specified follower.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user creates an egg, they will have the option to click "private" and choose from a list of their followers. When they've chosen a follower and submitted the egg, that user will be notified of the private egg.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

🐘 Database

Update schema.sql to include a 'privateUserId' column in the 'egg' table.

☁️ Server

Update server/index.js to add a notification to the recipient of the private egg.
Update server/index.js to return private eggs to specified users when the map loads.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Update the createEgg component to include a radio option for 'private' and a select element for all of the users' followers.

🧑‍⚕️ Clean Up

Bug: User must refresh to see notifications

🐛 Bug

Desired Behavior

The app should ...

The user should see notifications upon signing in and not have to refresh. I believe this is a bug with the json webtoken authorization.

Actual Behavior

The app does this instead ...

The app does not display notifications until the user refreshes the page or navigates back to the map.

Steps to Reproduce

To trigger the bug, you must ...

✅ Task List

Commit checklist for tasks needed to fix the bug.

Feature: User can navigate to their profile page via navbar

⚙️ Feature

What capability will users have when this feature is merged?

Users will be able to click the profile icon on the navbar and view their profile, which will contain their username, profile picture, and collected eggs.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user clicks the profile icon on the navbar, they'll see their own profile page with all their collected and dropped eggs.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

☁️ Server

Update server/index.js to process requests for user information, user-created eggs, and user-collected eggs.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Create a navbar component to toggle between the map and the user's profile page.
Create a profile component to hold collected data about user and user's eggs.

🧑‍⚕️ Clean Up

Feature: User can view followers and following in the user profile

⚙️ Feature

What capability will users have when this feature is merged?

The user can see their followers and following by clicking on 'followers' and 'following' in their profile.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user navigates to their profile page, they can click 'followers' or 'following' and view those usernames and profile photos.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

⚡ Client

Update profile component with click handlers to conditionally render eggs, followers, and following.

🧑‍⚕️ Clean Up

Feature: User can claim egg.

⚙️ Feature

What capability will users have when this feature is merged?

When the user is in range, they can claim the egg and view the egg contents.

📐 Functionality

A description of how the application will work from the perspective of the user.

The user will see a "Claim Egg!" button when they're in range, at which time they'll click and see the egg contents (image and message).

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

⚡ Client

Add the image and message to egg details component, and conditionally render the image and message if the user clicks "Claim Egg!"

🧑‍⚕️ Clean Up

Feature: User can view notifications

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to view notifications from other users, such as follow requests and when another user claims their egg.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user opens the home page (map) they will see a red bell if they have notifications. Upon clicking the notifications icon, they'll navigate to the notifications page wherein they can view their notifications.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

☁️ Server

Update server/index.js to accept GET requests for users notifications
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Create a component to display notifications
Update map and profile to display the notifications icon if the user has notifications

🧑‍⚕️ Clean Up

Feature: User can delete eggs from profile.

⚙️ Feature

What capability will users have when this feature is merged?

The user will be able to delete an egg from their profile.

📐 Functionality

A description of how the application will work from the perspective of the user.

When the user clicks on an egg in their profile, they'll be redirected to the eggDisplay component and see the egg details. Below the image and details, they'll see a "delete egg" option. When they click "delete egg", they'll be asked to confirm that they want to delete the egg, after which they can choose "yes" and the egg will be deleted from their profile.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

☁️ Server

Update server/index.js to accept delete requests for the user-specified egg.
Test with HTTPie
Handle all errors and respond to the client

⚡ Client

Update the eggView component with a delete button and add a click handler to process the delete request upon delete-confirmation.