https://github.com/pro7tech/sveltekit-blog-app
đ SvelteKit Blog App is a free and open-source simple fullstack blog app built with SvelteKit, Tailwind CSS, and EdgeDB
https://github.com/pro7tech/sveltekit-blog-app
blog database edgedb fullstack-javascript html javascript mit-license open-source svelte sveltekit tailwind tailwind-css tailwindcss
Last synced: about 1 year ago
JSON representation
đ SvelteKit Blog App is a free and open-source simple fullstack blog app built with SvelteKit, Tailwind CSS, and EdgeDB
- Host: GitHub
- URL: https://github.com/pro7tech/sveltekit-blog-app
- Owner: pro7tech
- License: mit
- Created: 2023-03-07T12:33:14.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-28T06:26:52.000Z (over 2 years ago)
- Last Synced: 2024-11-02T06:34:14.609Z (over 1 year ago)
- Topics: blog, database, edgedb, fullstack-javascript, html, javascript, mit-license, open-source, svelte, sveltekit, tailwind, tailwind-css, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 745 KB
- Stars: 76
- Watchers: 2
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-gel - SvelteKit Blog App - A SvelteKit blog app built with SvelteKit and EdgeDB. (Applications)
README
## 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](https://2022.stateofjs.com/en-US/libraries/rendering-frameworks/))
- **Tailwind:** Consistently the most popular CSS Framework in the annual State of CSS Survey ([Source](https://2022.stateofcss.com/en-US/css-frameworks/))
- **EdgeDB:** Open Source Database with 10 Years of Development providing the best of both worlds between SQL and an ORM ([Source](https://www.edgedb.com/blog/a-solution-to-the-sql-vs-orm-dilemma))
## 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
1. Clone the repository and install dependencies:
```
git clone https://github.com/pro7tech/sveltekit-blog-app.git
cd sveltekit-blog-app
npm install
```
2. Initialize files for connecting to database
```
edgedb project init
npx @edgedb/generate edgeql-js
```
3. 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
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
```
4. 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