Skip to content

sdhlyhb/PawPrints

 
 

Repository files navigation

PawPrints

A mobile web app that you can safely share pet photos with friends. Sending awkward photos? Don't worry, they will disappear.

Tech Stack

React NodeJS NPM Express.js MongoDB Webpack Babel Axios JWT Github-Actions Jest Testing-Library Socket.io MUI Eslint

Feature Demos

Authentication

built by Paul Watson

  • Users have to sign up to use the app
  • Sign-up requires an unique username, an unique email address, a strong password and a profile image
  • The profile image can be selected from pre-existing stocks or can upload by user
Sign up Log in
sign-up log-in

Chat List

built by Ai Lam

  • Message is shown in reverse chronological order
  • Unread message is bold
  • Chat friend's username, last message and time from last message is shown

message-list

Instant Message

built by Danting Huang

  • Users can start real-time chat with friends with text messages and photos
  • Send is disable if no message is entered

real-time-chat

  • Both receiver and sender can view the photo in a modal for a zoomed version
  • A download button allows the receiver to download the photo shared by friends (right click "save image as..." option is disabled)

photo-zoom-modal

  • Upon clicking the download button, the photo will be download to local and a alert message will appear showing that the receiver has saved the photo

download-click

  • Click download button will also trigger email notification showing the photo has been saved by receiver (implemented by Paul Watson)

Sending photos and photo expiration

built by Ziqian Li

  • Users can take a photo using camera or upload a picture from local device
  • Send is disabled when no image is selected
  • A preview allows user to confirm image that is to be sent
  • Snap button is disabled when there is an image selected
  • After sent, image will disappear after 10 minutes since receiver opens the message
Send photos Photo expiration
send-photos photo-expiration

My Friends Page

my-friends-page

Install

  1. Fork the project and clone to your local repository
  2. Install all the packages and dependencies by running:
npm install
  1. Run webpack at local development mode:
npm run build
  1. Start server:
npm start
  1. create .env file and add the following varialbles:
SECRET="abc"
AWS_BUCKET_NAME=YOUR_BUCKET_NAME
AWS_BUCKET_REGION=YOUR_BUCKET_REGION
AWS_ACCESS_KEY=YOUR_ACCESS_KEY
AWS_SECRET_KEY=YOUR_SECRET_KEY
EMAIL="pawprints.notification@gmail.com"
EMAIL_PASSWORD="lpenritakquzjohk"
S3_BUCKET=YOUR_S3_BUCKET
REGION=YOUR_REGION
ACCESS_KEY=YOUR_ACCESS_KEY
SECRET_ACCESS_KEY=YOUR_SECRET_ACCESS_KEY
  1. Visit http://localhost:3000 to start the page

Project Description

This is a month long project where our team completed an MVP full stack application for an external user.

  • Each week is a sprint.
  • First sprint is planning, design and code skeleton, CI/CD set up.
  • Second and third week is Agile developement
  • Last week is app polish including bug fixes and UI finalization
  • Personal goals as following:
    • Ai Lam: Message List
    • Amrinder Singh: Friends list
    • Danting Huang: Instant messaging
    • Noelle Tian: Add Friends
    • Paul Watson: Authentication feature
    • Ziqian Li: Build routing and picture upload, image expiration features.

Technical Challenges and research you anticipated

instant messaging

Without refreshing page to send instant messages between 2 users. Research on socket.io.

Consistent Styling

Quick and effectively style the app as a mobile-friendly web app. Research on Material UI.

Contributors

About

A mobile-first web app that expires pets photo shared via instant chat

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.7%
  • Other 0.3%