Deployed Application: https://p3-our-place.herokuapp.com/
Our Place Homepage:
OurPlace was developed to be a roommate finder for people that can not cover rent and need a way to vet potential roommates. Step aside CraigsList. Users can register, create profiles, search for other users' profiles that match what they want in a roommate, and save profiles that meet those criteria.
It is a full MERN stack application, using MongoDb, Express.js, React, and Node.js. Our Place uses Apollo-Client to set an application-wide context for the current user and to cache information. The application uses GraphQL to query the database and run mutations for CRUD operations. React Router handles the application's routes and end points, and we save Json Web Tokens to local storage to handle sessions. We used Faker to seed the database.
Our Page is a Single Page Application (SPA), and several areas of the application utilize React's state functionality and effect hooks. We continue to add features and polish the application to make the best experience possible for our users.
-
Users who would like to install this application on their local machines can do so buy running the following command in their terminal:
"git clone git@github.com:awchen85/project-3.git"
Once users reach the landing page for the Our Place application, they can register by clicking "Sign Up" in the nav bar. It will take users to the following screen:
Register yourself with valid information and a password with 7 characters including: lower/upper case letters, one number, and one special character. When users return to Our Place, they can log in by clicking "Login" in the nav bar.
Once logged in, users can create the their profile by clicking the "Profile" link in the nav bar. By filling out the profile form, users will create their profile card which allows them to be searched for.
Under the hood, the profile page uses React's state for the profile form. Once a user fills out one of the input fields, it updates the form state with that value. If the user clicks away from a required input, SweetAlert2 displays a modal that lets them know that field is needed:
Whenever a user visits the profile page, a function checks to see if they have already created a profile. If they do not have a profile, the form state defaults to empty values, and the "Save" button fires the "Create Profile" mutation. If they do have a profile, React sets the form state to their existing profile values, and the "Save" button fires the "Update Profile" mutation.
Users can find roommates on the home page. Upon load, a query is run for all user profiles. Other users' profiles are displayed in a carousel, which is a React component, as seen below:
The cards that represent each user display their avatar, username, location, and "about me." If a user clicks anywhere on a card in the carousel, they are taken to a page that displays that user's full profile:
A query pulls the selected user's id from url parameters, fires a query for that user's information and profile, and displays the expanded profile card. The current user can click the "heart" icon on the expanded card to save that profile. If they go to their "Profile" tab in the nav bar and click the "Saved" button on the left hand side, the "CardList" component will display their saved profiles in a carousel just like the home page:
The homepage also allows users to search for roommate and filter out profiles that don't meet their desired criteria. There is a quick search option on the homepage that filters by location.
The "Search for your roommate" button at the top of the homepage offers more robust search options. Clicking the button opens a modal that allows users to search by search by location, budget, gender, age, whether or not potential roommates allow pets, and any combination thereof.
We have several features we would like to add in the future and some are currently in development. These include but are not limited to the following:
Upon clicking the heart icon on a user's full profile, the application will check to see if that person already exists in the current user's saved profiles. If it does not, it will fire the "Add Friend" mutation. If it does, it will fire the "Remove Friend" mutation and take that user out of the saved profiles array.
Allowing users to upload their own avatars to their profile (there is currently a default avatar).
Allowing users to "match" with each other if they both save each other's profiles. This will open up the ability for them to send each other messages, which would display in the "Inbox" portion of a user's profile page.
This application uses the following dependencies:
Root: Apollo Client, GraphQL, GraphQL-tag, Concurrently
Server: Faker, Apollo-Server-Express, Bcrypt, Dotenv, Express, GraphQL, JsonWebToken, JWT-decode, Lodash.omit, Mongoose, Nodemon
Client: Apollo Client, Google Maps API, Mapbox, Animejs, GraphQL, Prop-Types, React, React-Cookie, React-Dom, React-Icons, React-Multi-Carousel, React-Responsive-Modal, React-Router-Dom, React-Scripts, Save, SweetAlert2, TailwindCSS, Use-Places-Autocomplete, Validator
The contributors for this project: David Dowell, Mitchell Armstrong, Patrick MacDonald, Alex Chen, Teresa Hartsfield
Currently there are no tests for this application.
Contact key project contributor:
- hartsfieldt@gmail.com
- pmacdonald07@gmail.com
- awchen85@gmail.com
- mra0211@gmail.com
- daviddowell1@gmail.com
GitHub profile: hartsfieldt, awchen85, pmacdonald07, ScarElite, DavidDowell