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

• 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

  

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.

• 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

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

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