Svelte Themes Logo Svelte Themes
Heroes Svelte screenshot

Heroes Svelte

Author Avatar Theme by Johnpapa
Updated: 29 Jun 2021
30 Stars

Tour of Heroes app written with Svelte

Github

Categories

Bulma Scss

Overview:

Tour of Heroes is a project created to showcase an app written with Svelte. It follows a heroes and villains theme and aims to provide a comparative experience with the same app implemented in Angular, React, and Vue frameworks. The project allows users to list and edit heroes and villains. Cypress.io is used for end-to-end testing, and a JSON server is included as a backend.

Features:

  • Start from the official quick-start and CLI
  • Client side routing with three main routes: Heroes, Villains, and About
  • Handles erroneous routes with a PageNotFound component
  • Highlights the active route in the navigation menu
  • Uses HTML5 mode for routing instead of hash routes
  • API integration with a JSON server as the backend
  • App served on one port that can access the API on another port using either proxy or CORS
  • Uses common HTTP libraries for each framework
  • Styling with Bulma, SASS, and Font Awesome
  • Same CSS styling used in every app
  • Editing capabilities for heroes and villains (add, update, delete)
  • State/Store management using a store
  • Web development server with fallback routing
  • Generic components including modal, button tool, card, header bar, list header, and navigation bar
  • Props in and emit events out
  • Environment variable for API location

Installation:

To get started with the Tour of Heroes app, follow these steps:

  1. Clone this repository.
  2. Install the necessary npm packages.
  3. Run the app.

Summary:

Tour of Heroes is a project that showcases the implementation of the same app using different JavaScript frameworks. It allows users to compare the experience of building the app with Angular, React, Vue, and Svelte. The project includes features such as client-side routing, API integration, styling with Bulma, and editing capabilities for heroes and villains. Additionally, Cypress.io is used for end-to-end testing, and a JSON server serves as the backend. Overall, Tour of Heroes offers a comprehensive example of how different frameworks can be used to create the same app with unique approaches.