Getting Started with AlgoStack SSR

Prerequisites

Node.js and npm installed.
Basic understanding of React and Next.js.

Step 1: Clone the Repository

Use the following command to clone the AlgoStack repository:

git clone https://github.com/headline-design/algostack-ssr.git

Step 2: Install Dependencies

cd algostack-ssr
npm install

Step 3: Run the Application

npm run dev

Adding New Views

To integrate new views like GettingStartedView into your application:

Ensure your component is structured appropriately as a view. For this example, we're using GettingStartedView placed in the algostack-app/views directory.
Import the view in your main page.tsx file for "getting-started" in the app directory, similar to other pages:

import GettingStartedView from "@/algostack-app/views/getting-started-view";

Adding a new page in the app router works by nesting under a common layout component. Define a shared layout that suits your application's structure. For example:

import { ClientProvider } from "./providers";
import { inter, unbounded } from "@/dashboard/styles/fonts";
import { cn, constructMetadata } from "@/dashboard/lib/utils";
import { headers } from "next/headers";

import React from "react";
import ServerProvider from "./server-provider";
import type { Viewport } from "next";

export const metadata = constructMetadata();

export const viewport: Viewport = {
  initialScale: 1,
  width: "device-width",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode | any;
}) {

  return (
    <ClientProvider>
      <html
        lang="en"
        suppressHydrationWarning
        className={`${unbounded.variable} ${inter.className}`}
      >
        <body >
          <ServerProvider>{children}</ServerProvider>
        </body>
      </html>
    </ClientProvider>
  );
}

By following these steps, you integrate the GettingStartedView into your application's routing, making it accessible to users via the defined path.

Adding Components and Utilities

Create new files in the algostack-app/components or algostack-app/lib directories to add reusable components or utility functions.

Explore and build your application with AlgoStack SSR, leveraging Next.js and Tailwind CSS.