Init

AndreasKarz · Jan 20, 2023 · 3248f50 · 3248f50
1 parent a987f6a
commit 3248f50
Show file tree

Hide file tree

Showing 17 changed files with 2,274 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1,2 +1,82 @@
-# ReactStarterTemplate
-Starter template based on Vite with React, React-Router, Tailwind, Flowbite and a small Starter Page
+# React, React-Router, TailwindCSS, Flowbite Template
+
+> Starter template based on [Vite](https://vitejs.dev/guide/) with a small boilerplate page incl. **routing & theming**.
+
+## Docs
+
+### [React](https://reactjs.org/docs/getting-started.html)
+
+#### [React Router](https://reactrouter.com/en/main/start/overview)
+
+> 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](https://www.youtube.com/watch?v=Ul3y1LXxzdU) on YouTube.
+
+#### [React Hooks](https://reactjs.org/docs/hooks-intro.html)
+
+> Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
+
+> There is also a [Free React Hooks Course](https://courses.webdevsimplified.com/react-hooks-simplified)
+
+### [TailwindCSS](https://tailwindcss.com/docs/utility-first)
+
+> 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](https://flowbite.com/docs/customize/theming/) your website.
+
+### [Flowbite](https://flowbite.com/docs/getting-started/introduction/)
+
+> Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS.
+
+### [Flowbite React](https://flowbite-react.com/)
+
+> Brings Flowbite to React with special React Components.
+
+## Tips
+
+### Organize imports
+
+> Shift + Alt + O
+
+## Manual installation
+
+```powershell
+yarn create vite my-app --template react-swc-ts
+
+cd my-app
+
+yarn add react-router-dom localforage match-sorter sort-by
+
+yarn add -D tailwindcss postcss autoprefixer
+
+yarn run tailwindcss init -p
+
+yarn add flowbite flowbite-react
+```
+
+### src/index.css
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### tailwind.config.cjs
+
+```js
+/** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors');
+
+module.exports = {
+	content: ['./src/**/*.{js,jsx,ts,tsx}', 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
+	theme: {
+		colors: {
+			gray: colors.coolGray,
+			blue: colors.lightBlue,
+			red: colors.rose,
+			pink: colors.fuchsia,
+		},
+		extend: {},
+	},
+	plugins: [require('flowbite/plugin')],
+};
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "my-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "flowbite": "^1.6.2",
+    "flowbite-react": "^0.3.7",
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.7.0",
+    "sort-by": "^1.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
+  }
+}
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,64 @@
+import { Footer } from 'flowbite-react';
+import { Navbar } from 'flowbite-react/lib/esm/components';
+import { useState } from 'react';
+import { NavLink, Route, Routes } from 'react-router-dom';
+import Home from './pages/Home';
+
+function App() {
+	const [count, setCount] = useState(0);
+
+	return (
+		<>
+			<Navbar
+				fluid={true}
+				rounded={true}
+			>
+				<Navbar.Brand>
+					<img
+						src='https://flowbite.com/docs/images/logo.svg'
+						className='mr-3 h-6 sm:h-9'
+						alt='Flowbite Logo'
+					/>
+					<span className='self-center whitespace-nowrap text-xl font-semibold dark:text-white'>
+						Flowbite
+					</span>
+				</Navbar.Brand>
+				<Navbar.Toggle />
+				<Navbar.Collapse>
+					<NavLink to='/'>Home</NavLink>
+					<NavLink to='/about'>About</NavLink>
+
+					<Navbar.Link href='/navbars'>Services</Navbar.Link>
+					<Navbar.Link href='/navbars'>Pricing</Navbar.Link>
+					<Navbar.Link href='/navbars'>Contact</Navbar.Link>
+				</Navbar.Collapse>
+			</Navbar>
+
+			<Routes>
+				<Route
+					path='/'
+					element={<Home />}
+				/>
+				<Route
+					path='about'
+					element={<h1>About</h1>}
+				/>
+			</Routes>
+			<Footer container={true}>
+				<Footer.Copyright
+					href='#'
+					by='Flowbite™'
+					year={2022}
+				/>
+				<Footer.LinkGroup>
+					<NavLink to='/about'>About</NavLink>
+					<Footer.Link href='#'>Privacy Policy</Footer.Link>
+					<Footer.Link href='#'>Licensing</Footer.Link>
+					<Footer.Link href='#'>Contact</Footer.Link>
+				</Footer.LinkGroup>
+			</Footer>
+		</>
+	);
+}
+
+export default App;
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+nav a.active,
+footer a.active {
+	color: pink;
+}
+
+footer {
+	position: fixed;
+	bottom: 0;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+import { BrowserRouter } from 'react-router-dom';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+	<React.StrictMode>
+		<BrowserRouter>
+			<App />
+		</BrowserRouter>
+	</React.StrictMode>
+);
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Home() {
+	return <div>Home</div>;
+}
+
+export default Home;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors');
+
+module.exports = {
+	content: ['./src/**/*.{js,jsx,ts,tsx}', 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
+	theme: {
+		colors: {
+			gray: colors.coolGray,
+			blue: colors.lightBlue,
+			red: colors.rose,
+			pink: colors.fuchsia,
+		},
+		extend: {},
+	},
+	plugins: [require('flowbite/plugin')],
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})