Insect-Betyár 🐛🛒

Insect-Betyár is a quirky and functional e-commerce web app dedicated to insect-related products. Users can browse bug-themed items, add them to a cart, and experience a clean shopping flow — all built with a fast, modern frontend stack.

🌐 Live Demo

Check out the live demo: Insect-Betyár Live Demo

🧰 Tech Stack: React + TypeScript + Vite + TanStack + Bootstrap

This template provides a minimal setup to get React working in Vite with HMR (Hot Module Replacement), TypeScript for type safety, TanStack (React Query) for data fetching, TanStack Router for advanced routing, and Bootstrap for styling. It also includes ESLint for code linting and formatting.

Features

React: A JavaScript library for building user interfaces.

TypeScript: A typed superset of JavaScript for better developer experience.

Vite: A fast build tool and development server.

TanStack (React Query): A powerful data-fetching library for React.

Bootstrap: A popular CSS framework for responsive and mobile-first designs.

ESLint: For code linting and maintaining code quality.

export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
  // Set the react version
  settings: { react: { version: '18.3' } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs['jsx-runtime'].rules,
  },
})

TanStack (React Query) Example

import React from 'react';
import { useQuery } from '@tanstack/react-query';

const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  return response.json();
};

const UsersList: React.FC = () => {
  const { data, isLoading, error } = useQuery(['users'], fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error fetching data</div>;

  return (
    <ul>
      {data?.map((user: any) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UsersList;

Bootstrap Integration

import React from 'react';

const AlertButton: React.FC = () => {
  return (
    <button className="btn btn-primary">
      Click Me!
    </button>
  );
};

export default AlertButton;

Zod for validation

import { z } from "zod";

// creating a schema for strings
const mySchema = z.string();

// parsing
mySchema.parse("tuna"); // => "tuna"
mySchema.parse(12); // => throws ZodError

// "safe" parsing (doesn't throw error if validation fails)
mySchema.safeParse("tuna"); // => { success: true; data: "tuna" }
mySchema.safeParse(12); // => { success: false; error: ZodError }