Tag: web

React QR Code Generator

React QR Code Generator in use.
React QR Code generator in action.

As a side project to keep my mind sharp while on break, I decided to work with React some more. Most of the work I have done so far was with plain react not using external libraries. I decided to work with some external packages on this project. I am also avoiding the use of APIs as they create latency and I wanted to dynamically create the QR code.

First I created a plain JS Vite project using:

npm create vite@latest

React-colorful

I found two useful libraries for this project, qr-code and colorful, which will allow me to create the QR codes and pick their colours visually. React-colorful outputs a hex value of the colour which works well with react-qr-code. React-colorful works by having the colour value as a state and the onChange as the set function. This allows my site to dynamically update the QR code when the colour values are changed.

QR Codes

The qr-code library uses a fairly simple format for generating QR codes as shown above. As the three middle variables are states any time any of them are updated the element is re-rendered. This means any time the user changes any of the three the page will dynamically update the QR code. QR codes are output as SVG tags within the HTML DOM and therefore you cannot save by right-clicking. This would be an issue if I wanted to host this site publically but the current format is fine for my learning.

Conclusion

I made a few small HTML and CSS changes that cleaned up the look of the web app and I am pretty happy with how It has turned out. React has certainly been a great tool to add to my repertoire this year. It has made the development of web applications significantly easier than the traditional PHP method that I initially learnt. It makes prototypes such as this much quicker to produce and the variety of packages and APIs available are great assets.

Creating a RESTful API

For a class on advanced web development, I was tasked with creating a RESTful API for events using NODE.js and Express. All the data is stored in a MySQL database and was formatted using ‘id, name, description, start date, end date’. I also created a homepage that includes the documentation for said API.

RESTful API documentation.
Homepage created for API.

I used a tool in VS Code called ‘Postman’ which allows for simple testing of APIs by allowing quick creation and viewing of HTTP requests and their responses. As this project is just a proof of concept and not meant for hosting on the web it lacks any sort of validation but allows any user to view, create, update, or delete any event in the database.

The back end is routed using Express which allows for the triggering of functions based on the URL and method of the request i.e. http://localhost:3000/events would call a function in the server that selects all events in the database.

RESTful routing code
Calls the getAll function.

This project was an interesting one and presented new challenges, I have yet to do much web development that did not involve making websites so the opportunity to create a RESTful API was great. It allowed me to learn more about the use of API’s and the formatting of HTTP requests.