Skip to content
/ radzionkit Public template

RadzionKit: A versatile full-stack development toolkit designed to streamline and enhance your coding projects with a suite of integrated, easy-to-use packages.

kit.radzion.com

License

MIT license
221 stars 38 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

radzionc/radzionkit

BranchesTags

Repository files navigation

RadzionKit: Speedy Setup for Robust Full-Stack Monorepo Projects

RadzionKit

RadzionKit is the ultimate solution for developers looking to jumpstart their projects without the stress of complex setups. Designed as a comprehensive monorepo, it provides an integrated suite of tools for full-stack development, from a robust UI library to streamlined backend services. With RadzionKit, you save valuable time both in kicking off new projects and during the development process, ensuring a smooth, efficient, and hassle-free coding experience. Embrace the power of simplicity and efficiency with RadzionKit — your partner in transforming coding challenges into coding triumphs.

Monorepo Overview: Inside RadzionKit's Diverse Package Ecosystem

RadzionKit takes advantage of Yarn Workspaces to streamline a monorepo setup, organizing code into two primary directories: lib and product. The lib folder houses generic code packages like @lib/utils or @lib/ui, designed to be project-agnostic and easily portable to any project without carrying over project-specific logic. On the other hand, the product directory houses example implementations, such as @product/api or @product/ui-demo, that serve as blueprints demonstrating how to integrate and adapt the @lib packages to the unique needs of your project. This thoughtful architecture not only streamlines the development process but also enhances the reusability of code, making it effortless to scale and modify your project as it grows.

Lib Packages

  • @lib/utils - A collection of utility functions for common tasks.
  • @lib/ui - A versatile UI library with components, hooks, and utils.
  • @lib/dynamodb - Utilities for working with AWS DynamoDB.
  • @lib/dnd - Components and utilities for drag-and-drop functionality.
  • @lib/codegen - Code generation utilities for TypeScript and JSON files.
  • @lib/countries - Types and utilities for handling country-related data.
  • @lib/lambda - Utilities for working with AWS Lambda functions.
  • @lib/analytics-ui - Components to integrate Amplitude analytics into your React application.
  • @lib/auth - Types for authentication sessions and OAuth providers.
  • @lib/next-ui - Components and utilities for Next.js applications.
  • @lib/subscription-ui - Components for subscription payments.
  • @lib/subscriptions - Types for subscription payments.
  • @lib/chain - Utilities for working with Web3 and blockchain.
  • @lib/chain-ui - Components for Web3 applications.

Product Packages

Getting Started with RadzionKit: Launching Your New Project

Initiate your project using RadzionKit from our GitHub template. The demo folder serves as a practical example, showcasing package integration — rename it to reflect your project's name or remove it if you prefer to start fresh. Update any @product references to @{project_name}, install dependencies with yarn, and your setup is complete.

Integrating RadzionKit's lib Packages into Your Monorepo

Select the @lib packages you require from RadzionKit and copy them into your monorepo. Be sure to include all associated dependencies; for example, if you choose @lib/ui, check if it necessitates @lib/utils and copy it as well. There's no need for renaming—these packages are designed to work out of the box. For practical examples of how these packages can be used within an application, refer to the implementations in the demo folder. After incorporating the desired packages, run yarn to install the dependencies, and your monorepo will be equipped with the versatile features of RadzionKit.

Effortlessly Integrate RadzionKit's UI Package: Enhance Your Project's User Interface

  1. For NextJS Projects Only: Update your _document.tsx file by extending the StyledComponentsDocument from the @lib/next-ui package, in order to integrate support for the styled-components library used in the @lib/ui package.
import { StyledComponentsDocument } from '@lib/next-ui/StyledComponentsDocument'

class MyDocument extends StyledComponentsDocument {
  // ...
}
  1. For NextJS Projects Only: Update your next.config.js to set styledComponents to true in the compiler options for proper styling, and include your UI package in transpilePackages to ensure Next.js correctly compiles and includes the UI package from the monorepo.
const nextConfig = {
  // ...
  compiler: {
    styledComponents: true,
  },
  transpilePackages: ['@lib/ui'],
}
  1. Add a styled.d.ts to your project and include the following content to integrate RadzionKit's theme with styled-components' default theme:
import 'styled-components';
import { Theme } from '@lib/ui/theme/Theme';

declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}
  1. Add persistentState File for Local Storage Interaction: Place a persistentState file in the state folder of your app package to enhance local storage interaction. For detailed guidance, refer to this YouTube video: Understanding Persistent State in React.
import { TemporaryStorage } from '@lib/ui/state/TemporaryStorage'
import { LocalStorage } from '@lib/ui/state/LocalStorage'
import { createPersistentStateHook } from '@lib/ui/state/createPersistentStateHook'
import { createPersistentStateManager } from '@lib/ui/state/createPersistentStateManager'

export enum PersistentStateKey {
  ThemePreference = 'themePreference',
}

const persistentStorage =
  typeof window !== 'undefined'
    ? new LocalStorage<PersistentStateKey>()
    : new TemporaryStorage<PersistentStateKey>()

export const usePersistentState =
  createPersistentStateHook<PersistentStateKey>(persistentStorage)

export const managePersistentState =
  createPersistentStateManager<PersistentStateKey>(persistentStorage)
  1. Implement ThemeProvider and GlobalStyle in Your App: In your application, use the ThemeProvider from RadzionKit to manage theme changes and store user preferences with the usePersistentState hook. Include the GlobalStyle component to apply global CSS styles, such as font family and custom scrollbars, ensuring a consistent look and feel across your app.
import { GlobalStyle } from '@lib/ui/css/GlobalStyle'
import { Inter } from 'next/font/google'
import { PersistentStateKey, usePersistentState } from '@product/ui-demo/state/persistentState'
import { ThemePreference } from '@lib/ui/theme/ThemePreference'
import { DarkLightThemeProvider } from '@lib/ui/theme/DarkLightThemeProvider'

const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '500', '600', '800'],
})

export const App = () => {
  const [theme, setTheme] = usePersistentState<ThemePreference>(
    PersistentStateKey.ThemePreference,
    'system',
  )

  return (
    <DarkLightThemeProvider value={theme} onChange={setTheme}>
      <GlobalStyle fontFamily={inter.style.fontFamily} />
      // ...
    </DarkLightThemeProvider>
  )
}

Managing Dependencies & Versions

To upgrade to the latest version of Yarn, run the following command:

yarn set version stable

To upgrade every dependency to the latest version, run the following command:

yarn workspaces foreach --all exec yarn up "*"

Examples Using RadzionKit

RadzionKit Cookbook: Simplifying Development with Practical YouTube Tutorials

To maximize your experience with RadzionKit, we've compiled the RadzionKit Cookbook, a series of YouTube tutorials designed to showcase the toolkit's practical applications in solving everyday development challenges. These tutorials cater to all skill levels, from beginners to experienced developers, and cover a range of topics from initial setup to advanced integrations. The RadzionKit Cookbook videos are an invaluable resource, offering step-by-step instructions, practical tips, and expert insights, all aimed at helping you harness the full power of RadzionKit for efficient, elegant solutions in your development projects.

About

RadzionKit: A versatile full-stack development toolkit designed to streamline and enhance your coding projects with a suite of integrated, easy-to-use packages.

kit.radzion.com

Topics

react nodejs components typescript ui terraform dynamodb

Resources

Readme

License

MIT license
Activity

Stars

221 stars

Watchers

5 watching

Forks

38 forks
Report repository

Contributors 2

Languages