Skip to content

codevogel/svelte-db-portal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

44 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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


πŸ“– 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.

About

πŸ“š Beginner-friendly guide to building a SvelteKit portal with MySQL, Drizzle & Skeleton UI.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published