Frontend Repositories Overview
Welcome to our overview of the main frontend repositories at hybr1d. This document provides essential information about each repository, including its purpose, technology stack, and key features.
1. Pikachu (Console)
Section titled “1. Pikachu (Console)”Description
Section titled “Description”pikachu (formerly hybr1d-frontend) is our primary product, a feature-rich SaaS platform tackling IT and HR.
Key Features
Section titled “Key Features”- Comprehensive and scalable SaaS platform.
- Utilizes the latest React features and robust state management tools.
Technology Stack
Section titled “Technology Stack”- Core Libraries: React, React DOM
- State Management: Zustand
- Styling and Design: CSS Modules, Bootstrap(Legacy), SASS(Legacy), Framer Motion
- Data Fetching: Axios, @tanstack/react-query
- Utilities: Date-Fns, Yup
- Routing: React Router DOM
- Forms: Formik, React Select, React Datepicker
- Analytics and Error Tracking: @sentry/react, @sentry/tracing, Mixpanel-browser
- Development Tools: TypeScript, ESLint, Prettier, Husky, Commitizen
- Deployment: AWS
Repository Link
Section titled “Repository Link”2. Lucario (Landing)
Section titled “2. Lucario (Landing)”Description
Section titled “Description”lucario (formerly hybr1d-landing) is our marketing site built with Next.js, featuring a blog that integrates
WordPress as a CMS.
Key Features
Section titled “Key Features”- Fast, SEO-optimized landing pages using Next.js.
- Blog section powered by WordPress.
- Utilizes Next.js app router features for efficient navigation.
Technology Stack
Section titled “Technology Stack”- Framework: Next.js
- Styling and Animation: Framer Motion, Swiper for slideshows
- Data Fetching: Axios
- Utilities: date-fns for date operations, clsx for className concatenation
- SEO and Marketing Tools: React-GTM for Google Tag Manager, React-Hotjar, Mixpanel for analytics
- CMS Integration: WordPress for blog content management
- Other Libraries: React Icons, React Share for social media integration
- Deployment: Vercel, Blogs: AWS LightSail
Repository Link
Section titled “Repository Link”3. Charizard
Section titled “3. Charizard”Description
Section titled “Description”charizard is our internal React UI library built using Vite and Storybook, utilizing ZagJS for UI
primitives based on State Machines.
Key Features
Section titled “Key Features”- Modular and reusable UI components for
pikachu(the console). - Utilizes state-of-the-art ZagJS for building interactive UI components.
- Uses storybook to development components in isolation
- Uses Vite as the build/frontend tool
- NPM Link
Technology Stack
Section titled “Technology Stack”- Core Libraries: React, React DOM
- UI Primitives: ZagJS (based on State Machines)
- State Management: Zustand
- Build and Development Tools: Vite, Storybook, TypeScript
- Testing and Interaction: @storybook/addon-interactions, @storybook/testing-library
- Utilities: clsx, react-inlinesvg, react-intersection-observer
- Publishing: Published to npm for consumption by
pikachu
Repository Link
Section titled “Repository Link”4. Zapdos
Section titled “4. Zapdos”Description
Section titled “Description”Zapdos is our documentation site, where you are viewing this content, built using the
Astro framework, providing comprehensive documentation for our projects and
tools.
Key Features
Section titled “Key Features”- Centralized documentation for all frontend-related projects and libraries.
- Built with Astro, enabling efficient static site generation.
Technology Stack
Section titled “Technology Stack”- Framework: Astro
- Content Management: Markdown and MDX for easy content writing and embedding components.
- Styling: CSS Modules
- Deployment: Vercel
Repository Link
Section titled “Repository Link”For more detailed information about each repository, please refer to their respective README files or contact the repository maintainers.