A minimalist with interests in personal finance, self-improvement and software development.

Growing up, polymaths like Leonardo Da Vinci and Elon Musk have always been my inspirational figures to not just relentlessly pursue knowledge but ultimately bring about positive change.&nbsp;

To that end, I believe that being in the tech industry as a software developer would propel me towards this goal.&nbsp;

👨🏻‍💻&nbsp; 🍃&nbsp; 💻&nbsp; 🥡&nbsp; &nbsp;🧗🏼&nbsp; 🚀

This dashboard is made to offer cryptocurrency enthusiasts/traders/learners a convenient platform to view crypto-related news article, tweets, price action and get minutely price update across the top 300 cryptocurrencies by market cap. The web app is mobile optimized for even greater convenience.

[! This project is not maintained anymore]

The nature of cryptocurrencies is that they trade 24/7, are comparatively more volatile compared to most of the other financial assets and that news sources can be disparate.

I wanted to build a web app where users can track the prices, news from media outlets as well as updates from Twitter where a lot of discussions take place on.

User is able to view information on the selected coins and check the price movement on the price chart with minutely updates.

There is also a financial indicator (Fear &amp; Greed Index) 

Related news articles rendered based on the selected coins.

Recent tweets will also be fetched from Twitter based on the selected coins. Users will also be able to interact with the tweets (reply, like, comment)

User is able to add coins to their favourite watchlist to keep track of price changes with minutely updates visible on the cards.&nbsp;

As this was my first web app built with React, I used this as an opportunity to challenge my understanding of it. I experimented with various hooks like useEffect, useState, and useContext to come up with functionalities that I wanted for this app.

There were a total of 3 APIs used (coinGecko, GNew.io &amp; Twitter) for this project with different setup and data structures for each of them. It proved to be quite a challenge at the start to find suitable APIs and then to set them up and lastly integrate them smoothly into my app.

To build up the price information cards and graph, it also involved a lot of data manipulation (for example for the price cards, I had to consider the range of coin prices and have to manipulate the pricing data to show prices in 2 decimal places if the price is &gt; $1.00 and 5 s.f. if the price is &lt; $1.00. For prices above a thousand, I have to format a comma separator between the numbers as well. There were a lot of considerations and optimization for the best user experience.

But ultimately, dealing with 3 different APIs simultaneously had made me learn tremendously about data handling.&nbsp;

I also spent a considerable amount of time with CSS to ensure that my web app is optimized for both desktop and mobile.

I decided to style most of the app with CSS stylesheet (which took longer and was more tedious) instead of using CSS frameworks so I could have a better understanding of how CSS works under the hood which I believe will benefit me in the long run.

TheStoneSyndrome is a photography business that I started in university. I used Squarespace to design the website back in 2017 but have since coded the website using React.js and Next.js for SEO optimization.&nbsp;

When I started my photography side-hustle, I had no coding knowledge so I had little choice but to stick with Squarespace for their hosted services. After picking up web development, I thought it would be a great opportunity for me to code up the whole website to completely replace Squarespace so I could save on the fees and try out a new framework (Next.js) in the process.

The homepage banner images make use of parallax scrolling effect for a more immersive experience.&nbsp;

A contact form is implemented using EmailJS with Recaptcha.

The website is optimized for mobile as mobile traffic accounts for 60% of all traffic.

Through this website build, I learnt more about how NextJS can enhance a react web app for better SEO performance with pre-rendering.&nbsp;

Another learning point is dealing with media assets like images and the importance of using the correct image sizes to balance between image quality and loading speed. Displaying media also poses new challenges such as having to export images in dimensions that have better viewing experiences on mobile devices.

Other learning points include accessibility such as adding alt text for all images.&nbsp;

MoMoWonderLand is a Choose Your Own Adventure game in which the player must avoid the urban legend MoMo and escape a prison.

This game was inspired by the TV series 'Mr. Robot' where the main character had to win a Choose Your Own Adventure game to prevent a&nbsp;catastrophic nuclear meltdown. After having learned HTML, CSS, Javascript, and Jquery, I was wondering if I could create a similar game. And so I tried!&nbsp;

At every stage of the game, the player must choose an option to proceed. The option chosen will lead them to different game paths which affect their chances of survival.

They can also collect items that they deem useful throughout the game

The player will be able to use items collected at certain stages&nbsp;

Game controls are added for better gaming experiences

• Change the speed of typing animation (some people don't like to wait)

• Homepage button to quit the game and return to homepage (In case it's too scary)

Certain routes lead to game stage where players have to input the correct answers to progress in the game

This is to add more variation to the game to keep things more interactive instead of just pure clicking

Certain options may lead to jumpscare (controlled by preset probability of 40% chance) which will immediately end the game.

Most of my time and effort was spent designing the game routes, finding suitable visuals, and photoshopping images to fit the narrative of the game.

In terms of technical challenges, as this was my first time using HTML, CSS, and Javascript to create a product, there were definitely difficulties involved.

For example, I spent a considerable amount of time creating and modifying classes (and the extension of) to suit various situations in the game. Any minor changes in a particular scene (video asset instead of photo, scene with 2 options instead of 1 option, jumpscare vs no jumpscare) would require some sort of permutation of the classes.&nbsp;

I also had issues with CSS stylings at the start. However after some researching, documentation reading and trial and error, I turned the challenges into learnings.&nbsp;

One learning point I took away from this game was to avoid taking the easy route. The flow of the game is that one game node (scene) will lead to another node based on what the player clicked. I had two ways to do this, either through creating multiple functions where one function would have the display text and assets coded in or to make use of classes to handle the routing.&nbsp;

Creating multiple functions was attractive as it was easy to start off with. Compared to using classes (which I was unfamiliar with), hard coding functions seemed more attractive to me. 

However, when I considered the cons of doing so, I realized that as the number of nodes grow, the number of functions will grow linearly which can be inefficient compared to classes where the growth is less than linear as classes can group similar nodes together.&nbsp;&nbsp;

Thinking in terms of scalability made me realize that spending the extra time to understand classes will help me make a better product that is not just scalable but more manageable in the long run.

After my game was built and tested by my friends, they mentioned that the game wasn't mobile-friendly in portrait mode. Considering how often people would use their phones to test out web pages, I then decided it was only right that I make the game more accessible to mobile users. I then did some mobile optimization with media queries.&nbsp;&nbsp;

Full-stack portfolio of my personal projects with admin panel for CRUD of various content such as Projects, blogs as well as about me details.

I wanted to build a portfolio site to house all my personal projects. In additional to that, I also wanted to implement a fuss-free way for me to edit the content. Having a static site would mean that I have to edit the source code for every change which can be a hassle.

Having a full-stack portfolio page with an admin panel will allow me to quickly create, read, update and delete content for better efficiency, and hence, shizhenggg.dev was born.

Besides having a project summary page, project detail page, and contact form on the homepage, there are also other features on the website.

There are 3 types of user. Public, basic and admin. Public user can only see project posts while basic users can also see blog posts in addition to projects. Admin will be the only type of user who can create, update and delete content on the website.

User can login to the account if they are admin or basic user. Else, they can also sign up for a basic account.

Email validation and password validation are implemented at the sign up page. All checks are done on the backend.

A welcome email will also be sent to their registered email address once the account is successfully created

Basic account will give the user access to the blog page

User can also reset their password (done through email verification)

Changing of password is supported and can be done through the profile page. The usual password validations will apply here.

Deletion of an account is supported and can be done through the profile page.

Account with admin access will be able to access the admin panel and make changes to about, project, and blog content on this dashboard.

The edit page is a rich text editor that supports the uploading of images from a local machine. Images will be hosted on a media cloud server automatically.

Prior to discarding drafts and deletion, there will be modals to prevent accidental clicks for these operations.

The website also supports dark and light mode

The website is also mobile-optimized for better user experience

This project was initially coded in the MERN stack. With Heroku's decision to remove their free-tier which I used to host my backend server, I had to migrate my project. I decided to try out NextJS as I could build both frontend and backend in one single repository. Also, I took advantage of NextJS's static site generation to preload pages for faster browsing experiences.

At the start of the project, I had some uncertainties when it came to using JWT for authentication and authorization. Using a self-directed approach, I began watching tutorials, reading articles and referring to code written by others to get a sense of how it can work which helped in my understanding and application to this project.

The key part of this webpage is having a rich text editor. With no prior experience in this, I took some time to find and implement a suitable one. I eventually stumbled upon EditorJS which is a block-styled component that returns data in JSON, something I was comfortable with. 

I also spent a considerable amount of time with image uploading. One of my requirements is that the admin should be able to upload images directly from their local machine instead of pasting an image link (which is much easier to implement but will cost the admin more time in the long run). After intensive research and trial and error, I finally got it to work by integrating Cloudinary into my project.

I usually use CSS style sheets for styling so I wanted to test out a new way to do things. 

I stumbled upon this beautiful and well-documented component library - Chakra UI which has all of the components I needed. 

As a result, my productivity went up as I spent lesser time styling and was more focused on the core functionalities of the project. Chakra UI is also perfect if you're a Naturo fan with their regular Naturo references scattered throughout their documentation 🍥

Twitter Bot provides 30 minutes update on Dogecoin prices denominated in USD with API integration from CoinMarketCap. 

This allows Twitter users to keep track of dogecoin prices while scrolling Twitter, without having to check prices on crypto platforms.

Doge coin pricing will be updated every 30 minutes. The data is fetched from CoinMarketCap.

Retweet and Favourite Feature (Influencers)

Retweet and favourite tweets of selected influencers every 30 mins if the 'doge' keyword is mentioned

Retweet and Favourite Feature (Popular Tweets)

Retweet and favourite popular tweets every 30 mins if the 'doge' keyword is mentioned

Retweet and Favourite Feature (Crypto Exchange)

Retweet and favourite tweets of selected crypto exchange and news sites every 30 mins if the 'doge' keyword is mentioned

This is my first coding project and prior to this, I have never created an app. 

It was challenging because I had no idea of what constitutes an App and how to implement one.

Everything was new and I had to learn how to create different functions that work well together to produce the desired features.

I had to work with Twitter's API as well as CoinMarketCap's API to fetch prices and Tweet them out on the Twitter platform. The retweeting and favourite features also requires more logic to search and filter out relevant tweets with regex.

Deployment was quite a challenge with Heroku as I ran into multiple issues with the integration.&nbsp;

I learned plenty with this attempt and had a ton of fun. There were a lot of headaches as I ventured into unchartered grounds but also enlightenment as well as I slowly figured things out. In the end, it was truly joyous to see a working app!

The RoundUp mobile app allows user to track their networth, income, expenses and investments all in one app, which solves the painpoint of the conventional budgeting app where tracking of investments is usually not supported.

There are a lot of budgeting apps available in app stores but budgeting apps that supports investments tracking are not so common. With two of my friends, we developed a mobile app that has net worth tracking (tabulation of income, expenses and investments) all inside an app.

Features marked with asterisk (*) are my personal contributions in this group project.

User is able to sign up for an account or login if they already have an existing account. 

The user will remain logged in even after the app is closed. Authentication and authorization are done with JWT.

Overview of login and sign up page

The investment components will be locked if the account type is basic. This feature is only available to premium users.

User can update their account details at the user profile page. 

Account type can be upgraded to premium with a referral code. 

User can also change the password or delete the account at the user profile page.

At the home page, user will be shown their current net worth, income, expenses and investment balances (past 12 months) presented in bezier charts in a carousel.

Overview of homepage bezier charts

User will also have quick access to access their income (Money In), expenses (Money Out) and investment information with cards at the homepage.

User will also be able to conveniently add new entries for income, expenses and investments from the cards.

*At the income (Money In) segment, the pie chart will display the income details sorted by category for that particular month.

*The bezier chart displays the income amount sorted by days of the month. 

*User will be able to change the month to view the income details at any month.

User will be able to add new entries from this page. 

User will be able to view specific entries from this page and make edits or delete that entry.

*There is also tabulation of total income per day as well as for the whole month as seen in the accordion component.

The expense (Money Out) segment has the same format and functionality.

*At the investment segment, the pie chart will display the investment details sorted by category (cryptocurrencies or US stocks).

*The bezier chart displays the total investment balance which updates daily at US market close using CRON job. 

*Prices for stocks and crypto will be fetched and updated in the ticker table at the lower portion of the screen.

User can tap into each ticker and view the transaction history for that ticker and make changes or delete a particular entry.

*There will also be a ticker card which calculates the cost basis, quantity, total amount paid as well as unrealized profit and loss for that particular ticker.

When my teammates and I were discussing the approach to this project, we felt that it made more sense to do a mobile app instead of a web app. This is because financial tracking is more convenient on a portable device like a smartphone, especially when logging in expenses. Furthermore, with the advent of stock trading mobile apps, it makes even more sense to create a mobile app.

However, all of us have no experience in building mobile app and we only had a month to build our project, which was a risky move. 

To overcome the uncertainties, we quickly did some rough research and testings to check the feasibility of building a mobile app with our current knowledge, taking into consideration the timeline.&nbsp;

We finally decided to build the app with React Native + Expo, leveraging on our knowledge from ReactJS. Because we wanted to learn something new on our own and more importantly, we believe that this app will add more value as a mobile app than a web app.

Working in a team&nbsp; 🙆🏻‍♂️ 🙆🏻‍♀️ 🙆🏽‍♂️

This is the first time that I get to develop a product with a team and it has been a valuable experience. I did learn the importance of communicating clearly when contributing ideas as most often than not, communicating technical details with clarity can have its difficulties.

I also learned a lot by reading code written by others (which I believe is a good skill to develop). Personally, reading code written by others can be confusing as the thought process behind the code might not be easily decipherable. From this experience, I have developed a greater appreciation for the practice of writing better comments and naming of variables for better code readability.

This is a full-stack web application that I developed to automate a few logistical processes for my photography business such as invoice and contract generation.

-&gt;&nbsp;<a href="https://www.youtube.com/watch?v=OXN2yve7Bwo">I made a Youtube video about it</a>&nbsp;&lt;-

One of the administrative problem that I’ve faced when running the business is the repetitiveness of creating invoices and contracts for my clients, I realise it takes me quite a bit of time when I have to keep doing them repeatedly. 

Another problem is that I can’t generate the documents when I’m on the move but only when I have my laptop with me. This is a problem when it comes to time sensitive bookings where the process is stuck due to my inability to generate the documents when I’m away from my laptop for long periods of time.&nbsp;

As I’m also passionate about solving real life problems with tech, I thought this would be the perfect opportunity for me to code something that can solve both problems at once.&nbsp;

The booking data from the web app is fetched from a Notion database (where I have already added the booking details prior) using Notion API. 

I then select a particular booking that I want to generate the invoice and contract for. There will be a preview section at the bottom for me to check through the details before I send the documents to my photography Telegram bot (a separate project)

The process takes less than 30 seconds compared to the previous flow of manually creating the invoice and contract which takes up to 2 minutes.

This is a time saving of 75%, but the best thing is that I can generate the invoice and contract anywhere in the world as long as I have internet connection using my phone as the web app is responsive on mobile. This solves the 2 problems I mentioned above.

With this web app, I also have the freedom to add new features to automate other parts of the booking process for the business. For example, I used to manually type out the details of the shoot to assign photographers to them, and this is another process that is time consuming and prone to my typos. Imagine typing in the wrong details which would cost the business money.&nbsp;

This send button that I added automatically generates a telegram message of the shoot details to each of the photographers and/or videographers involved. The booking details is fetched from Notion which is now my single source of truth. I can now forward it directly to my photographers and videographers with ease and accuracy!&nbsp;

This Telegram bot that I have been talking about is another project that I did prior to this web app. It allows me to check the availability of my photographers and videographers directly in the telegram bot without having to again, type out repeatedly and send them individually. The photographers and videographers can then reply directly from the bot regarding their availability. I integrated the web app with this bot by sending the generated invoice and contract as well as confirmed booking details for a more integrated solution, forming TheStoneSyndrome web services.&nbsp;

React is used for the frontend and the web app can be used on both desktop and mobile as it’s responsive. 

I’m using Express + NodeJS as the backend server with Notion as my database.&nbsp;

One of the reasons why I’m using Notion is because firstly, i already use Notion to organise most parts of my life and secondly, it works very well as a database with the Notion API. 

When i get a new booking, I key in the details into a table in Notion (a database) and my web app is integrated with the Notion API to fetch all the booking information so I can view them from my web app. 

I can easily create, read, update and delete the information straight from the Notion app which is then synced to my web app. And of course, Notion has a native iOS app so I can do everything on the go! 

The express server is deployed on AWS Lambda and my React frontend app is deployed on Vercel. I also used OAuth for authorisation and only whitelisted gmail accounts can log in (authentication), which is currently just me. 

The user interface and user experience of the app is designed to be simple, intuitive, speedy and fuss free.&nbsp;