node.js

React and MySQL

development

Recently I have taken a closer look at hooking up a React app to a MySQL database. Mainly so I have a better understanding of alternatives to local storage or an app that relies on a running express server to hold persisting data.

So far through the use of node.js, the ‘mysql‘ package, and Wampserver, I have gotten a local MySQL database to connect with the react app. Doing so has allowed me to practice querying and creating a database, creating tables, inserting information, and selecting information from the database.

Next, I’m aiming to connect it to my website server instead of just a local connection. Then I can really get to grips with manipulating stored data for future projects and potentially CMS creation.

Bookmarks visualiser

projects
Bookmarks visualiser project screen shot of parsed bookmarks file.

To go back and solidify my vanilla JavaScript knowledge I decided to build out a bookmarks tool. In particular I wanted to make my bookmarks more visible and navigable, it has particularly annoyed me the way chrome does not have a directly viewable interface for them. So, using JS, SCSS, HTML and node.js I went about creating something I wanted to see.

To cover the most widely used file formats possible I found ways to parse and visualize exported html, Chrome json bookmark files and Mozilla jsonlz4 files. Originally I wanted the tool to auto read either the Mozilla or Chrome files depending on the browser in use. However, I soon came to realise that to do so you would have to access the users hard drive and for obvious security reasons this is not possible. Or is at least legally frowned upon! So, with the use of a couple of JavaScript packages I refactored it so the user could choose a file via a file input element. The file then gets uploaded to the express server via Multer and read by the corresponding parser depending on the file extension.

Ultimately I created a version of what I had set out to accomplish and learnt a fair few things along the way (Multer, file uploading and limitations). But now I have a much more visible and navigable way to utilise my collected resources and references in my bookmarks. Hurrah!!

Readable (extra-curricular)

projects

Having completed the last required project for the React course ahead of time, and gone through the extra git course, I decided to take on the extra React / Redux project. Essentially it is an anonymous post and comment app where the user can vote up or down on a post and / or comment and has features to create, edit and delete posts / comments. Oh, and of course I made sure it used responsive design to suit all screen sizes, like all my recent projects. (github)

Screen shot of Readable app home page displaying three category posts

This project was a little more open and detailed than the previous one, which meant I got a chance to use a few more hooks and really help solidify my understanding or React and Redux. All whilst challenging myself with a tighter schedule. I also made sure I incorporated styled components from the beginning, and again, helped me form a greater understanding of it’s use. Styled components certainly feels like it suits being used with React!

Being able to complete the project within the allotted remaining time and incorporating all the features I wanted has boosted my confidence using all the technologies involved. I learnt more about using the ‘useEffect’ hook by getting it to look for changes in specific data. Furthermore, using nested styles and passing props in styled components.