I left off with just a simple home page, and nothing much afterwards. Sad to say, I still had not created a footer for the website, but I made up more with additional pages and content. I did not just made new content, but restructured old content as well from lessons that I had learned from videos and books.
To start, I added a small section to show “newly added” cards that will be up for sale on the store website. Right now it is a basic JavaScript object that is “Card 01” to “Card 04” with an image of the actual back faced card. It was a fun little experiment, but I did not knew what else to add to the home page; thus I needed to start making the inner pages.
First, I made a simple About page with an unique component to display alternating content which an image or logo was on one side of the page with the text on the other side then it switched with each alternative row. Image left, text right; then text left, image right, and etcetera. Most of the content is just Lorem Ipsum, but the images are the mana symbols just to give it some Magic The Gathering flair.
Then I created the 404 error page; the common website error where someone was trying to reach a page that does not exist, or just pathed wrong. The way routing works with React is that the 404 page is mainly treated as the default case of a switch/case statement where it just lands by default if no matching case was found.
With an error page out of the way; users may need to get a hold of a webmaster to tell them to do jobs correctly. Thus, I made a contact page with a form. Right now the form will submit values, but they are just going to a simple React store, and nothing else. At least it has some validation, but it does need more to make sure it does not get hit by spam with both captcha and honey-potting.
With the creation of the form; I was trying to figure out a purpose of the original contact section of the page layout. Then I remembered a section, of a page layout, usually reserves for signing up for a newsletter, and I decided to make it a newsletter subscription section. Again, it does not do much at all like the contact page.
At this point I did a simple restructure of most of the components I created so far. I discovered that React components can be namespaced, and I decided to namespace all child components. Furthermore, I decided that all view components will now house a page component that will now set the header, footer, newsletter, and the message components. Wait, message component?
After creating the validation for the Contact page; I felt there needed to be a message section that can display either a success, warning, or an error message underneath the header section. This one took a while to get it working correctly when I was setting it up with prop-types to make sure props were validated from any of the view components to the message component. First, it needs to be hidden if either the message prop is null or the message visible property was false; otherwise it will display a message with the correct semantics, and will display a list of errors that were made that caused the message to prompt.
Finally, and I am not sure if I really need to use this, but I did want to use a state management pattern like Flux or Redux, and I decided to go with the latter. Why? Well this will website will eventually have a login system, and I just wanted to demonstrate my skills with using Redux.
There will be other use cases with Redux, but right now I am going to be developing the user management system, and the first thing to do is create a registration page. The account creation is incomplete at the time of this post, but I will be working on it for this week coming up. I will need to make a “hashbrowns” system.
What? Hash Browns? I just like calling the hash/salt system hashbrowns ( :) ). Anyway….
After the hash/salt, I will need database integration, but I did got a MongoDB system set up with a Node.js server for the React project. This server will use Node.js, Express, and plain MongoDB driver; no Mongoose. Again, I made that decision just so I can demonstrate that I can use the MongoDB driver library without any other libraries to leverage an ease of use experience. Honestly, I am not having problems using just the driver.
Quite a bit happened, but more to go with this project. Have a good one all!
Posted using Partiko Android