Starter template based on Vite incl. all technologies you need. If you work with Visual Studio Code, install the Tailwind CSS IntelliSense extension for a better experience.
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
In this template we use Vite not just as build tool. In the index.html you will see, how the environment variables are injected into the
index.htmlfile. This is done by the vite-plugin-html-env
React lets you build user interfaces out of individual pieces called components. You should already have an Know-how of React, Typescript and Javascript for this template. If not, you can learn it here React with TypeScript Crash Course.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. A special section ist theming your website. To work with Visual Studio Code, the Editor Setup is important!
IMPORTANT => Translating a Custom Design System to Tailwind CSS
Designing with Tailwind CSS: Composing Utilities with @apply
A list of component templates and plugins:
With this Vite plugin you can inject environment variables into static files like index.html.
LocalForage (comming soon)
localForage is a JavaScript library that improves the offline experience of your web app by using an asynchronous data store with a simple, localStorage-like API. It allows developers to store many types of data instead of just strings.
Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase).
Lodash (comming soon)
Lodash is a JavaScript library that helps programmers write more concise and maintainable JavaScript. It is a collection of methods that helps perform common tasks with arrays, numbers, objects, strings, etc.
React Router enables client side routing. Client side routing allows your app to update the URL from a link click without making another request for another document from the server.
There is a good intrudoction on YouTube.
react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.
Because of the nature of single page applications (SPAs), modifying metadata in React apps can be tricky without using a helper library. Lucky for us, that library already exists – and it's called React Helmet.
React hook library, ready to use, written in Typescript.
There is also a Free React Hooks Course
Performant and powerful data synchronization for React
Over 100,000 open source vector icons as a React Component.
Shift + Alt + O
Master the Art of Crafting Responsive Web Apps like a Pro!
Structured routes Create and deploy sitemap
Generate structured data Schema markup generator Markup helper Benefits
Milanote is an easy-to-use tool to organize your ideas and projects into visual boards. Add notes, images, links and files, organize them visually and share them with your team.
Canva is a graphic design platform for creating visual content. The software works according to the drag-and-drop principle and already contains templates, images, fonts and graphic elements that can be used by the users. The use is basically free of charge, but Canva also offers the paid extensions "Pro" and "Enterprise", with which further functions and content can be unlocked.
Figma is a collaborative software for prototyping in the field of UX or UI design. It is mainly used as a web application.
- User Code Splitting => https://www.youtube.com/watch?v=JU6sl_yyZqs
- Add https://react-query-v3.tanstack.com/
- Complete ld+json
- Make the Pages more beauty