DEV Community: Harish

How I Created My All-Star React Stack — Supercharge.dev

Harish — Thu, 29 Apr 2021 14:29:06 +0000

When it comes to building frontend applications, we as developers, are simply spoilt for choice. From Angular to React to Vue to Svelte, there are just thousands of libraries and frameworks to choose from. I have been a loyal React developer for a long time now. Even then, every time I built a React app, I had to do face the same confusion on what libraries I should be using for the app.

My typical thoughts as I develop yet again another React app:

“Is it going to be Bootstrap or Bulma?”

“Urgh, I need to setup ESLint again!”

“I need to setup the same Header, Footer, Layout components AGAIN!”

I really needed to change this and in the process of change I built Supercharge.dev! Let me tell you all about it!

Building My Own All-Star React Stack

Over time, with experience from the various projects I did, I finally came up with my own All-Star React Stack! If you have not already read it, be sure to check it out here: https://betterprogramming.pub/my-all-star-react-stack-3c9b853d4c41. It has over 8.1k views as of writing this and gathered great comments from fellow developers.

After speaking to devs in the community, I decided to build an all-in-one React Starter Pack that combines all of the below features:

Next.js
Bulma
Every page needed for a typical MVP: Home, About, Contact Us, FAQ, Docs, Dashboard etc.
Every component you need: Testimonials, Features etc.
Docker Config
ESLint + Prettier
Google Analytics
Firebase Authentication
Firestore as Database
Formspree for Quick Contact Forms
Reack Hook Form for Advanced/Dynamic Forms

And many others, all supported with the latest Next.js 10 and React 17.

It took me close to a month of development to get it right and stable. I started off working on the modules in a very generic fashion such that anyone can simplify configure everything from the copy on the pages to the API keys used to make it their own.

The best part is that everything is configurable in minutes — all through modifying the config files!

From brand name, to your features, to testimonials, you simply update it in the config and the UI updates in tandem!

The result is Supercharge.dev!

Pricing Supercharge

One of the key reasons for creating Supercharge was to ensure that it support developers and helps them develop fast. To stay in line with the goal, I decided to price Supercharge at an extremely affordable USD25!

With competing products which allows for customised starter packs starting anywhere from USD50 to USD99 and above (with some even priced at USD300!!), I felt it was only right to help developers with an affordable option.

The best part of Supercharge is that it is not the usual annoying subscription based package where you keep paying to use it. It’s a one-time payment for unlimited upgrades to future releases.

Providing Support

Creating a product doesn’t just involve coding and putting it up for sale! When Supercharge launched, it attracted a number of queries and requests through the email support channel.

To be honest, I did not expect to receive such queries so early on the launch. Some of the feature requests were really unique, whereas some just had a few generic queries on integrating CSS and other libraries.

The great part of customer support is that I managed to understand Supercharge from the user’s point of view, to exactly feel and empathise with their problems and how Supercharge is helping to solve them.

With the understanding, I iterated fast, provided feedback and support, not just as a creator of Supercharge, but also as a fellow developer.

Testimonials

I decided to collate some feedback from the early users of Supercharge and I am glad to see the strong recommendations and support they have provided.

Many of the users found that Supercharge helps them to save a great deal of time! And most of the existing bundled features helped them to kickstart their app in no time at all — some within even 10 mins!

What’s Next?

Supercharge.dev was created to simplify the lives of developers and to help them focus on the goals of their development instead of worrying about structuring and setting up apps again and again.

So what’s next for Supercharge?

In the coming days and weeks, I will be upgrading Supercharge with more features — such as email verification flow. Other possible feature maps include a TailwindCSS version and a Bootstrap version for the frontend UI.

Do you want certain features you would love to see in Supercharge? Drop me an email at supercharge.dev@gmail.com or a comment below!

Getting Supercharged!

Are you a React developer who wants to skip all the boilerplate setup and have an end-to-end Minimum Viable Product (MVP) ready in minutes?

Then Supercharge is for you — check out Supercharge.dev and download now. To get a limited time offer of 20% discount, be sure to use promo code DEV2021!

My All-Star React Stack

Harish — Sat, 23 Jan 2021 09:46:15 +0000

Everything I use when I set up a new React app

If you are a React developer like me, then you are essentially spoiled for choice when it comes to frameworks, libraries, tools, etc. With React, it is even trickier compared to full-fledged opinionated frameworks like Angular. React calls itself a JavaScript library for building user interfaces (UI).

With a huge array of options, it is only natural to be confused about what technologies to use for your next React project. Today, I’ll share my favourite libraries and how they make my life so much easier!

Kickstarting a Project (The Base)

Photo from Next.js.

To kickstart a project, my favourite option is Next.js!

Next.js offers out-of-the-box server-side rendering, file system-based routing, built-in CSS/SCSS support, and so much more. You can literally be up and running in a few seconds with Next.js without having to worry about tooling.

Alternatives

The default way to bootstrap a React project will be to use the Create React App. However, trust me: Next.js is just so awesome and more developer-friendly. It allows you to focus on the code instead of the setup.

Another popular option is Gatsby, which is more SEO-centric. However, Gatsby is more focused on static site generation and I am not comfortable using it for a project that may quickly balloon into a large code base. I prefer Gatsby for projects such as a blog.

My suggestion is to go with Next.js for projects that may become bigger or even enterprise-grade in the future. Choose Gatsby if you want a more SEO-optimised, public-facing site like a blog or a static informational site.

CSS Framework

Photo from Bulma.

My favourite CSS framework is Bulma. It’s an open source framework based on Flexbox and has gained wide traction with over 200,000 developers using it.

One of the key reasons I use Bulma is that it’s just simple and beautiful. It comes with several UI components that are really well-designed with a focus on mobile responsiveness.

Alternatives

Speaking of CSS frameworks, we cannot overlook the ever-popular Bootstrap. It’s definitely an amazing framework, but truth be told, it has gotten a little boring. With many sites using Bootstrap, the styles and components seem monotonous. Nevertheless, Bootstrap is an awesome choice for those who are already familiar with it and it has a very trusted community of developers to rely on for support too.

Tailwind CSS is currently the talk of the town. Tailwind allows you to style everything without leaving your HTML code. There is a CSS class for everything — colors, sizes, fonts, shadows, etc. I am personally not a fan of too many CSS classes in my code. I like segregating and modularising my code based on component-level CSS. That being said, Tailwind CSS could be a great solution for developers who love the freedom offered by the framework.

Styling

Photo by the author.

My go-to option for styling is using Sass with CSS Modules. This is supported by default in Next.js, where we separate CSS/Sass files from our code and simply import it into the React file where it is required.

Sass is much more efficient than using pure CSS, as it helps developers to refactor their code and prevent repetitive styling. Developers can quickly extract, refactor, and reuse their code across the project.

Alternatives

One popular option is styled-components, which allows you to write CSS in JS. While this is easy to write, I hate the idea of combining styling inside my JS code. I prefer a separation of concerns and isolating styling from my JS code.

Navigation

If you use Next.js like me, then navigation is absolutely not a concern. With file system-based routing, the hierarchy of your directories becomes the actual file path and routes too!

Photo from React Router.

If you are using React, then React Router is the best choice. It is solid, well-tested with few bugs, and straightforward to use. Oh, and it has 42.3K stars on GitHub!

Forms

Photo from React Hook Form.

Almost every web application needs a form. To add a form to my application, I use React Hook Form.

React Hook Form adopts React Hooks as the core of the library and is extremely simple and easy to use. In fact, there is a form builder you can use to build your forms and literally copy-paste the code into your React project.

Photo from Formspree.

If all you need is a static form (e.g. Contact Us), then Formspree might be your choice. It requires zero server code and is an excellent option for simple forms.

Alternatives

One popular option here is Formik. Formik is a powerhouse — it contains an amazing number of features and has a wide fanbase of developers with over 25.8K stars on GitHub! However, I feel that Formik can sometimes be overkill. When all you need is a simple, nice form with a few fields, React Hook Form has you covered.

Quick Back End

Photo from Firebase.

I know this article is about front-end React stacks. Nevertheless, I thought I would add this one in — especially for projects where you wish you had a quick back end to integrate. Firebase and Firestore are excellent options for this use case. I wouldn’t delve too much into this, as it is an entire topic of its own.

Alternatives

If you need a quick back end, then some other options are Google Sheets and Airtable! Both are as simple as an Excel sheet yet can become as powerful as a small database when required.

Final Thoughts

And there you go: Next.js, Bulma, Sass, CSS Modules, React Hook Form, Firebase, and Firestore. This is my typical React stack that fits almost any project I am working on.

Surprise

If you're looking for an all-encompassing codebase which can supercharge your next project, look no further! I created exactly what you need - Supercharge.dev!

Supercharge.dev combines all of the above and even more! With Google Analytics and ready-to-use dashboard with Firebase support, you get everything out-of-the-box!

Use the code DEV2021 to enjoy a 20% off the Supercharge bundle now!

Thanks for reading! Leave a comment below about your favourite libraries.

Happy hacking!

The Rise of JAMstack 🚀

Harish — Sun, 17 Jan 2021 10:11:05 +0000

What is JAMstack?

You may have heard of various “stacks”, which typically refers to a group of technologies used to build an application. Recently, JAMstack has become increasingly trendy and popular.

Before you wonder what does “JAM” in the JAMstack stands for, it is important to recognise that JAMstack is not a collection of technologies. Rather, it refers to a way of building applications which focuses on delivering better performance, scalability and relatively easier development.

Now, back to the “JAM” — this stands for JavaScript, APIs and Markup. The term JAMstack was coined by Mathias Biilmann, the CEO of Netlify who refers to it as

“A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”

Traditional Applications

Before we dive into the JAMstack and benefits, let’s understand traditional applications. A traditional app has 3 main components: the frontend app, the backend server and a database.

Traditional Application Architecture

The problem with this approach is complexity. As your app evolves, there is just too many things to take care of. Applications slow down with complex logic and scaling for thousands of users or even more becomes just too hard.

Security concerns increase with the size of applications too.

JAMstack has a great way to solve for these issues.

JAM

JAM in JAMstack

JavaScript

Features that are dynamic are managed by JavaScript. This can be achieved with any JavaScript library which does the job.

APIs

Server side methods become APIs which is handled by JavaScript functions.

Markup

The entire application is served as a static site — a collection of HTML files. A popular example is to use Markdown which a markup language. Eventually a Static Site Generator like Hugo or Jekyll can render the static files.

How does it work?

JAMstack Architecture

JAMstack applications are served over a Content Delivery Network (CDN). Before deploying to a CDN, JAMstack apps are compiled and pre-built into highly optimised static pages and assets.

The apps are still able to communicate to other backend services or servers through JavaScript and APIs.

Why use JAMstack?

Speed

With pre-built and highly optimised sites, it allows for fast rendering of your apps for users.

Security

Without a server or database, naturally, there are fewer areas of vulnerabilities.

Scalability

We can easily scale our sites without complex logic. The CDN takes care of reaching a global audience.

Simplicity

With the simplicity of JAMstack, developers can now focus on the core of the application without worrying too much about DevOps or deployments or scalability. Happy developers = better products = happy users!

Technologies based on JAMstack

I enjoy using JAMstack to build my blogs and websites. Use the below technologies to see how you can create your own in no time!

Static Blog and Website Generators

Hugo — Blazing fast static site generator built with Go
Jekyll — Markdown-based static site generator built with Ruby
Hexo — Blog framework powered by Node.js

Frontend Frameworks

Gatsby — Modern site generator for React
Next.js — React framework optimised for Server-Side Rendering (SSR)
Nuxt — Vue.js framework

Find more at https://www.staticgen.com/

Deployment Solutions for JAMstack Apps

Netlify — All-in-one platform for automating web projects
Vercel (previously Zeit) — Easiest way to host, deploy and manage websites
Github Pages — Host static websites directly from your Git repository

Headless Content Management Systems (CMS)

Netlify CMS — Open source CMS for Git workflow
Contentful — API-first content platform
Ghost — Headless CMS based on Node.js

Find more at https://headlesscms.org/

e-Commerce solutions for JAMstack Apps

Snipcart — Shopping cart for any website
BigCommerce — Powerful e-commerce
Commerce Layer — Enterprise e-commerce on JAMstack

Sites I’ve built with JAMstack

Supercharge.dev

Supercharge.dev is the quickest way to jump into your next Next.js project with everything from frontend framework (Bulma) to Firebase Authentication, Google Analytics etc. all combined!

Get a massive 20% off right now with code DEV2021!

Right From Basics

Right From Basics Homepage

Right From Basics is a tech blog to learn new technologies and to prepare for your next technical interview. This is built entirely using Hugo and uses Netlify for deployment.

Check it out here: Right From Basics

harishv.me

harishv.me Homepage

This is my personal site. I have used Gatsby to build this and Netlify for deployment.

Check it out here: Harish V

Originally published at https://rightfrombasics.com/posts/rise-of-the-jamstack/

HTTPS – What’s the Big Deal?

Harish — Sun, 09 Jun 2019 04:40:27 +0000

What is HTTP?

HTTP stands for Hypertext Transfer Protocol. It is the protocol used by the World Wide Web and it forms the basis for how data is transmitted over the Internet and how servers and browsers respond to various requests. Essentially, it the "procedure" which helps define how data or messages should be exchanged by different parties on the Internet.

The Problem with HTTP

The problem with HTTP is that it does not provide for Integrity, Authentication and Privacy. That means data transmitted over HTTP alone is easy to intercept and makes you susceptible to a whole range of attacks which can compromise the 3 factors mentioned above (which you would ideally want when you surf the web).

How about HTTPS?

HTTPS is essentially HTTP running over Secure Socket Layer (SSL). HTTPS works by encrypting the HTTP message before the exchange and when received on the other side, it decrypts the message.

In comparison, if HTTP is used, sensitive information which may be credit card information, your identity numbers, login credentials such as passwords etc. will be transmitted over the server as plaintext. This leaves the exchange vulnerable to "eavesdropping" which means an attacker can intercept the message and use it for harmful purposes.

How do SSL Certificates work?

When a browser/server tries to connect to a webpage secured with SSL, it first requests the web server to identify itself.
The web server then sends the client or server its SSL certificate.
The browser checks the SSL certificate to know if it can trust it. If it is able to trust the SSL certificate, it sends a message to the web server acknowledge this.
The web server is now ready to establish an SSL encyrpted session with the client/server and sends a digital acknowledgement back.
Now when messages or data is transferred between these 2 entities, they will be encrypted based on a mutually agreed ciphersuite.

The above process where the browser and web sever initiate a secure session is called an SSL Handshake.

Note: Anyone can create a SSL certificate, but it must be digitally signed by a trusted Certification Authority (CA). Most computers come with a pre-installed list of CAs they can trust and when the browser checks the SSL certificate, it verifies the digital signature against this list.

Public and Private Keys

You would have probably heard about asymmetric cryptography, also known as, public-key cryptography. In this type of asymmetric encryption, two types of keys are involved: public key and private key. The names speak for themselves. Public keys are made public, that is anyone is able to know them. Private keys are private, which means no one other than yourself will be able to access this private key.

Now when someone wants to send me some document, they will simply encrypt the document with my public key (which is accessible by anyone and everyone). Then, they send me this document. Now, I just need to use my private key (which is only known to me) to decrypt this. This ensures that only the intended receipient of the message will be able to decrypt and hence, access the message.

Similarly, if I am sending someone my document, I will encrypt the document with my private key. The receipient of the document will now use my public key to decrypt it and access the document. This helps to identify that the document truly came from me.

SSL Transaction

To set up the SSL session, we need 3 keys: public key, private key and session key. As disucussed above the public and private keys are effective in ensuring that the data is reliable and authentic. However, this requires considerable amount of processing power. Hence, we use the session key to encrypt any transmitted data following the SSL handshake.

Adding SSL to your website

To add SSL, you will have to first purchase a SSL certificate, activate it, install the certificate and finally configure your site to use the certificate. There are tons of tutorials online on how to do that.

You can also get free SSL protection with Cloudflare. To know how you can add free SSL to your website, check this post out!

Looking for Hosting?

If you want the best Wordpress hosting, I highly recommend Bluehost. Get a great discount when you apply through this link.
Also, get a massive discount with Hostinger when you apply through this link.

Both services offer great uptime and customer service. Oh did I mention - you get a free domain name with both Bluehost and Hostinger!

Adding SSL to Your Site (Free!)

Harish — Sun, 09 Jun 2019 04:36:20 +0000

Seen the error image before?

This happens when you visit my personal website, harishv.me, with a www in front. This redirects to https://harishv.me and all you will see is this ERR_SSL_PROTOCOL_ERROR as the site is unable to provide a secure connection.

If you are using a normal GitHub Pages site, which means it has a domain that has .github.io, you can simply go to the GitHub repository you are using, click settings, go all the way down till you see Enforce HTTPS. Clicking this will mean that your site will always be served over HTTPS.

When researching free SSL options to add onto my website, I found that you can actually use Cloudflare’s name servers under their free plan to obtain a SSL certificate for your website.

Simply,

Create a Cloudflare account
Allow Cloudflare to scan your website records
Check and verify that the automatically generated records by Cloudflare matches with those on your registrar’s page (in my case, this is Namecheap.com)
Cloudflare will now give you 2 nameservers to add into your account
Login to Namecheap
Click on Domains List
Select the domain you want to add SSL for and click on Manage at the right side
Under nameservers, copy and paste the 2 nameservers Cloudflare gave you
Once done, on Cloudflare’s Overview tab, click on Recheck Nameservers

Cloudflare also offers up to three page rules in the free plan. With this, we can always enforce a `https on our website. To do that,

Click on the Page Rule tab at the top in Cloudflare
Enter this: http://*<your-domain-name>.com/*
Add the settings to be Always Use HTTPS
Click on Save and Deploy

The asterisks are like wildcard patterns which means any URLs entered in that format will be enforced to utilise HTTPS connection. For example, www.harishv.me or http://harishv.me/blog will all now be enforced with HTTPS.

That’s all folks. Get your free SSL certificate with Cloudflare now!

P.S. If you’re wondering why is HTTPS that big of a deal, wait a few days for my next article on HTTPS - What’s the Big Deal?.

Looking for Hosting?

If you want the best Wordpress hosting, I highly recommend Bluehost. Get a great discount when you apply through this link.
Also, get a massive discount with Hostinger when you apply through this link.

Both services offer great uptime and customer service. Oh did I mention - you get a free domain name with both Bluehost and Hostinger!

Connecting Namecheap Domain with GitHub Pages

Harish — Sun, 09 Jun 2019 04:34:40 +0000

A basic tutorial for those who are looking to connect their custom domain to GitHub Pages. This post assumes you will be getting your domain with Namecheap. But, it should mostly apply to any domain providers.

I first used Namecheap because they offered students free domains. Yup, if you are a student you can get a free Namecheap domain ending with `.me’ free for a year. Check their offer here.

1. Register on Namecheap

Simply go to the Namecheap homepage and register for an account.

2. Select a cool domain

Try to get a .com domain. It is the most general and commonly used domain. But with a ton of websites floating online, you may not be able to find your ideal domain available under .com. If thats the case check out .me domains for a personal website (like mine), the trendy .io for a startup/business, .net. Namecheap offers a wide range of domains to choose from. Some of them are .life, .co, .tech etc.

Choose the domain carefully as you will be sticking with it for some considerable time.

3. Get a GitHub Repository

If you have not yet created a repository, go to GitHub to create one. Name it <your-github-username>.github.io and ensure you have a master branch where you can push your HTML files. I assume you have your HTML, CSS, JavaScript files ready. Push them to this repository on the master branch.

Visit the website <your-github-username>.github.io should allow you to view the expected website.

4. Create a CNAME record in your Repository

Create a file titled CNAME with your domain name. That’s it. For example my CNAME file contains this:
harishv.me.

5. Go to Namecheap’s Dashboard

Under the Advanced DNS section, add in the following records. The CNAME record's value follows the GitHub URL you made in step 3. The A records are used to point the domain name to the IP address of the hosting server, which in your case will be GitHub’s.

That’s all folks. Give it a few minutes (or hours) and your site will be live at your newly registered domain.

Looking for Hosting?

If you want the best Wordpress hosting, I highly recommend Bluehost. Get a great discount when you apply through this link.
Also, get a massive discount with Hostinger when you apply through this link.

Both services offer great uptime and customer service. Oh did I mention - you get a free domain name with both Bluehost and Hostinger!

Hosting with GitHub Pages

Harish — Sun, 09 Jun 2019 04:25:56 +0000

Did you know you can host websites with GitHub Pages? In fact, so far, all my websites have been hosted with GitHub Pages. See my Projects. All the websites there under the domain harishv.me are hosted under GitHub Pages. Let's see why is it so awesome.

The Great Stuff

1. It’s free!

GitHub Pages offers free hosting of your websites/apps etc. That’s right, its totally free. (There’s a catch though, check the limitations below).

2. Connected to your Git repository

Version control is crucial for any project you do. GitHub Pages is connected with your GitHub repository, which means once any changes are pushed, your website is automatically rebuilt and deployed for you. The individual sub-pages that see - my blog, my projects, my photography page are all individual GitHub repositories. The main page is a GitHub repository named <your-github-username>.github.io on the master branch. To deploy other repositories under your GitHub Pages domain, you simply push your changes to a gh-pages branch.

3. Custom domain names

By default GitHub Pages offers the domain http://<your-github-username>.github.io. This is good enough for many hobbyists to try deploying their local projects on the web. But if you want a custom domain, you can do that too. Simply register for a domain name on sites like Namecheap or GoDaddy and connect them to GitHub pages. My site domain harishv.me is registered on Namecheap and connected to my GitHub repositories.

4. Jekyll blogging support

GitHub Pages supports Jekyll, which means you can create blogs and deploy them. Jekyll is a powerful Markdown-based blogging tool. All you need to do is run a few Jekyll commands after writing your posts and Jekyll builds static sites which you can easily push to GitHub. My blog is built with Jekyll as well. It’s a great way for people who prefer pure code-style of blogging. Also, all your posts can be easily backed up as they are all in a text-based Markdown format.

5. Great Uptime

GitHub is almost always up with some rare cases of downtime. This means that it provides reliable service in ensuring your webpages are live 99% of the time. That’s one huge bonus for a free service. You can check on the GitHub system status here.

Limitations

This is a rather short section since there aren’t many disadvantages I can think of. There are rather limitations with GitHub Pages.

1. Only Hosts Static Sites

While its true that GitHub Pages offers free hosting, it does not support full-fledged dynamic sites. Rather you can only host static sites which means they are in pure HTML, CSS and JavaScript. Essentially, there is no server-side support where you can for example do database-related operations etc. Nevertheless, this alone is powerful enough for some projects. All my pure front-end based projects are hosted with GitHub Pages. I have made many of those with the combination of HTML, CSS, JavaScript, libraries such as ReactJS and jQuery, and frameworks such as Bootstrap or Foundation.

2. Only supports GitHub repositories

Of course, GitHub only supports repositories from itself. If you use another platform like Atlassian BitBucket for version control then you will not be able to utilise GitHub Pages. If you are using BitBucket, you are in luck since they too offer support for hosting static sites. Check this FAQ section for more information.

Looking for Hosting?

If you want the best Wordpress hosting, I highly recommend Bluehost. Get a great discount when you apply through this link.
Also, get a massive discount with Hostinger when you apply through this link.

Both services offer great uptime and customer service. Oh did I mention - you get a free domain name with both Bluehost and Hostinger!

Getting a Free Domain For Students

Harish — Sun, 09 Jun 2019 03:52:24 +0000

If you are student and you are looking to get a domain, then you're in luck! You can get one for free with Namecheap. Namecheap provides services such as domain name registration and web hosting services.

If you want a free domain, check out their student offer here.

There is a small catch though. You will only be able to get the .me domain for free. .me domains are usually used for personal sites and blogs (like mine).

If you're looking for .com, .net, .io and other domains, then this offer will not apply - you won't get the domain for free, but rather under a discounted rate. Despite that, Namecheap's domain hosting is extremely affordable and comes in at only a couple of dollars per year.

Looking for Hosting?

If you want the best Wordpress hosting, I highly recommend Bluehost. Get a great discount when you apply through this link.
Also, get a massive discount with Hostinger when you apply through this link.

Both services offer great uptime and customer service. Oh did I mention - you get a free domain name with both Bluehost and Hostinger!