The end of the beginning

Finalizing pushes to github from both repositories and the feeling of accomplishment rushes over me. I quickly realized this wasn't the end this was just the beginning. My time at flatiron school has prepared me for this moment. A moment to look at all that I have accomplished in just six months. This brings me to my new app tail swipes. The inspiration came from the start of the pandemic when my golden doodle Ozzy had no one to socialize with. When I started flatiron I knew that I wanted to save my favorite idea for last. Using create-react-app made this dream a reality. A mock app that simulates matching with other dogs to message and have play dates. This seemed easy enough, right?

I was very wrong. Planning this app required me to learn all facets of react and its best friend rails very quickly.Let me walk you through how I started my profile object from back to front. I scaled up a rails backend with postgres flags so that it was easily deployable on heroku. I then started by generating profile controller, model and fast-json's serializer. I knew my profile model would consist of a name, image, and a match boolean. I checked the pending migration then migrated once everything looked good. Now it was time to gather some seed data.

Using my plans I generated json data in the seed file and realized I don't have an easy way to get pictures for my profile. I have a million pictures of my golden doodle but this wouldn't satisfy variety in a mock profile system. This is where https://placedog.net/ came in handy. This website is able to generate photos of random dogs and allows you to edit the url to include sizing and ids if you want consistant pictures. Next it was time to generate fake names and matches. For names I used the faker gem. For matches I used rubys rand() method to generate match booleans 0.5 < rand(1) and that did the trick.
Image by Andrew Martin from Pixabay

I checked out localhost:3000/profiles and everything looked good. Now it was time to create-react-app tailswipes. I npm i && npm start then removed the default logo and components.

I'm using redux for state management in this application so I imported redux and created my store in index.js. This allowed me to import provider and wrap the entire app component.
Next I made the profile container component, profile component, fetchProfile action and profile reducer. At this point I had to import redux-thunk middle ware so that I could use return functions in my actions. After applying the middle ware I started coding out the fetch to the backend. Testing this made it so much easier to make sure I was getting the data I wanted.

//Chrome Console

fetch ('http://localhost:3000/profiles').then(r => r.json())

}

Which returned a promise that I was pleased to see.

I then started writing out my reducer functions so that when my actions are dispatched they can call on the reducer to return the state and loading objects (pure functions) based on the dispatched action type. I then proceeded to my profile container and connected my profile container to the store import { connect } from 'react-redux'. This allowed me to mapStateToProps and mapDispatchToProps. I used componentDidMount() and started the initial pull of data using fetchProfiles() dispatch action from props.

componentDidMount() {
     this.props.fetchProfiles()
}

Then I mapped over the props state data and created profiles. Once the profiles were showing up in my front-end localhost:3001 I was able to get to work styling and working on different parts of the functionality.

This is the basic flow of how I created my profile object from back to front. In my next article I will be reviewing react-tinder-card
and how I started my message feature. Let me know your thoughts in the comments. Thanks for reading!