XiaoPotato-FE

Frontend of the XiaoPotato application

Website

XiaoPotato

Guest Account: Guest/Guest123

Installation

git clone https://github.com/XiaoPotato-Team/XiaoPotato-FE.git
cd XiaoPotato-FE
pnpm install & pnpm run dev

Create/Modify the root/.env/.env file, add your own API_KEY

VITE_X_POTATO_BASE_URL="https://[URL]"
VITE_WEATHER_API_KEY=""
VITE_RESEND_API_KEY=""
VITE_SOCKET_URL="wss://[URL]"

Cloudflare Wrangler

pnpm install -g wrangler
wrangler login
wrangler pages dev dist

use puppeteer to craw the img

# fisrt update .puppeteer/index.cjs crawImgsPath and than execute the command
npm run craw-img

# copy images' path and than ask AI to general the sql based on the Post table scheme, reference: src/main/resources/sql/ddl/insertPostDataAndBindUser.sql

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

dependencies list

UI Library

• @material-tailwind/react@beta
• option: daisyui
• option: magicui
• option: pagedone
• option: flowbite-react
• Top 5 Tailwind Component Libraries: Apestein 2023

Dependencies and notes

• React-Hook-Form
• React-Query
• React-Table
• React-Select
• React-Icons
• React-Router
• React-Spinners
• React-Toastify
• React-Datepicker
• React-Dropzone
• React-Aria
• React-Hotkeys-Hook
• React-Textarea-Autosize
• React-hooks-ts
• React-email
• React-xss-defence
• dompurify
• EventBus mitt

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

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,
  },
});