Bites & Bytes Kitchen : A Delicious Dive into Web Creation

Hariprasad Sundaresan
Google Cloud - Community
7 min readJul 22, 2023

Target Audience: Dreamers, Train Journey Enthusiasts, and Story Writers !

In this blog, I invite you to step into an imaginative world, where we embark on a delightful digital cooking adventure to unravel the process behind designing my public website. Just like a skilled chef in a busy kitchen, I blended the ingredients of creativity, passion, and digital expertise to create a web experience that would leave a lasting impression on visitors.

Happy Cooking !!!

Here’s a tasty overview of the 6 stages that shaped my public website, drawing inspiration from a culinary journey:

  1. Recipe Planning
  2. Kitchen Setup
  3. Dish preparation
  4. Flavourful seasoning
  5. Testing the tasting buds
  6. Grande Serving
Cooking : A State of Art

Stage 1 : Recipe Planning

At this initial stage, it’s like planning a recipe and selecting the key ingredients that will make your public profile website stand out and captivate your audience. Just as you carefully choose the right components for a delicious dish, you need to make critical decisions to shape your website’s identity.

I’m hungry
I’m invisible, i’d like to have a public profile !!!

Here are some key questions to guided my choices:

  • What inspired me to create a website or cook this dish?
  • Do I have the time required to invest in the development or cooking process?
  • Do I have a view of the desired look and feel (for website) or presentation and flavours (for the dish)?
  • Do I intend to update the content (for website) or cook this dish frequently ?
  • Am I prepared for regular maintenance (for website) or necessary preparation and cooking time?

Without much contemplation, I’ve reached a decision — I’ll be embarking on two exciting endeavors: cooking a delightful dish at home and building a custom website tapping into my inner cook and UI developer.

Stage 2 : Kitchen Setup

Similar to preparing the kitchen and preheating the oven, selecting a domain and hosting is like setting up the ideal online environment to present your public profile website. I’d few standard options such as

  • GoDaddy
  • Namecheap
  • Bluehost
  • SiteGround
  • HostGator
  • Google Domains
  • GitHub Pages

In the end, my decision was to opt for Google Domains and GitHub Pages. While individual preferences may differ, the attributes of Google Domains make it a favored option among domain registrars, particularly for individuals and businesses seeking a dependable and user-friendly domain registration service supported by a reputable tech company.

Stage 3 : Preparing the Dish

Just as a chef uses culinary artistry to create a dish, I applied my design and development skills to craft a visually appealing and functional website. I’d to start with some keys decisions before proceeding explained below

Burning Questions !!!

Making tough decisions !!!

In the end, I chose a JavaScript-based application, a smart move I guess as it’s a popular and versatile language for web development. Selecting React JS as my framework was wise due to its component-based architecture, enabling reusable UI components for efficient development and easier maintenance. Leveraging Google Cloud Storage for hosting static content was a prudent choice, offering scalability, reliability, and low latency. Finally, opting for Google Cloud Platform (GCP) as my hosting solution was a strategic decision to ensure a robust and scalable infrastructure for my website. I began by storing the static contents in storage instead of using a database initially. The plan is to enhance it later by building backends that suit the specific needs of the project.

The website development process took a few weeks, with the majority of the time dedicated to UI & CSS Stylesheet and ensuring the application’s responsiveness across various devices. Containersing and deploying the application turned out to be a swift task.

Stage 4 : Flavourful Content Seasoning

I likened the process of adding flavor to a dish to the art of content creation for my website. Just like a juicy steak tantalizes taste buds, I aimed to captivate my visitors with engaging and informative content. Some of the enhancements I made to achieve this included

  1. Content Upgrade: I continuously updated my content with creative imagination to captivate and engage my visitors, offering them an immersive experience during their visits.
  2. Linking other Social Media Apps: I connected my website to various social media platforms to expand my reach and foster a stronger online presence.
  3. My Ethics: I shared my ethical beliefs and principles, which helped in building trust and transparency with my audience.
  4. Connect Me: I offered multiple ways for visitors to contact me, ensuring easy communication and engagement.
  5. Dynamic CV: I crafted a dynamic and visually appealing curriculum vitae (CV) to showcase my skills, experiences, and accomplishments effectively.
  6. Certifications: I highlighted relevant certifications and credentials to reinforce my expertise and credibility.
  7. Reference Articles: I linked to other articles or publications where my work was featured, establishing authority and credibility within my field.
  8. Certifications : I highlighted relevant certifications and credentials to reinforce my expertise and credibility.
  9. Reference Articles : I linked to other articles or publications where my work was featured, establishing authority and credibility within my field.

Stage 5 : Testing the Taste Buds

In this stage, I directed my attention towards the enhancements outlined below, which were constantly evolving in line with my vision. Making some tough decisions, the product owner in me challenged the developer in me. I considered implementing Continuous Integration and Continuous Deployment (CI/CD), but then asked myself, as the sole user, if it was truly necessary. Performance testing is a necessary challenge, and I attempted to streamline the process by creating a quick bash script to run the application multiple times, gaining insights into its behavior and performance. Responsive testing consumed significant time as I had to test the application across various browsers, mobile devices, iPads, and laptops. This process allowed me to identify a few issues (some issues never gets fixed), but overall it was enjoying process.

Stage 6: Grand Serving

Finally, just like presenting a delightful dish to guests, launching the website for the public becomes a reality. Promoting it through social media and professional networks invites people to explore and engage with the content.

But before that, I embarked on the deployment journey with a simple strategy in mind. Considering options that prioritized quick and uncomplicated deployment while managing costs and time efficiently, I achieved the following:

  1. Containerised App in VM
  2. Default Network
  3. Static IP Address
  4. Simple Serverless CI/CD with Cloud Build
  5. Cloud Storage to store Static Contents like CV, Images, etc
  6. Git Repos : Application, Deployment & Infrastructure

This sample design served below as the foundation for launching my website to the world, ready to be explored.

Not a perfect Design, but good place to start with !!!

Now that I have my website, the reasons behind its creation are known only to the universe. Do I need to market it? Absolutely! But how do I go about it? It’s obvious to start small by sharing with friends, leveraging social media connections, and participating in public content forums. Hosting the website in a minimum Google Compute Engine VM e-micro is cost-effective, ranging from 4 to 5£ per month, and with committed use discounts, it could be even lower. For those looking to reduce costs, consider utilising Google Cloud’s free tier to host your website with free VM, Cloud Build, and Storage. However, keep in mind there are certain limitations and restrictions based on your specific needs. Alternatively hosting on GitHub pages is a free viable option, which I’ll detail in upcoming articles.

Conclusion:

Should we have a conclusion, Nah, this is just the beginning!

Part 2 is on its way, where I’ll delve into ‘Bites & Bytes Kitchen : Think Serverless & Think Enterprise’ approaches for website designing and hosting with a serverless, enterprise-grade design. Stay tuned for more exciting insights and developments!

Almost slipped my mind, but the moment has come to serve the delicious artistic dish www.hariprasad-sundaresan.com, where web designing meets savoury. Enjoy the feast of artistry! Bon Appétit !

Disclaimer:

  • Google services are subject to change; refer to official documentation for the latest information.
  • Bites & Bytes Kitchen’s is purely fictional and created for illustrative purposes. Any resemblance to real companies or events is purely coincidental.
  • The content aims to share the creative journey and inspire people, without any intention of monetisation.

--

--