Skip to content

🚀 SvelteKit Blog App is a free and open-source simple fullstack blog app built with SvelteKit, Tailwind CSS, and EdgeDB

License

Notifications You must be signed in to change notification settings

pro7tech/sveltekit-blog-app

Repository files navigation

SvelteKitBlogApp

About

The Real-World App (https://github.com/gothinkster/realworld) named the “mother of all demo apps” provides a fullstack Medium.com blog clone with a variety of frontend and backend stacks to demo the features needed for a robust web application.

This app demos the same features of “querying & persisting data to a database, an authentication system, session management, full CRUD for resources” while simplifying the app to an integrated stack of:

  • SvelteKit: A top framework for developer retention in the 2021 and 2022 State of JS Survey (Source)
  • Tailwind: Consistently the most popular CSS Framework in the annual State of CSS Survey (Source)
  • EdgeDB: Open Source Database with 10 Years of Development providing the best of both worlds between SQL and an ORM (Source)

Features

  • Simplicity: Minimizes 3rd party dependencies in favor of using the platform to keep things simple
  • Modern Tailwind Design: Uses the latest best practices for a beautiful design
  • Desktop and Mobile-friendly: Looks great on both large-screen and small-screen (mobile) devices.
  • Authentication and Authorization: Built-in users management with role based authorization
  • 100% Performance Score on Google Lighthouse
  • Modern Admin Panel: Elegant admin dashboard demoing CRUD operations for Posts, Comments, Tags, and Users

Screenshots

Frontend Pages

A blog overview page, blog page with comments, sign-in, sign-up and error pages. frontend

User Profile Screens

Pages for users to update their profile and password. profile

Admin Pages

Only users with role of ‘admin’ can access these pages. CRUD pages for users, posts, comments, tags.
admin

Mobile Friendly

mobile

EdgeDb UI

Run command 'edgedb ui' in root folder to see the database explorer and query REPL Screenshot 2023-03-15 at 9 54 05 PM Screenshot 2023-03-15 at 9 54 45 PM

Performance

100% Performance on Google Lighthouse Screenshot 2023-03-15 at 4 26 31 PM

Code Show Feature

Use Keyboard shortcut for your platform (Command ⌘ + Shift ⇧ on Mac) to activate a hover component that shows the code generating the UI under the mouse cursor Screenshot 2023-03-15 at 10 05 34 PM ezgif-1-c611e45007

Installation:

EdgeDb is a prerequisite: https://www.edgedb.com/install

  1. Clone the repository and install dependencies:
git clone https://github.com/pro7tech/sveltekit-blog-app.git
cd sveltekit-blog-app
npm install
  1. Initialize files for connecting to database
edgedb project init
npx @edgedb/generate edgeql-js
  1. Run the dev server
npm run dev

Then navigate to the root directory of the app to automatically seed the database: http://localhost:5173/

You can then login to the admin pages with:

Deploying to Production with Digital Ocean and Vercel

  1. Use the Digital Ocean on click deploy tutorial to setup your database: https://www.edgedb.com/docs/guides/deployment/digitalocean#one-click-deploy
  2. Copy your Database Connection String (DSN) from step 1. It has the format edgedb://username:password@hostname:port
  3. Run the migration file against your remote database
$ edgedb migrate --dsn edgedb://username:password@hostname:port --tls-security insecure
  1. Deploy this app to Vercel with the link below.

https://vercel.com/new/git/external?repository-url=https://github.com/pro7tech/sveltekit-blog-app&repository-name=sveltekit-blog-app&env=EDGEDB_DSN,EDGEDB_CLIENT_TLS_SECURITY

When Prompted:

  • Set EDGEDB_DSN to your database’s DSN
  • Set EDGEDB_CLIENT_TLS_SECURITY to insecure. This will disable EdgeDB’s default TLS checks.

License

MIT Licensed

About

🚀 SvelteKit Blog App is a free and open-source simple fullstack blog app built with SvelteKit, Tailwind CSS, and EdgeDB

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published