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
&Prettier
setup- PWA functionality using
@ducanh2912/next-pwa
Zustand
Library for state managementMui
setup 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.css
to 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
darkTheme
andlightTHeme
inMuiThemeWrapper.tsx
to theme mui components - Use
const {theme, toggleTheme} = useTheme()
fromTailwindThemeProvider.tsx
to get the current theme and toggle the theme.
- Configure
public/manifest.json
as per your app , to change app name and app icon for your PWA app.