Welcome back to Malcome’s adventures… XD
This blog post is going to be tied to a React-Redux project that I have built but more on that later. The following is the frontend of the application: https://github.com/mfeinLearn/gifreacts-frontend. The following is the backend of the application: https://github.com/mfeinLearn/gifreacts-backend.
Before I talk about what I am building I like to ask you a question… I’m sure their was times when you where in a group chat with your friends or colleagues and where every time when you where trying to convey a point using a gif you would have to download a plug in or go to giffy.com or the other gif website to pick out the perfect gif for your sentence to invoke some type of emotional response.
Would it be great if after typing a sentence, word, or phrase and clicking on enter the perfect gif that triggers the right emotional response is attached to your text???!!! Well that is what I want to eventually build.
This is what I am building…not a messaging platform but a way to automatically have a user type a sentence, word, or phrase and have this program produce the appropriate gif to invoke the perfect emotion. For this MVP version I am only having the user input a word to query the giffy api then input an emotion and funny rating. This will help give me good data to expand upon.
There are two aspects of my application - the front end and the backend. The frontend is what the user sees and interacts with. In this application I am using React. The backend is where our database is written. I will be writing my backend in rails which makes it a… you guessed it… a rails backend. I have talked about rails in a previous blog post so I wont be diving into it that much in this blog post.
React is a JavaScript library for building user interfaces. Their is a couple of reasons why developers like react. One main reason is the reusability of the components used in react. Their are a few concepts of React that I will go over in a future blog they are as follows: ES6, JSX, Components, Props, State, and Life Cycle methods.
Sources: https://www.w3schools.com/react/ https://reactjs.org/ https://www.w3schools.com/react/ https://github.com/uberVU/react-guide/blob/master/props-vs-state.md