@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
-
Installing Dependencies
npm install
-
Edit
config.example.env
file and change name to.env
Follow the instruction inconfig.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'
-
Running App
npm run create-cert ## only needed if using HTTPS npm build npm run start
-
Running App In Development
npm build npm run dev npm run react-dev