React application built with: Next.JS | Tailwind CSS | TypeScript and Zustand
For development, please run the following commands:
# This will create an env file with all the things needed for local development (rewrites paths, etc.)
cp .template.env .env.development.local*Requieres Node installed.
npm install
# then:
npm run dev
# or
yarn devYour changes will be reflected (live reload) at the following URL: http://localhost:3000
The application is an Next.JS app, using TailwindCSS as a CSS class utility framework. To keep it simple, most of the layuot is keep in the src/pages/index.tsx file with the exception of some componentes that can be found in the src/components folder.
While working in the layout, we really recommend going through https://tailwindcss.com/docs/editor-setup for a better support of TailwindCSS & Intelisense
If we want a blue link with some margins, we can do it like this:
<a href="#" className="ml-2 text-blue-500">Where ml-2 (8px) is the margin-left class, and text-blue-500 is the color class.
NOTE: For text, background and borders colors, we recommend using the
-500value. See colors scheme
We're providing two themes: dark and light. To build a dark theme, we can use the dark prefix. See more information.
<div class="bg-white dark:bg-slate-800 rounded-lg">
// ...
</div>On the light theme, the element will use the white background and the dark:bg-slate-800 class will be applied on the Dark Theme.
If you only need one team, remove the toggle from the src/components/layout/Header.tsx file, it wil default to the dark theme. If you need to default to the light theme, edit the src/pages/_document.tsx file and edit the <Html className='dark'> to light.
Currently we don't need to manage a lot of application state but we do have Zustand as state management library if needed.
You can serve the applications a Server-Side render with npm start. This will build the Production Ready application.
If you want to generate static files to serve as Static Site on Github Pages for example you should run npm run static. This will generate an /out folder with all the static files.
NOTE:: You'll need to edit next.config.js, uncomment add replace the default project-template name with your repository name for assetPrefix & basePath, this configuration is needed to correctly render and set paths in Github Pages.
There's already an github workflow that will deploy to your repo's GH Pages, check ./github/workflows/gh-pages.deploy.ymlfile.