Giter Club home page Giter Club logo

petit-frontend's Introduction

Petit License: MIT

Description

Full Stack social networking app allowing users to inform each other on the pet-friendliness of employers and establishments using MySQL, React, Node, and Express.

Table of Contents

Installation

Visit the deployed site here!

Usage

Home/Splash page with quick tag line and call to action.
Home
Profile page with username, editable profile photo, and the amount of votes contributed to places.
Profile
Discover page with preseeded places as well as recent search results.
Discover
Place page with name, location and type if reviewing as an establishment or job. Options to up and down vote on the pet-friendly features of a place (dynamically changing based on if reviewing as establishment or job). A button to search the place on google. A comments section below.
Place
Search for exact names of places or using keywords and exact location or keywords and view list of results to choose from.
Search
Comments section with user photo, name, date comment was created, and content of comment. Comments
Website is mobile optimized.
Mobile

Contributing

Feedback is always welcome!

License

This application is covered under the MIT License

Links

Deployed Site
Repository

Questions

If you have any questions, please visit my Github profile or email me using the links below

Github
Email

Creators

Created by Dimiter Yordanov, Charlotte Hulseman, Kellie Kumasaka, and Jonathan Newman

petit-frontend's People

Contributors

kelliekumasaka avatar dimitermusic avatar specsnstats avatar charlottehulseman avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

petit-frontend's Issues

Presentation Scripts

Dimiter: Intro/concept/problems solved - 60s
Jonathan: Demo - 5min
Kellie: Google API, Issues Encountered - 45s
Charlotte: Cloudinary, Future Dev - 45s

Discover Page

  • Lists 10 seeded locations
  • Badge showing if reviewed as a job or establishment
  • Search bar for user to input business name and location
  • Search component with different locations after user search

API Routes

  • Get/Post/Put/Delete all and by id routes for Users
  • Get all and by ref_id routes for Places
  • Get/Post/Put/Delete all and by id routes for Comments
  • Get/Post/Put/Delete all and by id routes for Votes
  • Get/Post/Put/Delete all and by id routes for Reactions

Bugs

  • Before signing up, able to go to discover then a place instead of hitting alert
  • When updating profile photo, doesn't update until refreshed or link hit again
  • Kellie minifying of js and eliminating errors (cleanup) to be pushed (Kellie)
  • Individual search results not populating (google API issue) (Dimiter & Kellie)
  • Conditional rendering rendering for vote features needs to done for DiscoverPlace (Jonathan)
  • onClick and <textarea> changed to onSubmit and <input> in DiscoverPlace (Dimiter)
  • Padding on bottom of Discover and Results (Dimiter)
  • Reverse comment array in displaying comments on page load in addition to when posting comment in DiscoverPlace (Dimiter).
  • Commenting functionality for DiscoverPlace (Kellie)

Presentation Rehearsed 3 Times by End of Day 12.6

General pointers for project presentations

  • PRACTICE

    • Literally run through, time, adjust timing to fit guidelines.
    • If you haven’t actually given the presentation flawlessly at least once, you should practice more.
  • Only 1 (one) person should screen share

    • One team member should do this for the entirety of the presentation.
    • This should usually be the person doing the demo.
      • Run the deck while others/self talk.
      • Give demo
      • Run deck while others/self talk.
  • Outline of proper presentation order/timing:

    • — 60-90 seconds —
      • Elevator pitch/concept/problem solved
    • — about 5 min —
      • demonstration of app
    • — 60-90 seconds —
      • tech used, issues encountered, future dev
    • — 2-4 min —
      • questions

Place Page

  • Shows place name and features depending on if job or establishment (has pet menu, has pet stipend)
  • Place has badge showing job or establishment
  • Each feature has up and down votes
  • Comments section with all comments for particular place
  • Places page populates with place information from result that was clicked

Future Dev

  • Ability to refresh place and discover place
  • Combining place and discover place
  • login and signup separate components
  • Add favicon and meta og:image tag to index.html
  • Edit and delete comments
  • Delete vote on second click
  • Change color of vote when voted
  • Vote created at click of thumb rather than at click of result
  • Show list of places contributed to in profile
  • Ability to see other user profiles
  • Alerts to modals
  • user settings
  • reactions to comments
  • media query on signup for all mobile devices
  • email reminders
  • logo with white fill and green eyes
  • remove box shadow from badges (looks weird in dark mode)
  • When no results, show “no results”

Expectations

  • We expect whatever you build to have utility.
  • We expect you to have market or real-world research that evidences your idea
    has REAL value to people.
  • We expect you to have done research on other web/mobile applications in your domain.
  • We expect you to put serious time and thought into this.
  • We expect you to report problems you are facing along the way.
  • We expect you to utilize some form of project management system.
  • We expect you to dig deep into documentation and external resources to learn what you need.

Requirements

  • Must have a folder structure that meets the MVC paradigm
  • Must meet good-quality coding standards (indentation, scoping, naming, etc.)
  • Must utilize at least one new, library, package, or technology that we haven’t discussed
  • Must have a front end/UI built on React
  • Must have both GET and POST routes for retrieving and adding new data
  • Must be deployed using Heroku (with data)
  • Must use a Node and Express web server
  • Must be backed by a MySQL/Sequelize or Mongo/Mongoose database
  • Must protect API keys in Node with environment variables

Frontend Routes

  • "/" renders home and nav component (nav is on every page). Home component contains login/signup components
  • "/profile" renders profile component with user id of logged in user.
  • "/discover" renders discover component.
  • "/place/id" renders place component with place id of place that user searched for.

DiscoverPlace

  • render from db
  • hit correct routes
  • make votes state work

Profile Page

  • Badge (conditionally rendered based on amount of votes: petit pup=0-24 votes, petit best friend=25-99 votes, petit whisperer= 100+ votes)
  • Username
  • Picture
  • Votes (how many vote ids are in db for user)

Style App

  • Login
  • Discover
  • DiscoverPlace
  • Profile
  • Place
  • Results

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.