Finding a Perfect Fit with React
8 models, a custom written hash for my API, a dynamic form, submitting a nested dynamic object and dynamically creating all the objects from it, authentication with JWT tokens, utilizing hash router as opposed to the standard react router to utilize a single page application through github pages, and so much conditional rendering. Those are just some of the challenges I faced when I built my final project for Flatiron School. I’m going to talk about two of them today. Authentication, and my dynamic form.
Culturefit is a web app built with React & Redux, using Rails as an API for the backend. The app allows users to sign up as a “company” or a “job seeker”.
Companies can create screener surveys for job applicants, it’s important to note these are not quizzes, they are closer to personality tests. The idea being to help companies see past what is immediately on paper and find people who fit with their culture.
Job applicants can take screener surveys and their results will submit back for the companies to view and compare.
The very first challenge I faced was authentication. I’ve done authentication in php, sinatra, and rails before so I remember thinking, “This won’t be hard.” Famous last words! On the back end you are issuing and encoding a JWT token, on the front end you are storing that token in the local storage (which you can also use to keep the logged in state when you refresh the app), and use the “Authenticate” header to pass the token back to rails to make requests to the server. As another student and I found out though, CORS requests require an additional line in the headers to make authenticated server requests once logged in. “Access-Control-Allow-Headers” allows “Authorization” to pass to rails, otherwise rails will not receive it.
The next challenge I faced was setting up my dynamic form to create my surveys.
The concept was that companies could create really customized screener quizzes, whether that be true or false questions to look for outgoing/introverted employees or surveys with many answers that determine what attributes you prioritize as a programmer (for example, speed, readability in code, ram, etc. Different choices would add points to different attributes.)
This lead to a pretty complicated state, form tracking, and submission.
Then I map the questions array, creating a label and input for each question. After that I map over the answers array and create a label and input for both the answers and attributes.
As you can see I’m also assigning a few onChange events, these log the contents of the fields to the state.
In order to handle these objects, we utilize the index of the array (which I’m tracking when I map over them). Each function takes in the index, or in the nested functions case the index of the outer and inner loop, so it can assign our values dynamically. First we save our questions array to a variable (using the spread operator), then we utilize the parameters passed through the function to update the specific element we are changing, then we use setState to update questions.
The buttons to add questions and answers are using a similar method, I save a template of what a new question (or answer) looks like to a variable. Then I’m able to use the spread operator to combine the new information with the existing information, which adds the new object. React does the rest when state is updated, displaying the new field.
Creating it on the server side was an entirely different story. The first thing I had to do was learn how to deeply nest strong params since I was passing a deeply nested object, after that my create function required creating a survey, then checking if it saves, and if so, iterating through the questions and making each question, if the questions save, iterating through the answers/attributes and creating those. (Which I’m not showing off until I’ve refactored it.)
As for future goals for the project, I’m currently finishing up a message board with asynchronous posting utilized Redux Thunk, and I am hoping to get the site (which is *nearly* fully mobile friendly) fully responsive.
If you’d like to check out the project on github you can view the backend code here
Or the frontend here
