Skip to content

pyc0422/biteshare

 
 

Repository files navigation

BiteShare | "Make splitting bills simple and easy"

The Team

@Matt Alexander  | @Heather Ray  | @Stacey Pereira   | @Yuchen Pan   | @Yui Murayama   | @Zachary Atha

My Responsibility

  • Created the homepage with carousal background images

  • Designed friends page and addfriends step page with side up add friends window

  • Implemented friends' list in both friends page and addfriends step with swipe to delete function.

  • Achived combine search bar and input to search friends and trigger add new friends popup window with MUI Autocomplete

  • Wrapped all the individual steps to a whole step

Introduction

BiteShare is basically an app designed for splitting the bill among a group of would-be restaurant patrons in a fun and engaging way. We developed this over the span of 3 weeks as part of our final project before graduating from Hack Reactor. If you would like to try it out, check out our demo: BiteShare Demo.

What does BiteShare do?

  • Create/login an account with phone number and password
  • Start a new meal session (Priority Feature)
    • Search nearby restrautant by zip code or city name with optional radios
    • Add friends to this new meal session (search exist friend in friends list or add a new friend with phone number and name)
    • Add bill details with uploading receipt function
    • Review the whole session before create
  • Notify all the friends with text messages
  • Participant can pay the bill by click the url in the notification message as a guest
  • Participant can add comments when pay the bill
  • Social function
    • Users could see their friends' recently meal session
    • Can make reactions to each meal session
    • Can see commends or add commends to each meal session

Tech stack

JavaScript React MongoDB ExpressJS HTML CSS MUI JWT Jest GitHub Actions NodeJS Webpack Babel Ubuntu

  • FrontEnd: React | Material UI | CSS
  • BackEnd: NodeJS | Express | MongoDB | JWT
  • Testing: Jest | React Testing library
  • Deploy: MongoDB Atlas

How does BiteShare work?

  1. Installing Dependencies

    npm install
    
  2. Edit config.example.env file and change name to .env Follow the instruction in config.example.env file. You will need MongoDB, Twilio, Yelp, JWT accounts.

    #===== Node =====================>>
    
    PORT="3000"  ## port number that the Node process will run on
    
    CORS_ORIGIN="https://app.mydomain.dev/"  ## public endpoint url of the app (if applicable)
    
    
    #===== MongoDB ==================>>
    
    DB_URI="127.0.0.1"  ## IP address or domain of MongoDB instance (not a cluster)
    
    DB_PORT="27017"  ## Port number of Mongo instance (not a cluster)
    
    #DB_CLUSTER="cluster0.abcdefg.mongodb.net" ## MonogDB cluster URI (if applicable)
    
    DB_NAME="biteshare"  ## name of the Mongo collection
    
    DB_USER="user"  ## Mongo username
    
    DB_PASS="password"  ## Mongo password
    
    
    #===== Twilio API ===============>>
    
    TWILIO_BASE_URL="https://api.twilio.com/2010-04-01"  ## base URL provided by Twilio
    
    TWILIO_ACCOUNT_SID=""  ## account SID provided by Twilio
    
    TWILIO_AUTH_TOKEN=""  ## your Twilio auth token
    
    TWILIO_PHONE_NUM=""  ## your Twilio phone number to send from
    
    
    #===== Yelp API =================>>
    
    YELP_CLIENT_ID=""  ## your Yelp client ID
    
    YELP_TOKEN=""  ## you Yelp token
    
    
    #===== Server/Client Auth =======>>
    
    JWT_AUTH_SECRET_KEY=""  ## a 256-bit secret key
    
    
    #===== HTTPS stuff ==============>>
    
    USE_SSL=true  ## anything other than "true" evaluates to false
    
    SSL_KEY_FILE="server.key"  ## filename of your key file that is in 'server/https'
    
    SSL_CERT_FILE="server.cert"  ## filename of your cert file that is in 'server/https'
    
  3. Running App

    npm run create-cert  ## only needed if using HTTPS
    
    npm build
    
    npm run start
    
  4. Running App In Development

    npm build
    
    npm run dev
    
    npm run react-dev
    

About

Main repo including front and back-end

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%