🥘 Find the perfect place for friends hangouts. Right Now!
There are different common scenarios of hanging out with friends. It can be a planned dinner, or a casual meet during the day of work/study.
Following is a conversation that you may imagine yourself had with a friend/peer/coworker:
📚 [In Library]
🫠 : Hey, what are you working on?
🥸 : OS lab. You?
🫠 : Oh me too. Hey I've been sitting here the whole morning. Do you wanna grab a coffee?
🥸 : Ofc. Wanna try sth different?
🫠 : Definitely!! But which one...
- Quickly generate a link/group link that can be shared across any group chat such as text, messenger, etc.
- Users can enter optional information to refine the hangout, including timeframe, location, and purposes.
- Users will have a customized list of recommendations and also be able to add potential places mannually.
- Group members can check the selected place list at any time, vote on places, and see the final decision.
- The web app is conveniently connected to Map applications (Google Maps, etc).
-
Clone the Decider Repo by
git clone https://github.com/agiledev-students-fall2022/final-project-team-decider.git
-
Make sure you have Node installed.
Both the back-end and front-end should be running. -
Go to the back-end folder by
cd back-end
Install necessary packages bynpm install
Runnodemon server
You can openhttp://localhost:4000
to see back end. -
Go to the front-end folder by
cd front-end
Install necessary packages bynpm install
Runnpm start
You can openhttp://localhost:3000
to see front end.
This shell used for front end should be a different shell from the shell used for back end. -
Unit tests:
cd back-end
npm test
-
Deployment to Digital Ocean Droplet
Front end address ishttp://164.90.254.52:3000/
Back end address ishttp://164.90.254.52:4000/
-
Docker container
Make sure you have Docker installed.
Launch docker daemon, you can do this through running the Docker Desktop application.
Open a shell and run
docker pull yvonne511/final-project-decider-back-end
docker pull yvonne511/final-project-decider-front-end
docker run -ti --rm yvonne511/final-project-decider-back-end
Open another shell and run
docker run -ti --rm yvonne511/final-project-decider-front-end
The above twodocker run
commands may take some time.
You can openhttp://localhost:3000
to see front end and openhttp://localhost:4000
to see back end.
-
Use
process.env.REACT_APP_BACK_END_URL/groups
orhttp://localhost:4000/groups
to see available groups, then join a trial group to have a multi-user experience. After sign up an account, use the account to log in to use more features inview
page, or you can use an existing testing account with usernameabc
and password123
. After join a group from clickingenter
with input group id, the group is added to the current user's group list if the group is not already in the user's group list, and the user is switched to the group. -
Then the user can view the newly added group in
view
page, other database query options can be performed inview
page such asremove a group from group list
,remove all group from group list
, these queries are only performed in themy_groups
array of the current user, not influencing the groups themselves. The user can also see the current username and current group inview
page. More information aboutmyLocations, myCurLocation
can also be seen from opening developer tools in the browser and then chooseApplications -> local Storage -> http://localhost:3000
. -
To switch a group, copy a group number from
group list
inview (group information)
page, then go back tohttp://localhost:3000
and use the copied group number as input to theEnter Group ID
in the text box and hit enter. You can see the changed group by checking the current group inview (group information)
page.
-
After create a group in
Home
page, automatically redirect toRecommend
page and join that group. Can alsoremove a group from database
here, these queries are performed to create or remove the groups themselves, not influencing themy_groups
array of the current user. -
STEP 1 Landing Page:
-
Create a Group
on the landing page. Copy the group code and share with friends. -
Enter a group code that your friend share with you on the landing page. Click
Enter
.
-
-
STEP 2 Main Page:
-
User can switch between four subpages:
Search
,Recommend
,Group List
, andGo!
. -
Search
: In the search bar, enter the category / location name you want to search for. Ex.Rookie USA
,park
. -
Recommend
: (In the search bar, enter your current location to get recommend results based on adjacency.) Click onAdd
on location card to add the location to your group list. You can cancel/delete the location by click on the same box. Click on the picture on each location's card to see a map preview. -
Group List
: View all locations added by group members. Vote on the locations you like as well. You can cancel your vote by click on the same box. When a location's vote is deducted to 0, this location will be kicked out from the group. Click on the picture on each location's card to see a map preview. -
Go!
: Click onSelect!
and Decider will select a location fromGroup List
as the result shared across all group members. On the second card, Decider shows the location with most votes fromGroup List
. -
Usually,
Go!
is the last step for a group to decide their choice.
-
-
Sign up
andLog in
are optional. Note that users who do not log in will not be able to see their history groups and remove groups. -
All information on
Group List
andGo!
is shared across the group.
- The
Recommend
page may take 1-2 sec to show up when you first go into it. - Log-in/Sign-up pages are for future usage and development.
- This web app is in mobile-first design. It's preferable to be tested in mobile sizes.
- If the
Recommend
page doesn't show, tryinspect
and enterlocalStorage.setItem('myCurLocation','196')
in the console, then - There may be some time delay when rendering
view
(group information) page for logged in users. nodemon
is alreadyp included inback-end/package-lock.json
. However, if afternpm install
,nodemon
command still cannot be found, usenpm install -g nodemon
to installnodemon
.
GitHub Publish Docker Image Action automates deplot process.
With buildcontainer.yml
, any change made to the master branch will trigger GitHub action and rebuild new front-end and back-end images. Then they will be pushed to docker hub by GitHub Action too.
User can use run command to access and use them:
For front-end:
docker pull yvonne511/final-project-decider-back-end
docker pull yvonne511/final-project-decider-front-end
docker run -ti --rm yvonne511/final-project-decider-back-end
For back-end, open another shell and run:
docker run -ti --rm yvonne511/final-project-decider-front-end
GitHub Build & Deploy Action automates deploy process.
Any change to master branch will trigger deploy.yml
action.
It removes the previous build deployed with docker compose
, and rebuild another one.
The second badge at the top of this file demonstrate continuous deployment is working.
Xi Liu
Yiyi (Yvonne) Wu
Yuewen Yang
Sprint 0: Wireframes & Prototype
See the contribution guide for more information.
https://www.youtube.com/watch?v=or1z1fOPeH4
This is a video showing the deployments to Digital Ocean at http://164.90.254.52:3000/
and http://164.90.254.52:4000/
are working properly. This video only shows a very small fraction of the functionalities available. Please see the Usage
section in this file about how to use this application.