English versionEN

From Frontend to Full-Stack: Adding Features Without Adding Time

Jen Person

Squid Cloud

Recording and certification are available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Bookmark

We’re all here because we love React, and we love it because it’s a simple and intuitive system for creating beautiful, interactive websites. What if building full-stack apps could be just as simple and intuitive? Managing data and resources in your web applications doesn't have to be complex and time-consuming! Learn how to connect databases, APIs, and other services to your apps in minutes to make real-time interactive experiences for your users. In this session, you'll start with a blank page and end with a portfolio-worthy app and the skills you need to build your next app.

This workshop has been presented at React Summit US 2024, check out the latest edition of this React Conference.

FAQ

If the Squid console redirects you to the homepage during signup, try using an incognito window and ensure you have the correct access code. If issues persist, contact support via chat or email.

If you have questions about building applications with Squid, you can consult the documentation, use the built-in AI agent for queries, or reach out to the Squid team via their Discord server for assistance.

Squid AI currently offers a generous free tier suitable for personal projects. For larger projects or to exceed the free tier limits, pricing is usage-based and can be discussed with the Squid team.

Yes, Squid AI is suitable for personal projects. It provides a generous free tier and offers tools for building AI-driven applications without needing extensive backend or AI expertise.

To set up an application in the Squid console, visit the Squid console at console.get-squid.ai. You'll need to sign up and use an access code provided during the session or via the Discord server to access it.

The Squid platform is designed to help developers build full stack applications faster, integrating with existing tools and providing AI features. It allows you to connect to any database, API, or service with easy-to-use SDKs.

Squid executables are functions that run on the backend, providing secure access from the frontend. They ensure that only authorized actions are performed by the client, protecting sensitive operations from being exposed on the frontend.

Squid AI offers a comprehensive developer platform with features such as easy database integration, AI tooling, schedulers, triggers, executables, and support for various cloud services. It allows developers to create AI-driven applications without needing extensive AI expertise.

If you encounter issues accessing the Squid console, you can message the support team with your email, and they will help you gain access. You can also join the Squid Discord server to request access or report issues.

Squid provides a built-in NoSQL database that is secured by default. Access can be customized using decorators to ensure only authenticated users can read, write, or update data.

fullstack

Jen Person

95 min

10 Dec, 2024

Comments

Video Summary and Transcription

Let's start by setting up an application in the Squid console. Squid AI is a developer platform that offers ease of use and AI capabilities. Learn how to build full stack applications faster using Squid. Explore the features and documentation to add functionality, view and manage data, update and delete items in the database, and secure your application. Implement triggers, schedulers, and web hooks for automation and asynchronous communication. Discover how to add AI functionality with Squid's AI agents. Set up a new application, add an AI agent, and provide context for queries. Build and query tasks in the database using AI agents. Access controls and pricing options are available in the Squid console. Join the Discord community for support and to share your projects.

Available in Español: De Frontend a Full-Stack: Añadiendo Funcionalidades Sin Añadir Tiempo

Video transcription and chapters available for users with access.

Available in other languages:

Watch more workshops on topic

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

JSNation 2023

174 min

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

Top Content

Featured WorkshopFree

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.

web development ssr fullstack svelte

Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel

GraphQL Galaxy 2021

161 min

Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel

WorkshopFree

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

next.js graphql cloud fullstack

The Journey From React Frontend Development to Fullstack Development With Next.js

React Advanced 2024

143 min

The Journey From React Frontend Development to Fullstack Development With Next.js

Workshop

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

next.js fullstack

Building full-stack GraphQL applications with Hasura and Vue 3

Vue.js London Live 2021

115 min

Building full-stack GraphQL applications with Hasura and Vue 3

WorkshopFree

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.

vue graphql vue 3 fullstack

Getting Started with Deno and Deno Deploy

JSNation 2022

158 min

Getting Started with Deno and Deno Deploy

Workshop

Luca Casonato

Learn how to build full stack apps with Deno and Deno Deploy. We'll build a simple app using the fresh (fresh.deno.dev) framework, and host it on Deno Deploy.

deno react deno fullstack

Zero to Production with Fullstack GraphQL and React with Hasura team

React Summit 2020

162 min

Zero to Production with Fullstack GraphQL and React with Hasura team

Workshop

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.

graphql web development fullstack

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Full Stack Components

Remix Conf Europe 2022

37 min

Full Stack Components

Top Content

Kent C. Dodds

Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com

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.

remix javascript architecture fullstack

RedwoodJS: The Full-Stack React App Framework of Your Dreams

React Summit Remote Edition 2021

43 min

RedwoodJS: The Full-Stack React App Framework of Your Dreams

Top Content

Tom Preston-Werner

GitHub cofounder, RedwoodJS author

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.

jamstack redwoodjs frameworks react full stack framework fullstack

Remix Architecture Patterns

Remix Conf Europe 2022

23 min

Remix Architecture Patterns

Top Content

Andre Landgraf

Full Stack Software Engineer | allthingsweb.dev

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.

remix javascript architecture fullstack

Remixing Your Stack in a Monorepo Workspace

Remix Conf Europe 2022

22 min

Remixing Your Stack in a Monorepo Workspace

Juri Strumpflohner

GDE in Web Technologies & Angular, core member of Nx

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.

react monorepos typescript fullstack

Full-stack JS today: Fastify, GraphQL and React

React Summit 2022

25 min

Full-stack JS today: Fastify, GraphQL and React

Cody Zuschlag

Software engineer consultant and developer @ Nearform

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.

fastify react graphql node.js fastify fullstack

A Frontend Developer’s Guide to Web3

React Summit 2022

22 min

A Frontend Developer’s Guide to Web3

Rahat Chowdhury

Head of Developer Relations at Biconomy

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.

react frontend web3 fullstack