Most of the time, job-seekers in the software development field are given the recommendation to complete a mock technical interview to prepare for what a real technical interview might look like when applying for developer jobs. These mock interviews are given to test a potential hire on their foundational knowledge of a programming language, arithmetic problem solving ability, and perhaps framework or library familiarity. There are countless resources available online, and luckily I found an instagram account that posted a study guide for a basic tech interview (by @champagnecoder).
There are also a few resources that help coders practice algorithm problems, some of which are:
I want to start this post by stating that I have had, by far , the most rewarding experience coding for this latest project. The direction I decided to take this time around was heavily influenced by the fact that this is the last project before graduation. I wanted to go all out and do a fan page for my favorite k-pop group, but decided against it as I do not think future employers would find it as exciting as I do. I went with plan B, a positivity app. These have been stressful times for a lot of us and social media is a boiling pot for advertisements, insensitivity and at times, harsh cruelty. I thought a positive place to go to would be nice, and I came up with positive-point. The idea came from my friend who showed me a site that had nothing but good news, both national and international. He visited the site a lot which explained his unwavering good mood.
I started with a general file and created a Rails API backend and React frontend. I wanted user login capabilities so I didn’t use the API tag when creating the backend. Once I had both parts set up, I started installing some dependencies that I required for the project, including redux, boostrap, react-router-dom among a few others. This was when I started thinking of which routes I should create and began working on the Navigation Bar component first. Letting user’s see a navigation bar that reflected their login status was a feature I wanted to include and to do this, I had to refer to the react-redux capabilities and my sessions route in my API. I found a way to track a user’s status without Redux but I wanted to use the store functionality of Redux to reduce the amount of bugs and promote consistency throughout my routes and events.
Once I had my routes figured out, I started working on individual containers and components. My app model has users, goals, post-its, stories, and comments. At this point, rendering the seed data I created in the API onto each route was the next step. While stories, post-its, and comments are shared data between users, goals are not. The home page is meant to show only the current user’s goals. To implement this structure, I used a filter on the goals user_id to match the current user’s id, allowing me to then map that data into a goals presentational component (shown below). I followed this flow for additional routes showing the user’s post-its and stories.
{this.props.goals.filter(function(goal, i){
return goal.user_id === props.userState.id
})
.map((goal, i) =>
<GoalListItem key={goal.id} goal={goal} user={props.userState}/>
)}
Side Note: I modified the default port that the backend would listen on to receive requests to “3001” , all fetch requests were made to this port while react ran on “3000”.
From here, I began to work on creating new stories, goals, post-its, and comments. I started with stories and rendered a form on the stories page for debugging. All actions and reducers were placed in a separate redux folder. The submit button on the form would trigger an event listener that would call to the action that makes the POST request (shown below). Based on the response, the reducer would then update the store value to include the newly created story. I plan to include error messages in the near future as well.
export const createStory = (formInput) => {
return dispatch => {
fetch(`http://localhost:3001/stories`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: "include",
body: JSON.stringify(formInput),
})
.then(resp => resp.json())
.then(story => dispatch({type: "FETCH_TO_CREATE_STORY", payload: story.attributes}))
}
}
Overall, I sincerily enjoyed creating this app and would love to continue adding features, options and styling. With more time, I’m certain this could very well be my greatest coding achievement. I implememnted a lot of what I know but I am hungry to learn even more and make my way to becoming a more eager and accomplished developer!
Working through JavaScript can get complicated fast if you are not familiar with how properly use FETCH requests to either create or update to your API. We have to start out by familiarizing ourselves with the different components that make up a complete FETCH request. For this example, I will build a POST FETCHrequest to show how to update newly created data into your Rails API database.
Using FETCH allows JavaScript to access and manipulate resources asynchronously accross the network. It does those things through resources and requests. You can find more detailed information on the different optional properties of FETCH applications here.
Firstly, you want to identify the API URL you will be using. My intentions below are to create new Character object with name, age, and favorite color as my parameters, so I will be using my characters route as my API.
postFetchCharacter(name, age, favorite_color){
return fetch(`http://localhost:3000/characters/`, {
method: "POST",
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
name: name,
age: age,
favorite_color: favorite_color
})
})
The method: "POST is used to send data to a server to create or update a resource. In this case, we are creating a new character. Headers contain adittional data that is passed to the API in order to help the server determine what type of request it has to process. The body property is used to pass JSON string as an input. It is important to note that headers should be a JSON object while the request body should be a JSON string.
Secondly, as the information is processing, we must interpret the promise and response.
postFetchCharacter(name, age, favorite_color){
return fetch(`http://localhost:3000/characters/`, {
method: "POST",
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
name: name,
age: age,
favorite_color: favorite_color
})
}).then(response => response.json()) //new code
.then(data => (console.log(data) //new code
These two lines of code will take our the response to our request and give us the updated information in accessable data.
Here’s how:
This was one of the funnest projects I have EVER had. I wanted to start on this as soon as possible and had to quickly choose an idea that would best suit the requirements and I decided on doing something festive to celebrate what’s comning around the corner. I have so much to be grateful for this year and a big part of it has been engaging in this path and sticking to it.
This section has been very fun and very rewarding. At first it seemed odd how the lessons were structured and it even seemed as though some had been switched around a bit but that was okay because gradually, all of the bits started to make sense, in an applicable way.
The easiest part was setting up the Rails API as our server, seeding and generating our resources. Getting all of our information to JSON format was also pretty straight forward with the serializers. Where I began to get stumped was during the times I would have to deal with the fetch requests. Using the GET was simple enough and I had my seeded data on display with JS in just time. Using POST and PATCH, however, was the tricky part for me.
The way I have my forms set up for generating new objects (Characters and Gifts) or editing them, it required me to include my knowledge of how these requests are meant to be processed from back in September when we were first learning about Ruby forms.
Recalling that information wasn’t the problem, but translating it into JS was. For reference, here is a snippet of my Server class in my JS frontend.
static postFetchCharacter(name, age, favorite_color){
return fetch(`http://localhost:3000/characters/`, {
method: "POST",
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
name: name,
age: age,
favorite_color: favorite_color
})
})
.then(response => response.json())
.then(json => {
let newChar = new CharactersAndGifts()
newChar.renderCharacters(json)
console.log(`characters rendered..`)
})
Oddly enough I really do think I enjoy fetching now. This function returns the fetch request I made with the option of POST with headers and my JSON stringified body. The request is then completed and my other functions are rendered onto my main screen. Initially, this function did not want to accept the parameters that I provided but that was until I realized that I had been feeding it undefined lol.
This was all in all a really fun project to complete and like others before it, I want to improve upon this one whenever I get a real chance.
There’s so much that can be said about how much my understanding of code has changed the way I look at the world. The way our technology works is no longer as big of a mystery as it was before. The terminology, environment and versatiliy make it such a large creative outlet that the rendered efforts make so much possible. I know technology can only go so far but as a tool it’s one of the greater one’s I have in my arsenal in this drastically changing world.