Svelte Db Portal
Svelte DB Portal
A beginner-friendly guide to building a full-stack web portal using SvelteKit, MySQL, Drizzle ORM, Lucia authentication, Skeleton UI, and Chart.js.
🚀 Project Overview
This project teaches students and beginner developers how to build a modern, full-stack web portal that visualizes data from a MySQL database.
🎯 What You’ll Learn
- Setting up a local development environment with XAMPP and Node.js
- Building a full-stack application with SvelteKit
- Using Drizzle ORM for type-safe database queries and migrations
- Implementing user authentication following the Lucia guide
- Styling with Skeleton UI and Tailwind CSS
- Visualizing data with Chart.js
- Building a clean, responsive full-stack web portal
📚 Tech Stack
| Technology | Purpose | Link |
|---|---|---|
| Svelte | A popular component-based UI framework for building reactive interfaces | svelte.dev |
| SvelteKit | A framework for rapidly building robust, performant web applications using Svelte. | kit.svelte.dev |
| MySQL | An open-source relational database management system (RDBMS) used to store and manage data | mysql.com |
| XAMPP | A local development environment providing Apache, MySQL, PHP, and Perl for easy setup | apachefriends.org |
| Drizzle ORM | A type-safe SQL Object-Relational Mapper (ORM) for building queries and managing migrations | orm.drizzle.team |
| Lucia | An authentication guide for managing user authentication and sessions | lucia-auth.com |
| Tailwind CSS | A utility-first CSS framework for styling and customization | tailwindcss.com |
| Skeleton UI | A lightweight UI component library built on top of Tailwind CSS | skeleton.dev |
| Chart.js | Simple, flexible JavaScript charting library for data visualization | chartjs.org |
📝 Prerequisites
Basic understanding of JavaScript/TypeScript
- If new, start here: JavaScript Guide - MDN
- For TypeScript basics: TypeScript Handbook
Basic SQL knowledge
- Learn SQL basics: SQL Tutorial - W3Schools
Basic familiarity with the command line interface (CLI)
- Beginner’s guide: Learn the Command Line - Codecademy
📖 Tutorial & Setup
Detailed step-by-step instructions for setting up the environment, database configuration, migrations, and running the project are provided in the /tutorial folder.
Please visit the tutorial README to get started.
🤝 Contributing
Contributions, suggestions, and bug reports are welcome! Please:
- Fork the repository
- Create a new branch (
git checkout -b feature/your-feature) - Commit your changes (
git commit -m 'Add some feature') - Push to the branch (
git push origin feature/your-feature) - Open a pull request
For major changes, please open an issue first to discuss what you’d like to change.
📄 License
This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0).
- Free for personal and open-source use with attribution
- Commercial or educational use requires written permission
See LICENSE.md for details or contact me using the contact information listed on my GitHub profile.
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.