feat: new web

apps/web/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_PROJECT_ID="walletconnect console dev project id"

apps/web/.eslintrc.json

@@ -1,3 +1,37 @@
 {
-  "extends": "next/core-web-vitals"
+  "overrides": [
+    {
+      "files": ["*.mjs", "*.ts", "*.tsx"],
+      "parserOptions": {
+        "project": "tsconfig.json"
+      }
+    }
+  ],
+  "ignorePatterns": ["**/components/ui"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/consistent-type-imports": "warn",
+    "react/react-in-jsx-scope": "off",
+    "react/no-unescaped-entities": "off",
+    "react/function-component-definition": [
+      "warn",
+      {
+        "namedComponents": "function-declaration",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "off"
+  }
 }

apps/web/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -34,6 +35,11 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-package-lock.json
-pnpm-lock.yaml
-yarn.lock
+# Auto Generated PWA files
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map
+**/public/swe-worker-development.js

apps/web/README.md

@@ -1,94 +1,36 @@
-# [NextJS Tailwind Blog Post Details Page](http://demos.creative-tim.com/nextjs-tailwind-blog-post-details-page?ref=readme-ntbpdp) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/nextjs-tailwind-blog-post-details-page&text=Check%20Material%20Tailwind%202%20Template%20made%20by%20@CreativeTim%20#webdesign%20#template%20#materialdesign%20#react%20https://www.creative-tim.com/product/nextjs-tailwind-blog-post-details-page)
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-![version](https://img.shields.io/badge/version-1.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/nextjs-tailwind-blog-post-details-page.svg)](https://github.com/creativetimofficial/nextjs-tailwind-blog-post-details-page/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/nextjs-tailwind-blog-post-details-page.svg)](https://github.com/creativetimofficial/nextjs-tailwind-blog-post-details-page/issues?q=is%3Aissue+is%3Aclosed)
+## Getting Started
 
-![Image](https://s3.amazonaws.com/creativetim_bucket/products/747/original/material-tailwind-react-blog-post-details-template-thumbnail.jpg)
+First, run the development server:
 
-Introducing Tailwind Blog Page, a modern and feature-rich blog template built on the foundation of Tailwind CSS and Material Tailwind.
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-Are you in search of a professionally designed and highly customizable blog template tailored for bloggers, writers, and content creators to establish a strong online presence and share their thoughts with the world? Look no further! We are excited to present to you our Free Blog Page Template, meticulously crafted to cater to the needs of blog website developers like you.
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-This template, designed with Tailwind CSS and Material Tailwind, offers effortless customization to align perfectly with your website's unique branding. The free blog template includes essential features such as a hero, categories, blog posts, and related articles sections.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-**Documentation built by Developers**
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-Each element is well presented in very complex documentation.
+## Learn More
 
-You can read more about the [documentation here](https://www.material-tailwind.com/docs/react/installation).
+To learn more about Next.js, take a look at the following resources:
 
-**HELPFUL LINKS**
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-- View [Github Repository](https://github.com/creativetimofficial/nextjs-tailwind-blog-post-details-page)
-- Check [FAQ Page](https://www.creative-tim.com/faq)
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-## [Demo](https://creative-tim.com/product/nextjs-tailwind-blog-post-details-page)
+## Deploy on Vercel
 
-## Quick start
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Quick start options:
-
-- Download from [Creative Tim](https://www.creative-tim.com/product/nextjs-tailwind-blog-post-details-page?ref=readme-ntbpdp).
-
-## Terminal Commands
-
-1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/).
-2. Navigate to the root ./ directory of the product and run `npm install` to install our local dependencies.
-
-## Documentation
-
-The documentation for the Material Dashboard is hosted at our [website](https://www.material-tailwind.com/docs/react/installation?ref=readme-ntbpdp).
-
-## Browser Support
-
-At present, we officially aim to support the last two versions of the following browsers:
-
-<img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png" width="64" height="64">
-
-## Resources
-
-- [Live Preview](https://demos.creative-tim.com/nextjs-tailwind-blog-post-details-page?ref=readme-ntbpdp)
-- [Download Page](https://www.creative-tim.com/product/nextjs-tailwind-blog-post-details-page?ref=readme-ntbpdp)
-- Documentation is [here](https://www.material-tailwind.com/docs/react/installation?ref=readme-ntbpdp)
-- [License Agreement](https://www.creative-tim.com/license?ref=readme-ntbpdp)
-- [Support](https://www.creative-tim.com/contact-us?ref=readme-ntbpdp)
-- Issues: [Github Issues Page](https://github.com/creativetimofficial/nextjs-tailwind-blog-post-details-page/issues)
-- [Nepcha Analytics](https://nepcha.com?ref=readme) - Analytics tool for your website
-
-## Reporting Issues
-
-We use GitHub Issues as the official bug tracker for the Nextjs Tailwind Author Page. Here are some advices for our users that want to report an issue:
-
-1. Make sure that you are using the latest version of the Nextjs Tailwind Author Page. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/nextjs-tailwind-blog-post-details-page?ref=readme-ntbpdp).
-2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
-3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
-
-## Technical Support or Questions
-
-If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-ntbpdp) instead of opening an issue.
-
-## Licensing
-
-- Copyright 2023 [Creative Tim](https://www.creative-tim.com?ref=readme-ntbpdp)
-- Creative Tim [license](https://www.creative-tim.com/license?ref=readme-ntbpdp)
-
-## Useful Links
-
-- [More products](https://www.creative-tim.com/templates?ref=readme-ntbpdp) from Creative Tim
-
-- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
-
-- [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-ntbpdp) from Creative Tim
-
-- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-ntbpdp) (earn money)
-
-##### Social Media
-
-Twitter: <https://twitter.com/CreativeTim>
-
-Facebook: <https://www.facebook.com/CreativeTim>
-
-Dribbble: <https://dribbble.com/creativetim>
-
-Google+: <https://plus.google.com/+CreativetimPage>
-
-Instagram: <https://instagram.com/creativetimofficial>
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/web/memo.md

@@ -0,0 +1,4 @@
+1. .css-1xgsf0v 1000\*1000
+2. MuiBox-root css-1x1xx5k
+3. space-y-2
+4. flex flex-col items-center justify-center space-y-4 text-center

apps/web/next.config.js → apps/web/next.config.mjs

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
-const withPWA = require("@ducanh2912/next-pwa").default({
-  dest: "public",
+import withPWAInit from "@ducanh2912/next-pwa";
+const withPWA = withPWAInit({
+  dest: 'public',
   cacheOnFrontEndNav: true,
   aggressiveFrontEndNavCaching: true,
   reloadOnOnline: true,
@@ -9,16 +10,18 @@ const withPWA = require("@ducanh2912/next-pwa").default({
     disableDevLogs: true,
   },
 });
+
 const nextConfig = {
-  output: 'export',
   reactStrictMode: true,
   swcMinify: true,
   webpack: config => {
     config.resolve.fallback = { fs: false, net: false, tls: false };
     return config;
   },
   images: {
-    unoptimized: true,
+    unoptimized: false,
+    formats: ['image/avif', 'image/webp'],
   },
-}
-module.exports = withPWA(nextConfig);
+};
+
+export default withPWA(nextConfig);

apps/web/package.json

@@ -1,36 +1,49 @@
 {
   "name": "web",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": "18.x"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.2.6",
-    "@heroicons/react": "^2.0.18",
-    "@material-tailwind/react": "^2.1.2",
-    "@rainbow-me/rainbowkit": "^2.0.5",
-    "@tanstack/react-query": "^5.28.14",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
+    "@tanstack/react-query": "^5.32.0",
+    "@web3modal/siwe": "^4.1.11",
+    "@web3modal/wagmi": "^4.1.11",
     "next": "14.2.2",
+    "next-auth": "^4.24.7",
     "react": "^18.2.0",
-    "react-dom": "^18",
+    "react-dom": "^18.2.0",
+    "siwe": "^2.3.2",
     "viem": "2.x",
-    "wagmi": "^2.5.18"
+    "wagmi": "^2.6.0"
   },
   "devDependencies": {
-    "@splinetool/react-spline": "^2.2.6",
-    "@types/node": "^20",
-    "@types/react": "^18.2.42",
+    "@types/node": "^20.11.5",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18",
-    "autoprefixer": "^10",
-    "eslint": "^8",
-    "eslint-config-next": "13.5.4",
-    "postcss": "^8",
-    "tailwindcss": "^3",
-    "typescript": "^5",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.3.3",
     "webpack": "^5.91.0"
   }
 }

apps/web/postcss.config.js

@@ -2,5 +2,5 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-  },
-}
+  }
+}

apps/web/public/manifest.json

@@ -1,10 +1,10 @@
 {
     "id": "2",
-    "name": "Konan PWA app",
-    "short_name": "Konan PWA App",
+    "name": "XueDAO-web",
+    "short_name": "XueDAO",
     "icons": [
         {
-            "src": "/favicon.png",
+            "src": "/konan_logo.webp",
             "sizes": "144x144",
             "type": "image/png",
             "purpose": "any"