#fullstack

Subscribe
Fullstack is a term used to describe a developer who is knowledgeable in every layer of web development. This includes the front-end (client side) code such as HTML, CSS, and JavaScript, as well as the back-end (server side) code such as databases, server-side languages, and APIs. A fullstack developer can develop entire web applications from start to finish, including database design, user interface design, and coding.
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
The Journey From React Frontend Development to Fullstack Development With Next.js
React Advanced 2024React Advanced 2024
143 min
The Journey From React Frontend Development to Fullstack Development With Next.js
Workshop
Eric Burel
Eric Burel
Join us as we journey from React frontend development to fullstack development with Next.js. During this workshop, we'll follow along the official Next.js Learn tutorial with Eric Burel, professional trainer and author of NextPatterns.dev. Together, we'll set up a Next.js website and explore its server-side features to build performant apps.
- Introduction: discovering Next.js and its server-centric philosophy- Crafting a perfectly optimized multi-page website- Making sense of Next.js server-side rendering capabilities- Conclusion: how Next.js empowers you as a React developer
Astro – Island Technology in the Name of Optimization
React Advanced 2024React Advanced 2024
20 min
Astro – Island Technology in the Name of Optimization
Hello everyone. My name is Szymon Chmal and I am a Senior React Native Developer at CallStack. Today I'm going to introduce you to ASTRA, a powerful tool in modern web development that optimizes content delivery while providing the flexibility of modern JavaScript frameworks. ASTRA allows you to create blazing fast static websites without needing any JavaScript by default. It's perfect for sites that are mostly static but have a few interactive features. ASTRA is trusted by industry leaders like Microsoft and Porsche. It's built with content-driven pages in mind and supports integration with popular UI libraries like React, Vue, and Tailwind. ASTRA keeps things simple with file-based routing.
Diving Into Server Islands
React Advanced 2024React Advanced 2024
27 min
Diving Into Server Islands
Hello, everybody. I'm Elion, the Lead Developer Relations at React Bricks. Astro is a web framework for content-driven development, similar to Next or Nuxt. It supports TypeScript and JavaScript and compiles down to HTML and CSS, resulting in excellent indexability and SEO. HTML and JavaScript can be used together with Astro through client directives, allowing for interactive websites while optimizing performance. Astro's server islands architecture delays rendering until all content is available, and client-side interactivity is achieved through battery API and server authentication. Astro provides native data loading and supports open-source loaders for different content types. Collections and Astro Actions make content reuse and API usage easier. Zalt Schema, AstraDB, and ORM are available for form data handling. AstroDB and Starlight enable the use of different databases and on-demand rendering. Astro 5.0 introduces better localization, simplified rendering modes, and a content layer API. There is an upgrade guide for Astro 5.0 and it integrates well with React. Astro is recommended for content-driven websites but may not be ideal for building dashboards or authentication services. Astro has influenced other frameworks and aims to push the web towards better standards.
The Full-stack Framework of the Future is a DSL
Node Congress 2024Node Congress 2024
21 min
The Full-stack Framework of the Future is a DSL
The future of web frameworks will be a DSL, simplifying development and allowing for clear instructions for AI collaboration. DSLs like SQL and JSX have value in building better web apps. Wasp is a powerful full-stack web app framework that eliminates the need for writing backend code. It offers features like cron jobs, type safety, and email sending. Wasp also has projects like OpenSaaS and Mage that provide production-ready templates and AI-generated prototypes.
Canaries in the CloudFront
React Summit 2023React Summit 2023
12 min
Canaries in the CloudFront
Watch video: Canaries in the CloudFront
Today's Talk covers designing frontend CI/CD systems, integrating CDNs, and the impact of business type on frontend teams. The speaker shares their experience with CDN integration and its impact on their CI/CD strategy. They discuss canary releases and the challenges of pushing canary deploys to production. Additionally, they highlight the importance of integration testing for shift left and detecting issues before merging to the develop branch.
Remixing Your Stack in a Monorepo Workspace
Remix Conf Europe 2022Remix Conf Europe 2022
22 min
Remixing Your Stack in a Monorepo Workspace
Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.
How Remix and Prisma Make Frontend Devs Fullstack
Remix Conf Europe 2022Remix Conf Europe 2022
22 min
How Remix and Prisma Make Frontend Devs Fullstack
Remix and Prisma enable front-end developers to become full-stack developers by working across different parts of the stack without diving into complexities. They provide a great framework for writing code and interacting with databases, making it easier to be a full-stack developer. Prisma's ORM allows mapping database models to JavaScript or JSON models. Developing a full stack app with Remix requires structuring components and loaders differently, but simplifies development by focusing on one place.
Remix Architecture Patterns
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Top Content
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.
Killing Bugs With Kindness
React Advanced 2022React Advanced 2022
9 min
Killing Bugs With Kindness
This Talk focuses on reducing bugs in a React codebase by understanding antipaths. It discusses the types of bugs identified and the guardrails implemented to prevent them. The importance of being cautious with hooks like useState and useRef is emphasized, along with the use of context for state storage. The refactoring example demonstrates how reducing useState and callbacks can improve code quality and efficiency in the framework.
Building full-stack applications on the Edge
React Advanced 2022React Advanced 2022
9 min
Building full-stack applications on the Edge
This Talk explores building full stack applications on the edge and the blurring line between front end and back end development. It discusses the benefits of using the JAMstack and APIs for scalable web development. The Talk also highlights the improvements in edge technology, such as serverless functions and efficient data storage, and the deployment of functions and durable objects on the edge network. Overall, the Talk emphasizes the importance of delivering high-quality experiences with low latency through edge computing.
A Frontend Developer’s Guide to Web3
React Summit 2022React Summit 2022
22 min
A Frontend Developer’s Guide to Web3
This talk covers an introduction to Web 3 and smart contracts, including deployment and bytecode compilation. It also discusses interacting with blockchain wallets, using RPC endpoints and block explorers, and accessing smart contract data. The talk emphasizes the use of ABIs and JavaScript libraries like ethers for interacting with smart contracts. It mentions the shift in mindset from HTTP requests to using ABI code and libraries for front-end development in Web 3. The talk concludes by mentioning Web3UI and tools like PolygonScan and Etherscan for building on the blockchain.
Design-Driven Full-stack: an End-to-End Dev Workflow that Scales
React Summit 2022React Summit 2022
32 min
Design-Driven Full-stack: an End-to-End Dev Workflow that Scales
This Talk discusses the challenges of building full stack applications and introduces Redwood.js as a solution. It emphasizes the importance of design-driven workflows and the use of Redwood Cells to handle state and simplify complex tasks. The Talk also highlights the seamless integration between the front end and back end using mock data and the optimization of workflow for performant teams. It concludes with a mention of Redwood's authentication features and the importance of community and collaboration.
Full-stack JS today: Fastify, GraphQL and React
React Summit 2022React Summit 2022
25 min
Full-stack JS today: Fastify, GraphQL and React
The Talk discusses building a modern full stack application with JavaScript and GraphQL, emphasizing the importance of prioritizing the critical 20% of challenges. It highlights the benefits of building a productive and transparent tech stack with modularity and developer-friendly tools. The use of PostGrey as a relational database and Fastify as a server framework is recommended. The Talk also explores the advantages of using Mercurius and Urql for GraphQL implementation. Additionally, it mentions the use of React, SSR, and Fastify Vite for full-stack SSR and modular components. The Talk concludes by mentioning the advantages of this stack for complex functionality and the possibility of using Fastify in a serverless infrastructure.
A Glimpse Into the Future of Fullstack Development with Blitz.js
Node Congress 2022Node Congress 2022
32 min
A Glimpse Into the Future of Fullstack Development with Blitz.js
Today's Talk focused on the future of full-stack web development with Blitz.js. Blitz is a React framework built on top of Next.js, offering direct database access and authentication with authorization. The core features of Blitz include the zero-API layer and the ability to run server code directly from the frontend. The future of Blitz includes expanding to other frameworks and runtime environments. The new Blitz toolkit will be decoupled from any specific framework, allowing developers to choose their preferred foundation. It will retain the core value of Blitz while adding additional features like JWT authentication and advanced data-aware authorization. The migration to the new toolkit will be seamless for existing Blitz projects. The Blitz toolkit will have a plugin system for customization and support multiple resolvers. The Blitz project is currently going through a pivot and will focus on the Blitz toolkit. The goal is to release the toolkit by the end of March. The most exciting part of the toolkit is the plugin system design that allows users to customize their experience.
When (Not) To Create A GraphQL Server
GraphQL Galaxy 2021GraphQL Galaxy 2021
8 min
When (Not) To Create A GraphQL Server
Building a scalable GraphQL server can be challenging. There are multiple reasons to build a GraphQL server, such as optimizing client requests and wrapping microservices. The SDL first GraphQL server allows you to write your schema separately from your resolvers, giving you full control. You can create a GraphQL API automatically from a schema, simplifying the process and eliminating the need for manual deployments. The schema can link data sources and third-party APIs, allowing for easy integration and customization.
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
William Lyon
William Lyon
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
Build Fullstack Apps in Record Time with Blitz.js
React Advanced 2021React Advanced 2021
67 min
Build Fullstack Apps in Record Time with Blitz.js
Workshop
Simon Knott
Simon Knott
Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs!

Simon will introduce all the important parts & guide you through getting started with Blitz, so you'll know if you might want to use it or not.
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
Vue.js London Live 2021Vue.js London Live 2021
19 min
Vue Storefront + Vendure = Fullstack Open Source Ecommerce
This Talk discusses the full stack open-source e-commerce using ViewStorefront and Venge. ViewStorefront is a lightning-fast frontend platform for headless commerce, while Venge is a framework for the back-end. Both tools are highly customizable and built using modern frameworks. Creating an online store with Venge is quick and easy. Overall, this Talk presents a dream stack for open-source e-commerce and encourages contributions to the projects.
Fullstack Type-Safety with GraphQL and Hasura
React Advanced 2021React Advanced 2021
203 min
Fullstack Type-Safety with GraphQL and Hasura
WorkshopFree
Jesse Martin
Jesse Martin
In this workshop, we’ll learn how to build a type-safe chain from API to the client with generated TypeScript tooling. Creating a type-safe environment for development reduces the number of bugs that get shipped to production, but also creates faster feature development once the ground-work is in place.

This will be a fast-paced workshop covering an opinionated stack of features, but in the end, you’ll have a functioning framework for eloquent and type-safe development.

Table of contents

- We’ll begin creating a GraphQL API on Hasura Cloud and define some basic access controls and actions.
- Then we’ll scaffold a TypeScript-ready framework with NextJs.
- With the framework and API in place, we’ll generate an SDK using GraphQL Zeus.
- Lastly, we’ll generate some type-safe state management wrappers with easy-peasy for implementing a basic login and authentication flow.
Building full-stack GraphQL applications with Hasura and Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Building full-stack GraphQL applications with Hasura and Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
The frontend ecosystem moves at a breakneck pace. This workshop is intended to equip participants with an understanding of the state of the Vue 3 + GraphQL ecosystem, exploring that ecosystem – hands on, and through the lens of full-stack application development.

Table of contents
- Participants will use Hasura to build out a realtime GraphQL API backed Postgres. Together we'll walk through consuming it from a frontend and making the front-end reactive, subscribed to data changes.
- Additionally, we will look at commonly-used tools in the Vue GraphQL stack (such as Apollo Client and Urql), discuss some lesser-known alternatives, and touch on problems frequently encountered when starting out.
- Multiple patterns for managing stateful data and their tradeoffs will be outlined during the workshop, and a basic implementation for each pattern discussed will be shown.
Workshop level

NOTE: No prior experience with GraphQL is necessary, but may be helpful to aid understanding. The fundamentals will be covered.
Zero to Production with Fullstack GraphQL and React with Hasura team
React Summit 2020React Summit 2020
162 min
Zero to Production with Fullstack GraphQL and React with Hasura team
Workshop
Allison Kunz
Allison Kunz
Hasura is a free and open-source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one. The workshop will cover:
- A basic introduction to GraphQL- Using GraphQL to make CRUD operations from a React application- Setting up access controls to data- Building real-time components in React using GraphQL Subscriptions- Wrapping existing REST APIs with GraphQL servers that can be deployed on serverless platforms, and then merging them into a single endpoint using Remote Schemas- Triggering serverless functions on database events- In short, we’ll go through how React developers can adopt realtime GraphQL and serverless.
Transforming GraphQL – Infrastructure as Code for Front End Developers
JSNation Live 2020JSNation Live 2020
27 min
Transforming GraphQL – Infrastructure as Code for Front End Developers
This talk is about building full-stack cloud applications as a front-end developer using GraphQL and the GraphQL Transform library. It covers the three main parts of AWS Amplify: hosting, CLI, and client libraries. The GraphQL Transform library simplifies building a GraphQL API by handling schema creation, database interaction, and resolver mapping. It demonstrates how to use GraphQL transforms to build a GraphQL API with features like authorization rules, relationships, and local mocking. It also discusses the considerations for using managed services and the future of infrastructure as code with Amplify and other tools.
Blitz.js - The Fullstack React Framework
React Summit 2020React Summit 2020
32 min
Blitz.js - The Fullstack React Framework
Blitz is a framework for building full stack React apps with a monolithic architecture and no API layer. It uses Next.js and Prisma 2 and follows convention over configuration. Authentication and authorization are set up by default, and adding social login is easy. The Blitz community emphasizes inclusivity and welcomes contributions. The future of Blitz includes a stable release cycle and the vision of bringing the Zero API experience to mobile.
The Dawning of a New Age for Fullstack React
React Summit Remote Edition 2021React Summit Remote Edition 2021
34 min
The Dawning of a New Age for Fullstack React
React has evolved over the years, introducing breakthroughs like the declarative component model and React hooks. Create React App and Next.js abstracted away webpack config and routing, improving developer productivity. GraphQL backend as a service platforms made it easy to set up a backend without extensive knowledge. Blitz.js and Redwood.js are game-changing batteries included frameworks for full stack React development. They aim to make backend development easier for front end developers and optimize full stack productivity.