(I previously blogged about building Story Peddler here)
What does a bootcamp grad work on when the bootcamp is over? (Other than the job search, LeetCode challenges, networking, hackathons, and endless DSA practice.) Well, a good place to start is with old projects, which is where I turned when I finished up with Flatiron a few weeks ago.
The idea for Story Peddler came from a friend of mine, who wanted to take her narrative planning to a virtual platform but wasn’t able to find an application that included an editable ordered list (for keeping track of plot points). The original application was a simple one-page JavaScript with a Ruby API backend that allowed a single user to create ‘Stories’ with associated ‘Characters’ and ‘Plot Points’. One focus while making it was for it to be flexible, just as usable for a person writing a novel as it could be for somebody writing a comic book, a film, or an arc for a table-top campaign. Within the time frame and parameters of this being a bootcamp project, I wasn’t able to incorporate user auth or other features I crowd-sourced from friends and twitter (like reference sheets for popular story structures).
I was thrilled to be able to return to this project with more time, and more skill. I especially enjoyed learning React for a separate bootcamp project and was eager to build on my knowledge of the framework. Here are a few things I did to set up Story Peddler 2.0(SP2) and what I have learned so far:
User Auth First
I set up a completely new repo for SP2, and the first thing I wanted to tackle was User Auth. Partially this was because I hadn’t yet incorporated User Auth using JavaScript and wanted to learn how to, and partially because I knew from experience that filling in authentications after the fact can be very complicated.
I read up on and incorporated JWTs, deciding to use local storage for my current user. In the past, with Ruby applications, I had only ever used sessions, so this was a new format for me. (For learning about JWT in a React/Rails app, I highly recommend this blog post)
Storing the user in the highest level means it’s easy to pass in that information to all other components, whether they are fetching associations of that user (for Story Pedder that would be any stories that the user has created) or if you are dealing with protected routes/authorizations on your front end (if a user is not logged in, my application will re-route them away from story creation forms back to the log-in/sign-up page).
Translating to JSX and introducing Routes
When setting up Story Peddler 1.0 the first thing I did was build out my three creation forms: New Story, New Character, and New Plot Point. In SP1 these forms were in the HTML file and a handleClick function made them visible on the DOM, or hidden again. For SP2 I gave them each their own route but was still able to copy the original forms to start with. Since React uses JSX I did have to change a bit of the code, like changing ‘class’ to ‘className’.
In SP1 I had all of my API requests in one class and the corresponding DOM control functions in another. For SP2 I moved the API requests into the component class rendering the form. Most likely to be refactored at some point, as having this many functions in one class can make it a bit bulky, but for building out it was a reasonable separation.
Another change I made was in the story view function. In SP1, I created a drop-down in the header where a user could select a story to view on the DOM. Since I now had user pages to play with, I decided to forgo the drop-down and instead created story cards for the user page. From the display of cards, a user can select one to view and from there gets their options to edit or delete elements in a story.
Having specified routes for each story fulfilled another function I had to previously leave out. Now a user can send a story to somebody else to view. In SP1, a story could only be viewed after selecting it from the dropdown (or after creating it, when it would automatically append to the DOM). Now, if a user knows their story id, they can go to /stories/:id or send that route to somebody else.
<Route exact path="/stories/new">
<NewStory user={this.state.user} />
</Route>
<Route path="/stories/:id" component={ShowStory} />
<Route exact path='/characters/new'>
<NewCharacter user={this.state.user} />
</Route>
<Route exact path ='/plotpoints/new'>
<NewPlotPoint user={this.state.user} />
</Route>
Better Design
While I haven't entered the stage of the big design updates I have planned, I did take a few moments to review some of the feedback from SP1.
For example, here is my new story form from SP1 vs SP2:
Not perfect, but with just a few CSS tweaks the spacing looks so much better, and taking that time during the first iteration would have made a big difference.
More to come
So far Story Peddler 2.0 has been extremely fun to work on! Even though it’s an application I already built to completion, doing it in the React framework makes it feel completely new. At the time of this post I would estimate I’m just over halfway through, and excited to get the brand new Story Peddler 2.0 hosted and shared for all types of writers and creators!
Top comments (0)