Astro Template with Tailwind CSS

A modern, full-stack template built with Astro and Tailwind CSS, featuring authentication, dashboard, API endpoints, and reusable UI components.

Features

• 🚀 Built with Astro and Tailwind CSS
• 🔒 Authentication (Login/Register) with hashed passwords and JWT-like session tokens
• 📊 Dashboard with live statistics and recent activity
• ⚙️ User settings management (dark mode, notifications)
• 🌙 Dark mode support (auto and manual toggle)
• 📱 Responsive, accessible design
• 🔄 RESTful API endpoints for CRUD operations
• 🧩 Reusable components: Toast, Dropdown, Popup
• 🗄️ SQLite database (via better-sqlite3)
• 🛡️ Secure password storage (SHA-256 hashing)
• 🧑‍💻 Developer-friendly project structure

Project Structure

Astro Template/
├── public/                # Static assets (favicon, etc.)
├── src/
│   ├── components/        # Reusable UI components (Toast, Dropdown, Popup)
│   ├── layouts/           # Page layouts (Base, Auth, Dashboard)
│   ├── lib/               # Server-side logic (auth, database, dashboard)
│   ├── pages/             # Astro pages and API routes
│   │   ├── api/           # API endpoints (auth, users, dashboard)
│   │   ├── auth/          # Auth pages (login, register)
│   │   ├── dashboard/     # Dashboard pages (home, settings)
│   │   └── index.astro    # Landing page
│   ├── styles/            # Global styles (Tailwind, CSS variables)
│   └── types/             # TypeScript types
├── data/                  # SQLite database file
├── tailwind.config.js     # Tailwind configuration
├── astro.config.mjs       # Astro configuration
├── package.json           # Project metadata and scripts
└── README.md              # This file

Getting Started

1. Clone the repository:

   git clone <repository-url>
   cd Astro\ Template

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build

Authentication & Security

• Passwords are hashed using SHA-256 before storage.
• Sessions are managed with secure tokens (stored in cookies and localStorage).
• All authentication and user data is stored in a local SQLite database (data/database.sqlite).
• Registration checks for duplicate emails.
• API endpoints return clear error messages for invalid credentials or duplicate users.

Dashboard

• Personalized welcome and statistics (total users, active users, new users, recent activities)
• Live data updates every 30 seconds
• User settings page (profile info, dark mode, notifications)
• Logout functionality

API Endpoints

• Authentication
  • POST /api/auth/login — User login
  • POST /api/auth/register — User registration
• Users
  • GET /api/users/users — Get all users
  • POST /api/users/users — Create a new user
  • PUT /api/users/users — Update a user
  • DELETE /api/users/users — Delete a user
• Dashboard
  • GET /api/dashboard/home — Get dashboard statistics and recent activities
  • GET /api/dashboard/settings — Get user settings
  • PUT /api/dashboard/settings — Update user settings

Custom Components

• Toast: Global notification system. Trigger with window.showToast(message, type) or dispatch a toast event. Supports success/error, auto-dismiss, and max visible toasts.
• Dropdown: Flexible dropdown/select component. Supports icons, search, disabled/locked options, and custom triggers.
• Popup: Modal dialog with customizable content, close/back icons, and keyboard/mouse accessibility.

Theming & Styles

• Uses Tailwind CSS with custom CSS variables for colors, backgrounds, and borders.
• Dark mode is supported via the .dark class and can be toggled or set by user preference.
• Utility classes for buttons, cards, inputs, badges, and more are defined in src/styles/global.css.

404 Page

• Custom 404 page with friendly messaging and a link back to the homepage.

Scripts

• npm run dev — Start the development server
• npm run build — Build for production
• npm run preview — Preview the production build

License

MIT License

Copyright (c) 2024 Claw

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.