⚡ Svelte-5 Internship Training Project

This project is part of SvelteKit 5 Training provided by API PLUS TECH Co., Ltd. It serves as a pre-internship submission

Features

• 🔐 Authentication via Lucia
• 📄 Form handling with Superform
• 🪟 UI powered by Tailwind CSS and Shadcn for Svelte
• 💳 Stripe integration for secure payments
• 🦺 Type-safe ORM with Prisma ORM
• 🎨 Icon support via Lucide Icons

📸 Demo

🧑‍💻 User Views

🏠 Home Page

🛍️ Product Page

💳 Purchase Page

---

🛠️ Admin Views

📊 Dashboard

📦 Product Management

👥 Customer List

🛠️ Tech Stack

• Frontend: Svelte 5, Tailwind CSS, Shadcn UI
• Backend: Prisma, Lucia Auth, Stripe
• Language: TypeScript
• Form Handling: Superform
• Icons: Lucide Icons

📂 Project Structure

project-name/
├── src/
│   ├── lib/             # Shared logic, components, stores
│   ├── routes/          # Pages and endpoints
│   ├── hooks.server.ts  # Server hooks (e.g., for auth)
│   └── app.d.ts         # TypeScript types
├── static/              # Public assets
├── prisma/              # Prisma schema and migrations
├── .env         # Environment variable
├── svelte.config.js     # SvelteKit config
├── tailwind.config.ts   # Tailwind config
└── ...

⚙️ Setup & Installation

1. Clone the repository

git clone https://github.com/Mysterioucz/Svelte5-TrainingKit.git
cd Svelte5-TrainingKit

2. Install dependencies

npm install

3. Configure environment variables

Provide your credentials in .env (Stripe keys, Public server URL, Database URL): For Examples

DATABASE_URL="file:./dev.db"

PUBLIC_STRIPE_PUBLIC_KEY = Your Stripe Public Key
STRIPE_SECRET_KEY = Your Stripe Secret Key
PUBLIC_SERVER_URL = http://127.0.0.1:5173 # The URL of your server, used for webhooks and redirects.

4. Setup the database

npx prisma generate
npx prisma migrate dev

5. Run the development server

npm run dev

The app will be available at http://127.0.0.1:5173 (or the port SvelteKit uses).

6. For login you can use admin account or create your own user account

User: admin
Password: password

📎 API Routes

Method	Endpoint	Description
POST	/api/payment	Handle Stripe payments
POST	/login	User login
GET	/dashboard	Protected user dashboard

🙋‍♂️ Author

• Chatrin Yoonchalard

---

📨 Feel free to open an issue or contact me if you have any questions or feedback!