Forem: Ayush Singh

My Journey Contributing to Open Source (MERN Stack)

Ayush Singh — Fri, 27 Dec 2024 13:27:57 +0000

As 10x developers, the biggest productivity killer we face is the hassle of setting up our developer environment. It is a process where things can go wrong without any notice which leads to frustration.

I was searching for a solution to this problem when one day I came across Daytona at their Developers Club Tour meetup in New Delhi. Excited, I saw their Creator Quest on Quira.

I decided to attempt the 023: Take Daytona for a spin challenge and in this blog, I will be sharing my experience with Daytona.

What is Daytona?

Daytona is a self-hosted and secure open-source development environment manager.

It is a simple, no-hassle, CLI tool that cuts the extra steps like downloading libraries, building, updation, compiling, and testing from the development process and lets you start coding with a single command.

Learning Daytona

To get a basic idea about Daytona, I first opened their GitHub repository and read the README.md. I was impressed by the active development and 13.5k stars. After that, I went through their documentation and blog.

I then chose a theme to build on for the quest from the ones provided by the Daytona themes.

Building the App

For the quest, I built a template for connecting to a React app with Coinbase Wallet, using Coinbase Wallet SDK.

I set up a React + Vite project, utilized TypeScript, speed read the Coinbase SDK documentation. Within one night, I had an MVP ready. I styled it with shadcn/ui and TailwindCSS and deployed it on Vercel.

Though it's focused on Web3 projects involving connecting Coinbase, this can be used as a shadcn/ui boilerplate too lol.

Joining The Community

After my project (Coinbase Connect) was submitted on the Quira platform I received a mail with a slack invitation and instructions to progress further.

I was thrilled and joined their Slack community. I introduced myself and my project and waited for further instructions.

One day later, Ivan created an empty repository for me on the Daytona organization. I migrated my codebase there and raised a PR.

Now here's the first hurdle, I forgot to --signoff my commit so it had an error. With some revision, my first PR was accepted. In the next two days, I did my second PR where I removed all the hardcoded constants and my third PR with some README.md changes.

Overall the experience with the community was great with Ivan and Jafa guiding me wherever necessary.

Using React with Coinbase SDK with Daytona

This should be the most comprehensive section of the blog but because of the ridiculously simple nature of Daytona, there isn't much you have to do.

FIrst of all, Installing Daytona is a breeze, even on Windows. It's a single command installation and you're done.

$architecture = if ($env:PROCESSOR_ARCHITECTURE -eq "AMD64") { "amd64" } else { "arm64" }
md -Force "$Env:APPDATA\bin\daytona"; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.SecurityProtocolType]'Tls,Tls11,Tls12';
Invoke-WebRequest -URI "https://download.daytona.io/daytona/v0.50/daytona-windows-$architecture.exe" -OutFile "$Env:APPDATA\bin\daytona\daytona.exe";
$env:Path += ";" + $Env:APPDATA + "\bin\daytona"; [Environment]::SetEnvironmentVariable("Path", $env:Path, [System.EnvironmentVariableTarget]::User);
daytona serve;

If you happen to be on Linux or MacOS, then you can install Daytona with this command:

(curl -sf -L https://download.daytona.io/daytona/install.sh | sudo bash) && daytona server -y && daytona

To run it locally, make sure you have Docker installed and running on your machine. Then run the following command to create your workspace:

daytona create https://github.com/daytonaio/sample-react-coinbase-connect

Start the Application:

npm install
npm run dev

# Building for Production
npm run build
npm run preview

GitHub (Do give it a ⭐)
Live

Conclusion

That sums up my experience of taking part in the Daytona Quest. I had fun building with and for Daytona and will be using it in my future projects.

The Daytona Quest still has two weeks left for submissions. It is a good opportunity to get started with Open Source. Don't miss it.

Thanks for reading!

Building Blazing-Fast Websites ft. Gatsby 🔥

Ayush Singh — Fri, 21 Jun 2024 04:22:58 +0000

Gatsby, put simply, is a static site generator. This means it creates static HTML files that you can load onto a server.

Unlike many traditional websites, which require querying a database or server-side programming to serve web pages, Gatsby pre-configures everything in advance. This results in static HTML files that are ready to be served, but this does not mean the sites are non-interactive or static in the sense of being boring or unchanging.

How Gatsby Works

Static Site Generation

Gatsby generates static sites. This process involves taking your content and building it into static HTML, CSS, and JavaScript files. These files are then served directly to users, making the site extremely fast since there's no need for server-side processing each time a page is loaded.

Dynamic Features with Static Sites

Even though Gatsby generates static sites, you can still have dynamic features. By loading JavaScript into your static HTML files, you can make API calls and create interactive, rich experiences for users.

Development and Build Process

When developing a site with Gatsby, you typically run it locally on your computer. You can start by installing the Gatsby CLI and creating a new project:

npm install -g gatsby-cli # Install Gatsby CLI globally
gatsby new my-gatsby-site # Create a new Gatsby site
cd my-gatsby-site # Navigate into your new site’s directory
gatsby develop # Start the development server

Gatsby uses Node.js to build your site during development. However, once the site is built, it doesn't require Node.js on the server. This is because the final product is just static files, which can be easily deployed. For instance, you can deploy to Netlify with the following commands:

gatsby build # Build the site for production
netlify deploy --prod --dir=public # Deploy to Netlify

Key Technologies Behind Gatsby

GraphQL

Gatsby uses GraphQL to fetch data. GraphQL is a query language for APIs that allows you to request exactly the data you need. Here’s an example of a GraphQL query in a Gatsby page component:

import React from "react"
import { graphql } from "gatsby"

export const query = graphql`
  {
    site {
      siteMetadata {
        title
      }
    }
  }
`

const IndexPage = ({ data }) => (
  <div>
    <h1>{data.site.siteMetadata.title}</h1>
    <p>Welcome to your new Gatsby site.</p>
  </div>
)

export default IndexPage

This makes it easy to pull in data from various sources like Markdown files, databases, CMSs (like WordPress), or even CSV files.

React and CSS

For the user interface, Gatsby uses React, a popular JavaScript library for building user interfaces. Here’s an example of a simple React component used in a Gatsby project:

import React from "react"

const AboutPage = () => (
  <div>
    <h1>About Us</h1>
    <p>This is the about page of our Gatsby site.</p>
  </div>
)

export default AboutPage

React handles the templates and components of your site, while CSS is used for styling. This combination allows you to create modern, responsive designs. You can import and use a CSS file in a component like this:

// src/components/layout.css
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
}

// src/components/layout.js
import React from "react"
import "./layout.css"

const Layout = ({ children }) => (
  <div>
    <header>
      <h1>My Gatsby Site</h1>
    </header>
    <main>{children}</main>
  </div>
)

export default Layout

Plugin Architecture

One of Gatsby's strengths is its plugin architecture. Plugins let you add complex functionality to your site without writing a lot of custom code. For example, you can add and configure a plugin in gatsby-config.js like this:

module.exports = {
  siteMetadata: {
    title: "My Gatsby Site",
  },
  plugins: [
    // Example of adding a plugin for sourcing content from the filesystem
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src/`,
      },
    },
    // Example of adding a plugin for transforming markdown files
    "gatsby-transformer-remark",
  ],
}

There is a vast ecosystem of plugins available for various tasks, from sourcing data to optimizing images.

Why Use Gatsby?

Speed

Gatsby sites are incredibly fast because they are static. Static files are served directly to users without the need for server-side processing. This makes Gatsby sites faster than many traditional websites, even those with caching.

Security

Static sites are inherently more secure. There is no database or server-side code to hack, reducing the attack surface. This makes it harder for malicious actors to compromise your site.

Developer Experience

Gatsby offers an excellent developer experience. It uses modern tools and languages, which makes development more enjoyable and efficient. The community is active and supportive, and the documentation is thorough and helpful.

Community and Support

Gatsby is open-source and free, supported by a strong community and a dedicated team of professionals. This ensures ongoing development and a wealth of resources for learning and troubleshooting.

Summary

Gatsby is a powerful static site generator that uses GraphQL for data fetching, React for building user interfaces, and a robust plugin system for added functionality.

Its primary benefits are speed, security, and a great developer experience. Supported by a solid community and excellent documentation, Gatsby is a fantastic choice for building modern, high-performance websites.

By understanding and leveraging these features, you can create fast, secure, and highly interactive websites with Gatsby. Whether you're a seasoned developer or a beginner, Gatsby provides the tools and support you need to succeed.