How to Build a To-do app with Svelte, Strapi & Tailwind CSS

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • axios

    Promise based HTTP client for the browser and node.js

    We will use Axios to make our HTTP request to get our data from the backend. Run the following command in your Svelte project directory to install Axios:

  • berry

    📦🐈 Active development trunk for Yarn ⚒

    Yarn: A fast, secure, and reliable Node package manager. To install yarn globally, run the following command on your terminal.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • plugins

    🍣 The one-stop shop for official Rollup plugins (by rollup)

    import svelte from 'rollup-plugin-svelte'; import commonjs from '@rollup/plugin-commonjs'; import resolve from '@rollup/plugin-node-resolve'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import css from 'rollup-plugin-css-only'; import sveltePreprocess from 'svelte-preprocess'; const production = !process.env.ROLLUP_WATCH; function serve() { let server; function toExit() { if (server) server.kill(0); } return { writeBundle() { if (server) return; server = require('child_process').spawn( 'npm', ['run', 'start', '--', '--dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true, } ); process.on('SIGTERM', toExit); process.on('exit', toExit); }, }; } export default { input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/build/bundle.js', }, plugins: [ svelte({ preprocess: sveltePreprocess({ sourceMap: !production, postcss: { plugins: [require('tailwindcss'), require('autoprefixer')], }, }), compilerOptions: { // enable run-time checks when not in production dev: !production, }, }), // we'll extract any component CSS out into // a separate file - better for performance css({ output: 'bundle.css' }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration - // consult the documentation for details: // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, dedupe: ['svelte'], }), commonjs(), // In dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser(), ], watch: { clearScreen: false, }, };

  • Svelte-Tailwind-Todo

    You can find the complete code used in this tutorial for the Svelte App here, and the backend code is available on GitHub. You can also find me on Twitter, LinkedIn, and GitHub. Thank you for reading! Feel free to drop a comment to let me know what you thought of this article.

  • Strapi-Todo-API

    You can find the complete code used in this tutorial for the Svelte App here, and the backend code is available on GitHub. You can also find me on Twitter, LinkedIn, and GitHub. Thank you for reading! Feel free to drop a comment to let me know what you thought of this article.

  • postman-app-support

    Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.

    With that done, let's test our API with Postman. To access our resource, open [http://localhost:1337/todos](http://localhost:1337/todos) in your browser or using an API client like Postman to test our created data.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    Tailwind CSS is a utility-first CSS framework use for writing CSS in a composable fashion right in your HTML. It is a powerful utility that allows you to build modern, pixel-perfect, and fully responsive interfaces without writing your custom CSS. Unlike Bootstrap, Tailwind CSS is not opinionated, and it doesn't have prebuilt components, making building good looking-interfaces fun!

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • Svelte

    Cybernetically enhanced web apps

    Svelte is another core technology we will be using in the tutorial. Svelte is the talk of the town in the JavaScript ecosystem because it follows an entirely different approach in building user interfaces as opposed to React and Vue, as it doesn't use the Virtual DOM.

  • Strapi

    🚀 Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable and developer-first.

    Strapi is an open-source headless Node.js CMS built purely with JavaScript that helps to create fully customizable and scalable APIs. With Strapi, we can build APIs using REST or GraphQL architecture.

  • node

    Node.js JavaScript runtime ✨🐢🚀✨

    Node.js installed on your computer; only LTS versions are supported (version 12.x minimum).

  • Bootstrap

    The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

    Tailwind CSS is a utility-first CSS framework use for writing CSS in a composable fashion right in your HTML. It is a powerful utility that allows you to build modern, pixel-perfect, and fully responsive interfaces without writing your custom CSS. Unlike Bootstrap, Tailwind CSS is not opinionated, and it doesn't have prebuilt components, making building good looking-interfaces fun!

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts