Learn Firebase, Graphql and Grep

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

When your application communicates with multiple GraphQL services, it becomes problematic to distinguish them by operation type and name alone. Learn how to take the service's endpoint into account when intercepting GraphQL queries and mutations with Mock Service Worker.

- [`graphql.link()`](https://mswjs.io/docs/api/graphql#graphqllinkurl)

Endpoint-Based GraphQL Mocking in MSW

Let's improve our schema-first GraphQL mocks by intercepting _all_ GraphQL operations—both queries and mutations—using a single Mock Service Worker `graphql.operation()` request handler. 

- [`graphql.operation()`](https://mswjs.io/docs/api/graphql#graphloperationresolver)

Mock All GraphQL Operations in MSW

Operation-based GraphQL mocking allows you to move fast without investing time into schemas or resolvers. 

But, when integrating Mock Service Worker into an existing application, going schema-first can be advantageous. Here's how you can route every GraphQL request to be resolved against a GraphQL schema, mocked or real, and use mock resolvers to control individual types and fields. 

Resolve GraphQL Requests Against a Mock Schema in MSW

Error responses in GraphQL are a bit unique. They must still produce a "200 OK" response and list the errors in the response body instead. Let's follow the GraphQL specification to produce a valid GraphQL error response in our Mock Service Worker handlers. 

Mock GraphQL Errors in MSW

In this lesson, you will use the Mock Service Worker `graphql.mutation()` request handler to allow the users to leave reviews for the movie they've watched. 

- [`graphql` namespace](http://mswjs.io/docs/api/graphql)

Intercept and Mock GraphQL Mutations in MSW

Let's spice things up by adding GraphQL to our application. 

Since you are prototyping mock-first, you don't have to write any GraphQL schemas or define any resolvers. Instead, you will utilize Mock Service Worker to intercept valid GraphQL queries by their _type_ and _name_, and respond with the same semantic JSON responses matching the queries.

- [Describing GraphQL APIs](http://mswjs.io/docs/network-behavior/graphql)

Intercept and Mock GraphQL Queries in MSW

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Hi! My name is [Artem](https://kettanaito.com). In this course, I will teach you how to mock REST and GraphQL APIs with [Mock Service Worker](https://mswjs.io). Together, we will build a movie streaming application and you will learn how to intercept both server-side and client-side requests and mock responses using standard JavaScript API. This is a state-of-the-art mock-first prototyping with MSW.

- Join my [Discord server](https://kettanaito.com/discord) to go through the course with others, ask questions, and share feedback. See you there!

Introduction to Mock REST and GraphQL APIs with Mock Service Worker

Controlling the network is the key to fast prototyping, bullet-proof tests, and efficient debugging. 

Mocking the APIs you use gives you this kind of control but most methods in the client and server come up short. 

That's where Mock Service Worker does it right.

With it you can intercept and take control of requests no matter where they're being made.

In this course, you will learn how to:

* setup and your first request handler 
* mock complex flows like authentication
* describe dynamic requests
* respond with HTTP streams,
* and use schema-first GraphQL mocking

After this course you'll be more than ready to bring MSW into your app and start mocking any kind of API you're using!

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments. 

Controlling the network is the key to fast prototyping, bullet-proof tests, and efficient debugging. Mocking the APIs you use gives you this kind of control.

Mock REST and GraphQL APIs with Mock Service Worker

firebase

Push Method and Instructions Object

Firebase Dependency and Set Up

Firebase Account and Database Set Up

Firebase Intro

Get started building web applications with Angular and Firebase.

In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

It helps you by wrapping everything into observables and helps update zones. 

By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build Full Stack Web Applications with Angular and Firebase

The last step we'll take is to make our application public.

We'll use the Angular CLI to generate a production build of our application, and then we'll use the Firebase CLI to deploy our application to Firebase hosting servers.

Firebase hosting is a great choice for us because Firebase Hosting will incorporate the services that we use in the app by default.


Deploy an Angular Web Application Powered by Firebase to Firebase Hosting

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

We want to secure our file storage so not just anyone can upload files to our Cloud Firestore.

We'll go through Cloud Storage Security rules to add rules and restrictions to our bucket server-side. You'll notice that the default rules for storage are the same as the database in that they are open to anyone for 30 days.

There are a few restrictions that we will implement:
    - Only allowing authenticated users to upload files.
    - Restrict the size of the files we want to upload.
    - Restrict the type of files we want to upload. (__i.e: only accept images or pdfs__)


Restrict File Uploading to Firebase Cloud Firestore with Cloud Storage Security Rules

Users can now see that files are attached to tasks but they can't do much with that. We need to let users be able to download the files so we'll do that in this lesson. 

We'll create a button for users to download the files they have in their tasks. We take a JavaScript first approach here by creating an anchor tag and adding all of the properties we need to allow for a download.


Download Files from Firebase Cloud Storage in Angular

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Now that file uploading works, we want to actually show that a task has files associated with it. To do this we will need to update the task object with a file property that we'll push files too.

In this lesson, we'll use Cloud Storage methods like getDownloadUrl() to get the file's download URL from our bucket.

Then we'll add that file's information to our task and persist it in the database to show the list of files in a task to the user.

While we do this, you'll see how we can easily add a spinner when files are being uploaded using Ionic loadingController.


Save and Display Tasks Files Utilizing Firebase Cloud Storage getDownloadUrl

We want our users to have more power by uploading and downloading files to the tasks they create.

In this lesson, we'll start creating the functionality that will allow our users to upload files. I went ahead and created the UI and click handler for this feature so we can focus on the actual file uploading.

We'll use the browser's `<input type="file">` to select files from our device and then we'll use Cloud Storage methods to upload the file to our storage bucket.


Upload Files to Firebase Cloud Storage with AngularFire storage uploadBytes

Our Security Rules are getting repetitive with all the logic that we've copy and pasted for the several actions we currently have.

In this lesson, we'll go through our security rules and extract the duplicated rules into functions that we can call.

With this approach, we can eliminate the copy/pasting and make our functions a bit more readable.


Refactor Firebase Security Rules to Use Functions for Easier Reading

Currently our Firebase Security Rules aren't as secure as they could be. When it comes to tasks, we are comparing the request's user on the task to the requests auth id. If someone intercepted this request and changed the ids here they could get away with it.

In this lesson, we'll go through our security rules and create a different set of security rules depending on the action the user is performing. For tasks specifically we will check the documents user id against the request user id.

We'll take things a step further as well and write different rules if a user is trying to create, delete, or update a task document.


Break Up Firebase Security Rules Into Different Actions Depending on Operation Performed

All the security we've added to our application has been client side. In a production app this isn't enough, we want to add security to our database directly.

We'll start securing our application's database with Firestore Security Rules.

We'll write security rules to prevent unauthenticated users from accessing our database, and then we'll add extra rules so that only a document's owner can access that document.


Secure your Firestore Data with Security Rules

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.

Search 100s of Issues with GitHub CLI as Context for AI Studio

I often find myself wondering how to use certain APIs in certain situations, and I have a couple of keywords that I try and search up on Google. 

What you can do in this situation is turn to GitHub and see how other people have actually used this code on public projects. The GitHub CLI enables us to run searches like this, and we can take the results and work on them programmatically.

Inside of Cursor with their Composer AI agent, we can search for the files we want, tell the agent to download them, and inspect them for better understanding of how those things work together.

Search All of GitHub's Code and Pass the Results to AI Agents in Cursor

Implement virtual scrolling to handle large datasets in an HTML table. Start with a basic table that renders 10,000 rows of data. The browser can struggle with this amount of DOM nodes to render at one time, especially on low end devices. 

We implement tanstack react virtual to render only the necessary amount of rows the user is viewing. The implementation includes proper column sizing, accessibility considerations, and convenient scroll controls, resulting in a smooth and performant table experience regardless of the dataset size.

Create a row virtualized HTML table with Tanstack Virtual

Learn how to implement virtual scrolling in React tables using TanStack Table and Tanstack Virtual with the useWindowVirtualizer React hook.

The most difficult tasks will require the strongest AI models. And those models simply aren't available as AI agents inside of your tooling. So the best workflows are to drag and drop the files you need to be changed and analyzed inside of a reasoning model such as OpenAI's O1 Pro, then letting it create a giant plan for your dumber AI agents to work on. The key here is that instead of just copying and pasting the entire plan into Cursors Composer or your AI agent, it's to create a file inside of your project and ask your agent to tackle the plan one step at a time. This allows you ample opportunity between each step to test and verify the micro steps along the way. Otherwise, as I've experienced many times, a session can go way off track and you burn a lot of time and burn a lot of AI requests Cursors Composer and it starts churning through a plan Cursors Composer and making lots of unwanted changes. Cursors Composer and it's to guide an AI agent to hold its hand along the way, especially through the most complex tasks. Cursors Composer and the most complex tasks Cursors Composer and the most complex tasks require a step-by-step plan.

Planning AI Agent Sessions with Reasoning Models

AI agents will inevitably make mistakes—it's just a matter of when. A key tool in your toolbox, once they do make mistakes after working on a problem for a while, is to use **git diff** to capture all of the changes they've made. 

Once you have those changes in a text file, you have a portable document that you can test against other AI models. This allows you to move the problem into smarter reasoning models with smaller context windows, helping you isolate and focus on the issue at hand.

**git diff** has been invaluable when working with AI agents because they'll often make many good changes but also slip in one tiny error. Finding that one small mistake is **git diff**’s superpower.

Search

Search Results