dev log 02

Aside from some personal things I needed to take care of, I ended up taking a much needed week off to recover mentally and physically after putting a lot of effort and work on pushing out some new personal projects as well as my personal portfolio website, which I'll go a bit more in-depth below.

Despite being only really 23, I realize I'm not as young as I used to be and pulling any form of an all-nighter with lack of decent sleep to recover makes me feel absolutely horrid and groggy.

However, it just goes to show that dedicating an allocated amount of focused time on a dedicated task will show dividends in the end when you finally end up finishing it.

As a bit of a recap, I have set myself out to essentially strengthen my resume. The ways I have sought out to do so were by revamping older projects that I had left unfinished some time ago and also adding some new more refined projects. I would showcase these projects on a personal portfolio website that I had previously started work on and add links & demos to all of this on my resume.

To start it all off:

Forecast

Forecast is the first project that I decided to tackle on my newly taken path. I did a bit of a write up on Forecast in dev log: 01 if you would like to read up on that.

But a brief run down of Forecast is that it's a weather forecast web application that pulls in the 5 Day/3 Hour forecast data from OpenWeatherMap's API and showcases it in a 5 card responsive grid.

Each card indicates the date, a description of the weather, an svg icon relative to the description of the weather, and the high and low temp. The first card will always be today's date.

Here's the github repo:
https://github.com/heyoitsJuice/forecast

And here's a pushed demo:
https://forecast-heyoitsjuice.vercel.app/

What were my take-aways from this?

• Skimming and rummaging through old code I have written is both hard and enlightening.
• Pushing web applications as a working demo seemed incredibly daunting at first, but after going through the motions, it ended up being incredibly easy to do so (at least it did with vercel).

Chello

Chello is the second project I decided to tackle. Just like Forecast, Chello is an older to-do project that I decided I wanted to revamp.

Based on inspiration from Atlassian's agile workflow applications like Jira and Trello, Chello is a rudimentary kanban to-do list utilizing Atlassian's very own drag and drop library

With wanting to try out and learn different technologies on the front end, I decided to also utilize a combination of Next.js and Chakra UI to build out the UI of this web application.

Here's the github repo:
https://github.com/heyoitsJuice/chello

And here's a pushed demo:
https://chello-heyoitsjuice.vercel.app/

What were my take-aways from this?

• There was a lot of complexity in working with a third-party library like react-beautiful-dnd and having to spend an ample amount of time to screen through the repo documentation and do a bunch of google searches was no question.
• Front-end is hard, yet fun. The main problem I needed to tackle was making the entirety of the to-do list mobile responsive.

Fuego

Fuego is a project I initially did not think about doing, but ended up completing anyways. To adhere to this idea of utilizing new technologies, I decided to not use Next.js and Chakra UI this project, even though I really wanted to.

Fuego is an open-chat platform that's very similar to Youtube's very own superchat platform shown on their livestreams. React and TailwindCSS were used to create the UI and Firebase was used to host back-end functionality.

I came to the realization after finishing Forecast and Chello that I needed to work on a project that spanned across both stacks. Chello was mainly a front-end based application. Forecast did a little better through utilizing an API, but it didn't really encapsulate the database portion of back-end.

Having a "full-stack" application would bring more diversity to my projects and I thought a chat app was the "simplest" solution I could build.

Using my prior knowledge on Firebase that I learned in my workplace, I decided to utilize Firebase's Cloud Firestore as my noSQL database option to host and render user messages in real time. To have registered users on the platform, I decided to make use of Firebase's user authentication, specifically Google Authentication for easy plug and play UX flow.

Here's the github repo:
https://github.com/heyoitsJuice/fuego

And here's a pushed demo:
https://fuego-heyoitsjuice.vercel.app/

What were my take-aways?

• Firebase is very streamlined, but at the same time comes with it's own set of problems in terms of usable code based on the version.
• TailwindCSS is such a blast to use compared to vanilla CSS. If you're a whiz at CSS, then TailwindCSS streamlines the process of implementing design into your application.
• I should have just utilized Typescript from the beginning since I ended up realizing that I needed to define PropTypes for chat UI anyways.

Portfolio Website

I've had a few attempts where I created a base foundation for a personal portfolio website from scratch, but I would always end up scrapping it after awhile, whether it be due to lost of motivation, responsive issues, tech stack regret, etc.

As a result of this, I decided to approach this in a different method by utilizing an already made template. The idea around this is that I shouldn't really re-invent the wheel.

After going through a number of "how to create an x y z website tutorial", I ended up choosing craftzdog's website as my template. I really liked the look and the flow of his website and decided to roll with putting my own spin on it.

The inspiration to utilize Chakra UI and Next.js for Forecast and Chello actually came from this portfolio website tutorial, so I have to attribute my own learning of those technologies to Takuya Matsuyama.

I redesigned the landing page of the portfolio website and even went on to learn how to use Three.js and make my own 3D voxel to put based on how much I liked his implementation of it.

A brief rundown of how I learned how to make a 3D voxel:

• Lots of youtube videos
• MagicaVoxel
• Blender
• .vox import and converter for Blender

Aside from the 3D voxel, I decided to keep the UI and UX flow of the Work and Post pages (basically, what's not broke doesn't need to be fix). I also added a contact page, which I'm currently working out the kinks for.

Go ahead and checkout the website over here:
https://justinclenista.vercel.app/

Overall Takeway

There's still a lot of implementations and upgrades I can do on these projects.

• Adding test cases through a testing library like jest or cypress is one thing I can do.
• There's a bug that occurs on my project Chello that causes the web app to crash after a few card drags into a newly added field called "In Progress" that I want to address.
• Implementing a database to cache created tasks on Chello is something that will level up the project for sure. Not sure if I would need a form of user auth to do this, or if I can just do it straight out of the box.
• The current 5 card implementation on Forecast doesn't really give meaningful high and low temps on days that are not today's date. Not sure why the data for the highs and lows are like that for future dates on the OpenWeatherMap JSON.
• Fuego is the the most complete project out of the three, but I'm actually unsure about how scalable the chat app is which is something I could possibly address via Firebase's database rules.
• I need to figure out a seamless way to implement a contact form for my portfolio website. I have the UI complete, but the actually backend that deals with managing emailing needs to be researched and implemented.

If you've come this far, thanks for taking the time to read through all of this! It's been pretty nice change of pace to be able to document my works and I hope to get better at doing so with more complicated projects in the future.