• Stars
    star
    101
  • Rank 338,166 (Top 7 %)
  • Language
    HTML
  • License
    MIT License
  • Created about 5 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The frontend of an example fullstack app built using svelte and node

Svelte News App — Frontend

A fullstack application built with Svelte/Sapper on the frontend and Node/Express on the backend.

Demo    Backend

This repo demonstrates almost everything you need to know to build a complete fullstack application using Svelte/Sapper and Node/Express. This demo covers things like:

  • Authentication/Authorization with JWT
  • Maintaining logged-in user data with sessions and cookies
  • Routing
  • Communicating with a backend API
  • Handling errors
  • Pagination
  • Loading states
  • Preloading data
  • Prefetching data
  • Rendering nested components recursively
  • More stuff

Running the demo

  1. Install and run the backend project
  2. Download this repo
  3. Create .env in the root directory
  4. Add API_BASE_URL=http://localhost:5000 (assuming that the backend will run on localhost:5000)
  5. Run npm install
  6. Run npm run dev

To build it and run it in production mode:

  1. Run npm run build
  2. Run npm run start

I explain how to build this demo from scratch on my blog (it's updated weekly).

More Repositories

1

swapy

✨ A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code https://swapy.tahazsh.com/
TypeScript
4,924
star
2

vue-paginate

A simple vue.js plugin to paginate data
JavaScript
593
star
3

vue-forum-app

The frontend of an example fullstack app built using vue and node
Vue
363
star
4

veloxi

UI engine for building smooth interactions in the browser
TypeScript
214
star
5

svelte-paginate

A Svelte plugin for paginating your data in no time
JavaScript
81
star
6

spa-forum

An example of single page application built with Vue.js and Laravel
JavaScript
57
star
7

qwikql

A GraphQL client for Qwik framework.
TypeScript
52
star
8

vue-forum-app-backend

The backend of an example fullstack app built using vue and node
JavaScript
47
star
9

aat

A library that helps you create any scroll-based animation you can imagine (vertically and horizontally).
JavaScript
43
star
10

svelte-news-app-backend

The backend of an example fullstack app built using svelte and node
JavaScript
35
star
11

vue-expandable-image

A vue component that allows your images to open in full size.
Vue
27
star
12

svelte-confirm

A reusable solution for showing confirm dialogs in Svelte.
HTML
26
star
13

vue-closable

A simple vue directive to detect outside clicks
JavaScript
24
star
14

use-mock-data-in-vue

Source code for "How to Use Mock Data in Vue Apps" tutorial.
Vue
22
star
15

vue-dependon

A simple vue.js plugin to chain select boxes
JavaScript
21
star
16

solid-paginate

A SolidJS plugin for paginating your data in no time
TypeScript
14
star
17

drag-to-reorder

Code for the article: "Building Seamless UIs with JavaScript: A Drag-to-Reorder Example" — https://tahazsh.com/blog/seamless-ui-with-js-drag-to-reorder-example
JavaScript
13
star
18

svelte-closable

A simple svelte action to detect outside clicks
HTML
10
star
19

veloxi-showcase

Vue
10
star
20

gleam-todo-web-app

Gleam
9
star
21

realtime-like-app

HTML
5
star
22

textarea-emoji-picker

Source code for "How to Add Emoji Picker in Text Fields" tutorial.
JavaScript
4
star
23

card-to-modal-transition

Code for the article: "Creating a Smooth Card-to-Modal Transition with Vanilla JavaScript"
HTML
4
star
24

Chat-With-Ratchet

The source code of the tutorial: How to Create A Simple Chat System in PHP
HTML
4
star
25

todo-app-in-gleam-vs-js

Gleam
4
star
26

Tasks-App-With-VueJS

The source code of this tutorial: http://taha-sh.com/blog/many-js-frameworks-but-vuejs-is-different
HTML
3
star
27

vue-group-chat-app

Vue
2
star
28

todoapp-solid

An example todo app built with SolidStart
TypeScript
2
star
29

undo-with-command-pattern

Code for https://tahazsh.com/blog/undo-with-command-pattern
JavaScript
2
star
30

react-image-zoom-animation

Code for the video tutorial: Image Zoom Animation (React Component) https://www.youtube.com/watch?v=g6NfA8n6aoU
JavaScript
2
star
31

cometchat-auth-express

JavaScript
1
star