Not much to report in the workplace however, I finally finished a drawn out, portfolio project that I had been iterating on for what feels like half a year!
The site is now called Road Less Travelled (previously named Geo Travel Holidays, just one of the many big changes made as the project scope moved) which began as a static site when I was learning about web development early on. It is a fictitious travel website with a geological theme. The content includes potential sites of interest with text and images displayed in different UI formats.
The site repo can be found here and is hosted on Github Pages and Netlify.
The main difference now with the current version, is a migration away from just html and css files which were becoming messy to manage and scale, to using React.js with create-react-app bootstrap site. I'm really pleased I managed to get this far because it stands as a testament of the hours put in so far on progressing on a project with a personal touch, iterating on and improving both in the content but also the structuring. I recall when I first started learning React, that I would never understand the concepts. To be honest, it is still a puzzle to me but as I add layers of complexity, I am sure it will begin to fall into place as context and learning go hand in hand. I didn't think I would be able to produce a project with the library but here it is!
Some of the Pain Points I encountered:
- As I had done from the initial html and css site, the React project had too much clunky custom code which was not flexible to maintain and style. I needed to seek design patterns that were tested and responsive, so I researched and solved most of the components solutions with UI libraries.
- Getting the React project on Github and Netlify. It was all well and good having the site work on localhost:3000. But when it came to build and deploy, I fell over here even after doing research on google, Youtube and Netlify forum. What I should have done first is remove files from the html / css project which were conflicting with the deployment process and move the React project files to the root. After doing this and then creating the Netlify site again, I received the npm run build autofill during the deployment settings. For GitHub, I had to install gh-pages dependency in the terminal and then in the repo GitHub pages section, use gh-pages branch to deploy from.
All in all, I am pleased with the advancement so far. I would like to add to the site though to give it a more professional appearance:
- There are a couple of bugs with the quote generator: it doesn't always generate a quote when you click on the dice (not sure why this is as my knowledge of APIs and using them in React is next to none) and on mobile because of absolute positioning, it overlaps on to the proceeding component below.
- Add a well styled contact form with client side validation. Perhaps Netlify integration could work here as a form that can accept a finite number of submissions.
- Flesh out the travel sites more, replacing lorem copy with actual text about each location.
- Add more travel locations, media and copy text.
- Some sort of booking or selection of locations or itineraries.
With this many improvements, the single page app loses its point and owes it to be created with routing to different pages say for each continent, country, or themed locations. I guess I have to learn React Router or Next.js now!
I have another project with Drupal CMS lined up but I would like now to focus on finishing the front end engineer learning path on CodeCademy before starting this next project. Onwards and upwards! 💪🏽