Featured Post

My First Blog: Describing My Experience

Introduction: Embarking on the Blogging Journey

Creating my first blog was an exciting yet daunting experience. I had long considered sharing my thoughts and perspectives online, but the actual process of setting it up and publishing my first post proved more involved than I initially anticipated. This article will detail my experience, from initial conception to the challenges and rewards of launching my very first blog.

Choosing a Platform and Themehttps://en.wikipedia.org/wiki/Comparison_of_free_blog_hosting_services

Selecting the right blogging platform was crucial. I researched various options, comparing features and ease of use. Ultimately, I opted for WordPress, a popular and versatile platform. The next step involved choosing a theme, a process that required careful consideration of aesthetics and functionality. I learned the importance of selecting a theme that both looked visually appealing and was optimized for user experience. For further reference on choosing a blogging platform, see the Wikipedia comparison of blogging services.

Content Creation and Writing Style

Writing my first blog posts was a different experience than I expected. I found myself needing to refine my writing style to better suit an online audience. Clarity, conciseness, and engaging storytelling were key factors. I discovered the value of incorporating relevant keywords for search engine optimization (SEO) to improve the visibility of my blog. Learning SEO techniques was valuable, as it assisted in reaching a broader audience. Many resources are available online to guide aspiring bloggers in content writing and SEO.

Challenges Encountered and Lessons Learned

The process was not without its challenges. Technical difficulties, such as understanding the intricacies of the WordPress interface, initially frustrated me. However, I persevered, gradually learning to navigate the platform and troubleshoot issues. This experience taught me patience, resilience and problem-solving skills. It further emphasized the value of thorough research and seeking help from online forums and communities when facing hurdles. The first blog experience is a learning curve, and embracing this is vital.

Conclusion: Reflecting on My First Blog

My first blog has been a significant learning experience. It combined both creative and technical challenges, shaping my understanding of online content creation and digital publishing. The experience has been rewarding and I look forward to further development of my blog. The journey of creating my first blog taught me valuable skills in writing, technology, and self-promotion. I am certain that my experience, both positive and negative, will be invaluable as I continue to grow and develop my blog.

Difference between Remix and React || Why need of Remix When we Have a React

As we know React is a Fantastic  Frame work, But some features that might not available on react we discuss about that and last we make projects in Remix and understand the fundamentals of it.

Features:

1. SEO: React have not that features of optimizing the webpage in seo friendly, so we use remix instead of react as remix is a fullstack framework and it also offers some seo features like Meta Tags, Links tag and also we used these tags as dynamic tags.
   
   

   export function meta() {
     return {
       title: "My Page Title",
       description: "A short description of the page",
     };
   }
   

2. SSR: Remix offers to fetch data in sever instead of client side. The main focus, when we use client side rendering the page is fetched when initial content loaded then it fetches data and the google bot crawled the page when it loaded so the dynamic content it not be crawled. The Remix solve these issue by fetching the data in server side by default by use of loader function and we use these data in client using useLoader data and we have also others features of default Form component for send and receiving data from server using SSR.
   
   

   import { json } from "@remix-run/node"
   
   export const loader = async () => {
     return json({ ok: true });
   };
   
   export default function Users() {
     const data = useLoaderData<typeof loader>();
     return (
       <ul>
         {data.map((user) => (
           <li key={user.id}>{user.name}</li>
         ))}
       </ul>
     );
   }

3. Performance optimization: In order to use optimization in react the developers use Lazy loading, code Splitting, Caching, But in remix its default features no need to doing this its helps to faster loading and decrease the loading time.
   
   
4. Navigation: In react we use third party library like react-router but in Remix as a fullstack framework react-router is default and additional it supports file based routing and its developer friendly and very easy to use and implement.
   
   

    app/
   ├── routes/
   │   ├── _index.jsx
   │   ├── about.jsx
   │   ├── concerts.trending.jsx
   │   ├── concerts.$city.jsx
   │   └── concerts.san-diego.jsx
   └── root.tsx

   
   

   URL	Matched Route
   /	app/routes/_index.jsx, Home page
   /about	app/routes/about.jsx
   /concerts/trending	app/routes/concerts.trending.jsx
   /concerts/salt-lake-city	app/routes/concerts/salt-lake-city.jsx, Dynamic route
   /concerts/san-diego	app/routes/concerts.san-diego.jsx

    

5. FullStack Framework: Remix is a fullstack framework and react only frontend library that makes remix a advantage of being frontend and backend togther, With the fullstack capabilaties it offers various features and its built on react so the learning curve becomes zero. A full-stack framework built on React, providing end-to-end solutions, including routing, data fetching, SSR, and performance optimizations, all out of the box.

Getting started with Remix || Create a project with Remix 

This Blog post help you to setup your remix project and with scratch.

Topics that discuss here: 

• Setup with vite bundler and  create-remix CLI:
• File Structure and best practices.
• Run and Build Command.

Setup with vite bundler and  create-remix CLI:

npx create-remix@latest

This command create a project folder with desired name.

Try to run the frontend dev server:

npm run dev

Try to run the backend dev server:

node server.js

File Structure and best practices:

The structure includes various file like

• App
• node modules
• public 
• and rest configuration file

The remix has only the app and its correspondence of routes folder where all woking done.

App
│   entry.client.tsx
│   entry.server.tsx
│   root.tsx
│   tailwind.css
│
└───routes
        _index.tsx

Routes folder

This folder responsible all routes in remix project and recently its upgraded to v2. We see the structure soon in another post.

_index.tsx is responsible home page index file refer to homepage and its visible in /route .

Try to  create more routes and see the file based routing

routes/
├── AboutUs.tsx  //    available on /aboutus
├── Dashboard.tsx  //    available on /dashboard
├── Profile.tsx  //    available on /profile
└── _index.tsx  //    available on /

Best file structure Practices:

firstProject/
├── app/
│   ├── components/         # Reusable components
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── Button.tsx
│   ├── routes/             # Routes and pages
│   │   ├── index.tsx       # Homepage
│   │   ├── about.tsx       # About page
│   │   ├── dashboard/      # Nested routes
│   │   │   ├── index.tsx   # Dashboard home
│   │   │   └── profile.tsx # Dashboard profile
│   │   └── auth/           # Authentication-related routes
│   │       ├── login.tsx
│   │       └── register.tsx
│   ├── styles/             # Global styles
│   │   ├── globals.css
│   │   └── theme.css
│   ├── utils/              # Utility functions and helpers
│   │   └── helpers.ts
│   ├── services/           # API services and integrations
│   │   └── api.ts
│   ├── context/            # Context API for state management
│   │   └── AuthContext.tsx
│   ├── root.tsx            # Entry point for the app
│   ├── entry.client.tsx    # Client-side entry point
│   ├── entry.server.tsx    # Server-side entry point
│   └── remix.env.d.ts      # Remix environment types
├── public/                 # Static assets (served as is)
│   ├── images/
│   │   └── logo.png
│   ├── favicon.ico
│   └── robots.txt
├── .env                    # Environment variables
├── package.json            # Dependencies and scripts
├── remix.config.js         # Remix configuration
├── tailwind.config.js      # Tailwind CSS configuration (if used)
└── tsconfig.json           # TypeScript configuration

Run and Build Command:

Run command:

npm run dev //for running frontend server 

node server.js //for running server

Build command:

npm run build

You should now see a build folder containing a server folder (the server version of your app) and a client folder (the browser version) with some build artifacts in them. (This is all configurable.)

Handling Routing in remix and upgrading to v2

Learning routing in remix is pretty easy not that much learning curve in v2. Recently remix upgraded from v1 to v2. V2 makes the file based routing from folders to only file naming conventions. we will discuss further on this post.

V1 routing in Remix

In v1 we use folder based routing for example in routes folder we have dashboard folder inside it profile.jsx file and further on we use this type of conventions for routing.

app/
├── routes/
│   ├── __auth/
│   │   ├── login.tsx
│   │   ├── logout.tsx
│   │   └── signup.tsx
│   ├── __public/
│   │   ├── about-us.tsx
│   │   ├── contact.tsx
│   │   └── index.tsx
│   ├── dashboard/
│   │   ├── calendar/
│   │   │   ├── $day.tsx
│   │   │   └── index.tsx
│   │   ├── projects/
│   │   │   ├── $projectId/
│   │   │   │   ├── collaborators.tsx
│   │   │   │   ├── edit.tsx
│   │   │   │   ├── index.tsx
│   │   │   │   ├── settings.tsx
│   │   │   │   └── tasks.$taskId.tsx
│   │   │   ├── $projectId.tsx
│   │   │   └── new.tsx
│   │   ├── calendar.tsx
│   │   ├── index.tsx
│   │   └── projects.tsx
│   ├── __auth.tsx
│   ├── __public.tsx
│   └── dashboard.projects.$projectId.print.tsx
└── root.tsx

Upgrading to v2 routing

In v2 we have to difine the file name only in order to creating dynamic routing we futher discuss about that in this post.

app/
├── routes/
│   ├── _auth.login.tsx
│   ├── _auth.logout.tsx
│   ├── _auth.signup.tsx
│   ├── _auth.tsx
│   ├── _public._index.tsx
│   ├── _public.about-us.tsx
│   ├── _public.contact.tsx
│   ├── _public.tsx
│   ├── dashboard._index.tsx
│   ├── dashboard.calendar._index.tsx
│   ├── dashboard.calendar.$day.tsx
│   ├── dashboard.calendar.tsx
│   ├── dashboard.projects.$projectId._index.tsx
│   ├── dashboard.projects.$projectId.collaborators.tsx
│   ├── dashboard.projects.$projectId.edit.tsx
│   ├── dashboard.projects.$projectId.settings.tsx
│   ├── dashboard.projects.$projectId.tasks.$taskId.tsx
│   ├── dashboard.projects.$projectId.tsx
│   ├── dashboard.projects.new.tsx
│   ├── dashboard.projects.tsx
│   └── dashboard_.projects.$projectId.print.tsx
└── root.tsx

Creating dynamic routing

In order to create dynamic routing in remix we have create the file for example AllPost.tsx and i want to show single post navigating through dynamic routing you have to create a post.$postid.tsx file to navigating to from /AllPost to /Post/postid.

 app/
├── routes/
│   ├── _index.tsx
│   ├── AllPost.tsx
│   ├── post.$postid.tsx
└── root.tsx

Nested Routes

After creating dynamic routes it working fine, But There is 404 route that creates mess and give error unnecessary so how to prevent it.

Simple let suppose we have post.$postid.tsx route, Create post._index.jsx file so the route /post not give the 404 error messages.

 app/
├── routes/
│   ├── _index.tsx
│   ├── AllPost.tsx
│   ├── post.$postid.tsx
│   ├── post._index.tsx
└── root.tsx

Navigation in Remix

Navigate through routes using React router.

import { useNavigate } from "@remix-run/react";

function SomeComponent() {
  const navigate = useNavigate();
  return (
    <button
      onClick={() => {
        navigate(-1);
      }}
    />
  );
}

Built-In components in Remix. How to use it effeciently

It is pre built component offer by remix to make application more optimistic.

<Await>

Imagine you are fetching a user's name from an API, and you want to display it once the data is resolved. Here's how you can use <Await> with <Suspense> to achieve this:

import React, { Suspense } from "react";
import { Await } from "@remix-run/react";

// Simulate a promise to fetch user data
const fetchUserName = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Abhay");
  }, 2000); // Resolves after 2 seconds
});

export default function App() {
  return (
    <div>
      <h1>User Data</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Await resolve={fetchUserName}>
          {(userName) => <p>Welcome, {userName}!</p>}
        </Await>
      </Suspense>
    </div>
  );
}

<Form>

This built in component offers built-in onsubmit automatically submit content through action and loader, automatically handles file uploads and define your http method and it also offer pending state.

import { Form, useLoaderData } from "@remix-run/react";
import { json } from "@remix-run/node";

export const loader = async ({ request }) => {
  const url = new URL(request.url);
  const name = url.searchParams.get("name"); // Get query parameter for the GET form
  return json({ name });
};

export const action = async ({ request }) => {
  const formData = await request.formData();
  const file = formData.get("file");
  const name = formData.get("name");

  if (file) {
    // Handle file upload
    console.log(`Uploaded file: ${file.name}`);
  }

  if (name) {
    // Handle form submission
    return json({ message: `Hello, ${name}!` });
  }

  return json({ message: "No valid data received." });
};

export default function Index() {
  const { name } = useLoaderData();

  return (
    <div>
      <h1>Remix Form Examples</h1>

      {/* POST Form Example */}
      <section>
        <h2>Submit Your Name (POST)</h2>
        <Form method="post">
          <label>
            Name: <input type="text" name="name" />
          </label>
          <button type="submit">Submit</button>
        </Form>
      </section>

      {/* GET Form Example */}
      <section>
        <h2>Search User (GET)</h2>
        <Form method="get">
          <label>
            Name: <input type="text" name="name" />
          </label>
          <button type="submit">Search</button>
        </Form>
        {name && <p>Result: {name}</p>}
      </section>

      {/* File Upload Example */}
      <section>
        <h2>Upload a File</h2>
        <Form method="post" encType="multipart/form-data">
          <label>
            File: <input type="file" name="file" />
          </label>
          <button type="submit">Upload</button>
        </Form>
      </section>
    </div>
  );
}

<Link>

Its also pre-built in react as well as remix, extension of anchor tag.

import { Link } from "@remix-run/react";

<Link to="/dashboard">Dashboard</Link>;

export const link = () => {
return [ { rel:'canonical', herf:'/post/389327832' } ]
}

<Links>

This component is generally used only in root.tsx file as all link tag present under links component.

import { Links } from "@remix-run/react";

export const links = () => [
  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
  {
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
  },
  {
    rel: 'stylesheet',
    href: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css',
  },
  {
    rel: 'icon',
    type: "image/x-icon",
    href: './favicon.ico',
  },
]

export default function Root() {
  return (
    <html>
      <head>
        <Links />
      </head>
      <body></body>
    </html>
  );
}

<LiveReload>

This component generally connencts your app to Remix asset server and automatically renders the file content changed and save it in development environment. In production it renders null.

import { LiveReload } from "@remix-run/react";

export default function Root() {
  return (
    <html>
      <head />
      <body>
        <LiveReload />
      </body>
    </html>
  );
}

<Meta>

This component same does the links component as it renders all the meta tags under one roof.

import { Meta } from "@remix-run/react";

export default function Root() {
  return (
    <html>
      <head>
        <Meta />
      </head>
      <body></body>
    </html>
  );
}


export const meta = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};