├── .gitattributes ├── .gitignore ├── DEVELOPMENT.md ├── README.md ├── eslint.config.mjs ├── package-lock.json ├── package.json ├── src └── main.ts ├── templates ├── .DS_Store └── basic-tw │ ├── .DS_Store │ ├── README.md │ ├── basic.config.ts │ ├── eslint.config.js │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── tsconfig.json ├── tsup.config.ts └── vitest.config.mts /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /DEVELOPMENT.md: -------------------------------------------------------------------------------- 1 | # Development Guide 2 | 3 | This document contains instructions for developing and maintaining `create-lofi-app`. 4 | 5 | ## Local Development 6 | 7 | 1. Clone the repository: 8 | ```bash 9 | git clone https://github.com/yourusername/create-lofi-app.git 10 | cd create-lofi-app 11 | ``` 12 | 13 | 2. Install dependencies: 14 | ```bash 15 | npm install 16 | ``` 17 | 18 | 3. Make your changes to the source code in `src/` 19 | 20 | 4. Build and test locally: 21 | ```bash 22 | npm run build 23 | npm link 24 | npx create-lofi-app test-app 25 | ``` 26 | 27 | ## Testing 28 | 29 | Run the test suite: 30 | ```bash 31 | npm test 32 | ``` 33 | 34 | ## Publishing to npm 35 | 36 | ### Preparing a Release 37 | 38 | 1. Update version in `package.json`: 39 | ```bash 40 | npm version patch # for bug fixes 41 | npm version minor # for new features 42 | npm version major # for breaking changes 43 | ``` 44 | 45 | This will: 46 | - Update the version in package.json 47 | - Create a git tag 48 | - Create a version commit 49 | 50 | ### Building and Publishing 51 | 52 | 1. Build the package: 53 | ```bash 54 | npm run build 55 | ``` 56 | 57 | 2. Test the build locally (recommended): 58 | ```bash 59 | npm link 60 | npx create-lofi-app test-app 61 | ``` 62 | 63 | 3. Publish to npm: 64 | ```bash 65 | npm login # if not already logged in 66 | npm publish 67 | ``` 68 | 69 | 4. Push the release to GitHub: 70 | ```bash 71 | git push --follow-tags 72 | ``` 73 | 74 | ## Project Structure 75 | 76 | ``` 77 | create-lofi-app/ 78 | ├── src/ # Source code for the CLI 79 | ├── templates/ # Project templates 80 | │ └── basic-tw/ # Basic template with Tailwind 81 | ├── tests/ # Test files 82 | └── package.json # Project configuration 83 | ``` 84 | 85 | ## Template Development 86 | 87 | When modifying the templates: 88 | 89 | 1. Make changes in `templates/` directory 90 | 2. Test locally using `npm link` 91 | 3. Verify the template works with: 92 | ```bash 93 | npx create-lofi-app test-app 94 | cd test-app 95 | npm install 96 | npm run dev 97 | ``` 98 | 99 | ## Common Issues 100 | 101 | - If `npm link` fails, try removing the global link first: 102 | ```bash 103 | npm unlink -g create-lofi-app 104 | ``` 105 | 106 | - If you get permission errors when publishing: 107 | ```bash 108 | npm whoami # verify you're logged in 109 | npm access ls-collaborators create-lofi-app # check access rights 110 | ``` 111 | 112 | ## Build Configuration 113 | 114 | ### tsup 115 | 116 | The build process uses tsup to bundle the CLI. This is configured in `tsup.config.ts`: 117 | 118 | ```ts 119 | export default defineConfig({ 120 | entry: ['src/main.ts'], 121 | format: ['cjs', 'esm'], // Build both CommonJS and ES Modules 122 | dts: true, // Generate TypeScript declarations 123 | clean: true, // Clean dist folder before build 124 | splitting: false, // Don't split chunks 125 | sourcemap: true, // Generate sourcemaps 126 | copyFiles: { 127 | 'templates': 'dist/templates' // Copy template files to dist 128 | } 129 | }) 130 | ``` 131 | 132 | Important `package.json` fields for publishing: 133 | ```json 134 | { 135 | "main": "dist/main.js", // CommonJS entry 136 | "module": "dist/main.mjs", // ES Module entry 137 | "types": "dist/main.d.ts", // TypeScript types 138 | "files": [ // Files to include in npm package 139 | "dist", 140 | "templates" 141 | ] 142 | } 143 | ``` 144 | 145 | Make sure to: 146 | - Test both CJS and ESM builds 147 | - Verify template files are copied correctly 148 | - Check TypeScript declarations are generated 149 | - Ensure sourcemaps are working -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # create-lofi-app 2 | 3 |
4 | 5 | 🚀 A powerful starter kit for building local-first applications 6 | 7 | [![Beta Status](https://img.shields.io/badge/status-beta-yellow.svg)](https://github.com/yourusername/create-lofi-app) 8 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/basicdb/create-lofi-app/pulls) 9 | 10 | ⚠️ **Beta Notice**: This project is in beta stage. While it's stable enough for experimentation and early projects, expect some rough edges. We welcome your feedback and contributions! 11 | 12 |
13 | 14 | ## 🌟 What is create-lofi-app? 15 | 16 | create-lofi-app is an opinionated starter kit designed to make local-first development accessible and enjoyable. It provides everything you need to build modern, offline-capable applications that prioritize user data ownership and privacy. 17 | 18 | ### 🎯 Perfect for: 19 | - Building offline-first web applications 20 | - Creating privacy-focused tools 21 | - Developing collaborative applications 22 | - Prototyping local-first ideas quickly 23 | 24 | ## ✨ Features 25 | 26 | - 🚀 **Lightning Fast Development** with [Vite](https://vitejs.dev/) 27 | - ⚛️ **Modern React** ([React 19](https://react.dev/)) with TypeScript support 28 | - 🛣️ **Seamless Routing** via [React Router](https://reactrouter.com/) 29 | - 💅 **Beautiful Styling** with [Tailwind CSS](https://tailwindcss.com/) 30 | - 📱 **PWA Ready** using [Vite-PWA](https://vite-pwa-org.netlify.app/guide/) 31 | - 💾 **Local-First Database** powered by [Basic](https://docs.basic.tech) 32 | - 🔄 **Built-in Sync Layer** for seamless data synchronization 33 | - 📦 **Zero Configuration** - just create and start building 34 | 35 | ## 🚀 Getting Started 36 | 37 | ### Quick Start 38 | 39 | ```bash 40 | # Create a new app 41 | npx create-lofi-app my-app 42 | 43 | # Navigate to your project 44 | cd my-app 45 | 46 | # Install dependencies 47 | npm install 48 | 49 | # Start development server 50 | npm run dev 51 | ``` 52 | 53 | Visit `http://localhost:5173` to see your app in action! 54 | 55 | ## 📁 Project Structure 56 | 57 | ``` 58 | my-app/ 59 | ├── src/ 60 | │ ├── assets/ # Static assets (images, fonts, etc.) 61 | │ ├── components/ # Reusable React components 62 | │ ├── pages/ # Application pages/routes 63 | │ ├── App.tsx # Main application component 64 | │ └── main.tsx # Application entry point 65 | ├── public/ # Public static assets 66 | ├── index.html # HTML template 67 | └── basic.config.ts # Basic database configuration 68 | ``` 69 | 70 | ## 🏗️ Building for Production 71 | 72 | ```bash 73 | # Create production build 74 | npm run build 75 | 76 | # Preview production build 77 | npm run preview 78 | ``` 79 | 80 | ## 🤔 Why Local-First? 81 | 82 | Local-first applications represent a paradigm shift in web development, offering numerous advantages: 83 | 84 | ### Key Benefits: 85 | - 🔒 **Enhanced Privacy**: User data stays on their device by default 86 | - ⚡ **Superior Performance**: No network latency for data operations 87 | - 📴 **Offline Capability**: Full functionality without internet 88 | - 🤝 **Data Ownership**: Users have complete control over their information 89 | - 🔄 **Optional Sync**: Cloud synchronization when needed 90 | 91 | ## 🤝 Contributing 92 | 93 | We love contributions! Whether it's: 94 | - 🐛 Bug reports 95 | - 💡 Feature suggestions 96 | - 📝 Documentation improvements 97 | - 🔧 Pull requests 98 | 99 | Please feel free to contribute to make create-lofi-app better for everyone! 100 | 101 | ## 📚 Documentation 102 | 103 | For detailed documentation and guides, visit: 104 | - [Basic Documentation](https://docs.basic.tech) 105 | - [Getting Started Guide](https://docs.basic.tech/get-started/implement-basic/create-lofi-app) 106 | - [API Reference](https://docs.basic.tech/api-reference/auth/authorize) 107 | 108 | --- 109 | 110 |
111 | 112 | Made with ❤️ by the create-lofi-app team 113 | 114 | ⭐ Star us on GitHub | [Report an Issue](https://github.com/basicdb/create-lofi-app/issues) 115 | 116 |
117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import pluginJs from "@eslint/js"; 2 | import tseslint from "typescript-eslint"; 3 | import eslintPluginPrettier from "eslint-plugin-prettier/recommended"; 4 | 5 | export default [ 6 | { files: ["**/*.{js,mjs,cjs,ts}"] }, 7 | {}, 8 | pluginJs.configs.recommended, 9 | ...tseslint.configs.recommended, 10 | eslintPluginPrettier, 11 | ]; 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-lofi-app", 3 | "version": "1.0.5", 4 | "description": "Starterkit for creating local-first apps", 5 | "type": "module", 6 | "bin": { 7 | "create-lofi-app": "./dist/main.js" 8 | }, 9 | "files": [ 10 | "dist", 11 | "templates" 12 | ], 13 | "scripts": { 14 | "build": "tsup src/main.ts --format esm --dts", 15 | "prepublishOnly": "npm run build", 16 | "start": "tsx ./src/main.ts", 17 | "dev": "tsx watch ./src/main.ts", 18 | "test": "vitest run", 19 | "test:watch": "vitest .", 20 | "format": "prettier --write ." 21 | }, 22 | "keywords": [ 23 | "local-first", 24 | "create-app", 25 | "starter-kit" 26 | ], 27 | "author": "aziz@sophire.com", 28 | "license": "MIT", 29 | "dependencies": { 30 | "chalk": "^5.3.0", 31 | "commander": "^12.1.0", 32 | "fs-extra": "^11.3.0", 33 | "inquirer": "^9.3.7" 34 | }, 35 | "devDependencies": { 36 | "@eslint/js": "^9.5.0", 37 | "@types/fs-extra": "^11.0.4", 38 | "@types/inquirer": "^9.0.7", 39 | "@types/node": "^20.14.8", 40 | "eslint": "^9.5.0", 41 | "eslint-config-prettier": "^9.1.0", 42 | "eslint-plugin-prettier": "^5.1.3", 43 | "prettier": "3.3.2", 44 | "tsup": "^8.3.6", 45 | "tsx": "^4.15.7", 46 | "typescript": "^5.5.2", 47 | "typescript-eslint": "^7.14.1", 48 | "vitest": "^1.6.0" 49 | }, 50 | "overrides": { 51 | "eslint": "^9.5.0" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { Command } from "commander"; 2 | import inquirer from "inquirer"; 3 | import fs from "fs-extra"; 4 | import path from "path"; 5 | import { fileURLToPath } from 'url'; 6 | 7 | const __dirname = path.dirname(fileURLToPath(import.meta.url)); 8 | 9 | const program = new Command(); 10 | 11 | const createApp = async (projectName?: string) => { 12 | // If project name wasn't provided as argument, prompt for it 13 | const answers = await inquirer.prompt([ 14 | { 15 | type: "input", 16 | name: "projectName", 17 | message: "What is your project named?", 18 | default: projectName || "my-lofi-app", 19 | when: !projectName, 20 | validate: (input: string) => { 21 | if (/^([a-z@][a-z0-9-_]*)?$/i.test(input)) { 22 | return true; 23 | } 24 | return "Project name may only contain alphanumeric characters, hyphens, or underscores."; 25 | }, 26 | }, 27 | { 28 | type: "list", 29 | name: "template", 30 | message: "Which template would you like to use?", 31 | choices: [ 32 | { name: "Basic + Tailwind", value: "basic-tw" }, 33 | // { name: "Basic + Tailwind + Shadcn", value: "basic-tw-shadcn" }, 34 | ], 35 | } 36 | ]); 37 | 38 | const finalProjectName = projectName || answers.projectName; 39 | const targetDir = path.join(process.cwd(), finalProjectName); 40 | 41 | // Replace the templateDir resolution 42 | const templateDir = path.join(path.dirname(new URL(import.meta.url).pathname), '..', 'templates', answers.template); 43 | 44 | // Add a check to ensure template directory exists 45 | if (!fs.existsSync(templateDir)) { 46 | console.error(`Template directory not found: ${templateDir}`); 47 | process.exit(1); 48 | } 49 | 50 | try { 51 | if (fs.existsSync(targetDir)) { 52 | const { overwrite } = await inquirer.prompt([ 53 | { 54 | type: "confirm", 55 | name: "overwrite", 56 | message: `Directory ${finalProjectName} already exists. Overwrite?`, 57 | default: false, 58 | }, 59 | ]); 60 | 61 | if (!overwrite) { 62 | console.log("Operation cancelled."); 63 | process.exit(1); 64 | } 65 | 66 | await fs.remove(targetDir); 67 | } 68 | 69 | // Create project directory 70 | await fs.ensureDir(targetDir); 71 | 72 | console.log(`\nCreating a new lofi app in ${targetDir}...`); 73 | console.log(`Using template from: ${templateDir}`); 74 | 75 | // Copy template files 76 | await fs.copy(templateDir, targetDir); 77 | 78 | // Update package.json with project name 79 | const packageJsonPath = path.join(targetDir, 'package.json'); 80 | const packageJson = await fs.readJson(packageJsonPath); 81 | packageJson.name = finalProjectName; 82 | await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 }); 83 | 84 | console.log("\n✨ Project created successfully!"); 85 | console.log("\nNext steps:"); 86 | console.log(` cd ${finalProjectName}`); 87 | console.log(` npm install`); 88 | console.log(` npm run dev`); 89 | } catch (error) { 90 | console.error("Error creating project:", error); 91 | console.error("Template directory:", templateDir); 92 | process.exit(1); 93 | } 94 | }; 95 | 96 | program 97 | .name("create-lofi-app") 98 | .description("starterkit for creating local-first apps") 99 | .version("1.0.0") 100 | .argument("[projectName]", "name of the project") 101 | .action(createApp); 102 | 103 | program.parse(); 104 | -------------------------------------------------------------------------------- /templates/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basicdb/create-lofi-app/e20bc29185306160d9b0acc63925d94e2862526d/templates/.DS_Store -------------------------------------------------------------------------------- /templates/basic-tw/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/basicdb/create-lofi-app/e20bc29185306160d9b0acc63925d94e2862526d/templates/basic-tw/.DS_Store -------------------------------------------------------------------------------- /templates/basic-tw/README.md: -------------------------------------------------------------------------------- 1 | # [Your App Name] 2 | 3 |
4 | 5 | Built with create-lofi-app - A Modern Local-First Application Template 6 | 7 | [![Made with create-lofi-app](https://img.shields.io/badge/built%20with-create--lofi--app-purple.svg)](https://github.com/basicdb/create-lofi-app) 8 | 9 |
10 | 11 | ## ✨ Features 12 | 13 | This app is / has: 14 | 15 | - 🔄 **Local-First Architecture** powered by [Basic](https://docs.basic.tech) 16 | - ⚛️ **Modern React** (v19) with TypeScript 17 | - 🛣️ **Seamless Routing** with React Router v7 18 | - 💅 **Beautiful UI** with Tailwind CSS & Shadcn/UI 19 | - 📱 **PWA Ready** - works offline and can be installed 20 | - 🔒 **Privacy Focused** - data stays on user's device 21 | 22 | ## 🛠️ Getting Started 23 | 24 | ### Prerequisites 25 | 26 | - Node.js 16.x or later 27 | - npm 7.x or later 28 | 29 | ### Installation 30 | 31 | 1. Clone the repository: 32 | ```bash 33 | git clone [your-repo-url] 34 | cd [your-repo-name] 35 | ``` 36 | 37 | 2. Install dependencies: 38 | ```bash 39 | npm install 40 | ``` 41 | 42 | 3. Start the development server: 43 | ```bash 44 | npm run dev 45 | ``` 46 | 47 | Visit `http://localhost:5173` to see your app running! 48 | 49 | ## 📁 Project Structure 50 | 51 | ``` 52 | ├── src/ 53 | │ ├── components/ # Reusable React components 54 | │ ├── pages/ # Application routes/pages 55 | │ ├── App.tsx # Main application component 56 | │ └── main.tsx # Application entry point 57 | ├── public/ # Static assets 58 | └── basic.config.ts # Basic database configuration 59 | ``` 60 | 61 | ## 🚀 Deployment 62 | 63 | 1. Build the application: 64 | ```bash 65 | npm run build 66 | ``` 67 | 68 | 2. Preview the production build: 69 | ```bash 70 | npm run preview 71 | ``` 72 | 73 | The `dist` folder will contain your optimized production build. 74 | 75 | ## 🔧 Configuration 76 | 77 | ### Basic Database 78 | 79 | Edit `basic.config.ts` to configure your database schema: 80 | 81 | ```typescript 82 | export const schema = { 83 | project_id: '[your-project-id]', 84 | version: 0, 85 | tables: { 86 | // Define your collections here 87 | } 88 | } 89 | ``` 90 | 91 | ### PWA Settings 92 | 93 | PWA features can be configured in `vite.config.ts`. See the [Vite PWA documentation](https://vite-pwa-org.netlify.app/) for more details. 94 | 95 | ## 📚 Learn More 96 | 97 | - [Basic Documentation](https://docs.basic.tech) 98 | - [Vite Guide](https://vitejs.dev/guide/) 99 | - [React Documentation](https://react.dev) 100 | - [Tailwind CSS](https://tailwindcss.com/docs) 101 | - [React Router](https://reactrouter.com/docs) 102 | 103 | ## 📝 License 104 | 105 | --- 106 | 107 |
108 | Made with ❤️ using [create-lofi-app](https://github.com/basicdb/create-lofi-app) 109 |
110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /templates/basic-tw/basic.config.ts: -------------------------------------------------------------------------------- 1 | // basic.config.ts lets you define the schema for your database 2 | // after updating this file, you may need to restart the dev server 3 | // docs: https://docs.basic.tech/info/schema 4 | 5 | export const schema = { 6 | project_id: '', 7 | version: 0, 8 | tables: { 9 | emojis: { 10 | type: 'collection', 11 | fields: { 12 | value: { 13 | type: 'string', 14 | }, 15 | }, 16 | }, 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /templates/basic-tw/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /templates/basic-tw/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | create-lofi-app 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/basic-tw/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lofitemplate", 3 | "private": true, 4 | "version": "0.0.1", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@basictech/react": "^0.5.0-beta.5", 14 | "@tailwindcss/vite": "^4.0.6", 15 | "react": "^19.0.0", 16 | "react-dom": "^19.0.0", 17 | "react-router": "^7.1.5", 18 | "tailwindcss": "^4.0.6" 19 | }, 20 | "devDependencies": { 21 | "@eslint/js": "^9.19.0", 22 | "@types/react": "^19.0.8", 23 | "@types/react-dom": "^19.0.3", 24 | "@vitejs/plugin-react": "^4.3.4", 25 | "eslint": "^9.19.0", 26 | "eslint-plugin-react-hooks": "^5.0.0", 27 | "eslint-plugin-react-refresh": "^0.4.18", 28 | "globals": "^15.14.0", 29 | "typescript": "~5.7.2", 30 | "typescript-eslint": "^8.22.0", 31 | "vite": "^6.1.0", 32 | "vite-plugin-pwa": "^0.21.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /templates/basic-tw/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/basic-tw/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | 15 | .logo:hover { 16 | filter: drop-shadow(0 0 2em #646cffaa); 17 | } 18 | 19 | .logo.react:hover { 20 | filter: drop-shadow(0 0 2em #61dafbaa); 21 | } 22 | 23 | @keyframes logo-spin { 24 | from { 25 | transform: rotate(0deg); 26 | } 27 | 28 | to { 29 | transform: rotate(360deg); 30 | } 31 | } 32 | 33 | @media (prefers-reduced-motion: no-preference) { 34 | a:nth-of-type(2) .logo { 35 | animation: logo-spin infinite 20s linear; 36 | } 37 | } 38 | 39 | .card { 40 | padding: 2em; 41 | } 42 | 43 | .read-the-docs { 44 | color: #888; 45 | } 46 | 47 | .card-link { 48 | @apply flex flex-col text-left p-6 border border-gray-100 rounded-xl dark:border-gray-800 dark:hover:border-gray-700 dark:text-white transition-all duration-300 ease-out hover:border-gray-300 hover:shadow-lg hover:-translate-y-1; 49 | } 50 | 51 | .card-title { 52 | @apply text-xl font-semibold mb-3 53 | } 54 | 55 | .card-description { 56 | @apply text-sm leading-relaxed; 57 | } -------------------------------------------------------------------------------- /templates/basic-tw/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useBasic, useQuery } from '@basictech/react' 2 | import './App.css' 3 | 4 | const deleteCursorIcon = `url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MEE1RkEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIzIDYgNSA2IDIxIDYiPjwvcG9seWxpbmU+PHBhdGggZD0iTTE5IDZ2MTRhMiAyIDAgMCAxLTIgMkg3YTIgMiAwIDAgMS0yLTJWNm0zIDBWNGEyIDIgMCAwIDEgMi0yaDRhMiAyIDAgMCAxIDIgMnYyIj48L3BhdGg+PC9zdmc+),auto` 5 | 6 | function App() { 7 | const { db } = useBasic() 8 | const emojis = useQuery(() => db.collection('emojis').getAll()) 9 | 10 | return ( 11 | <> 12 |

create-lofi-app

13 |
14 | 17 |
18 | {emojis?.map((e: { id: string, value: string }) => ( 19 |
db.collection('emojis').delete(e.id)}> 20 | {e.value} 21 |
22 | ))} 23 |
24 |
25 | 26 |
27 | 28 |

Basic Docs

29 |

30 | Auth, sync, and database 31 |

32 | 33 | 34 | 35 |

PWA Reference

36 |

37 | Enable offline capabilities 38 |

39 | 40 | 41 | 42 |

Tailwind

43 |

44 | Styling framework 45 |

46 | 47 |
48 | 49 | ) 50 | } 51 | 52 | export default App 53 | -------------------------------------------------------------------------------- /templates/basic-tw/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/basic-tw/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | :root { 4 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 5 | line-height: 1.5; 6 | font-weight: 400; 7 | 8 | color-scheme: light dark; 9 | color: rgba(255, 255, 255, 0.87); 10 | background-color: #242424; 11 | 12 | font-synthesis: none; 13 | text-rendering: optimizeLegibility; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #c92a84; 21 | text-decoration: inherit; 22 | } 23 | 24 | a:hover { 25 | color: #c92a84; 26 | } 27 | 28 | body { 29 | margin: 0; 30 | display: flex; 31 | place-items: center; 32 | min-width: 320px; 33 | min-height: 100vh; 34 | } 35 | 36 | h1 { 37 | font-size: 3.2em; 38 | line-height: 1.1; 39 | } 40 | 41 | button { 42 | border-radius: 8px; 43 | border: 1px solid transparent; 44 | padding: 0.6em 1.2em; 45 | font-size: 1em; 46 | font-weight: 500; 47 | font-family: inherit; 48 | background-color: #1a1a1a; 49 | cursor: pointer; 50 | transition: border-color 0.25s; 51 | } 52 | 53 | button:hover { 54 | border-color: #646cff; 55 | } 56 | 57 | button:focus, 58 | button:focus-visible { 59 | outline: 4px auto -webkit-focus-ring-color; 60 | } 61 | 62 | @media (prefers-color-scheme: light) { 63 | :root { 64 | color: #213547; 65 | background-color: #ffffff; 66 | } 67 | 68 | a:hover { 69 | color: #c92a84; 70 | } 71 | 72 | button { 73 | background-color: #f9f9f9; 74 | } 75 | } -------------------------------------------------------------------------------- /templates/basic-tw/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | import { BrowserRouter, Route, Routes } from "react-router"; 6 | import { BasicProvider } from '@basictech/react'; 7 | import { schema } from '../basic.config'; 8 | 9 | createRoot(document.getElementById('root')!).render( 10 | 11 | 12 | 13 | 14 | } /> 15 | 404 - Page Not Found} /> 16 | 17 | 18 | 19 | , 20 | ) 21 | -------------------------------------------------------------------------------- /templates/basic-tw/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/basic-tw/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /templates/basic-tw/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /templates/basic-tw/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /templates/basic-tw/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import tailwindcss from '@tailwindcss/vite' 4 | // import { VitePWA } from 'vite-plugin-pwa' 5 | 6 | // VitePWA docs: https://vite-pwa-org.netlify.app/guide/ 7 | // When you are ready to enable PWA features: 8 | // 1. Update manifest details in pwaConfig 9 | // 2. Add icons to the public folder 10 | // 3. Uncomment the pwaConfig object and the VitePWA plugin 11 | 12 | // const pwaConfig = { 13 | // registerType: 'autoUpdate', 14 | // includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'], 15 | // manifest: { 16 | // name: 'your app name', 17 | // short_name: 'your app short name', 18 | // description: 'your app description', 19 | // theme_color: '#ffffff', 20 | // icons: [ 21 | // { 22 | // src: 'logo-144.png', 23 | // sizes: '144x1s44', 24 | // type: 'image/png' 25 | // }, 26 | // { 27 | // src: 'logo-512.png', 28 | // sizes: '512x512', 29 | // type: 'image/png' 30 | // }, 31 | // { 32 | // src: 'logo-512.png', 33 | // sizes: '512x512', 34 | // type: 'image/png', 35 | // purpose: 'any maskable' 36 | // } 37 | // ] 38 | // }, 39 | // } 40 | 41 | 42 | // https://vite.dev/config/ 43 | export default defineConfig({ 44 | plugins: [ 45 | react(), 46 | tailwindcss(), 47 | // VitePWA(pwaConfig) // Uncomment this line to enable PWA features 48 | ], 49 | }) 50 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "module": "ES2020", 5 | "moduleResolution": "node", 6 | "outDir": "./dist", 7 | "rootDir": "./src", 8 | "strict": true, 9 | "esModuleInterop": true, 10 | "skipLibCheck": true, 11 | "forceConsistentCasingInFileNames": true 12 | }, 13 | "include": [ 14 | "src/**/*" 15 | ], 16 | "exclude": [ 17 | "node_modules", 18 | "dist" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | 3 | export default defineConfig({ 4 | entry: ['src/main.ts'], 5 | format: ['esm'], 6 | dts: true, 7 | clean: true, 8 | shims: true, 9 | banner: { 10 | js: '#!/usr/bin/env node', 11 | }, 12 | }) -------------------------------------------------------------------------------- /vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vitest/config"; 2 | 3 | export default defineConfig({ 4 | test: { 5 | include: ["**/*.{test,spec}.?(c|m)[jt]s?(x)"], 6 | }, 7 | }); 8 | --------------------------------------------------------------------------------