A Next JS typescript-based Starter pack to start off your web3 project, clone this, and skip the initial repetitive steps.
Rainbow Kit,Wagmiðers: For connecting wallet and playing with contractsTailwindcss: CSS Frameworkreact-hot-toast: for in-app alerts and info popupsEslint&Prettiersetup- PWA functionality using
@ducanh2912/next-pwa ZustandLibrary for state managementMuisetup that works with tailwind CSS- Dark mode and light mode, synced tailwindcss & mui dark mode and light mode
- Configure
tailwind.config.ts, to add extend colors variables. - Use
globals.cssto define variable colors for light mode and dark mode, but add dark mode variable colors in[data-theme='dark']and light mode variable colors in:root - configure
darkThemeandlightTHemeinMuiThemeWrapper.tsxto theme mui components - Use
const {theme, toggleTheme} = useTheme()fromTailwindThemeProvider.tsxto get the current theme and toggle the theme.
- Configure
public/manifest.jsonas per your app , to change app name and app icon for your PWA app.