A social media app for pets. Find your favorite pets, write them some comments, give your pals a lick, and create a profile for your pet!
You can access the live version of this app at petz-frontend.surge.sh, but if you'd like to clone down a local version of this app for your own tinkering, follow these instructions:
- Clone down this repo for the frontend as well as the backend repo. Make sure to keep them in separate directories to keep things tidy
- Open a terminal,
cdinto your local frontend, and follow these commands:
npm i
npm start
- In another terminal tab,
cdinto your local backend and follow these commands:
npm i
mongod
node db/seed.js
node index.js
By default, the React frontend will load on localhost:3000 and the Express backend will load on localhost:3001.
- ReactJS
- Express
- MongoDB
- CSS
For a more in-depth look at our initial planning, take a look at this document in our backend repo. Additionally, you can look at some rudimentary wireframes in this repo's planning directory. In a nutshell, though, we started by defining our models (Pet and Comment, with the eventual addition of User) and considering everything that each model needed to accomplish. For example, we needed to have full CRUD on Pet, but we just wanted Create and Delete on Comment and simply Create on User. This influenced our routes and controllers, which in turn allowed us to quickly create much of the boilerplate for our backend.
Handling our frontend required us to lean a bit more into our workflow plan. We used a mix of GitFlow and Feature Branching: everyone started the day on their own branch that described what they were to accomplish that day, then at the end of the day we'd merge into a central Development branch. From there, we could debug any stray oddities and finally merge Development into Master. If something were to show up 15 minutes before presentation time (knock on wood), we would be able to create a smalll hotfix branch off of Master.
Cathy: Similar to users liking a Facebook profile, users can “lick” a pet profile. The backend was set up first, adding a PUT request to a lick route I created. I used the $inc operator to increment the document property licks so that for every put request made, the lick value would increase by one. After that was successfully tested in Postman, the frontend was handled by making an API request to capture the pet object and set this.state.licks to the lick value. I created a handleLick that, when the lick button is clicked, a PUT request is sent to the back end to increment the lick value by one. The response sent will set this.state.licks to the new lick value, therefore hotloading the new lick value on the browser.
Konjo: I became proficient in adding and deleting comments as sub document models in a previous lab. I wanted to add comments to this app and take it a step further. After the comments are posted, we as a group added a most recent comment feature which finds all the comments and sorts them based on their timestamp. This was accomplished using the .sort method using the createdAt: -1 property. After a pet comment is created the user is redirected to the comment index which shows the most recent comments.
Annabelle: In a previous class assignment, I came up with a simple search component that brought all items from a collection into state, then used JavaScript's .filter feature to narrow down the results. The user's input is saved in state and updated dynamically, and if a document's name parameter contains the input as a substring, then the document will appear as a result. Because every string contains the empty string, if the user deletes all of their input then the state variable for input automatically changes to an astericks. For this project, I added the species conditional so that users can search for exclusively cats or exclusively dogs.
If a user performs too many commands on a pet profile page, the server will sometimes crash. We're not 200% certain what the exact breaking point is, but we think it is related to the component lifecycle. Right now, our Pet.js file contains all of the logic for the profile, meaning that one component is making multiple different types of requests. If we were to refactor this file into multiple smaller components, we think that we can utilize componentDidMount() and componentWillUnmount() to handle these requests in a more streamlined fashion that our server can handle
User authentication currently allows only logged-in users to access certain features, such as the ability to write a comment or delete a pet. However, we'd like to expand this so that users can create profiles for their pets and only edit those pet profiles.
Meet Team KAC Stack!
- We took some inspiration and guidance from a couple of example projects we saw in class, most prominently Express Twitter. Sometimes, the best way to figure out a tricky bit of code is to see it "in the wild."
- Thanks to our excelllent instructors, Hammad Malik and Zakk Fleischmann, for their ongoing support and encouragement.
- A special shoutout to our fellow SEI2 classmates for volunteering pictures of their beloved cats and dogs for our seed data! They are all the best boys and girls.