My Ambitious Project Idea to Learn React
Plus whatever else I have to to get this app finished.
So right away let me introduce this project. A vegan recipe app for my mom to store her new recipes that she is creating, and to view those recipes when needed. This idea came to me while I was meditating. The thought was simple, I could build this with React.js, which I have just started learning. Next the application has meaning and purpose to myself and the ‘client’ (my mom). Third it ties together a subject I am very passionate about, veganism. This blog post however is about the project itself. It will deal with learning React.js primarily, along with Mocha and Chai for testing, Webpack and Babelto bundle the project together, Firebase to handle the recipe data, atomic web design while not using bootstrap (file size is way to large; heard from local meetups), and really any other library or tool I need in order to complete this app.
I am planning for this to be a series of irregular blog posts about my progress on this app. I will include my struggles and how I hopefully overcome them! What I am learning or what exciting new feature I got working. I will have screen shots of the code and the site pages as they come along. I must say before we get going I am very excited I came up with this project idea. It has been something I was lacking in my self taught journey. Going through tutorial is great and I will be going through a bunch on Egghead.io throughout this process. However this project should scale very nicely with my learning curve into React. I have thought of validations with regex to check for words like chicken, ham, etc. I could have an admin login part. But first let me show you what I have so far.
The basic pages of the site
As you can see there is a Home page that says ‘Show recipe list’ it will also have a link later that will allow the user to add a new recipe. Next is the list of recipes themselves. Once one of these is clicked the app takes you to the details of the recipe which has the name, created date, ingredients, and instruction. Quick note, I showed this to my mom and first question was where are the pictures? I could not believe I forgot all about that! So a picture will be added later on.
On that thought here is the link to the Recipe app itself
I am implementing an if statement in the server.js file to check process.env.NODE_ENV !== ‘production’ so that a Webpack dev server is used for development and use express while in production. This was something I saw a lot while learning Webpack with regards to React.js. I did learn gulp just before this but with the easy setup Webpack has I made the switch so I could focus on actual code again! Here is the Webpack.config.js file.
Code Pictures and Explanation
With the RecipeDetails Component I am going to use Firebase to bind an endpoint to the state so that I can display the data below in the render method. I did run into some problems with no data being displayed since I do not think Firebase was able to return before render was called. This is something that is not longer an issue but the solution was to wrap the list of ingredients output in an if statement. Something I feel is a very poor answer and will require further investigation on my part. That is unless a reader knows the answer; in that case feel free to leave a comment.
The code for the recipe details component.
Maybe the gifs are too much for displaying the code and should be left just for the website itself. I may change this in the coming post, however I just realized how easy it is to create these gifs from pictures so I added a bunch!
The data which is stored with Firebase will be in JSON format since Firebase in a NoSQL DB storage system. As this is my second app with Firebase, first was a tutorial, I am not very sure of the best way to structure the JSON data. Currently it is an object that has one property which is the listOfRecipes. Obviously a list of ‘object recipes’ that have properties on them, which are represented in the RecipeDetails Component; name, created date, ingredients, and instructions.
The website used to show the nicely formatted JSON can be found here.
In the end I believe this blog series will be a great way for me to express what I am trying to accomplish while learning and solidifying in my head, React.js! Maybe I could help some other beginner along the way or possible get feedback and input from anyone who has taken the time to read these posts.
I will try my best to keep the post coming as much as possible but it will be a slow process as I work a construction job during the week, plus I still have to learn React.js itself along with building the app!! lol Leaving there so I can get back to work! Excited to hear the input my mom is going to provide for UX since in the coming year more and more Baby Boomers are going to retire and need something to occupy their time. Like the younger population they will need apps to help them in their daily lives. Well this one is for you mom! Hope throughout this process you can even teach me how to cook as we both take the vegan lifestyle path and never look back!!
Originally published at natacseanc.wordpress.com on November 28, 2015.