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.
User Profile Screens
Pages for users to update their profile and password.
Admin Pages
Only users with role of ‘admin’ can access these pages. CRUD pages for users, posts, comments, tags.
Mobile Friendly
EdgeDb UI
Run command 'edgedb ui' in root folder to see the database explorer and query REPL
Performance
100% Performance on Google Lighthouse
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
Installation:
EdgeDb is a prerequisite: https://www.edgedb.com/install
- Clone the repository and install dependencies:
git clone https://github.com/pro7tech/sveltekit-blog-app.git
cd sveltekit-blog-app
npm install
- Initialize files for connecting to database
edgedb project init
npx @edgedb/generate edgeql-js
- 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:
- email: admin@example.com
- password: password
Deploying to Production with Digital Ocean and Vercel
- Use the Digital Ocean on click deploy tutorial to setup your database: https://www.edgedb.com/docs/guides/deployment/digitalocean#one-click-deploy
- Copy your Database Connection String (DSN) from step 1. It has the format edgedb://username:password@hostname:port
- Run the migration file against your remote database
$ edgedb migrate --dsn edgedb://username:password@hostname:port --tls-security insecure
- Deploy this app to Vercel with the link below.
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
