Admin Dashboard Svelte

An elegant and simple Admin Dashboard built with Svelte and Tailwind CSS. This project is designed as a starter template for building responsive admin interfaces, showcasing how to integrate essential components like a sidebar, top navigation, and dynamic content sections.

Features

• 🚀 Built with Svelte for fast and reactive UI.
• 🎨 Styled with Tailwind CSS, a utility-first CSS framework.
• 📱 Responsive layout for desktop and mobile devices.
• 🔒 JWT Authentication for secure user login.
• ⚡️ Fast, lightweight, and optimized performance.
• 🔧 Easily customizable and extendable for your needs.

Setup and Installation

Follow these steps to set up and run the project locally.

Prerequisites

Ensure you have the following installed:

• Node.js (preferably LTS version)
• npm or yarn

1. Clone the Repository

Clone the repository to your local machine:

git clone https://github.com/your-username/admin-dashboard-svelte.git
cd admin-dashboard-svelte

2. Install Dependencies

Install the necessary dependencies:

npm install
# or
yarn install

3. Run the Development Server

Start the development server:

npm run dev
# or
yarn dev

Your app will be available at http://localhost:3000.

Project Structure Here’s an overview of the project structure:

├── public/                # Public files (images, fonts, etc.)
├── src/                   # Source files
│   ├── components/        # Reusable UI components (Sidebar, Header, etc.)
│   ├── routes/            # Svelte pages & routes
│   ├── store/             # Svelte stores for state management
│   ├── App.svelte         # Main app component
│   └── main.js            # Entry point for app
├── tailwind.config.js     # Tailwind CSS configuration
├── svelte.config.js       # Svelte configuration
├── package.json           # Project dependencies and scripts
└── README.md              # Project overview and instructions

Customizing the Dashboard Sidebar: Customize the sidebar by editing the Sidebar.svelte component located in src/components/Sidebar.svelte. Theme: Modify the colors, fonts, and general styling by editing tailwind.config.js. Routing: Extend or modify routes in src/routes/ to add new views or pages. User Authentication: Replace the mock authentication logic in src/lib/api.js with your own authentication API.

Customizing the Dashboard

• Sidebar: Customize the sidebar by editing the Sidebar.svelte component located in src/components/Sidebar.svelte.
• Theme: Modify the colors, fonts, and general styling by editing tailwind.config.js.
• Routing: Extend or modify routes in src/routes/ to add new views or pages.
• User Authentication: Replace the mock authentication logic in src/lib/api.js with your own authentication API.

Contributing

We welcome contributions! To contribute:

1. Fork this repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Commit your changes (git commit -am 'Add new feature').
5. Push to the branch (git push origin feature-branch).
6. Create a new Pull Request.

License

This project is licensed under the MIT License.

Credits

• Svelte: https://svelte.dev
• Tailwind CSS: https://tailwindcss.com
• JWT Authentication: You can implement JWT authentication from any backend of your choice.
• FontAwesome Icons: https://fontawesome.com

Badges Explanation

• GitHub Issues Badge: Shows the number of open issues in the repo. Replace your-username with your GitHub username.
• GitHub Stars Badge: Displays the number of stars the repo has received.
• GitHub License Badge: Displays the current license type.

Getting Help

For any questions, issues, or bug reports, please open an issue in the Issues section. We’ll do our best to help you!