DEV Community: Temitope

Build the Product. Let AI Launch It: Creating VividLaunch for the Gemini Live Agent Challenge

Temitope — Mon, 16 Mar 2026 23:41:55 +0000

The Vibe Coding Era: Why Building Apps Is Easy but Launching Them Is Hard

We live in the era of "vibe coding." With tools that enable us to turn a spark of an idea into a functional product in days, the barrier to entry for building has never been lower. But as indie hackers and small teams are discovering, building is no longer the bottleneck—distribution is.

Most brilliant apps don’t fail because the code is bad; they fail because they are "ghosts." Modern marketing demands a relentless stream of high-impact content: TikToks, Reels, LinkedIn thought leadership, and constant activity on X. For a solo founder, this content treadmill is overwhelming. It steals time away from building a product users love. I built VividLaunch to solve exactly this.

Introducing VividLaunch: The AI Creative Director for Product Launches

VividLaunch is an autonomous orchestration platform that handles the entire lifecycle of a product launch. It acts as the "Creative Director" every founder needs but can't yet afford. By leveraging a multi-agent system, VividLaunch weaves together text, visuals, audio, and video into a single, fluid output stream. It doesn't just "chat"—it creates.

VividLaunch is an autonomous growth engine that generates and distributes marketing assets from a single product prompt. It can automatically create:

🎬 Promotional videos for YouTube, TikTok, and Reels
✍️ Thought-leadership blogs for Medium or Substack
📱 Platform-optimized posts for X, LinkedIn, and Instagram

Instead of creating each asset manually, Gemini acts as a Creative Director, generating a multimodal storyboard that combines narration, visuals, typography, and motion into a single creative flow.

Why I Built VividLaunch for the Gemini Live Agent Challenge

I created this project specifically for the Gemini Live Agent Challenge in the Creative Storyteller category. My goal was to push the boundaries of what a "Creative Agent" can do by exploring Gemini’s native interleaved output capabilities and tool-calling prowess.

This piece of content was created for the purposes of entering the Gemini Live Agent Challenge.

Designing an AI Creative Director with Gemini

At the heart of VividLaunch is a persona: the Creative Director. Unlike traditional chatbots that operate in a turn-based text box, our agent acts as a multimodal brain. It "thinks" in scenes, cinematic motion, and emotional pacing. It uses Gemini to analyze your product's "Brand DNA" (Tone, Humor, Formality) and translates those intangible vibes into structured, production-ready assets.

The Multi-Agent Architecture Behind VividLaunch

VividLaunch is powered by a sophisticated hierarchy of agents:

Researcher Agent (Gemini 3 Flash): Autonomously "surfs" your website or blog to gather product context. It uses tool-calling to query Firestore and scrape web data.
Creative Director Agent (Gemini 3.1 Pro): Interprets the research to choose a marketing angle and "vibe." This is the powerhouse model orchestrating the core creative strategy across all mediums.
Cinematographer Agent: Generates the multimodal storyboard, specifying camera moves, transitions, and audio pacing.
Media Worker: A backend system built with FFmpeg that interprets Gemini's instructions to produce the final media.

Using Gemini's Interleaved Output to Generate Multimodal Storyboards

The key innovation behind VividLaunch's Video Studio is using Gemini’s interleaved multimodal output to generate narration, visuals, and timing instructions in a single inference pass.

Instead of generating a script first and visuals later, Gemini produces an interleaved JSON stream. In a single inference pass, the agent generates:

Narration Script (Text)
Visual Prompts (Directives for Imagen/Veo)
Kinetic Typography (Subtitles)
Temporal Instructions (Exact timing and durations)

This allows the storyboard to exist as a single, cohesive creative artifact where all elements are aware of each other.

The Google-Native Stack Powering VividLaunch

I chose a fully Google-native stack for maximum synergy:

Google GenAI SDK (ADK): For orchestration and autonomous tool-calling.
Gemini 3 Flash & Gemini 3.1 Pro: The brains of the operation ensuring speed where needed and deep creative reasoning where it counts.
Google Cloud Firestore: Managing our asset registry, project configurations, and event logs.
Google Cloud Storage: Hosting high-volume media and rendered outputs.
Vertex AI: Powering Imagen 3 and Veo for visual synthesis.
Google Cloud Text-to-Speech: For professional-grade voiceovers.

How Vertex AI Imagen and Veo Power Cinematic Content Generation

VividLaunch features a 3-Tier Generation Engine that adapts to the user's needs:

Classic Mode: Uses Imagen 3 for high-fidelity static backgrounds with cinematic motion.
Hybrid Mode: Leverages Veo 2 for high-action scenes requiring dynamic AI video.
Cinematic Mode: Fully utilizes Veo 3.1 for the absolute latest in generative video quality.

Streaming AI Creativity: Turning Gemini JSON into Real Videos

The technical pipeline is a marvel of coordination. As Gemini streams JSON blocks to the UI, our custom FFmpeg worker begins interpreting the instructions. It fetches assets from GCS, triggers Google TTS for audio, and composites everything in real-time. Watching a live stream of raw AI "thoughts" turn into a playable video with subtitles in under 60 seconds is truly magical.

Comprehensive Marketing Orchestration: The Studios

VividLaunch is not just a video generator—it is a complete suite of studios designed to master every distribution channel.

The Social Studio: Intelligent A/B Testing

The Social Studio is designed for rapid iteration on platforms like X, LinkedIn, Instagram, and Facebook. I built an integrated A/B Variant Mode into the Social Studio. Using Gemini 3.1 Pro, the agent generates two distinct strategies—for example, an educational thread vs. an engaging hook—and provides a rationale for each. Users can preview these side-by-side in real-time on live device mockups and select the winner instantly.

The Blog Studio: Distraction-Free Authority

For long-form thought leadership, the Blog Studio generates high-authority pieces for Medium or Substack. It features a distraction-free, minimalist writing area that lets the founder edit Gemini's output before dispatching. It integrates seamlessly with the global connectors system to publish directly with one click.

Global Connectors: Secure Distribution

To distribute content autonomously, I built a robust Global Connectors API. This system manages encrypted credentials for all major platforms (Dev.to, Hashnode, Medium, X, YouTube, etc.) at the owner level. A founder connects their accounts once, and VividLaunch can seamlessly dispatch content across all their projects.

The Autopilot Command Center

The crown jewel of VividLaunch is the Autopilot Command Center, a production-ready dashboard providing real-time operational visibility. Inspired by modern SaaS platforms like Vercel and Linear, it features:

Smart Scheduling: Gemini analyzes engagement and dynamically sets the optimal posting times.
Pulse Settings: Fine-grained sliders to control the volume of Video, Blog, and Social generations.
Live Activity Feed: Powered by real-time Firestore events, providing a transparent view of every generation, queue, and publish action.
Brand Voice Directives: Advanced sliders for Tone, Humor, and Formality, plus a custom directive prompt to ensure the AI personality is strictly maintained.

With Autopilot enabled, a founder can literally launch a product by configuring the command center and letting the agents execute the strategy week over week.

Engineering Challenges

Synchronizing diverse AI outputs isn't easy. Here are the major hurdles I cleared:

Fixing the “Breathless Narrator” Problem

AI voiceovers are often too efficient, finishing sentences before a visual scene ends. I implemented dynamic SSML (Speech Synthesis Markup Language) where Gemini inserts <break/> tags to add natural pauses. My timing engine then stretches the visual scene to perfectly match the resulting audio duration.

Teaching AI Cinematic Motion: The Ken Burns Effect

Getting an LLM to output raw X/Y coordinates for camera moves was unstable. I solved this by building a Motion Preset Library. Gemini now selects an "Intent" (e.g., ZOOM_IN_SLOW), which my worker maps to smooth, mathematically stable FFmpeg filters.

Solving the Multimodal Identity Crisis

Background music often drowned out narration. I built an Audio Mixer with a "Ducking" filter that automatically lowers music volume by 15dB whenever the narrator's audio stream is active.

Building Subtitle Intelligence for Vertical Video

To prevent text overflow in TikTok-style frames, I developed Text-Wrapping Logic. If a subtitle card is too long, the system automatically segments it into multiple cards synced to the vocal timestamps.

Lessons Learned

The Stability vs. Creativity Tradeoff

I discovered that one model doesn't fit all tasks. I architected a Dual-Tier Agency:

Gemini 3 Flash: Handles the "Research" where tool-calling stability and speed are critical.
Gemini 3.1 Pro: Takes on the "Director" role, where state-of-the-art creative nuance, deep reasoning, and strategic thinking are paramount.

Designing an AI Interface That Feels Like a Creative Director

The VividLaunch UI breaks the "text box" paradigm. Users watch a live timeline construction where scene blocks appear in real-time. You can interact with the AI-extracted "Brand DNA" sliders to tweak the vibe before the final render begins.

What's Next for VividLaunch?

The foundation is built, but the future of VividLaunch involves:

VividAnalytics: An agent that scans your engagement metrics from connected platforms and suggests "Regenerations" to optimize your content performance, closing the loop between generation and results.
Collaborative Storyboarding: A multi-user "War Room" where teams can tweak Gemini's creative decisions in real-time before finalizing the generation.

Build the Product. Let AI Launch It.

VividLaunch isn't just about making content; it's about reclaiming a founder's most precious resource: time. By letting Gemini act as our Creative Director, we can finally bridge the gap between building a great product and making sure the world sees it.

Submission Details:

Hackathon: Gemini Live Agent Challenge
Category: Creative Storyteller
Models: Gemini 3 Flash, Gemini 3.1 Pro
Tech: Google Cloud, Vertex AI, GenAI SDK

Unbiased Intelligence in a Biased Game: Building Elite Sports Intelligence Engine with Elastic Agent Builder

Temitope — Fri, 27 Feb 2026 16:39:41 +0000

Introduction

Football is a global language spoken by over 5 billion people. But it's also a game defined by extreme unpredictability. As humans, we can’t help but be biased. When we see a club like Liverpool spending over $400 million in a transfer window, our brains tell us they should beat a smaller squad like Brentford or AFC Bournemouth. We factor in money, trophies, history, fanbase, and the "weight of the jersey".

These biases cloud judgment. I was inspired by the idea of removing this emotional cloud. I wanted to build an agent that ignores the hype and looks only at the raw, unbiased data provided by leagues across the world—from the Premier League to the Bundesliga. My goal was to create an "Elite Sports Intelligence Engine" that gives fans and journalists the objective truth.

The Brain of the Operation: What the Agent Actually Does

In most AI applications, you ask a question and the model predicts the next word based on its training. But football changes every day—yesterday's stats are today's history. To solve this, I didn't just build a chatbot; I built an Autonomous Orchestrator using the Elastic Agent Builder.

Beyond RAG: From Search to Reasoning

While standard Retrieval-Augmented Generation (RAG) simply finds documents, my agent performs Agentic RAG. When you select a match like Arsenal vs. Man City, the agent doesn't just "look up" the teams. It initiates a multi-step reasoning loop:

Deconstruction: It breaks your request into specific data requirements (e.g., "I need home form for Team A and away form for Team B").
Tool Selection: It scans its "utility belt" of 14+ custom ES|QL tools to decide which ones will provide the most accurate tactical narrative.
Data Synthesis: It executes complex ES|QL queries against my Elasticsearch indices, retrieving structured stats on expected goals (xG), referee behavior, and player fatigue.
Final Verdict: It synthesizes these disparate data points into a cohesive, professional-grade match report.

The "Innovation" Protocol

What makes this agent unique is its ability to uncover hidden variables. For example, if my Fatigue Analysis Tool reports that a team has had only three days of rest, and my Official Conduct Tool shows the assigned referee has a high yellow-card frequency, the agent is smart enough to flag this as a "High-Risk Discipline Scenario." It connects dots that a human analyst might spend hours trying to find.

By using the Elastic Agent Builder, I was able to give the LLM "hands" (the ability to query data) and "eyes" (the ability to see real-time trends), turning a simple language model into a high-fidelity Sports Intelligence Engine.

Data Ingestion – Keeping the Engine Fresh

One of the core strengths of the Elastic Agent Builder is its ability to connect an LLM to private, high-velocity data. But an agent is only as smart as the data it can access. Since football matches are played almost every hour across the globe, a static database simply wouldn't cut it.

I needed a "Live Memory" for my agent.

That’s why I built an automated daily ingestion pipeline using Next.js and Vercel’s cron jobs.

All match data (results, goals, corners, cards, shots, etc.) is sourced from http://football-data.co.uk — one of the most comprehensive free football databases available. It covers an impressive range of leagues, including:

England (Premier League E0, Championship E1, League One E2, League Two E3, National League EC, and more)
Spain (La Liga SP1, Segunda SP2)
Germany (Bundesliga D1, 2. Bundesliga D2)
Italy (Serie A I1, Serie B I2)
France (Ligue 1 F1, Ligue 2 F2)
Netherlands (Eredivisie N1)
Belgium (Pro League B1)
Portugal (Primeira Liga P1)
Turkey (Süper Lig T1)
Greece (Super League G1)
And many others: Argentina (ARG), Austria (AUT), Brazil (BRA), Denmark (DNK), Finland (FIN), Ireland (IRL), Japan (JPN), Mexico (MEX), Norway (NOR), Poland (POL), Romania (ROU), Russia (RUS), Sweden (SWE), Switzerland (SUI), USA (MLS/USA), and more.

This wide coverage means the engine isn’t limited to just one league — it can analyze matches from most major global competitions.

The magic happens in a single Next.js API route: /api/update-leagues.

Fetch — Every day, the route downloads the latest CSV files from football-data.co.uk (main leagues use the mmz4281/2526/ path, others use /new/).
Parse — Using csv-parse/sync, I read the CSV into records, standardize dates (DD/MM/YY → ISO YYYY-MM-DD), and add leagueCode for easy filtering.
Incremental sync — Before uploading, I query Elasticsearch for the latest date in that league. If the CSV has newer data (or it’s the first run), I proceed.
Upsert safely — I create a unique _id for each match (YYYY-MM-DD_HomeTeam_AwayTeam) so duplicates are automatically overwritten or skipped — no manual cleanup needed.
Bulk upload — Using the Elasticsearch JavaScript client, I send batches via client.bulk({ refresh: true }) — fast, atomic, and efficient.

To run this daily without any manual intervention, I added a simple vercel.json file:

{
  "crons": [
    {
      "path": "/api/update-leagues",
      "schedule": "0 0 * * *"   // Every day at midnight UTC
    }
  ]
}

The Tools That Power the Engine

At the heart of Elite Sports Intelligence Engine are 19 custom ES|QL tools I built directly in Elastic Agent Builder. These tools are not just simple queries — they are specialized intelligence modules that extract, aggregate, and interpret historical match data from the Elasticsearch index.

Each tool is tailored to a specific angle of football analysis, and the agent intelligently decides which ones to call and how to combine them.

Here’s a summary of the key tools and what they do:

get_corner_dynamics_insights — Analyzes set-piece pressure and territorial dominance through average corners per match, team splits, and high-volume corner events (9.5+). Helps identify matches likely to be defined by heavy wing play.
get_defensive_integrity_metrics — Calculates clean sheet frequency and shutout probability for both teams. Reveals elite defensive units or goalkeepers in form.
get_disciplinary_trend_insights — Tracks yellow/red card averages, foul patterns, and likelihood of high-caution games (3.5+ yellows). Flags tension and potential suspension risks.
get_double_chance_insights — Quantifies tactical resilience: probability of avoiding defeat (win or draw) or decisive outcomes. Highlights unbeaten streaks or high-stakes fixtures.
get_full_time_result_insights — Analyzes recent form and head-to-head to estimate win/draw/loss percentages. Includes sample-size warnings for reliability.
get_goal_density_insights — Categorizes match intensity (0-1, 2-3, 4+ goals). Reveals if a fixture tends toward tactical stalemates or open, high-scoring affairs.
get_league_context_benchmarks — Provides division-wide averages (goals, cards, corners) to show if a team is above or below league norms.
get_mutual_scoring_insights — Measures BTTS frequency. Identifies balanced attacks or games likely to feature both sides scoring.
get_offensive_penetration_metrics — Evaluates shot volume, high-attack games (15+ shots), and conversion efficiency. Differentiates dominant but wasteful teams from clinical finishers.
get_official_conduct_analysis — Analyzes referee tendencies (fouls called, yellow/red averages). Spots strict or lenient officials that could influence match flow.
get_over_under_goals_insights — Calculates over/under likelihood across 0.5 to 4.5 lines. Predicts whether the game will be low-scoring or explosive.
get_recent_form_trajectory — Tracks momentum via weighted points from the last 5 results. Identifies teams on upward or downward spirals.
get_schedule_density_analysis — Measures rest days since last fixture. Flags fatigue or rotation risks that could impact performance.
get_scoreline_distribution_analysis — Finds the most frequent final scorelines. Reveals "typical" outcomes between teams.
get_strategic_performance_indicators — Computes xG proxy (shots/SoT-based), form momentum, and H2H dominance. Spots teams over/under-performing their stats.
get_team_scoring_profile_insights — Analyzes individual team scoring averages and multi-goal consistency. Highlights scoring threats or droughts.
get_venue_performance_splits — Breaks down home/away win rates and goal differentials. Identifies "fortress" homes or "road warrior" away sides.
get_victory_margin_analysis — Measures average goal margin and win-to-nil frequency. Reveals dominant winners or tight contests.

The agent doesn’t just run one tool — it chains several in multi-step reasoning. For example, it might start with recent form and head-to-head, then pull goal and corner trends, then check referee and schedule density to flag fatigue + discipline risks. This creates a "Strategic Narrative" — connecting dots that would take a human analyst hours to find manually.

All the ES|QL source code for these tools is available in the attached GitHub repositor.

These tools are what make the agent feel truly intelligent — not just retrieving data, but synthesizing it into meaningful, actionable football intelligence — exactly what Elastic Agent Builder was designed for.

The Sample Frontend Apps (Review, News, Prediction, Chat)

To showcase the full power of Elite Sports Intelligence Engine, I built a clean, multi-page Next.js application with four distinct experiences — each powered by the same agent but using a specialized prompt and API route to deliver exactly what different users need.

All pages share a consistent cascading selector (country → league → home team → away team) for easy match input, and each calls a dedicated Next.js proxy route that crafts a tailored prompt and forwards it to the Agent Builder endpoint.

Match Review (Homepage – /)

The core experience. This page delivers a quick, high-level tactical snapshot of the fixture.

Route: /api/match-review

Prompt style: Focused on data-driven analysis (form, trends, key patterns).

Output: Structured Markdown with sections and tables — ideal for analysts or fans who want stats fast.
Match News / Preview (/news)

Journalistic storytelling mode.

Route: /api/news

Prompt style: Adopts a neutral "sports reporter" persona — generates engaging articles with headlines, storylines, key battles, and balanced conclusions.

Output: Readable, narrative preview — perfect for casual fans or content creators.
Match Stats & Predictions (/stats)

The "quant" deep-dive.

Route: /api/stats

Prompt style: Forces structured tables covering probabilities (1X2, over/under, BTTS, corners, cards, shots).

Output: Clean Markdown tables + a built-in risk disclaimer emphasizing that predictions are data-derived, not certainties.
Agent Chat (/chat)

Conversational exploration for power users.

Route: /api/chat

Prompt style: Open-ended — the agent can answer follow-ups, dive deeper into stats, compare players, or analyze league-wide trends.

Output: Full chat history with Markdown support — great for research or custom questions like "Why is Arsenal weak away?" or "Compare corner conversion rates."

These four experiences show how Elastic Agent Builder enables one backend agent to power multiple frontends with different personas and formats — all through prompt engineering and custom tool chaining. The agent stays consistent while adapting perfectly to each use case.

The "War Stories": Overcoming Technical Hurdles

Every innovative project comes with its own set of "Final Boss" challenges. For Elite Sports Intelligence Engine, the primary battle wasn't just building the intelligence—it was making that intelligence fast enough for the modern web.

1. The Timeout Battle: 19 Tools vs. 60 Seconds

When I first deployed the agent with its full suite of 19 ES|QL tools, I hit a wall: the 504 Gateway Timeout. Orchestrating nearly 20 specialized data-fetching tasks within a standard 60-second web window proved nearly impossible, as the agent’s "Chain of Thought" loop took longer than the browser was willing to wait.

To win this battle, I implemented a three-pronged strategy:

Infrastructure Tuning: I extended the execution limit in my Next.js route handler to maxDuration = 120.
Next.js Resilience: I implemented AbortControllers and AbortSignal.timeout(110000) to manage these long-running AI tasks without crashing the application.
Lean Tooling: I discovered that the agent was significantly faster when interacting directly within the Elasticsearch UI compared to the API. To bridge this speed gap, I strategically unchecked the least-critical tools, narrowing the engine's focus to the highest-impact metrics for the best performance.

2. Prompt Refinement: From "Ambiguity" to "Direct Command"

Originally, my system prompt was a massive, complex document that governed every possible behavior. However, I realized that a long prompt actually slowed the agent down by increasing the "Thinking" overhead.

I pivoted to a "Parallel-Reasoning" Instruction strategy:

Minimalist Agent Base: I simplified the default agent instructions in the Elastic UI to be as lean as possible.
Frontend Orchestration: I moved the heavy lifting—the specific formatting and tactical requirements—to the Next.js frontend prompt.
The "Delegation" Fix: Instead of trying to be everything at once, the agent is now simply told to: "Focus on the specific request from the frontend and choose only the most relevant tools for that specific task".

This refinement turned the agent from an "Over-thinker" into a "Decisive Analyst," dramatically reducing latency while maintaining the "Elite" quality of the insights.

Conclusion

Building Elite Sports Intelligence Engine started as a simple idea: what if we could remove human bias from football analysis and let pure data tell the story? What began as a frustration with manual spreadsheets turned into a fully autonomous, tool-driven agent that delivers deep, neutral insights in seconds.

Elastic Agent Builder was the perfect platform for this vision. It let me rapidly create 19 custom ES|QL tools, chain them intelligently, connect everything to my private Elasticsearch index, and expose powerful capabilities through clean APIs — exactly what the framework is designed to enable. The result is an engine that serves millions of football fans worldwide: casual viewers who want quick previews, analysts who need stats, fantasy players who crave probabilities, and journalists who want compelling narratives.

The project taught me that real intelligence comes from thoughtful tool design, safe data pipelines, and letting the agent reason over results — not from forcing an LLM to guess. It also proved that even a solo builder can create something impactful with the right tools.

This is just the beginning.

I’m excited to keep evolving Elite Sports Intelligence Engine — adding live match-day data, injury/weather context, player-level depth, and support for other sports — until it becomes the go-to unbiased intelligence layer for global football.

If you're reading this, thank you for following along.

The repo is open (link below) — fork it, extend it, or build your own version.

The future of sports analysis is data-driven, neutral, and agent-powered — and I’m just getting started.

Thanks again to the Elastic team for an incredible Agent Builder framework. To everyone who took the time to read through this journey: thank you for your curiosity.

Let’s keep pushing the boundaries.

GitHub Repository: GitHub Repository
Live Demo App: MatchScout AI Live Demo

LucideCrawl: AI-Powered Web Ingestion and Phishing Detection API Built on Xano

Temitope — Mon, 15 Dec 2025 07:56:49 +0000

This is a submission for the Xano AI-Powered Backend Challenge: Production-Ready Public API

What I Built

I built LucideCrawl — a production-ready public API that allows developers to safely ingest and analyze web content at scale while protecting users from phishing, scams, and malicious sites.

LucideCrawl provides four core capabilities, all implemented entirely in Xano with robust authentication, per-user rate limiting, usage tracking, and audit logging:

Phishing & Safety Detection – AI-powered, real-time evaluation of URLs to detect scams, impersonation, urgent threats, and security risks.
Ask Questions About Web Pages – Extract clean content and answer natural language questions grounded in the page content. Perfect for RAG, summarization, or compliance checks.
Sitemap-Based Bulk Ingestion – Crawl all pages from a sitemap.xml with include/exclude path filtering.
Full Website Crawl – Depth-controlled crawling of entire websites with domain/path rules, delivering structured, clean data.

LucideCrawl is ideal for:

Browser extensions and email tools needing instant phishing detection
AI agents requiring safe, grounded web data
Knowledge platforms building search indexes or SEO audits
Security teams monitoring brand impersonation

All core logic, authentication, API key management, and rate limiting are built natively in Xano.

API Documentation

Base URL: https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx

Authentication:

All endpoints require an x-api-key header.
API keys are generated upon signup and displayed only once. Users can manage them in their account.

Rate Limits (monthly requests per user – applies to all protected endpoints):

Plan	Monthly Limit
Free	20
Pro	3,000
Enterprise	100,000

This unified monthly quota applies to all endpoints that require an API key (i.e., every endpoint except /auth/signup, /auth/login etc).

Usage is tracked globally across all protected calls — once the limit is reached, further requests will be blocked with a clear error until the next calendar month.

Core Endpoints

/auth/signup API

Create a new user account and instantly generate a secure API key and auth token.
This endpoint is designed for developer onboarding and quick start integration.

⚠️ The API key is returned once. Clients must store it securely.

Request Body

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "secure_password"
}

Example: Create a new account

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/auth/signup \
  -H "Content-Type: application/json" \
  -d '{
    "name": "user004",
    "email": "user004@email.com",
    "password": "strong_password_here"
  }'

Response

{
  "success": true,
  "message": "Account created successfully. Save your API key — it will not be shown again!",
  "auth_token": "eyJhbGciOiJBMjU2S1ciLCJlbmMiOiJBMjU2Q0JDLUhTNTEyIiwiemlwIjoiREVGIn0...",
  "user": {
    "id": 5,
    "name": "user004",
    "email": "user004@email.com",
    "plan": "free"
  },
  "api_key": "sk_ad79826169d2f7e7c0736d649fd1a3feacb45919"
}

🔐 What this endpoint does

Step	Action
1	Validates email uniqueness
2	Creates a new user (`role: member`, `plan: free`)
3	Generates a cryptographically secure API key
4	Stores the API key server-side
5	Returns an auth token for immediate access

🧠 How `/auth/signup` fits into the platform

auth/signup → receive API key → call crawl_webpage / trust_scan / ask_the_page

This makes onboarding:

One request
No manual key creation
Production-ready from first call

/auth/login

Authenticate an existing user and retrieve a new auth token.

Example: Log in to an existing account

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user004@email.com",
    "password": "strongpassword123"
  }'

Response (simplified)

{
  "authToken": "eyJhbGciOiJBMjU2S1ciLCJlbmMiOiJBMjU2Q0JDLUhTNTEyIiwiemlwIjoiREVGIn0...",
  "user_id": 5
}

📌 Notes

Used for authenticated dashboard or account-level actions
Does not return the API key (by design)

🧠 How Authentication Fits Into the Platform

login  → manage account → rotate keys → monitor usage

This keeps your platform:

Secure (keys + auth tokens)
Scalable (plan-based limits)
Developer-friendly (simple onboarding)

🔐 Authentication APIs
/auth/me

Retrieve the current user’s record using the authentication token.

Example: Get authenticated user

curl -X GET https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/auth/me \
  -H "Authorization: Bearer <YOUR_AUTH_TOKEN>"

Response (simplified)

{
  "id": 5,
  "created_at": "2025-12-20T08:15:30Z",
  "name": "user004",
  "email": "user004@email.com",
  "account_id": 1,
  "role": "member"
}

📌 Notes

Requires a valid auth token in the Authorization header
Returns user info associated with the token
Useful for verifying the logged-in user or fetching profile details

/reset/magic-link-login

Exchange a one-time magic token for an authentication token. Logs in the user via a passwordless magic link.

Example: Log in with a magic link

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/reset/magic-link-login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user004@email.com",
    "magic_token": "8a9b7c6d-1234-5678-90ab-cdef12345678"
  }'

Response (simplified)

{
  "authToken": "eyJhbGciOiJBMjU2S1ciLCJlbmMiOiJBMjU2Q0JDLUhTNTEyIiwiemlwIjoiREVGIn0...",
  "user_id": 5
}

📌 Notes

The magic_token and email are required
Tokens expire after a set time and can only be used once
Generates a standard auth token for the user on successful validation
Use this for passwordless login flows or “magic link” login emails

/trust_scan API

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/trust_scan \
  -H "x-api-key: sk_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://paypal-security-update-2025.com/login"}'

Response (simplified):

{
  "success": true,
  "data": {
    "safety_score": 0.08,
    "safety_label": "Danger",
    "confidence_level": "high",
    "phishing_category": "financial",
    "impersonated_brand": "PayPal",
    "detected_threats": [
      "URGENT_ACTION_REQUIRED",
      "FAKE_LOGIN_FORM"
    ],
    "details": "This page mimics PayPal's login interface and uses urgency tactics to steal credentials.",
    "user_action_recommendation": "Do not enter any information. Close immediately."
  },
  "usage": {
    "month": "2025-12",
    "used": 12,
    "limit": 100,
    "remaining": 88
  }
}

/ask_the_page API

Ask a direct question about a webpage and receive an AI-generated explanation based on the page’s content and domain signals.

Example: Verify a banking login page

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/ask_the_page \
  -H "x-api-key: sk_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://bankofamerica-secure-login-2025.com",
    "question": "Is this the real Bank of America login page?"
  }'

Response (simplified):

{
  "success": true,
  "data": {
    "url": "https://bankofamerica-secure-login-2025.com",
    "question": "Is this the real Bank of America login page?",
    "answer": "No, this is not a legitimate Bank of America page. The domain is not owned by Bank of America and uses urgency-driven login prompts commonly associated with phishing attacks.",
    "page_title": "Bank of America Secure Login"
  },
  "usage": {
    "month": "2025-12",
    "used": 13,
    "limit": 100,
    "remaining": 87
  }
}

/crawl_webpage API

Fetch and extract structured data from any public webpage.
This endpoint is useful for content analysis, AI training, indexing, or downstream security scans.

Example: Crawl a webpage

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/crawl_webpage \
  -H "x-api-key: sk_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com"
  }'

Response (simplified):

{
  "success": true,
  "data": {
    "url": "https://example.com",
    "raw_html": "<!doctype html>...</html>",
    "clean_text": "This domain is for use in documentation examples without needing permission. Avoid use in operations. Learn more",
    "metadata": {
      "title": "Example Domain",
      "description": null,
      "keywords": null,
      "canonical": null,
      "language": "en"
    },
    "headings": [
      {
        "level": "h1",
        "text": "Example Domain"
      }
    ],
    "links": [
      {
        "url": "https://iana.org/domains/example",
        "text": "Learn more",
        "is_external": true
      }
    ],
    "structured_page_json": {
      "title": "Example Domain",
      "url": "https://example.com",
      "language": "en",
      "clean_text": "This domain is for use in documentation examples without needing permission. Avoid use in operations. Learn more",
      "metadata": {
        "title": "Example Domain",
        "description": null,
        "keywords": null,
        "canonical": null,
        "language": "en"
      },
      "headings": [
        {
          "level": "h1",
          "text": "Example Domain"
        }
      ],
      "links": [
        {
          "url": "https://iana.org/domains/example",
          "text": "Learn more",
          "is_external": true
        }
      ]
    }
  },
  "usage": {
    "month": "2025-12",
    "used": 24,
    "limit": 100,
    "remaining": 76
  }
}

/site_crawl API

Crawl an entire website (or section of it) and return structured content from multiple pages in a single request.
Ideal for bulk analysis, AI training, indexing, and large-scale security scans.

Input Parameters

url – Starting URL for the crawl
pageLimit – Maximum number of pages to crawl
crawlDepth – How deep the crawler should follow internal links
includeSubdomains – Whether to include subdomains
followExternalLinks – Whether to crawl external domains
includePaths – Optional allowlist of URL paths
excludePaths – Optional blocklist of URL paths

Example: Crawl a small website

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/site_crawl \
  -H "x-api-key: sk_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "pageLimit": 3,
    "crawlDepth": 1,
    "includeSubdomains": false,
    "followExternalLinks": false,
    "includePaths": [],
    "excludePaths": []
  }'

Response (simplified):

{
  "success": true,
  "message": "Crawl completed successfully",
  "crawl_id": 6,
  "pages_crawled": 2,
  "formattedData": [
    {
      "url": "https://httpbin.org/forms/post",
      "title": null,
      "content": "Customer name: Telephone: E-mail address: Pizza Size Small Medium Large...",
      "metadata": {
        "title": null,
        "description": null,
        "keywords": null,
        "canonical": null,
        "language": null
      },
      "headings": []
    }
  ],
  "crawledData": [
    {
      "url": "https://httpbin.org",
      "raw_html": "<!DOCTYPE html>...</html>",
      "clean_text": "A simple HTTP Request & Response Service.",
      "metadata": {
        "title": "httpbin.org",
        "description": null,
        "keywords": null,
        "canonical": null,
        "language": "en"
      },
      "headings": [
        {
          "level": "h2",
          "text": "httpbin.org"
        }
      ],
      "links": [
        {
          "url": "https://github.com/requests/httpbin",
          "is_external": true
        }
      ]
    }
  ],
  "usage": {
    "current": 49,
    "limit": 50
  }
}

/load_sitemap API

Load and process an XML sitemap, extract valid URLs, and crawl only the pages you care about using path filters.
Ideal for bulk ingestion, SEO analysis, AI training, and large-scale monitoring without full site crawling.

Input Parameters

sitemap_url – Full URL to the sitemap XML
include_paths – Optional list of URL path prefixes to allow
exclude_paths – Optional list of URL path prefixes to block

include_paths and exclude_paths work together to precisely control which sitemap URLs are processed.

Example: Load and filter a sitemap

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/load_sitemap \
  -H "x-api-key: sk_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "sitemap_url": "https://octopus.do/sitemap.xml",
    "include_paths": [
      "/sitemap/changelog/"
    ],
    "exclude_paths": []
  }'

Response (simplified)

{
  "success": true,
  "message": "Sitemap processed successfully",
  "sitemap_id": 4,
  "data": {
    "message": "Sitemap processed. Found 1 valid pages.",
    "formattedData": [
      {
        "url": "https://octopus.do/sitemap/changelog",
        "title": "Check out our Updates and Roadmap | Octopus.do",
        "content": "November 28, 2025 Feature Export to Excel... Octopus core refactoring...",
        "metadata": {
          "title": "Check out our Updates and Roadmap | Octopus.do",
          "description": "Our changelog includes new product features and development updates.",
          "keywords": null,
          "canonical": null,
          "language": "en"
        },
        "headings": [
          { "level": "h1", "text": "Changelog" },
          { "level": "h2", "text": "Export to Excel" },
          { "level": "h2", "text": "Introducing Sitemap AI assistant BETA" }
        ]
      }
    ],
    "raw": [
      {
        "url": "https://octopus.do/sitemap/changelog",
        "raw_html": "<!DOCTYPE html>...</html>",
        "clean_text": "November 28, 2025 Feature Export to Excel...",
        "metadata": {
          "title": "Check out our Updates and Roadmap | Octopus.do",
          "description": "Our changelog includes new product features and development updates.",
          "keywords": null,
          "canonical": null,
          "language": "en"
        },
        "headings": [
          { "level": "h1", "text": "Changelog" }
        ],
        "links": [
          {
            "url": "https://x.com/octopusdoHQ",
            "text": "Follow for updates",
            "is_external": true
          }
        ]
      }
    ]
  },
  "usage": {
    "current": 70,
    "limit": 70,
    "remaining": 0
  }
}

/generate_pdf_from_page API

Generate a high-quality, fully rendered PDF of any webpage (A4 format, with images, CSS, and JavaScript support).

Perfect for archiving, legal snapshots, report generation, or offline sharing.

Returns raw PDF binary — browsers will automatically prompt download or display inline.

Request Body

{
  "url": "https://react.dev"
}

Example: Generate PDF

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/generate_pdf_from_page \
  -H "x-api-key: sk_your_secure_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://react.dev"
  }' \
  --output react-dev.pdf

Response

Binary PDF file of the fully rendered page

Content-Type: application/pdf

/capture_screenshot API

Capture a screenshot of any webpage — full page or viewport — in PNG or JPEG format.

Ideal for thumbnails, visual monitoring, social cards, or debugging layout issues.

Request Body

{
  "url": "https://react.dev",
  "fullPage": true,
  "format": "png"
}

fullPage: true (default) = capture entire scrollable page

format: "png" (default) or "jpeg"

Example: Full-page PNG screenshot

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/capture_screenshot \
  -H "x-api-key: sk_your_secure_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://react.dev",
    "fullPage": true,
    "format": "png"
  }' \
  --output react-dev-screenshot.png

Response

Binary image file

Content-Type: image/png or image/jpeg

/generate_markdown_from_page API

Convert any fully rendered webpage into clean, structured Markdown.

Great for content import, documentation, blog migration, or preparing data for AI.

Request Body

{
  "url": "https://example.com"
}

Example

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/generate_markdown_from_page \
  -H "x-api-key: sk_your_secure_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com"
  }'

Response

{
  "success": true,
  "data": {
    "url": "https://example.com",
    "markdown": "# Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\n[More information...](https://www.iana.org/domains/example)"
  },
  "usage": {
    "month": "2025-12",
    "used": 21,
    "limit": 50,
    "remaining": 29
  }
}

/extract_metadata_from_page API 🔍

Extract SEO and Open Graph metadata (title, description, image, keywords, canonical) from any webpage.

Essential for link previews, content curation, social sharing, and crawler intelligence.

Request Body

{
  "url": "https://react.dev"
}

Example

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/extract_metadata_from_page \
  -H "x-api-key: sk_your_secure_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://react.dev"
  }'

Response

{
  "success": true,
  "data": {
    "url": "https://react.dev",
    "title": "React",
    "description": "React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript...",
    "ogImage": "https://react.dev/images/og-home.png",
    "keywords": [],
    "canonical": "https://react.dev/"
  },
  "usage": {
    "month": "2025-12",
    "used": 27,
    "limit": 50,
    "remaining": 23
  }
}

/summarize_webpage API 🧠

Generate a rich, structured AI summary of any webpage using Gemini 2.5 Flash.

Includes short summary, TL;DR, key bullets, quotes, topics, and estimated reading time.

Perfect for research, news aggregation, content digestion, or knowledge base building.

Request Body

{
  "url": "https://react.dev"
}

Example

curl -X POST https://xmmh-djbw-xefx.n7e.xano.io/api:x9tl6bvx/summarize_webpage \
  -H "x-api-key: sk_your_secure_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://react.dev"
  }'

Response

{
  "success": true,
  "data": {
    "url": "https://react.dev",
    "title": "React",
    "short": "React is a JavaScript library for building web and native user interfaces from reusable components, emphasizing interactivity, scalability, and a robust community.",
    "tldr": "React enables component-based UI development using JSX... supports full-stack frameworks and is maintained by a global developer community.",
    "bullets": [
      "React enables building user interfaces from reusable components",
      "Uses JSX to combine markup and logic in JavaScript",
      "Supports interactive UIs with efficient updates",
      "Integrates with full-stack frameworks like Next.js",
      "Works for both web and native apps",
      "Backed by a massive global developer community"
    ],
    "keyQuotes": [
      "React lets you build user interfaces out of individual pieces called components.",
      "This is why React is more than a library... React is a community."
    ],
    "topics": [
      "Component-Based UI",
      "JSX",
      "Interactivity",
      "Full-Stack Integration",
      "Web & Native",
      "Developer Community"
    ],
    "readingTimeMinutes": 3,
    "model": "gemini-2.5-flash",
    "summaryGeneratedAt": "2025-12-30T23:07:56.221Z"
  },
  "usage": {
    "month": "2025-12",
    "used": 29,
    "limit": 50,
    "remaining": 21
  }
}

Endpoint	Purpose
`/auth/signup`	Create a new account and issue a permanent API key
`/auth/login`	Authenticate an existing user and return a session auth token
`/crawl_webpage`	Crawl and extract structured data from a single webpage
`/site_crawl`	Crawl multiple pages across a website with depth and path controls
`/load_sitemap`	Load and process URLs from an XML sitemap with smart filtering
`/trust_scan`	Detect phishing, scam, and impersonation signals
`/ask_the_page`	Extract clean content and answer natural language questions grounded in the page content
`/generate_pdf_from_page`	Generate a fully rendered PDF (A4, with images & JS) of any webpage
`/capture_screenshot`	Capture a full-page or viewport screenshot (PNG or JPEG) of any webpage
`/generate_markdown_from_page`	Convert a fully rendered webpage into clean, structured Markdown
`/extract_metadata_from_page`	Extract SEO & Open Graph metadata (title, description, og:image, keywords, canonical)
`/summarize_webpage`	Generate a structured AI summary (short, TL;DR, bullets, quotes, topics)

Account & Key Management Endpoints

These endpoints allow developers to programmatically manage their access keys.

5. `GET /get_api_keys` – List Active Keys
Retrieves a paginated list of API keys for the authenticated user.

Input: None (uses Auth Token).
Returns: A list of keys with values masked (e.g., sk_123...890), creation date, and plan type.

6. `POST /generate_api_key` – Create New Key
Generates a new secure API key (24 random bytes, hex-encoded).

Input: { "name": "Production App" } (Optional label).
Returns: The full API key string (shown only once), id, and name.
Note: This action is logged in the event_log table for security auditing.

7. `DELETE /delete_api_key` – Revoke Key
Permanently deletes an API key.

Input: { "key_id": 15 }
Returns: Success message.
Security: Validates that the key belongs to the authenticated user before deletion.

The AI Prompt I Used

“Build a production-ready backend for an application called LucideCrawl.
LucideCrawl is a Web Crawling + Content Extraction API that allows developers to crawl websites, extract clean data, and optionally run AI analysis using Google Gemini.
The backend must expose a secure public API with proper documentation, authentication, rate limiting, and usage logs.
Focus on practicality and simplicity—avoid overly complex ML/RAG pipelines.”

The AI produced strong foundations that I then refined for production readiness.

How I Refined the AI-Generated Code

I used the AI-generated Xano backend as a strong starting point, then refined and extended it to meet the needs of a production-ready, public API for website scanning and phishing detection. My goal was to align the generated structure with real-world usage patterns such as API access control, usage tracking, detailed scan results, and long-term data integrity.

Below are the key transformations I made, with examples where applicable.

1. API Key Management and Access Control

Initial state (AI-generated):

Basic API key support tied to a user

Improvements made:

Introduced a dedicated api_key table that supports:
- Multiple API keys per user
- A unique constraint on the key field
- An optional name field so users can label keys (e.g., “Production”, “Testing”)
- A plan_type field to support tiered access (free / pro)

api_key
- id
- user_id
- key (unique)
- name (optional)
- plan_type
- created_at

This makes API access more flexible, secure, and easier to manage for end users.

2. Monthly Usage Aggregation

Initial state:

Request-level usage was logged, but not aggregated

Improvements made:

Added an api_monthly_usage table to track request counts per user per month
Enforced a unique constraint on (user_id, month) to guarantee one row per user per billing cycle

api_monthly_usage
- user_id
- month (YYYY-MM)
- call_count

This structure enables efficient rate limiting, analytics, and future billing logic without relying on expensive log scans.

3. Usage Log Enhancements

Initial state:

Core usage logging was already present

Improvements made:

Extended the existing usage_log table by adding a url field
Preserved all existing fields and historical data

This provides better visibility into how each endpoint is used and which URLs are being analyzed, improving traceability and auditing.

4. Detailed Scan Result Storage

Initial state:

Scan results were stored at a high level

Improvements made:

Expanded the scan_history table to store detailed analysis returned by the external scanning API
Added only missing columns to ensure idempotent and non-destructive schema updates

New fields include:

Safety score and label
Confidence level
Phishing category
Detected threats and risk factors (JSON)
User-facing explanations and recommendations
External verification results
Scan timestamp

This allows scan results to be both machine-readable and human-friendly.

5. Question & Answer History Tracking

New addition:

Created an ask_history table to persist user questions, AI responses, and related metadata such as:
- Model used
- Scraped text length
- Timestamp of the request

This provides a clear audit trail and supports analytics, debugging, and future model evaluation.

6. Crawl and Sitemap History Separation

Improvements made:

Added a crawl_history table to store website crawl configurations and outcomes
Added a sitemap_history table to track sitemap processing independently

By separating crawl and sitemap data, the backend remains clean, easier to query, and more adaptable as crawling features expand.

7. Schema Evolution and Safety

All schema changes were applied in a way that:

Adds new capabilities without breaking existing functionality
Avoids recreating tables or modifying existing columns
Preserves historical data

This approach ensures smooth iteration while maintaining system stability.

The AI-generated backend provided a solid foundation in Xano. By thoughtfully extending it with additional tables, constraints, and fields, I tailored the system to support real-world API usage, detailed scan analysis, and long-term scalability—while staying fully aligned with Xano best practices.

Key improvements:

Robust header handling: Case-insensitive x-api-key detection
Per-endpoint rate limiting: Separate usage tracking for each endpoint
Atomic usage counting: Prevents accidental overcharging on failed requests
Comprehensive history tables: For auditing and dashboard support
Plan-based dynamic limits: Free, Pro, Enterprise
Long operation timeouts: Up to 600s for deep crawls
Consistent response format: Always { success, data, usage }

These refinements ensure fairness, transparency, and a developer-friendly API.

My Overall Experience Using Xano

Xano made it possible to build a fully featured, secure, public-facing API in a relatively short amount of time.

One of the most helpful aspects was the visual canvas and function stack, which clearly shows how data flows through each API—from authentication, to rate limiting, processing, logging, and response handling. While I didn’t have enough time to explore the visual builder as deeply as I would have liked due to the deadline, it was still very useful for understanding and structuring complex logic.

I relied mostly on XanoScript for implementation. As someone still gaining experience with it, I encountered several syntax and structure errors along the way. However, the Logic Assistant was extremely helpful in resolving these issues. It not only identified errors quickly but often suggested cleaner, more efficient ways to write the logic, which significantly improved the quality of my code and helped me learn faster.

Overall, Xano struck a great balance between visual tooling and low-level control. Even when working primarily with XanoScript, the platform provided enough guidance and tooling to move quickly, fix mistakes, and ship with confidence.

LucideCrawl is now live, helping developers build safer, smarter web-powered applications.

Real-World Example

To showcase LucideCrawl in a real-world scenario, I built Trust Shield — a lightweight Chrome extension that uses the POST /trust_scan endpoint to protect users from phishing in real time.

Trust Shield turns LucideCrawl from a backend API into always-on, user-facing protection that runs quietly in the background while users browse.

What Trust Shield Does

On every page visit:

The current URL is automatically scanned using LucideCrawl
The extension badge updates instantly:
- 🛡️ Green — Safe
- ⚠️ Red — Potentially dangerous
Risky sites trigger a Chrome notification with:
- Safety label
- Risk score
- Clear next-step guidance
Clicking the extension icon opens a popup with:
- Safety score and confidence
- Detected threats and risk factors
- Impersonated brand (if applicable)
- Human-readable explanation of the risk

The user never has to think about scanning, protection happens by default.

Source Code

Open source:
trust-shield

Try It Yourself (≈ 2 Minutes)

1. Get an API key
Create a free LucideCrawl account via the POST /auth/signup endpoint using any REST client (Postman, cURL, etc.).
Copy the generated sk_... API key (shown once).

2. Install the Chrome extension

Clone or download: trust-shield
Open chrome://extensions/
Enable Developer mode
Click Load unpacked and select the project folder

3. Connect your API key

Click the Trust Shield icon
Paste your API key
Click Save

4. Test it

Visit a safe site → badge turns green 🛡️
Visit a phishing test site → badge turns red ⚠️ and a warning appears

No refreshes, no manual scans — protection is automatic.

Understanding Object Destructuring in JavaScript: A Beginner's Guide

Temitope — Fri, 31 Mar 2023 13:35:27 +0000

Introduction

Object destructuring is an important technique in JavaScript that enables developers to easily extract specific properties from an object and assign them to variables with a single line of code. This not only simplifies the code but also improves its readability and maintainability.

Introduced in ECMAScript 6 (ES6), object destructuring is one of several features aimed at enhancing the language's expressiveness and functionality. The use of curly braces ({}) is employed in ES6 to extract properties from objects and assign them to variables with the same name. Before ES6, developers had to manually extract properties from objects by writing multiple lines of code. The syntax for object destructuring is clear and concise and can be used for both simple and nested objects, as well as for default values and aliasing.

For beginners, comprehending the concept of object destructuring in JavaScript can be quite challenging and can also hinder their ability to understand code that uses this technique. In this tutorial, you will learn how to effectively destructure arrays and object literals in JavaScript.

We will begin by first learning how to destructure arrays, before moving on to object literals.

Destructuring Array Literals

By using the destructuring assignment syntax, we can efficiently extract the elements we want from an array and assign them to new variables in a readable and concise manner. This approach enables us to access relevant data swiftly and avoid the use of verbose and repetitive indexing code. In this section, we will examine different methods of destructuring array literals.

Assigning Values to Variables

The process of assigning values to variables is pretty straightforward. We start by declaring a variable on the left-hand side of the assignment operator (=), followed by an array on the right-hand side. Each variable on the left-hand side corresponds to an element of the array on the right-hand side. Consider the following example:

const countries = ['Canada', 'Lesotho', 'Nigeria', 'USA', 'China', 'England', 'India']

const [first, second, third] = countries;
console.log(first) // Canada
console.log(second) // Lesotho
console.log(third) // Nigeria

In the above code, the pattern [first, second, third] matches the first three elements of the countries array and assigns their values to the variables: first, second, and third, respectively. The square brackets on the left side of the equal sign define the variables that will receive the values. The remaining elements of the array ('USA', 'China', 'England', and 'India') are not assigned to any variables.

Skipping Elements

In the example above, we skipped 'USA', 'China', 'England', and 'India' by omitting the corresponding variable name. You can also skip elements by using commas to indicate their position in the array. For example:

const countries = ['Canada', 'Lesotho', 'Nigeria', 'USA', 'China', 'England','India']

const [northAmerica, , africa, , asia, europe] = countries;
console.log(northAmerica) // Canada
console.log(africa) // Nigeria
console.log(asia) // China
console.log(europe) // England

In this code, the first element of the countries array is assigned to the variable northAmerica, which means that northAmerica now contains the string "Canada". The third element of the countries array is assigned to the variable Africa, which means that Africa now contains the string "Nigeria". The second and fourth elements of the array are skipped due to the blank space in between the commas.

Setting Default Values

When an array has undefined or missing elements, it is helpful to assign default values while destructuring it. This way, the default values can provide fallbacks if the array does not have the expected values or they are undefined. For example, consider the following code:

const countries = ['Canada', 'Lesotho', , undefined, 'China', 'England', 'India']

const [first='Mexico', second = 'Ghana', third = 'Nigeria', fourth = 'Australia'] = countries;

console.log(first) // Canada
console.log(second) // Lesotho
console.log(third) // Nigeria
console.log(fourth) // Australia

In the code above, the default values are assigned to the variables when the corresponding value in the array is missing or undefined. The first variable first will be assigned the value of the first element in the countries array, which is 'Canada'. Similarly, the second variable will be assigned the value of the second element in the array, which is 'Lesotho'. Since the third element in the array is missing, the default value 'Nigeria' will be assigned to the third variable. Finally, the fourth variable will be assigned the default value which is 'Australia' because the fourth element in the array is undefined.

Destructuring with `rest` operator

The rest operator is denoted by three dots (...) and can only be used as the last element in an array destructuring statement. When used, it collects all the remaining elements of the array that were not assigned to individual variables and assigns them to the variable that follows the rest operator. The rest operator essentially allows developers to create a new array from the remaining elements of an existing array.

Consider the following example:

const countries = ['Canada', 'Lesotho', 'Nigeria', 'USA', 'China', 'England','India']

const [northAmerica, africa, ...remainings] = countries;
console.log(northAmerica) // Canada
console.log(africa) // Lesotho
console.log(remainings) // ['Nigeria', 'USA', 'China', 'England', 'India']

In this example, the first two elements of the countries array are assigned to the northAmerica and Africa variables, respectively. The rest operator is then used to collect the remaining elements of the array ['Nigeria', 'USA', 'China', 'England', 'India'] and assign them to the remainings variable.

Destructuring Object Literals

Destructuring array literals differs slightly from dealing with object literals. In an array, objects are indexed with a numerical value starting from 0, while object literals are indexed using keys. When destructuring an object in an array, the syntax involves using square brackets to access the index of the object you want to extract. When destructuring object literals, the syntax involves using curly braces to access the key of the property you want to extract.

Assigning Values to Variables

By assigning values to variables in object destructuring, you can extract specific properties from an object and assign them to variables with the same names. Consider the following example:

const countriesByContinent = { northAmerica: "Canada", europe:"England", africa:"Nigeria", asia:"China", southAmerica:"Brazil"
}
const {northAmerica, asia} = countriesByContinent;

console.log(northAmerica); // Canada
console.log(asia); // China

In this example, we extracted the values of the northAmerica and asia properties from the countriesByContinent object and assign them to new variables with the same names. This means that the values of the northAmerica and asia properties are now stored in the northAmerica and asia variables, respectively.

Before object destructuring was introduced in JavaScript, you would need to access object properties using the dot notation or square bracket notation to extract their values. For example, to access the values of the northAmerica and asia properties in the countriesByContinent object without destructuring, you would do it like this:

const countriesByContinent = { northAmerica: "Canada", europe:"England", africa:"Nigeria", asia:"China", southAmerica:"Brazil" };

const northAmerica = countriesByContinent.northAmerica;
const asia = countriesByContinent.asia;

console.log(northAmerica); // "Canada"
console.log(asia); // "China"

Renaming Variable

Sometimes, it may be necessary to rename a variable in object destructuring to avoid conflicts in cases where the variable already exists in your code. If you already have a variable with the same name as a property you are trying to extract, it can cause conflicts and lead to unexpected results. To avoid this, you will need to rename the extracted property and assign it to a new variable with a different name.

Consider the code below:

const countriesByContinent = { australia:"New Zealand", northAmerica: "Canada", europe:"England", africa:"Nigeria", asia:"China", southAmerica:"Brazil"
}
const {australia:oceania, africa:motherland} = countriesByContinent;

console.log(oceania); // New Zealand
console.log(motherland); // Nigeria

In this code, we extract the values of the australia and africa properties from the countriesByContinent object and assign them to new variables oceania and motherland, respectively.

Setting Default Values

Similar to array destructuring, we can also define default values for properties in object destructuring. This is useful when some properties are missing from the object, or if their values are undefined, as the default values can act as fallbacks.

Let's consider the following code below:

const countriesByContinent = {europe:"England", northAmerica: "Canada", australia:"New Zealand" }

const {europe, northAmerica="USA", africa="Ghana", asia="India" } = countriesByContinent;

console.log(europe); // England
console.log(northAmerica); // Canada
console.log(africa); // Ghana
console.log(asia); // India

In the example above, europe will be assigned the value "England" because the europe property is present in the countriesByContinent object. northAmerica will be assigned the value "Canada" because that is the value of the northAmerica property in the object.

However, the africa and asia properties are not present in the countriesByContinent object. Therefore, their default values of "Ghana" and "India", respectively, will be used instead.

Using the `rest` Syntax

The rest syntax used in object destructuring functions similarly to its use in array destructuring. This syntax is used to gather the remaining properties of an object and store them in a new object variable. It involves using the three dots (`) followed by the name of a variable within the curly braces{}`.

Let's consider the example below:

`
const countriesByContinent = {europe:"England", northAmerica: "Canada", africa:"Nigeria", asia:"China", southAmerica:"Brazil"
}

const {europe, northAmerica, ...remainings} = countriesByContinent;

console.log(rest) // {africa:"Nigeria", asia:"China", southAmerica:"Brazil"}
console.log(europe); // England
console.log(northAmerica); // Canada

The ...rest syntax is used to collect all the remaining properties of the countriesByContinent object that has not been assigned to europe or northAmerica. In this case, remainings will be a new object that contains the africa, asia, and southAmerica properties and their corresponding values.

Summary

Destructuring is an interesting concept in JavaScript that allows values to be extracted from arrays or objects. Although it can be very simple at first, destructuring has the potential to become very complex quite rapidly. That is why it is very important to maintain simplicity and readability when implementing destructuring in your code. Doing so will benefit both the developer and anyone who may review the code in the future, as well as make it easier to understand and maintain.

Learn Full-Stack Web Development with React and GraphQL by Building a Sticky Note App - Part three

Temitope — Mon, 09 Jan 2023 16:47:18 +0000

Introduction

Hello again!👋 In the previous part of the series, we covered how to build the backend of the Sticky Note app using GraphQL, Apollo Server 4, Nexus and MongoDB. In this section, we will be integrating our backend API with the frontend and enabling communication between the two. This will allow the frontend to send requests to and receive data from our GraphQL API.

Prerequisites

We will be using the frontend code that we built in the first part of this series to connect to the GraphQL API that we created in the second part. It is important that you check out both of these sections before proceeding, as the knowledge gained in those parts will be essential for completing this section.

Setting the Project

To get started with this section, we will first need to clone the GitHub repository that contains the code from the first part of this tutorial. To do this, open your terminal and run the following command:

 git clone https://github.com/tope-olajide/sticky-note-react.git

This will create a local copy of the repository on your machine. Once the cloning process is complete, you can navigate to the repository directory by running:

bash cd sticky-note-react

To install all of the necessary dependencies for this project, run the following command in your terminal:

yarn install

What is Apollo Client?

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It is designed to help you easily connect to a GraphQL server and retrieve data from it, as well as update and manipulate that data using GraphQL mutations. Apollo Client features automatic caching, reliable change detection, and a simple, declarative API that makes it easy to work with GraphQL in your JavaScript applications.

Installing the Apollo Client and GraphQL

Run the following command to install Apollo Client and GraphQL

yarn add @apollo/client graphql

Setting up the `InMemoryCache`

Apollo GraphQL's InMemoryCache is a powerful and flexible caching library that is designed to work with GraphQL servers. It is an in-memory data store that stores the results of GraphQL queries, mutations, and subscriptions in a cache.

Create a new file called cache.ts in the root directory, then open it and enter the following code:

import { InMemoryCache } from '@apollo/client';

export const cache: InMemoryCache = new InMemoryCache({ })

This will create an instance of InMemoryCache. We will use this cache instance to store the data that will be fetched from our GraphQL server. In addition, we will use the InMemoryCache instead of React useState hook to store local data that we want to manage within our application.

Initializing the Apollo Client

To initialize the Apollo Client in our project, let's create a new file called client.ts in the root directory of our project and add the following code to it:


import { ApolloClient, createHttpLink } from '@apollo/client';
import { cache } from './cache';

const link = createHttpLink({
    uri: 'http://localhost:4000/graphql',
    credentials: 'include'
});
const client = new ApolloClient({
    cache,
    link,
});

export default client

The createHttpLink object will handle the communication with our GraphQL server. We passed in two properties, the uri and credentials. The credential options provide the credential policy that will be applied to each API call, and the uri options contain the URL of our GraphQL server.

We set the value of the credentials option to include. If the front-end and back-end have different domain names, you should set the credentials option to include. If they have the same domain name, you should use same-origin instead.

in the following snippets:

const client = new ApolloClient({
    cache,
    link,
});

We created an instance of the ApolloClient object by passing in the cache and link objects as arguments.

Making the `ApolloClient` instance available to all the React components in our App.

To make the client object we created in the client.ts file available for use in all our components, we will wrap ApolloProvider to the root component of our app. ApolloProvider is a higher-order component (HOC) from the react-apollo library that helps to provide our React components with the data they need from a GraphQL server.

We will use the ApolloProvider to provide the client object to all of the components in the app.

Overwrite everything in pages/_app.tsx file with the following code:

import '../styles/globals.css'
import { AppProps } from 'next/app'
import { ApolloProvider } from '@apollo/client'
import client from '../client'
import { useEffect, useState } from 'react';
function MyApp({ Component, pageProps }: AppProps) {
  const [isClient, setIsClient] = useState(false)
  useEffect(() => {
    if (typeof window !== "undefined") {
      setIsClient(true)
    }
  }, [])
  if (isClient) {
    return (
      <ApolloProvider client={client}>
        <Component {...pageProps} />
      </ApolloProvider>
    )
  }
return(
  <>
  <h1>Loading...</h1>
  </>
)
}
export default MyApp

We are using Next.js to build the front end of our app, which means that the content of our web app will be generated on the server side and sent to the client as a fully rendered HTML page. Later in this tutorial, we will need to access the browser's local storage to store the login status of our users. While the contents of the web app are being generated on the server, the localStorage will not be available for use, thereby causing errors in our app. To fix that, we will only render all our components only when they are available on the client side.

So we created a new state called isClient and initialized it with false boolean value. In the useEffect hook, we checked if the window object was not undefined. The window object is only present on the client-side, once it is not undefined, we will change the isClient boolean value to true.

In the snippets below:

 if (isClient) {
    return (
      <ApolloProvider client={client}>
        <Component {...pageProps} />
      </ApolloProvider>
    )
  }
return(
  <>
  <h1>Loading...</h1>
  </>
)

If the isClient boolean value is true, we will render the pages wrapped in the ApolloProvider component, which provides the client object to the rest of the app via React's context API, otherwise, we'll render a loading text.

Updating the global styles

I made some changes to the CSS file used in this project. Open the styles/global.css file and overwrite everything in there with the following codes:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #F8FAFE;
  overflow: auto;

}

.main-container {
 min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card, .delete-note-modal{
  width: 300px;
  height: 350px;
  background-color: #f9e675;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4); 
  border: 1px solid rgb(0, 0, 0,.5);
  margin: 1rem;
}
.delete-note-modal {
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  }
  .delete-note-modal h3 {
    margin: 0 0 1rem 0;
  }

  .delete-note-modal button {
    width: 90%;
    background-color: rgb(31, 15, 15);
  }
.card-maximized {
  width: 100%;
  height: 100%;
  background-color: #f9e675;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
  border: 1px solid rgb(0, 0, 0,.5);
  position: fixed;
  z-index: 10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  top: 0;
}
.card-header {
 height: 10%;
}
.card-body {
  background-color: rgba(253, 253, 253, 0.4);
  height: 80%;
}

.text-area {
width: 100%;
height: 100%;
background-color: transparent;
border: none;
outline: none;
color: black;
z-index: 5;
resize: none;
}

.text-container{
width: 90%;
height: 100%;
margin: 0 auto;
}

.card-footer {
  width: 100%;
  height: 10%;
  border-top: 1px solid rgba(0, 0, 0, 0.4);
}

.icon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.right-icon, .left-icon {
    display: flex;
}

.icon {
  margin: 3px;
  color: black;
  padding: 5px 7px;
  cursor: pointer;
  opacity: .8;
  font-size: 1.2rem;
}

.icon:hover {
  background-color: rgba(10, 10, 9, 0.2);
  opacity: 1;
}

.theme-color-container {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: black;
}

.theme-color:hover {
  opacity: .9;
  cursor: pointer;
}

.yellow, .green, .pink, .purple, .blue, .gray, .charcoal {
  width: 14.3%;

}

.yellow, #yellow {
background-color: #f9e675;
}

.green, #green {
  background-color: #b2ed9e ;
}
.pink, #pink {
  background-color: #f2b3e4;
}
.purple, #purple {
  background-color: #ceb1ff;
}
.blue, #blue {
  background-color: #addcfe;
}
.gray, #gray {
  background-color: #dcdee2;
}
.charcoal, #charcoal {
  background-color: #77797e;
}
.notes-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
}

.no-notes-container, .error-page-container{
  display: flex;
  flex-direction: column;
  width: 350px;
  margin: 3rem auto;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 3rem 1rem;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
  background-color: #f9e675;
  color: black;
  border-radius: 5px;
  text-align: center;
}
.no-notes-container button, .error-page-container button {
 background-color: #000000;
 border-radius: 5px;
}
.auth-container{
width: 350px;
margin: 2rem auto;
padding: 2rem;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
background-color: white;
}

.auth-form{
flex-wrap: wrap;
display: flex;
width:320px;
margin: 0 auto;
justify-content: center;
}

input {
border: 1px solid black;
margin: .5rem;
padding: 1rem;
font-size: 1rem;
width:320px;
outline: none;
}

.auth-navbar{
  background-color: rgb(34, 32, 32);
  padding: 1rem;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-navbar h1{
  margin: 0;
  font-size: 1.3rem;
  padding-left: 1rem;
  color: white;
}
.auth-navbar h5{
  margin: 0;

}
.auth-navbar .menu {
  display: flex;
}

.auth-navbar .menu a{
  margin: 0;
  color: white;
  padding: 0 1rem;
  text-transform: uppercase;
  text-decoration: none;
}

.auth-navbar .menu a:hover {
  opacity: .8;
  cursor: pointer;
}

.welcome-text h2{
  text-align: center;
  text-transform: uppercase;
  margin: 2rem 0 0rem 0;
}

button {
  border: none;
  margin: .5rem;
  padding: 1rem;
  font-size: 1rem;
  width:320px;
  outline: none;
  background-color: blue;
  color: white;
  cursor: pointer;
}

button:hover {
  opacity: .7;
}
.logout-button{
  width: 80px;
  padding: .5rem;
  border-radius: 3px;
  margin: .1rem;
  font-size: .9rem;
}
.show-error{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.show-error p {
  color: red;
  margin: 0;
  font-weight: 600;
}
.hide-error{
  display: none;
}
.error-icon {
margin:0;
color: red;
padding: .4rem;
}

.snackbar-container {
  min-width: 250px;
  background-color: rgb(29, 29, 32);
  color: #fff;
  text-align: center;
  border-radius: 2px;
  position: fixed;
  z-index: 1;
  right: 0%;
  bottom: 30px;
  font-size: 17px;
  padding: 0;
  margin-right: 30px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
}
.hide{
  display: none;
}

 @media screen and (max-width: 468px) {
  .auth-container{
    width: 90%;
    padding: 2.5rem 0;
    }
    .auth-form {
      width:90%;
      }
      .auth-navbar h1{
        font-size: 1rem;
        padding-left: 0.5rem;
      }
      .auth-navbar .menu h5{
        font-size: .7rem;
      }
      .no-notes-container, .error-page-container{
        width: 80%;
      }
      .no-notes-container button, .error-page-container button {
        width: 80%;
       }
}

@media screen and (max-width: 280px) {
  .auth-container {
    width: 100%;
    }
} 

footer {
width: 100%;
left: 0;
bottom: 0;
background-color: black;
text-align: center;
color: white;
margin-top: 5rem;
}

footer p {
  padding: 2rem 0;
}
.loading-container{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader{
  border: 5px solid #ffd900;
  border-top: 5px solid #000000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  margin: 0px;
  padding: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Creating the `AuthNavigationBar` Component

The AuthNavigationBar component is the navigation bar that will be displayed on the sign up and login page. In the components directory, create a new file called AuthNavigationBar.tsx and type the following code into it:

import Link from 'next/link'

const AuthNavigationbar = () => {
    return (
        <>
        <div className="auth-navbar">
        <h1>Sticky Note</h1>
        <div className="menu">
        <h5><Link href="/sign-up"> Sign Up </Link></h5>
        <h5><Link href="/sign-in"> Log In </Link></h5>
        </div>
        </div>
        </>
    )
}
export default AuthNavigationbar

We added two links to the navigation bar: Sign Up and Log In. We will create their corresponding pages very soon.

Creating the `MainNavigationBar` Component

The MainNavigationBar component is the navigation bar that will be rendered on the main page after the user has been authenticated.

To create the MainNavigationBar component, locate components directory, then create a new file called MainNavigationBar.tsx and add the following code:

const MainNavigationBar = () => {
    return (
        <>
            <div className="auth-navbar">
                <h1>Sticky Note</h1>
                <div className="menu">
                    <button className="logout-button">Logout</button>
                </div>
            </div>
        </>
    )
}
export default MainNavigationBar

The MainNavigationBar component has a logout button that does nothing for now. We will implement the logout feature toward the end of this tutorial.

Creating the `ErrorPage` Component

When a user encounters an error on the website, the ErrorPage component will be used to display an error message to the user.

In the components directory, create a new file called ErrorPage.tsx and type in the following code to it:

const ErrorPage = () => {
    return (
        <>
        <section className="error-page-container">
        <h3>An Error occured.</h3>
        <button onClick={()=>window.location.reload()}> Reload Page </button>
        </section>
        </>
    )
}

export default ErrorPage

Creating the `Loading` Component

Create a new file called Loading.tsx in the components directory, and add the following code to it:

const Loading = () => {
    return (
        <>
            <section className="loading-container">
                <div className="loader"></div>
            </section>
        </>
    )
}

export default Loading;

The loading component will be displayed whenever the application is in the process of fetching all of the user's sticky notes.

Creating the `user` and `note` Mutations

In GraphQL, a mutation is a type of operation that allows you to create, update, or delete data on the server. Mutations are used to modify data in a database or other persistent storage. In this part, we will create the mutations for user and note.

Before implementing those mutations, let's install react-toastify by running the following command:

yarn add react-toastify

The react-toastify library will be used to display notifications to the user. Once the installation is complete, open the pages/_app.tsx file and import the react-toastify css file:

import "react-toastify/dist/ReactToastify.css";

Creating the `user` Mutation

At the root directory, create a new folder called mutations. Open it up and create a new file called users.ts. In the user.ts file, add the following mutations to it:

import { gql } from '@apollo/client';

export const SIGNUP_MUTATION = gql`
  mutation SignUp(
    $fullname: String!
    $email: String!
    $password: String!
    $username: String!
  ) {
    signupUser(
      data: {
        fullname: $fullname
        email: $email
        password: $password
        username: $username
      }
    ) {
      user{
        username
      }
    }
  }
`;

export const LOGIN_MUTATION = gql`
  mutation signin($usernameOrEmail: String!, $password: String!) {
    signinUser(data: { usernameOrEmail: $usernameOrEmail, password: $password }) {
      signupUser{
        username
      }
    }
  }
`;

export const LOGOUT_MUTATION = gql`
mutation signoutUser {
  signoutUser
}
`

We created three GraphQL mutations: SIGNUP_MUTATION, LOGIN_MUTATION, and LOGOUT_MUTATION.

These mutations can be used to create a new user account, log in an existing user, and log out the current user, respectively.

The SIGNUP_MUTATION mutation will be used to create a new user account with the given fullname, email, password, and username data. It takes these four variables as input and passes them to the signupUser mutation on the server, which creates a new user account with the provided data. The mutation returns the username of the newly created user.

The LOGIN_MUTATION mutation will be used to log in an existing user with the given usernameOrEmail and password. It passes these variables to the signinUser mutation on the server, which authenticates the user and returns the username of the logged in user. We can actually return more data if there's any need for them. The username was only returned here because it will be used to welcome the user after registration or sign-in.

The LOGOUT_MUTATION mutation is used to log out the current user. It calls the signoutUser mutation on the server, which logs out the user and removes the user's session.

Creating the `note` Mutation

Let's create another mutation for the notes. Inside the mutation directory, create another file named note.ts. Open it up and add the following mutations to it:

import { gql } from '@apollo/client';

export const SAVE_NOTE = gql`
mutation newNote ($data: NoteData!) {
    newNote (data: $data) {
        color
        content
        id
    }
}
`
export const MODIFY_NOTE = gql `
mutation modifyNote ($data: NoteData!, $noteId: String!) {
    modifyNote (data: $data, noteId: $noteId) {
        color
        content
        id
    }
}
`
export const DELETE_NOTE = gql `
mutation deleteNote ($noteId: String!) {
    deleteNote (noteId: $noteId) {
        color
        content
        id
    }
}
`

We created three new mutations namely: SAVE_NOTE, MODIFY_NOTE, and DELETE_NOTE.

These mutations can be used to create a new sticky note, modify an existing sticky note, and delete an existing sticky note, respectively.

The SAVE_NOTE mutation will be used to create a new sticky note with the given data. It takes a single variable, $data, as input and passes it to the newNote mutation on the server, which creates a new sticky note with the provided data. The mutation returns the color, content, and id of the newly created sticky note.

The MODIFY_NOTE mutation will be used to modify an existing sticky note with the given data and noteId. It takes these two variables as input and passes them to the modifyNote mutation on the server, which modifies the sticky note with the provided data. The mutation returns the color, content, and id of the modified sticky note.

The DELETE_NOTE mutation will used to delete an existing sticky note with the given noteId. It passes the noteId variable to the deleteNote mutation on the server, which deletes the sticky note with the provided noteId. The mutation returns the color, content, and id of the deleted sticky note.

Creating the `note` Queries

Next, we will create a query that will be used to fetch all the notes. Create another folder at the root directory of your project called queries. After that, you will create a new file inside the folder named note.ts. Open the file and add the following codes:


import { gql } from '@apollo/client';

export const FETCH_ALL_NOTES = gql`
query allNotes {
    allNotes {
        color
        content
        id
        isSaved @client
        isMaximized @client
        isSaving @client
        isError @client
        isDeleteNoteConfirmationVisible @client
    }
}
`

We created a new GraphQL query called FETCH_ALL_NOTES that will be used to fetch all of the sticky notes in the application.

The FETCH_ALL_NOTES query returns a list of all the sticky notes in the application, including their color, content, and id. It also includes several fields that are marked with the @client directive, indicating that these fields are stored on the client and not returned by the server. The isSaved, isMaximized, isSaving, isError, and isDeleteNoteConfirmationVisible fields are all client-side only fields that are used to store the state of the sticky notes in the client. We will be defining all these local-only fields in a moment,

When the FETCH_ALL_NOTES query is executed, it will request a list of all the sticky notes from the server and return the color, content, and id of each sticky note in the list. It will also include the client-side fields for each sticky note in the returned data.

Defining the local-only fields

In Apollo Client, a local-only field is a field that is defined in the client-side schema, but not in the server-side schema. This means that the field is not fetched from the server, but rather is used to store local data that is specific to the client. We'll be using these local-only fields to store and manage our local data instead of React state.

To define the local-only fields, open the cache.ts file and update it with the following codes:

import { InMemoryCache } from '@apollo/client';

export const cache: InMemoryCache = new InMemoryCache({
    typePolicies: {
       Note: {
         fields: {
           isMaximized:{
             read(isMaximized = false) {
               return isMaximized ;
             },
           },
           isDeleteNoteConfirmationVisible:{
            read(isDeleteNoteConfirmationVisible = false) {
              return isDeleteNoteConfirmationVisible ;
            },
          },
           isSaving:{
             read(isSaving = false) {
               return isSaving ;
             }
           },
            isError:{
             read(isError = false) {
               return isError ;
             }
           },
           isSaved:{
            read(isSaved = true) {
              return isSaved ;
            }
          } 
         }
       }
     }
})

We used the typePolicies property of the InMemoryCache object to define local-only fields. The typePolicies property is an object that maps GraphQL type names to policy objects, which define the behavior for that type.

In this case, the typePolicies object includes a Note field that defines custom caching behavior for Note data in the cache.

The Note type policy includes fields for isMaximized, isDeleteNoteConfirmationVisible, isSaving, isError, and isSaved. Each of these fields has a read function that specifies the default value for the field when it is not present in the cache. For example, the isMaximized field has a default value of false, and the isSaved field has a default value of true.

The read functions for these fields are called whenever a field is accessed in the cache. If the field is present in the cache, the value stored in the cache will be returned. If the field is not present in the cache, the default value specified in the read function will be returned instead.

Creating the `SignUp` Component

In the part, we will create a new component that will be used to register a new user. Navigate to the components directory and create a new file called SignUp.tsx. Open it up, then add the following code:

import { useState, ChangeEvent, FormEvent, useEffect } from 'react'
import Footer from './Footer'
import AuthNavigationbar from './AuthNavigationBar';
import { useMutation } from '@apollo/client';
import { ToastContainer, toast } from "react-toastify";
import { SIGNUP_MUTATION } from '../mutations/user';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { useRouter } from 'next/router'
const SignUp = () => {
const [signup, { loading, data, error }] = useMutation(SIGNUP_MUTATION);
const router = useRouter();
  const [userInputs, setUserInputs] = useState({})
  useEffect(() => {
     if (data) {
       setTimeout(() => router.push('/'), 3000);
       localStorage.setItem("isLoggedIn", 'true');
       const {username} = data.signupUser.user
      toast.success(`Welcome, ${username}!`, {
        position: "bottom-center"
      });
    }
    if (error) {
      toast.error('' + error, {
        position: "bottom-center",
        autoClose: false
      });
    }
 },[data, error, router]);
  const saveUserInputs = (event: ChangeEvent<HTMLInputElement>) => {
    setUserInputs({ ...userInputs, [event.target.name]: event.target.value });
  }

  const handleFormSubmit = async (event: FormEvent) => {
    event.preventDefault()
    await signup({
      variables: userInputs
    });
  };

  return (
    <>
      <section className='main-container'>
        <AuthNavigationbar />
        <ToastContainer />
        <div className="auth-container">
          <form className="auth-form">
            <h3>Create Acount</h3>
            <input type='text' name="fullname" placeholder="fullname" onChange={(event) => saveUserInputs(event)} minLength={4} />
            <input type='text' name="username" placeholder="username" onChange={(event) => saveUserInputs(event)} minLength={3} />
            <input type='email' name="email" placeholder="email" onChange={(event) => saveUserInputs(event)} required />
            <input type='password' name="password" placeholder="password" onChange={(event) => saveUserInputs(event)} minLength={5} />
            <button disabled={loading} onClick={(event) => handleFormSubmit(event)}>{loading?<FontAwesomeIcon icon={faSpinner} spin size="1x"/>:"Create Account"}</button>
          </form>
        </div>
        <Footer />
      </section>
    </>

  )
}
export default SignUp

We created a new component called SignUp that contains a form that will be used to collect the following user's data: fullname, username, email, and password. We also render the AuthNavigationbar, ToastContainer and Footer components inside it. The ToastContainer will be used to display some notifications to the user.

Once a user clicks on the Create Account button, the handleFormSubmit() function will be invoked. The handleFormSubmit() function will execute the signup mutation function which takes in the userInputs object as arguments.

In the following snippet:

const [signup, { loading, data, error }] = useMutation(SIGNUP_MUTATION);

We used the useMutation hook to execute the SIGNUP_MUTATION. The useMutation hook returns an object with several properties such as loading, data, error, etc and a function that can be used to execute the mutation, we named this function signup.

In the code below, we disabled the button and then displayed the spinner icon instead of the Create Account text on it when the loading value is truthy.

<button disabled={loading} onClick={(event) => handleFormSubmit(event)}>{loading?<FontAwesomeIcon icon={faSpinner} spin size="1x"/>:"Create Account"}</button>

In the code below, we used the react-toastify library to display an error notification message if an error is encountered while running the signup mutation:

if (error) { toast.error('' + error, { position: "bottom-center", autoClose: false }); }

In the following snippets:

if (data) { setTimeout(() => router.push('/'), 3000); localStorage.setItem("isLoggedIn", 'true'); 
const {username} = data.signupUser.user;
toast.success(`Welcome, ${username}!`, { position: "bottom-center" }); 
}

If the data returns a truthy value, that means the mutation was successfully executed. We used the react-toastify library to welcome the user using the username returned from the execution of the SIGNUP_MUTATION query and redirect the user to the homepage after three seconds.

We saved the user's login status (isLoggedIn) to the localStorage. We will update the _app.tsx file to redirect the user straight to the homepage the next time they visit the website if the isLoggedIn status of the user is true. We will also create a logout() function that will change the isLoggedIn status to false once the user signs out. If the user's token has expired and the isLoggedIn value is true, we will redirect the user back to the login page and change the isLoggedIn value to false.

Creating the `SignUp` Page

To create the SignUp page in our Next.js app, we need to create a new file in the pages directory of our project called sign-up.tsx. Open the sign-up.tsx file, then import and render the SignUp component in it like so:

import SignUp from "../components/SignUp"
const SignUpPage = () => {
  return (
    <>
      <SignUp />
    </>

  )
}
export default SignUpPage

When the sign-up.tsx page is rendered by Next.js, the SignUpPage component will be rendered to the page, which will in turn render the SignUp component.

Now you can navigate to http://localhost:3000/sign-up on your browser to view the signup page.

Creating the `SignIn` Component

Inside the components directory, create a new file named SignIn.tsx and add the following code to it:

import { useMutation } from '@apollo/client'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import router from 'next/router'
import { useState, ChangeEvent, FormEvent, useEffect } from 'react'
import { toast, ToastContainer } from 'react-toastify'
import { LOGIN_MUTATION } from '../mutations/user'
import AuthNavigationBar from './AuthNavigationBar'
import Footer from './Footer'

const SignIn = () => {
  const [userInputs, setUserInputs] = useState({})
  const [login, { loading, data, error }] = useMutation(LOGIN_MUTATION);
  useEffect(() => {
    if (error) {
      toast.error('' + error, {
        position: "bottom-center",
        autoClose: false
      });
    }
    if (data) {
      console.log(data)
      const {username} = data.signinUser.user
      localStorage.setItem("isLoggedIn", 'true');
      setTimeout(() => router.push('/'), 3000);
      toast.success(`Welcome back, ${username}`, {
        position: "bottom-center"
      });
    }
  }, [data, error]);
  const saveUserInputs = (event: ChangeEvent<HTMLInputElement>) => {
    setUserInputs({ ...userInputs, [event.target.name]: event.target.value })
  }

  const handleFormSubmit = async (event: FormEvent) => {
    event.preventDefault()
    await login({
      variables: userInputs
    });
  };

  return (
    <>
      <section className='main-container'>
        <AuthNavigationBar />
        <ToastContainer />
        <div className="auth-container">
          <form className="auth-form">
            <h3>Sign In</h3>
            <input type='text' name="usernameOrEmail" placeholder="Username or Email" onChange={(event) => saveUserInputs(event)} required />
            <input type='password' name="password" placeholder="Password" onChange={(e) => saveUserInputs(e)} required />
            <button disabled={loading} onClick={(event) => handleFormSubmit(event)}> {loading ? <FontAwesomeIcon icon={faSpinner} spin size="1x" /> : "Login"}</button>
          </form>
        </div>
        <Footer />
      </section>
    </>
  )
}
export default SignIn

First, we created a new mutate function called login that will be used to execute our LOGIN_MUTATION anytime it is invoked. Then we rendered an input form that will be used to collect the user's usernameOrEmail and password data. After that, we created a function named handleFormSubmit. The handleFormSubmit will call the login function any time it is invoked. We will call the handleFormSubmit function any time the Login button is clicked. The useMutation hooks returns the following properties: loading, error, and data that will be used to track the mutate function (login) state. Just like we did in the SignUp component, if the loading status value is truthy we'll display the font awesome spinner icon on the button instead of the "Login" text.

If the error value is truthy, we'll display the error notification using the react-toastify library, and if the data value if truthy, a success notification will be displayed, welcoming the user again with the username returned from the mutation function. Then the user will be redirected to the homepage after three seconds.

Creating the `sign-in` Page

Let's create a new file named sign-in.ts in the page directory, just like we did with the sign-up page. We will import and render the SignIn component in it like this:

import SignIn from "../components/SignIn"

const SignInPage = () => {

  return (
    <>
      <SignIn />
    </>
  )
}
export default SignInPage

When the sign-in.tsx page is rendered by Next.js, the SignInPage component will be rendered to the page, which will in turn render the SignIn component.

Now you can navigate to http://localhost:3000/sign-in on your browser to view the sign in page.

Updating Home Page

Let's update the homepage to render the NoteContainer if the isLoggedIn value in the localStorage is true. But if the isLoggedIn value is false, then the user will be redirected to the login page. Navigate to pages/index.ts file and open it, and update it with the following:

import NoteContainer from "../components/NoteContainer";
import SignIn from "../components/SignIn";

function HomePage() {
  const isLoggedIn = localStorage.getItem("isLoggedIn");
    if(isLoggedIn === 'true'){
      return <NoteContainer />
    }
  return <SignIn />
}

export default HomePage

Updating the `INoteCardProps` Interface

Update the INoteCardProps interface in the typings/index.ts file to include the following properties:

saveUserNote(id: string, color: Theme, contents: string, isSaved: boolean): Promise;
deleteNote(noteId: string, isSaved:boolean): void;
color:Theme;
createNote(noteId: string): void;

Everything should be looking like this now:

export interface INoteCardProps {
    createNote(noteId?: string): void;
    id:string;
    color:Theme;
    isMaximized:boolean;
    contents: string;
    isSaved: boolean;
    isSaving: boolean;
    isError: boolean;
    changeColor(id:string, color:Theme): void;
    toggleFullscreen(noteId:string):void;
    isDeleteNoteConfirmationVisible:boolean,
    toggleDeleteNoteConfirmationMessage(id:string):void;
    deleteNote(noteId: string, isSaved:boolean): void;
    saveUserNote(id: string, color: Theme, contents: string, isSaved: boolean): Promise<void>;
}

Defining the `IAllNoteData` interfaces

Let's create a new file called:IAllNoteData. We will use this type to define our query result.

Let's open up the typings/index.ts file and create a interface called IAllNoteData:

  export interface IAllNoteData {
    allNotes:INote[] 
  }

The IAllNoteData represents data for a collection of notes. It has a single property, allNotes, which is an array of objects that implement the INote interface.

Updating the `NoteCard` component

As discussed in the first part of this article, the NoteCard component is a child component to NoteContainer component. It will be used as a template to render all the sticky note that belongs to a user.

Before we proceed, let's first update the NoteCard.tsx file with the following code, which includes some changes to the original code:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus, faWindowMaximize, faTrash, faSave, faExclamationTriangle, faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons'
import { ChangeEvent, useState } from 'react';
import { INoteCardProps, Theme } from '../typings';

const NoteCard: React.FC<INoteCardProps> = (props) => {
const [noteContents, setNoteContents] = useState('');

const changeNoteColor = (id:string, color:Theme) => {
    props.changeColor(id, color);
    props.saveUserNote(id, color, noteContents||props.contents, props.isSaved)
}

    let timer:NodeJS.Timeout;
    const handleContentChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
        clearTimeout(timer)
        const newTimer: NodeJS.Timeout = setTimeout(() => {
            setNoteContents(event.target.value)
            props.saveUserNote(props.id, props.color, event.target.value, props.isSaved)
        }, 2000)
        timer = newTimer;
    }

    if (props.isDeleteNoteConfirmationVisible) {
        return (
            <section className="delete-note-modal" id={props.color}>
                <h3>This note will be permanently deleted, continue?</h3>
                <div>
                    <button onClick={() => props.deleteNote(props.id, props.isSaved)}> Yes </button>
                    <button onClick={() => props.toggleDeleteNoteConfirmationMessage(props.id)}> No</button>
                </div>
            </section>
        )
    }
    return (
        <>
            <div className={props.isMaximized ? "card-maximized" : "card"} id={props.color}>
                <div className="card-header">
                    <div className="icon-container">
                        <div className="left-icon">
                            <div className="icon" onClick={() => props.createNote(props.id)}>{props.isMaximized ?null:<FontAwesomeIcon icon={faPlus} />}</div>
                            <div className="icon" >{props.isSaving ? <FontAwesomeIcon icon={faSpinner} spin />:props.isError ? <FontAwesomeIcon icon={faExclamationTriangle} />:props.isSaved ? <FontAwesomeIcon icon={faCheck} /> : null}</div>
                        </div>
                        <div className="right-icon">
                            <div className="icon" onClick={() => props.toggleDeleteNoteConfirmationMessage(props.id)} >{props.isMaximized ?null:<FontAwesomeIcon icon={faTrash} /> }</div>
                            <div className="icon" onClick={()=>props.saveUserNote(props.id, props.color, noteContents||props.contents, props.isSaved)}><FontAwesomeIcon icon={faSave} /></div>
                            <div className="icon" onClick={() => props.toggleFullscreen(props.id)}><FontAwesomeIcon icon={faWindowMaximize} /></div>
                        </div>
                    </div>
                </div>
                <div className="card-body">
                    <div className="text-container">
                        <textarea defaultValue={props.contents} onChange={(e) => handleContentChange(e)} className="text-area"></textarea>
                    </div>
                </div>
                <div className="card-footer">
                    <div className="theme-color-container">
                        <div className="theme-color yellow" onClick={() => changeNoteColor(props.id, Theme.Yellow)} > </div>
                        <div className="theme-color green" onClick={() =>changeNoteColor(props.id, Theme.Green)}></div>
                        <div className="theme-color pink" onClick={() => changeNoteColor(props.id, Theme.Pink)}></div>
                        <div className="theme-color purple" onClick={() => changeNoteColor(props.id, Theme.Purple)}></div>
                        <div className="theme-color blue" onClick={() => changeNoteColor(props.id, Theme.Blue)}></div>
                        <div className="theme-color gray" onClick={() => changeNoteColor(props.id, Theme.Gray)}></div>
                        <div className="theme-color charcoal" onClick={() => changeNoteColor(props.id, Theme.Charcoal)}></div>
                    </div>
                </div>
            </div>
        </>
    )
}
export default NoteCard

Breaking down the `NoteCard` Component

In the following snippets:

                <div className="card-body">
                    <div className="text-container">
                        <textarea defaultValue={props.contents}
                            onChange={(e) => handleContentChange(e)}
                            className="text-area"></textarea>
                    </div>
                </div>

We created the sticky note body, which is made up of the HTML <textarea> element. Anytime there's a change in the Textarea, the handleContentChange function will be invoked.

The setTimeout method in the handleContentChange() function is used in the following snippets to automatically save a sticky note if the user stops typing after two seconds by calling the saveUserNote function:

   let timer:NodeJS.Timeout;
    const handleContentChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
        clearTimeout(timer)
        const newTimer: NodeJS.Timeout = setTimeout(() => {
            setNoteContents(event.target.value)
            props.saveUserNote(props.id, props.color, event.target.value, props.isSaved)
        }, 2000)
        timer = newTimer;
    }

If the user did not wait for 2 seconds before typing the next letter, the previous counter is cleared and another timer will start counting the moment the user starts typing again.

The following snippets will call the changeColor function in the NoteContainer component with the id and color of the selected sticky note:

const changeNoteColor = (id:string, color:Theme) => {
    props.changeColor(id, color);
    props.saveUserNote(id, color, noteContents||props.contents, props.isSaved)
}

The changeNoteColor function will be invoked any time the user clicks on any theme color on the sticky note:

changeNoteColor(props.id, Theme.Yellow)} >

changeNoteColor(props.id, Theme.Green)}>

 changeNoteColor(props.id, Theme.Pink)}>

 changeNoteColor(props.id, Theme.Purple)}>

 changeNoteColor(props.id, Theme.Blue)}>

 changeNoteColor(props.id, Theme.Gray)}>

 changeNoteColor(props.id, Theme.Charcoal)}>

"The following code was used to toggle the class of the element between card-maximized and card based on the value of the isMaximized boolean: "

 <div className={props.isMaximized ? "card-maximized" : "card"} id={props.color}>

In the following snippets, we render the faPlus, faSpinner,faExclamationTriangle, faTrash, faSave, faWindowMaximize, faCheck icons on the sticky notes:

 <div className="icon-container">
                        <div className="left-icon">
                            <div className="icon" onClick={() => props.createNote(props.id)}>{props.isMaximized ?null:<FontAwesomeIcon icon={faPlus} />}</div>
                            <div className="icon" >{props.isSaving ? <FontAwesomeIcon icon={faSpinner} spin />:props.isError ? <FontAwesomeIcon icon={faExclamationTriangle} />:props.isSaved ? <FontAwesomeIcon icon={faCheck} /> : null}</div>
                        </div>
                        <div className="right-icon">
                            <div className="icon" onClick={() => props.toggleDeleteNoteConfirmationMessage(props.id)} >{props.isMaximized ?null:<FontAwesomeIcon icon={faTrash} /> }</div>
                            <div className="icon" onClick={()=>props.saveUserNote(props.id, props.color, noteContents||props.contents, props.isSaved)}><FontAwesomeIcon icon={faSave} /></div>
                            <div className="icon" onClick={() => props.toggleFullscreen(props.id)}><FontAwesomeIcon icon={faWindowMaximize} /></div>
                        </div>
                    </div>

The faSave icon will be used to manually save a note once a user clicks on it, the icon will also be hidden whenever the sticky note is maximized.

When the application is in the process of saving a sticky note, an icon representing a spinning circle (faSpinner) will be shown to the user. If the note was saved successfully, the faCheck icon will be displayed instead of the the faSpinner icon. If there is an error while saving the note, the faExclamationTriangle will be displayed.

On the right-icon section, whenever the faTrash icon is clicked, the toggleDeleteNoteConfirmationMessage function will be invoked, we'll talk more about all the functions soon.

The toggleFullscreen function will be called with the id of the sticky note if a user clicks on the faWindowMaximize icon.

Updating the `NoteContainer` Component

Let's update the NoteContainer Component to render the NoteCard with the latest changes.

Replace the contents of the components/NoteContainer.tsx file with the following code:

import NoteCard from "./NoteCard"
import MainNavigationBar from './MainNavigationBar';
import Footer from "./Footer";
import { FETCH_ALL_NOTES } from "../queries/note";
import { useMutation, useQuery } from "@apollo/client";
import client from "../client";
import { DELETE_NOTE, MODIFY_NOTE, SAVE_NOTE } from "../mutations/note";
import router from "next/router";
import Loading from "./Loading";
import ErrorPage from "./ErrorPage";
import { IAllNoteData, Theme } from "../typings";
import NoStickyNote from "./NoStickyNotes";
import { toast, ToastContainer } from 'react-toastify'

const NoteContainer = () => {
  const { loading, error, data } = useQuery<IAllNoteData>(FETCH_ALL_NOTES);
  const [saveNote] = useMutation(SAVE_NOTE);
  const [modifyNote] = useMutation(MODIFY_NOTE);
  const [deleteNoteMutation] = useMutation(DELETE_NOTE);

  const createNote = (currentNoteId?: string) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const noteCopy = [...noteData!.allNotes];
    const currentNoteIndex: number = noteCopy.findIndex((note) => note.id === currentNoteId);
    const emptyNote = {
      content: "",
      color: Theme.Yellow,
      id: `${Date.now()}`,
      isMaximized: false,
      isDeleteNoteConfirmationVisible: false,
      isSaved: false,
      isSaving: false,
      isError: true
    }
    noteCopy.splice(currentNoteIndex + 1, 0, emptyNote)
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: [...noteCopy],
      },
    });
  }

  const changeColor = (id: string, color: Theme) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const updatedNotes = noteData!.allNotes.map((note) => {
      if (note.id === id) {
        return {
          ...note, color: color
        }
      }
      return note
    });

    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: updatedNotes
      },
    });
  }

  const toggleFullscreen = (id: string) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const updatedNote = noteData!.allNotes.map((note) => {
      if (note.id === id) {
        return { ...note, isMaximized: !note.isMaximized }
      }
      return note
    })
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: updatedNote
      },
    });
  }

  const toggleDeleteNoteConfirmationMessage = (noteId: string) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const updatedNote = noteData!.allNotes.map((note) => {
      if (note.id === noteId) {
        return { ...note, isDeleteNoteConfirmationVisible: !note.isDeleteNoteConfirmationVisible }
      }
      return note
    })
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: updatedNote
      },
    });
  }

  const showSavingNoteIcon = (id: string) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const updatedNote = noteData!.allNotes.map((note) => {
      if (note.id === id) {
        return { ...note, isSaving: true }
      }
      return note
    })
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: updatedNote
      },
    });
  }
  const hideSavingNoteIcon = (id: string) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const updatedNote = noteData!.allNotes.map((note) => {
      if (note.id === id) {
        return { ...note, isSaving: false }
      }
      return note
    })
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: updatedNote
      },
    });
  }

  const showErrorIcon = (id: string) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const updatedNote = noteData!.allNotes.map((note) => {
      if (note.id === id) {
        return { ...note, isError: true }
      }
      return note
    })
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: updatedNote
      },
    });
  }

  const hideErrorIcon = (id: string) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const updatedNote = noteData!.allNotes.map((note) => {
      if (note.id === id) {
        return { ...note, isError: false }
      }
      return note
    })
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: updatedNote
      },
    });
  }
  const deleteNote = async (noteId: string, isSaved: boolean) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const filteredNotes = noteData!.allNotes.filter((note) => {
      return note.id !== noteId;
    })
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: filteredNotes
      },
    });
    if (isSaved) {
      await deleteNoteMutation({ variables: { noteId } });
    }
  }
  const saveUserNote = async (id: string, color: Theme, contents: string, isSaved: boolean) => {
    try {
      if (isSaved) {
        showSavingNoteIcon(id);
        hideErrorIcon(id);
        await modifyNote({ variables: { data: { color, content: contents }, noteId: id } });
        hideSavingNoteIcon(id);
      }
      else {
        showSavingNoteIcon(id);
        hideErrorIcon(id);
        const savedNote = await saveNote({ variables: { data: { color, content: contents } } });
        hideSavingNoteIcon(id);
        const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
        const updatedNote = noteData!.allNotes.map((note) => {
          if (note.id === id) {
            return { ...note, isSaved: true, id: savedNote.data.newNote.id, content: savedNote.data.newNote.content }
          }
          return note
        })
        client.writeQuery({
          query: FETCH_ALL_NOTES,
          data: {
            allNotes: updatedNote
          },
        });
      }
    }
    catch (error: any) {
      hideSavingNoteIcon(id);
      showErrorIcon(id);
      if (error.networkError?.message === "Response not successful: Received status code 401") {
        toast.error('Your session has expired. Kindly login again', {
          position: "bottom-center"
        });
        localStorage.setItem("isLoggedIn", 'false');
        router.push('/sign-in')
      }

    }
  }

  if (loading) {
    return (
      <>
        <Loading />
      </>
    )
  }
  if (error) {
    if (error.networkError?.message === "Response not successful: Received status code 401") {
      toast.error('Your session has expired. Kindly login again', {
        position: "bottom-center"
      });
      localStorage.setItem("isLoggedIn", 'false');
      router.push('/sign-in')
    }
    return (
      <>
        <section className='main-container'>
          <MainNavigationBar />
          <ErrorPage />
          <Footer />
        </section>
      </>
    )
  }
  if (!data!.allNotes.length) {
    return (
      <>
        <section className='main-container'>
          <MainNavigationBar />
          <NoStickyNote
            createNote={() => createNote()}
          />
          <Footer />
        </section>
      </>
    )
  }
  return (<>
    <section className='main-container'>
      <MainNavigationBar />
      <ToastContainer />
      <section className="notes-container">
        {data!.allNotes.map((eachNote) => {
          return (
            <NoteCard
              createNote={createNote}
              key={eachNote.id}
              changeColor={changeColor}
              id={eachNote.id}
              color={eachNote.color}
              toggleFullscreen={toggleFullscreen}
              isMaximized={eachNote.isMaximized}
              deleteNote={deleteNote}
              toggleDeleteNoteConfirmationMessage={toggleDeleteNoteConfirmationMessage}
              isDeleteNoteConfirmationVisible={eachNote.isDeleteNoteConfirmationVisible}
              contents={eachNote.content}
              saveUserNote={saveUserNote}
              isSaved={eachNote.isSaved}
              isSaving={eachNote.isSaving}
              isError={eachNote.isError}
            />
          )
        })
        }
      </section>
      <Footer />
    </section>
  </>
  )
}
export default NoteContainer

Breaking Down the `NoteContainer` component:

Fetching and Rendering all the Sticky Notes

Upon successful login, the first action performed is to retrieve all of the user's notes.

The following query was used to retrieve all of the notes belonging to the user:

const { loading, error, data } = useQuery(FETCH_ALL_NOTES);

The useQuery hook returns an object with loading, error, and data fields. While the allNotes query is being fetched, the Loading component will be rendered using the following code:

  if (loading) {
    return (
      <>
        <Loading />
      </>
    )
  }

In the snippets below, if the useQuery hooks encounters an error while retrieving the user's note, we check to see if the error was caused by an expired token and then redirect them to the login page; otherwise, the ErrorPage component is rendered:

  if (error) {
    if (error.networkError?.message === "Response not successful: Received status code 401") {
      toast.error('Your session has expired. Kindly login again', {
        position: "bottom-center"
      });
      localStorage.setItem("isLoggedIn", 'false');
      router.push('/sign-in')
    }
    return (
      <>
        <section className='main-container'>
          <MainNavigationBar />
          <ErrorPage />
          <Footer />
        </section>
      </>
    )
  }

What if the data was fetched but was empty because the user had not added any sticky notes? We've already created a component called NoStickyNote that will be rendered to the screen. The NoStickyNote component will render a text that informs the user that they do not have any sticky notes and a button to create a new sticky note.

The following codes will be used to render the NoStickyNote component if the data.allNotes array is empty:

  if (!data!.allNotes.length) {
    return (
      <>
        <section className='main-container'>
          <MainNavigationBar />
          <NoStickyNote
            createNote={() => createNote()}
          />
          <Footer />
        </section>
      </>
    )
  }

Finally, the following snippet will be used to render all the user's notes:

  return (<>
    <section className='main-container'>
      <MainNavigationBar />
      <ToastContainer />
      <section className="notes-container">
        {data!.allNotes.map((eachNote) => {
          return (
            <NoteCard
              createNote={createNote}
              key={eachNote.id}
              changeColor={changeColor}
              id={eachNote.id}
              color={eachNote.color}
              toggleFullscreen={toggleFullscreen}
              isMaximized={eachNote.isMaximized}
              deleteNote={deleteNote}
              toggleDeleteNoteConfirmationMessage={toggleDeleteNoteConfirmationMessage}
              isDeleteNoteConfirmationVisible={eachNote.isDeleteNoteConfirmationVisible}
              contents={eachNote.content}
              saveUserNote={saveUserNote}
              isSaved={eachNote.isSaved}
              isSaving={eachNote.isSaving}
              isError={eachNote.isError}
            />
          )
        })
        }
      </section>
      <Footer />
    </section>
  </>
  )

We iterated through the data.allNotes array using the map() method, then used the NoteCard component to render the eachNote object in the data.allNotes array.

The NoteCard component is passed several props, including createNote, changeColor, toggleFullscreen, deleteNote, toggleDeleteNoteConfirmationMessage, id, color, isMaximized, isDeleteNoteConfirmationVisible, contents, saveUserNote, isSaved, isSaving, and isError. These props are used to pass data and functions to the NoteCard component that it can use to display and manipulate the sticky notes. A more detailed explanation of these props will be provided soon.

Creating a new Sticky Note

To create a new sticky note, we will call the createNote() function in the NoteContainer component. The createNote() function has an optional parameter called currentNoteId. Every sticky note has a plus (+) icon, once a user click on the icon we want a new sticky note to be created right beside it. The id of the sticky note whose plus icon is clicked is the currentNoteId.

We made the currentNoteId parameter optional because sometimes the user does not have to click the plus icon to create a new note. For example, when a user does not have a sticky note, the NoStickyNotes component with a Add New button will be rendered to the screen. Once the Add New button is pressed we do not need the currentNoteId parameter because the sticky note that will be created will be the first sticky note.

In the createNote() function, we used the following line to read the cached data:

const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });

After running the FETCH_ALL_NOTES query to fetch all the user's notes, the result was stored into the cache we created earlier. We used the client.readQuery to read the current data of the FETCH_ALL_NOTES GraphQL and store it into the noteData variable. The type of noteData is inferred to be IAllNoteData from the type argument passed to readQuery.

In the following line:

const noteCopy = [...noteData.allNotes];

We used the spread operator to copy the noteData and made modifications to the noteCopy without touching the original result. Modifying the noteData directly could lead to unexpected behavior in our application.

We used the following code to get the index of the sticky note that the user clicks on:

const currentNoteIndex: number = noteCopy.findIndex((note) => note.id === currentNoteId);

Then we created a new json object called: emptyNote:

    const emptyNote = {
      content: "",
      color: Theme.Yellow,
      id: `${Date.now()}`,
      isMaximized: false,
      isDeleteNoteConfirmationVisible: false,
      isSaved: false,
      isSaving: false,
      isError: true
    }

This object will be used to initialize a new note.

We used the following code to add a new note right beside the sticky note whose plus icon was clicked on:

noteCopy.splice(currentNoteIndex + 1, 0, emptyNote)

Then we used the client.writeQuery to update the cache with the modified noteCopy data:

client.writeQuery({ query: FETCH_ALL_NOTES, data: { allNotes: [...noteCopy], }, });

Saving and Modifying the Sticky Notes

Saving and modify the sticky notes is not a straight forward process. First, we have to check if the note has been saved before so that we can call the MODIFY_NOTE mutation on it, but if the note has not been saved before, we'll make a request to the SAVE_NOTE mutation instead.

Two types of savings were also implemented here:

auto save and
manual save.

The sticky note will be automatically saved two seconds after a user stops typing on it, and a user can also manually save the note by clicking the save icon.

To save the note automatically or manually, we will call the saveUserNote() function.

The saveUserNote() function takes in the following parameter:

id : the id of the sticky note to be saved
color: the color of the note
contents: the note's content,
isSaved: the isSaved boolean will be used to check if the note has been saved or not.

If the note has already been saved, that means we just have to modify it, which is exactly what the snippets below does:

      if (isSaved) {
        showSavingNoteIcon(id);
        hideErrorIcon(id);
        await modifyNote({ variables: { data: { color, content: contents }, noteId: id } });
        hideSavingNoteIcon(id);
      }

We used the following mutations to modify a note:

await modifyNote({ variables: { data: { color, content: contents }, noteId: id } });

While while the mutation is being executed, we displayed the loading icon by calling the showSavingNoteIcon(id) function.

We will call the showErrorIcon(id) to dislay the error icon on the note if an error occured while modifying the note or call the hideErrorIcon(id) function to clear the error if the error has been resolved.

We will hide the loading icon after the execution is complete by calling hideSavingNoteIcon(id) function.

If the sticky note has not been saved before, the following snippets will be executed instead:

       else {
        showSavingNoteIcon(id);
        hideErrorIcon(id);
        const savedNote = await saveNote({ variables: { data: { color, content: contents } } });
        hideSavingNoteIcon(id);
        const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
        const updatedNote = noteData!.allNotes.map((note) => {
          if (note.id === id) {
            return { ...note, isSaved: true, id: savedNote.data.newNote.id, content: savedNote.data.newNote.content }
          }
          return note
        })
        client.writeQuery({
          query: FETCH_ALL_NOTES,
          data: {
            allNotes: updatedNote
          },
        });
      }

We display the saving icon and hide the error icon while the saveNote mutation is being executed. Once the note has been successfully saved, we change the id of the note from the temporary id we were using before (i.e., the one generated by date.Now()) to the permanent id generated from our GraphQL server. We also change the isSaved boolean to true and update the note content in the cache with the saved note content sent from the backend.

If there are any errors while the note is being saved of or modified the following code will be executed:

    catch (error: any) {
      hideSavingNoteIcon(id);
      showErrorIcon(id);
      if (error.networkError?.message === "Response not successful: Received status code 401") {
        toast.error('Your session has expired. Kindly login again', {
          position: "bottom-center"
        });
        localStorage.setItem("isLoggedIn", 'false');
        router.push('/sign-in')
      }
    }

If the error message says "Response not successful: Received status code 401" that means the user's session as expired. So we will log the user out and redirect the user to the login page, then hide the saving icon and display the error icon on the sticky note.

Changing the color of the notes

We used the changeColor() function to switch between the theme colors of a note. the function takes in two parameters: the id of the note and the color that the user want.

We fetched all the sticky notes in the cache by running the following query first:

const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });

Then in the following code:

    const updatedNotes = noteData!.allNotes.map((note) => {
      if (note.id === id) {
        return {
          ...note, color: color
        }
      }
      return note
    });

We searched for the note that matched the note id provided by the user using the map() method, then changed the color to the color selected by the user. The updatedNotes variable was then used to store the new array that was generated by the map function.

The following snippets uses the writeQuery method to update the cache with the latest changes:

    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: updatedNotes
      },
    });

Minimizing and Maximizing the sticky note

To minimize and maximize a sticky note, we'll invoke the toggleFullscreen(id) function. Here's what the toggleFullscreen function looks like:

  const toggleFullscreen = (id: string) => {
    const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const updatedNote = noteData!.allNotes.map((note) => {
      if (note.id === id) {
        return { ...note, isMaximized: !note.isMaximized }
      }
      return note
    })
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: updatedNote
      },
    });
  }

The toggleFullscreen function takes in the id of the note that the user want to minimize or maximize then change its isMaximized boolean value to the opposite of the previous value. That is, if the current boolean value of isMaximized is false it changes it to true and vice versa. Then modifies the cache with the updatedNote.

Deleting a Sticky Note

We called two functions to delete a sticky note, the toggleDeleteNoteConfirmationMessage() and deleteNote() function.

We used the deleteNote() function to permanently remove a user's note. But we just don't want to delete a note once the user presses the trash icon on the sticky note; we also want to confirm it first. That's why we called the toggleDeleteNoteConfirmationMessage() function first. The toggleDeleteNoteConfirmationMessage() will render a text asking the user to confirm their action by clicking on a Yes or No button. Once the user clicks on the Yes button, the deleteNote() function with the id of the note will be invoked, but if the user clicks on the No button, the confirmation message will be hidden.

The deleteNote function takes in two parameters, the id and isSaved value of the note. The following statement in the deleteNote function searches for a note that matches the id parameter in the cache and then deletes it:

        const noteData = client.readQuery<IAllNoteData>({ query: FETCH_ALL_NOTES });
    const filteredNotes = noteData!.allNotes.filter((note) => {
      return note.id !== noteId;
    })
    client.writeQuery({
      query: FETCH_ALL_NOTES,
      data: {
        allNotes: filteredNotes
      },
    });

This is okay if the note has not been saved into the database, and we just want to remove it from the cache, but if the note has been saved, we need to execute a mutation that will delete the user's note from the database, that is what the following snippets does:

    if (isSaved) {
      await deleteNoteMutation({ variables: { noteId } });
    }

The above statement will execute the query that will permanently delete the user's note from the database.

Logging Out the User

To log the user out, we need to execute the LOGOUT_MUTATION , clear the user data and redirect to login page. Open the MainNavigationBar.tsx file in the components directory and update it with the following code:


import { LOGOUT_MUTATION } from "../mutations/users";
import { useMutation } from "@apollo/client";
import router from 'next/router';
import client from "../client";

const MainNavigationBar = () => {
    const [signout] = useMutation(LOGOUT_MUTATION);

    const logout = () => {
        localStorage.setItem("isLoggedIn", 'false');
        client.clearStore();
        client.cache.gc();
        router.push('/sign-in');
        signout();
    }
    return (
        <>
            <div className="auth-navbar">
                <h1>Sticky Note</h1>
                <div className="menu">
                    <button onClick={logout} className="logout-button">Logout</button>
                </div>
            </div>
        </>
    )
}
export default MainNavigationBar

We define a function called logout. The function will be invoked anytime the logout button is clicked. Here's a brief explanation of what the function does:

sets the value of isLoggedIn key in the browser's local storage to false.
uses the clearStore method to delete all the locally cached data.
the client.cache.gc() triggers garbage collection in the cache, which frees up memory by removing any unused data from memory.
redirect the user to the login page

Learn Fullstack Web Development with React and GraphQL by building a Sticky Note app - Part two

Temitope — Mon, 09 Jan 2023 16:44:54 +0000

Introduction

Hello again! This article is the second part of a series titled, " Learn Fullstack Web Development with React and GraphQL by building a Sticky Note app".

In the first part of the series, we built the frontend aspect of this app using React and TypeScript.

In this section, we will to build the backend using GraphQL, Apollo Server 4, Nexus, ExpressJS and MongoDB.

System Requirements

Make sure you already have the following installed:

Nodejs v16 or later (This project uses v18.12.0)
VScode

Prerequisites

This tutorial assumes knowledge of the following:

JavaScript : you are already familiar with ES6 features such as the fat arrow function and object destructuring
TypeScript: You have a little experience with TypeScript or at least know what TypeScript is and why it's being used in place of JavaScript.
NPM: You have used the Node Package Manager to install a library and perhaps also to run your code or start a server.

Tools

We'll be using the following tools to build our GraphQL server.

Nodejs
Mongoose
MongoDB
GraphQL
Expressjs
Apollo Server
Nexus
TypeScript

Initializing the project

Create a new folder called sticky-notes-backend or you can give it any name you prefer. This folder will be used to store all the server files. Open your terminal, and navigate to the newly created folder, then run the following command:

npm init -y

Running the above command will initialize your project with NPM and create package.json file at the root directory of your project.

Installing TypeScript and `ts-node-dev`

TypeScript is a strongly typed programming language that extends the capabilities of JavaScript with additional features and syntax. Since we are using it for our project, we need to install and configure it first. We also need to install the ts-node-dev library.

The ts-node-dev package will be used for two things:

to transpile our TypeScript code to JavaScript before executing it
to automatically restart the GraphQL dev server whenever a change is made to the code.

Run the following command on your terminal to install them as dev dependencies:

npm install --save-dev typescript@^4.3.5 ts-node-dev@^1.1.8

After the installations, we'll create a new configuration file for TypeScript.

In the root directory of your backend project, create a new file called tsconfig.json.

Open up the tsconfig.json with your editor, then copy and paste the following configurations into it:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "commonjs",
    "lib": [
      "esnext"
    ],
    "strict": true,
    "rootDir": ".",
    "outDir": "dist",
    "sourceMap": true,
    "esModuleInterop": true
  }
}

We use those options to set the TypeScript Compiler's behavious. For example we used the target option too specify the ECMAScript target version that the code should be compiled to, which is "ES2018" and setting the strict option to true will enforce the compiler to use stricter type checking rules, which can help in catching potential type errors in your code.

Setting up the Server

Installing the necessary Libraries

To install all of the necessary libraries for this project, run the following command in the terminal:

npm install @apollo/server express graphql nexus cors cookie-parser mongoose dotenv jsonwebtoken cookie-parser cors validator bcrypt

Once the installation is finished, use the following command to install the type definitions for the libraries:

npm i --save-dev @types/node @types/jsonwebtoken @types/cors @types/cookie-parser @types/validator @types/bcrypt

Here is a summary of the installed libraries:

@apollo/server: This is the core engine for the Apollo GraphQL server. It provides a set of tools for building a GraphQL server in Node.js.
Express: It is a backend web application framework for building RESTful APIs with Node.js
GraphQL : is the library that implements the core GraphQL parsing and execution algorithms.
Nexus : A code-first, type-safe GraphQL schema construction library for JavaScript/TypeScript. We'll talk more on this and why we are using it later.
Cookie-parser : A middleware that parses cookies attached to the client request object.
Mongoose: A Node.js-based Object Data Modeling (ODM) library for MongoDB.
dotenv: A Node.js library that allows you to load environment variables from a .env file into your project.
Jsonwebtoken : This library will be used to generate a unique token for an authenticated user.
Cors : is an express middleware that will be used to enable Cross-origin resource sharing on our app.
Validator : will be used to verify the user's details before saving them into the database.
bcrypt : This library will be used to encrypt the user's password before saving them into the database.

Code First VS Schema First Approach in GraphQL

There are two different ways to implement GraphQL API, they are:

Schema First Approach and,
Code First Approach

Schema First

With this approach, the schema is defined first using the Schema Definition Language (SDL) before implementing the resolver functions. This method is also referred to as SDL-first Approach.

Code First

The Code first approach allows developers to use their programming language of choice (TypeScript in our case) to define the schema, which can be more expressive and easier to read and maintain than Schema Definition Language.

We will be using the code-first approach in this project.

What is Nexus?

Nexus is a code-first, type-safe GraphQL schema construction library for JavaScript and TypeScript. It is a powerful tool that can be used to build and deploy GraphQL servers in JavaScript/TypeScript more efficiently.

Setting up Nexus

At the root directory of the project, create a new folder called src. Inside the src directory, create two new TypeScript files named schema.ts and index.ts.

The schema.ts file will be used for generating our GraphQL schema with Nexus. The index.ts file will be used to setup our GraphQL web server with Apollo server and express.

Inside src/schema.ts file, type in the following code:

import { makeSchema } from 'nexus'
import { join } from 'path'

export const schema = makeSchema({
  types: [],
  outputs: {
    schema: join(process.cwd(), "schema.graphql"),
    typegen: join(process.cwd(), "nexus-typegen.ts"), 
  },
})

The types:[] will contain GraphQL types that will be used to generate our GraphQL schema, it is empty for now. Soon, we will create the types and replace the empty array with them.
The schema: join(process.cwd(), "schema.graphql") will configure Nexus to generate a schema.graphql file at the root directory of our project where nexus will automatically write the SDL version of our GraphQL schema.
The typegen: join(process.cwd(), "nexus-typegen.ts") will set up nexus to generate nexus-typegen.ts file at the root directory of our project where nexus should write the generated TypeScript definition types derived from our schema.

Let's run the following command in the terminal and see what happens next:

npx ts-node --transpile-only src/schema

After executing the script above, Nexus will automatically generate two new files in the root directory of your project, they are: schema.graphql and nexus-typegen.ts.

The schema.graphql file has a type named Query, with a single field called ok because we did not provide Nexus with more information about the types we wanted in the schema, this was constructed as a default schema.

Let's add a generate script to the package.json file:

"generate": "ts-node --transpile-only src/schema.ts"

Any time you run npn run generate on your terminal, it will regenerate your schema by updating the schema.graphql and nexus-typegen.ts file if there are any changes in your Nexus code.

Setting up the Apollo GraphQL Server with Express.js

There are different ways to create an Apollo Server. This tutorial uses Apollo Server as a middleware with express.js, there's also a tutorial that uses the Apollo Server's startStandaloneServer on Apollo's website.

In this situation, it is not recommended to use the startStandaloneServer function because we want to be able to customize the CORS' behavior and run the cookieParser middleware before processing the GraphQL requests.

Open up the src/index.ts file we created earlier, and add the following codes to it:

import express, { Response } from "express";
import { expressMiddleware } from '@apollo/server/express4';
import { ApolloServer } from '@apollo/server';

import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer';
import http from 'http';
import { schema } from "./schema";
import cors from 'cors';
import cookieParser from "cookie-parser";
import { json } from 'body-parser';

require('dotenv').config()

async function startApolloServer() {
  const app = express();

   const corsOptions = {
    origin: process.env.FRONTEND_URL!,
    credentials: true,
  };

  const httpServer = http.createServer(app);

  const server = new ApolloServer({
    schema,
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
  });

  await server.start();
  app.use(
    '/graphql',
    cors(corsOptions),
    json(),
    cookieParser(),
    expressMiddleware(server, {
      context: async ({ res }:{ res:Response })=> {
        return {
          res
        }
      }
    })
  );
  await new Promise<void>((resolve) => httpServer.listen({ port: 4000 }, resolve));
  console.log(`🚀 Server ready at http://localhost:4000/graphql`);
}

startApolloServer();

Understanding what is going on in the server file:

We created a function called startApolloServer. This is the function that will be called anytime we want to start the server. Inside the function, we created an instance of express() called app.

After that, we created a new object called corsOptions. Inside the corsOptions we set the origin to our front-end URL meaning only the requests from the front-end URL will be allowed. This will protect our GraphQL server from being accessed from an unknown origin.

The credentials: true option will set the [Access-Control-Allow-Credentials](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials#:~:text=The%20Access%2DControl%2DAllow%2D,a%20request's%20credentials%20mode%20(%20Request.) option to true. This will enable the browser to read the cookies that will be sent to it from the server.

The const httpServer = http.createServer(app); creates a new HTTP server and passes Express.js (app) as a callback to handle HTTP requests.

The app.use(cookieParser()); is used to register cookieParser as an express middleware function. Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the applications request-response cycle.

The cookieParser() function will be used to parse the cookies sent from the user's browser. More about cookies and why they are being used will be discussed in the authentication part of this tutorial.

We used the following snippets:

const server = new ApolloServer({
    schema,
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })]
  });

to create an instance of ApolloServer and passed the schema that we created earlier, and the ApolloServerPluginDrainHttpServer object to it. We used the ApolloServerPluginDrainHttpServer plugin to ensure the server gracefully shuts down.

We used the following snippets:

  app.use(
    cors(corsOptions),
    json(),
    cookieParser(),
       expressMiddleware(server, {
      context: async ({ res }:{ res:Response })=> {
        return {
          res
        }
      }
    }),
    '/graphql'
  )

to register cors(), json(), cookieParser(), expressMiddleware() as an express middleware function.

The expressMiddleware() function enables us to attach the Apollo Server to the Express server as a middleware function. It also has a second optional argument which is an object that contains a context function. The context function will return an object (res in this case and req later in this tutorial) which will be shared by all the resolvers during the executions of an operation. We will see more of context and resolvers in action later in this tutorial.

The /graphql registered to the middleware will set the /graphql URL path as the default part of our server. This will enable us to access our server only on the following path: http://localhost:4000/graphql

In the package.json file, add the following dev script to it.

"dev": "ts-node-dev --transpile-only --no-notify --exit-child src/index.ts"

Now we can run the following command to start the backend development server:

npm run dev

Once the server has started running, we should see something like this on the CLI:

When you visit http://localhost:4000/graphql on your browser:

You'll notice that Apollo no longer uses GraphQL Playground and is now using Apollo Sandbox, as the standard landing page in Apollo Server 4.

Additionally, you need an internet connection to view http://localhost:4000/graphql on your browser.

Setting up the Database

We'll be using MongoDB Atlass for this tutorial. MongoDB Atlas is a fast, easy, and free way to get started with MongoDB. Signup on the MongoDB website to get your database URI string.

The URI string will be used to connect to your database. It looks like this: mongodb+srv://<username>:<password>@<cluster-name>yocfhhk.mongodb.net/?retryWrites=true&w=majority.

You can follow this guide on freecodecamp's website on how to set up your MongoDB Atlas account and get your MongoDB database URI string.

Creating the environment variables

At the root directory of your project, create a .env file. Open it in your editor and add your MongoDB URI string to it like this:

DATABASE_URL='Your-MongoDB-URL-String-goes-here'

That's all for now, later in the article, we'll be adding our JWT_SECRET and FRONTEND_URL to the .env file.

Connecting to the Database

Open up the server file in src/index.ts and import the mongoose object.

import mongoose from 'mongoose';

After that, we will create a new function called connectToMongoDB.

async function connectToMongoDB() {
  await mongoose.connect(process.env.DATABASE_URL!);
  console.log("Connected to Mongo atlas successfully...");
}

Then call the connectToMongoDB() function inside the startApolloServer() like so:

  console.log(`🚀 Server ready at http://localhost:4000/graphql`);
  connectToMongoDB().catch(err => console.log(err));
}

Run the following command on your terminal to start your server

npm run dev

When the server starts, it should automatically establish a connection to your database URI if everything goes according to plan.

An internet connection is required to connect to the MongoDB Atlas.

Creating the models

In this part, we will define the structure of our database for the users and their sticky notes with Mongoose.

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It provides a simple and straightforward way to interact with MongoDB databases from a Node.js application, allowing you to work with your data as native JavaScript objects.

Defining the `User` Model

Create a new directory in the src folder named: models. Open the models folder and create a new file named: user.ts inside it.

Open up the user.ts file and add the following code to it:

import { Schema, model } from 'mongoose';

interface IUser {
  id:string;
  fullname: string;
  username: string;
  email: string;
  password: string;
}

const userSchema = new Schema<IUser>({
  email: {
    type: String,
    required: true,
    unique: true,
  },
  username: {
    type: String,
    unique: true,
    required: true,
    trim: true,
  },
  password: {
    type: String,
    required: true,
  },
  fullname: {
    type: String,
    required: true,
    trim: true,
  },
});

const User = model<IUser>('User', userSchema);

export default User;

First, we created an interface called IUser that will represent a user in our database, then we defined a userSchema that conformed with the IUser interface before generating a User model from the userSchema .

The User model can then be used to create, read, update, and delete documents in the users collection in the database.

Defining The Notes Model

Create another file named note.ts in the src/models directory, and add the following code:

import { Schema, model, Document } from 'mongoose';

enum Theme {
    Yellow = "yellow",
    Green = "green",
    Pink = "pink",
    Purple = "purple",
    Blue = "blue",
    Gray = "gray",
    Charcoal = "charcoal"
}

interface INote {
    content: string;
    color: Theme;
    userId: string;
}

const noteSchema = new Schema<INote>({
    content: {
        type: String,
        required: true
    },
    color: {
        type: String,
        enum: ['yellow', 'green', 'pink', 'purple', 'blue', 'gray', 'charcoal'],
        default: Theme.Yellow
    },
    userId: {
        type: String, required: true
    },
});

const Note = model<INote>('Note', noteSchema);
export default Note;

We used the TypeScript's enum type to define all the colors that are available for use on the note app, and created an interface for the note called INote.

Then we defined a noteSchema that corresponds with the INote interface before generating a Note model from the noteSchema.

After that, we exported the model for later use. We also used the Mongoose enum type to specify the accepted colors (enum: ['yellow', 'green', 'pink', 'purple', 'blue', 'gray', 'charcoal'],), any other color than those listed will be rejected.

Creating The User Types

Create a new folder in the src directory called graphql. Inside the graphql directory, create a new TypeScript file called User.ts and open it up in your editor, then import the following objects into it:

import bcrypt from "bcrypt";
import jsonwebtoken from "jsonwebtoken";
import {GraphQLError } from "graphql"
import validator from 'validator';
import { extendType, objectType, inputObjectType, nonNull } from "nexus";
import userModel from "../models/user";

Before we proceed, let's quickly go through the imports:

The bcrypts object will be used to encrypt the user's password before saving it to the database.
jsonwebtoken will be used to generate a safe token that will be used to authenticate a user after successful registration or login.
GraphQLError will be used to specify HTTP status code when throwing a GraphQL error.
validator will be used to validate user inputs before saving them into the database.
extendType will be used to extend the GraphQL root types in this project.
objectType will be used to define our object types.
inputObjectType will be used to define the object type that will be passed as an input value.
the nonNull function will be used to prevent the return value of a type from being empty

Defining the types for a User

Remember we are using the code-first approach to build our GraphQL server, which means we have to write our schemas in TypeScript then later, we'll use Nexus to generate the Schema Definition Language from our code. Let's define the following types for a user:

User
AuthPayLoad
SignupUserInput
SignInUserInput

Add the following snippets below the imports to create the User type:

 const User = objectType({
    name: "User", 
    definition(t) {
      t.nonNull.string("id");
      t.nonNull.string("email");
      t.nonNull.string("username");
      t.nonNull.string("password");
      t.nonNull.string("fullname");
    },
  });

We used the Nexus objectType function to create a new type called User. The User type will be used to retrieve the user's data from the server. Five fields are defined in the User object types, they are: id, email, username, password and fullname. Each field is defined as a non-nullable string type.

Defining the `AuthPayLoad` Type

Let's create another object type called AuthPayLoad. This type will be used to retrieve a user's token and data after successful registration or login.

Add the following code below the User object type:

   const AuthPayLoad = objectType({
    name: "AuthPayLoad",
    definition(t) {
      t.nonNull.string("token");
      t.nonNull.field("user", { type: User });
    },
  });

The AuthPayLoad type contains two fields: token and user. The token field is defined as non-nullable string type while the user field is defined as the non-nullable User type we created previously.

Defining the `SignupUserInput` Type

We will define a new input object type that will be used to collect user's data anytime they want to register for a new account.

Add the following code below the AuthPayLoad type:

   const SignupUserInput = inputObjectType({
    name: "SignupUserInput",
    definition(t) {
      t.nonNull.string("email");
      t.nonNull.string("username");
      t.nonNull.string("password");
      t.nonNull.string("fullname");
    },
  });

We used Nexus inputObjectType function to create a new input object type called SignupUserInput. Then we defined the following fields inside the SignupUserInput type: id, email, username, password and fullname. Each field is defined as a non-nullable string type.

Defining the `SigninUserInput` Type

Below the SignupUserInput type, let's create another input object type and name it SigninUserInput which will be used to collect login details from a user:

   const SignInUserInput = inputObjectType({
    name: "SignInUserInput",
    definition(t) {
      t.nonNull.string("usernameOrEmail");
      t.nonNull.string("password");
    },
  });

Within the SigninUserInput type, we defined two fields: usernameOrEmail and password and they are both defined as non-nullable string type.

The Special Root Operation Types in GraphQL

In GraphQL, there are three special root operation types, they are: query, mutation, and subscription. These operation types represent the entry points for executing operations in the GraphQL API.

Query Type

The Query type is used for read-only operations, such as retrieving data from the server. You can define fields on the Query type to allow clients to request specific pieces of data from the server.

Mutation Type

The Mutation type is used for write operations, such as creating, updating, or deleting data. You can define fields on the Mutation type to allow clients to make changes to the data stored on the server.

Subscription Type

The Subscription type is used for long-lived connections that allow the server to push updates to the client in real-time. You can define fields on the Subscription type to allow clients to subscribe to specific types of updates.

Signing Up A New User

To sign up a new user, we will create a new type called SignupUser that will be used to register them.

Let's add the following snippets below the SignInUserInput type:

  export const SignupUser = extendType({
    type: 'Mutation',
    definition(t) {
      t.nonNull.field('signupUser', {
        type: AuthPayLoad,
        args: {
          data: nonNull(SignupUserInput)
        },
        async resolve(_parent, args, { res }, _info) {
          const { data: { email, username, password, fullname } } = args;

          if (!validator.isEmail(email)) {
            throw new GraphQLError('Please enter a valid E-mail!', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }
          if (!validator.isLength(password, { min: 5 })) {

            throw new GraphQLError('Password must have atleast 5 characters', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }
          if (!validator.isLength(username, { min: 3 })) {
            throw new GraphQLError('username must have at least 3 characters', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }
          if (!validator.isLength(fullname, { min: 4 })) {
            throw new GraphQLError('fullname have atleast 4 characters', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }

          const encryptedPassword = bcrypt.hashSync(password, 10);
          const userData = {
            email: email.toLowerCase(),
            username: username.toLowerCase(),
            fullname,
            password: encryptedPassword,
          };
          try {
            const usernameExist = await userModel.findOne({ username: username.toLowerCase() });
            if (usernameExist) {
              throw new GraphQLError('Username is already in use!', {
                extensions: {
                  code: 'UNAUTHENTICATED',
                  http: { status: 401 },
                }
              });
            }
            const emailExist = await userModel.findOne({ email: email.toLowerCase() });
            if (emailExist) {
              throw new GraphQLError('Email is already in use!', {
                extensions: {
                  code: 'UNAUTHENTICATED',
                  http: { status: 401 },
                }
              });
            }
            const createdUser = await userModel.create(userData);
            console.log(createdUser)
            const token = jsonwebtoken.sign(
              {
                id: createdUser._id,
                username: createdUser.username,
                exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24,
              },
              process.env.JWT_SECRET!
            );
            res
               .cookie("access_token", token, {
                httpOnly: true,
                secure: process.env.SECURE_COOKIE === 'true'? true : false,
                maxAge: Math.floor(Date.now() / 1000) + (60 * 60 * 24),
                sameSite: 'none'
               })
            return {
              user: createdUser,
              token,
            };
          } catch (error) {
            throw error
          }
        },
      })
    }
  });

Demystifying the `SignupUser` code

In the following snippets:

 export const SignupUser = extendType({
    type: 'Mutation',
    definition(t) {
      t.nonNull.field('signupUser', {
        type: AuthPayLoad,
        args: {
          data: nonNull(SignupUserInput)
        },

We defined a new field called signupUser that extends the GraphQL root Mutation root type.
the return type for the signupUser mutation was defined as the AuthPayLoad type we created previously.
then we defined the expected argument as data object whose value is expected to be a non-nullable SignupUserInput object type that will be passed to the signupUser field.

In the snippet below:

async resolve(_parent, args, { res }, _info) {
          const { data: { email, username, password, fullname } } = args;

          if (!validator.isEmail(email)) {
            throw new GraphQLError('Please enter a valid E-mail!', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }
          if (!validator.isLength(password, { min: 5 })) {

            throw new GraphQLError('Password must have atleast 5 characters', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }
          if (!validator.isLength(username, { min: 3 })) {
            throw new GraphQLError('username must have at least 3 characters', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }
          if (!validator.isLength(fullname, { min: 4 })) {
            throw new GraphQLError('fullname have atleast 4 characters', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }

We created a resolver function called resolve for the signupUser field.

The parent is the return value of the resolver for this field's parent.
The args is the GraphQL arguments provided for this field.
The context is used for sharing data that the resolvers might need. We created this function earlier in the server file and then passed the express response object (res) to it. The res object will be made available to all the resolver functions through the context object.

You might have noticed the {res} instead of context in the signupUser resolver function arguments, that is because we unpacked the context parameter using Object Destructuring method.

Instead of having the context in the parameters, and then later doing something like this:

const res = context.res

Or this:

const {res} = context

We just unpacked the res object directly in the arguments.

The info contains details on the present status of the operation.

The underscore (_) was used to prefix _parent and _info parameters to bypass the linter error because they are unused. We don't need the parent and info parameters now, removing them will cause an error because the four parameters are expected in that position, and not using them will result to the linter warning us about unused parameters. To fix all of the above problems, we prefixed the unused parameters with an underscore (_).

In thefollowing line:

const { data: { email, username, password, fullname } } = args;

we unpacked the email, username, password, fullname from the data object passed into the args. We could also remove the args object from the resolve's argument like we did with the context and do something like this:

async resolve(_parent, { data: { email, username, password, fullname } }, { res }, _info) {
...

But doing so would only make the resolver arguments longer.

In the following snippets:

          if (!validator.isEmail(email)) {
            throw new GraphQLError('Please enter a valid E-mail!', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }
          if (!validator.isLength(password, { min: 5 })) {

            throw new GraphQLError('Password must have atleast 5 characters', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }
          if (!validator.isLength(username, { min: 3 })) {
            throw new GraphQLError('username must have at least 3 characters', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }
          if (!validator.isLength(fullname, { min: 4 })) {
            throw new GraphQLError('fullname have atleast 4 characters', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
          }

We used the validator library to verify the email, password, username and the fullname details provided by the user, and throw an UNAUTHENTICATED error using the GraphQLError library whenever the validations fail.

In the following code:

const encryptedPassword = bcrypt.hashSync(password, 10);
          const userData = {
            email: email.toLowerCase(),
            username: username.toLowerCase(),
            fullname,
            password: encryptedPassword,
          };

We encrypted the user's password using the bcrypt library. Then creates a userData object that stores the email, username, fullname and the encrypted password data.

In the following snippets:

try {
            const usernameExist = await userModel.findOne({ username: username.toLowerCase() });
            if (usernameExist) {
              throw new GraphQLError('Username is already in use!', {
                extensions: {
                  code: 'UNAUTHENTICATED',
                  http: { status: 401 },
                }
              });
            }
            const emailExist = await userModel.findOne({ email: email.toLowerCase() });
            if (emailExist) {
              throw new GraphQLError('Email is already in use!', {
                extensions: {
                  code: 'UNAUTHENTICATED',
                  http: { status: 401 },
                }
              });
            }
            const createdUser = await userModel.create(userData);

            const token = jsonwebtoken.sign(
              {
                id: createdUser._id,
                username: createdUser.username,
                exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24,
              },
              process.env.JWT_SECRET!
            );
            res
               .cookie("access_token", token, {
                httpOnly: true,
                secure: process.env.SECURE_COOKIE === 'true'? true : false,
                maxAge: Math.floor(Date.now() / 1000) + (60 * 60 * 24),
                sameSite: 'none'
               })
            return {
              user: createdUser,
              token,
            };
          } catch (error) {
            throw error
          }
        },
      })
    }
  });

We checked if the username exist already in the database by executing the following query:

const usernameExist = await userModel.findOne({ username: username.toLowerCase() });

If the usernameExist, we'll throw the Username is already in use error message. We also verified if the user's email address exists in the database by running the following query:

const emailExist = await userModel.findOne({ email: email.toLowerCase() });

If emailExist value is truthy, we'll return Email is already in use error to the user.

Then we created the user using the data stored in the userData's variable by running the following query:

const createdUser = await userModel.create(userData);

We used the jsonwebtoken library with a secret key (we'll create the key very soon) to generate a secure token from the created user data using the following snippet:

            const token = jsonwebtoken.sign(
              {
                id: createdUser._id,
                username: createdUser.username,
                exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24,
              },
              process.env.JWT_SECRET!
            );

By default, when we create a new document in MongoDB, mongoose automatically adds an _id field that acts as a primary key. That was how we came about createdUser._id. To create your JWT secret key, open up the .env file and add the following below the DATABASE_URL :

DATABASE_URL='Your-MongoDB-URL-String-goes-here'
JWT_SECRET = 'Your-JWT_SECRET-goes-here'

Note that your JWT secret key is private to you, it must be very difficult to guess and must be secured. Whenever the server receives a JWT from the user's computer, the JWT_SECRET will be used to decrypt the user's token. We'll discuss more about how the authentication work soon.

In the following snippets:

res
               .cookie("access_token", token, {
                httpOnly: true,
                secure: process.env.SECURE_COOKIE === 'true'? true : false,
                maxAge: Math.floor(Date.now() / 1000) + (60 * 60 * 24),
                sameSite: 'none'
               })
            return {
              user: createdUser,
              token,
            };

We used the res object in express to store the tokens on the user's web browser using HTTP cookies. In part three of this tutorial, we will configure the browser to send the cookies back to the server anytime the user is making an API request.

We added some attributes to the cookie so that the browser will know how to handle the cookies when it receives them. Below are what they are:

httpOnly : Setting this attribute to true will prevent the cookie from being accessed by JavaScript. The aim of this is to prevent XSS Attack on our app.
secure: Setting this attribute to true is used to indicate to the browser that the cookies should only be transmitted over a secure (encrypted) connection. This will keep our app secure and prevent the Man in the middle (MITM) attack on it. Add the following to your .env file:
maxAge: The maximum lifetime of the cookie before it expires, I set it to 24 hours
sameSite: This option will only allow the cookie to be sent to the same domain name. I set it to none because the front end and the back end of this app will be hosted on different domains.

Authenticating the User

A user needs to be authenticated anytime they make an API request to our GraphQL server. If not, we will have to keep redirecting the user to the login page and have them enter their username and password every time they want to perform any operation like fetching all notes, modifying and deleting them to confirm their identity.

Nobody should have to go through that stress. We need a secure way to authenticate a user each time they make an API request to the server and this is why we are using a token-based authentication system.

What is a Token-Based Authentication System?

Token-Based Authentication is a secure way of verifying a user's identity using encrypted security tokens. Once the token has been generated after the initial logins, the token will be shared between the user's computer and the server rather than having the user re-enter their credentials every time they need to make a request to the server.

How does it work?

The user logins or signup for a new account
The server verifies the user's credentials
If the credentials are confirmed, the server generates a secure token using JSON Web Token(JWT)
The tokens are then placed on the user's computer (We used a Cookie with the HttpOnly.) attribute for this app)
The next time a user makes an API request to access secured data from the browser, the JWT tokens will be attached to the request.
The server then verifies the user's token before allowing the user to perform any operations.
If the tokens are confirmed, access will be granted to the user

Why use `Cookies` with `HttpOnly` attribute to store JSON Web Tokens?

Using HTML Web Storage to save the user's token is considered a bad idea because it makes the website vulnerable to XSS attack. An attacker can have access to an authenticated user's token by injecting JavaScript code that will run on the user's website. When Cookies are used with the HttpOnly attribute, they will not be accessible with JavaScript thereby making them invulnerable to XSS attack.

However, they can still be susceptible to Cross Site Request Forgery (CSRF) attack if we did not restrict access to the cookies by setting the HttpOnly, secure and SameSite flag.

Signing In the User

To sign in a user, let's create a SigninUser type. This type will be used to login a verified user.

Add the following code below the SignupUser object inside the src/graphql/User.ts file:

    export const SigninUser = extendType({
    type: 'Mutation',
    definition(t) {
      t.nonNull.field('signinUser', {
        type: AuthPayLoad,
        args: {
         data: nonNull(
          SignInUserInput
         ),
        },
        async resolve(_parent, args, { res }, _info) {
         try {
           const { data: { usernameOrEmail, password } } = args

           const userFound = await userModel.findOne({
             $or: [{ email: usernameOrEmail.toLowerCase() },
             { username: usernameOrEmail.toLowerCase() }],
           }).exec();
           if (!userFound) {
             throw new GraphQLError('User does not exist', {
              extensions: {
                code: 'UNAUTHENTICATED',
                http: { status: 401 },
              }
            });
           }
           if (bcrypt.compareSync(password, userFound.password)) {
             const username = userFound.username;
             const id = userFound._id;
             const token = jsonwebtoken.sign({
               id,
               username,
               exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24),
             }, process.env.JWT_SECRET!);
             res
               .cookie("access_token", token, {
                 httpOnly: true,
                 secure: true,
                 maxAge: Math.floor(Date.now() / 1000) + (60 * 60 * 24),
                 sameSite: 'none'
               })
             return {
               user: userFound,
               token,
             };
           }
           throw new GraphQLError('Incorrect password', {
            extensions: {
              code: 'UNAUTHENTICATED',
              http: { status: 401 },
            }
          });
         }
         catch (error: any) {
           throw new GraphQLError(error, {
            extensions: {
              code: 'UNAUTHENTICATED',
              http: { status: 401 },
            }
          });
         }
       }
     })
    }
  });

Demystifying the `SigninUser` code

We created a new field called signinUser. Just like the signupUser field, it extends the GraphQL Mutation root type and returns a non-nullable AuthPayLoad type. It also has a non-nullable argument of SignInUserInput type.

Then we created a resolver function called resolve for the signinUser mutation. Inside the resolve function, we unpacked the usernameOrEmail and password arguments using object destructuring, then we checked if the usernameOrEmail exists in the database by running the following query:

const userFound = await userModel.findOne({
             $or: [{ email: usernameOrEmail.toLowerCase() },
             { username: usernameOrEmail.toLowerCase() }],
           }).exec();

A user can use their username or email to log in. The query will select one document where either the username field value is equal to usernameOrEmail or email field value is equal to usernameOrEmail. The query result will be saved into the userFound variable. If the userFound value is falsy, we'll throw a new GraphQLError that says: 'User does not exist'.

If the userFound value is not falsy, we'll compare the password in the database with the user's entered password using the bcrypt library. Once the password is confirmed, a new token will be generated with the user's id and username . After that, the generated token will be sent to the client's computer via cookies.

But if the user's password in the database does not match the entered password, then a GraphQLError that says: 'Incorrect password' will be returned to the user.

Logging Out The User

To log the user out is very easy, all we have to do is delete the user's token from the cookies. Without the token, a user will have to login again to access their data.

Let's write the following code below the SigninUser object in src/graphql/User.ts:

  export const LogoutUser = extendType({
    type: "Mutation",
    definition(t) {
      t.nonNull.field("signoutUser", {
        type: "Boolean",
        async resolve (_parent, _args, { res }, _info) {
         res.clearCookie("access_token")
          return true
        },
      });
    },
  });

We created a new field that extends the Mutation root type called signoutUser. The return type for this field is defined as Boolean. Then we created a new resolver function called resolve. What this function does is very simple. It clears the access_token cookies, then returns a true boolean value to the client.

Generating the Schema definition language (SDL) from the `User` Code

In this part, we are going to use Nexus to generate the GraphQL schema from all the user's code we've been writing.

Create a new TypeScript file named index.ts in scr/graphql/, then add the following export to it:

export * from "./User";

update src/schema.ts file to use all the imports coming from scr/graphql/index.ts:

import { makeSchema } from 'nexus'
import { join } from 'path'
import * as types from "./graphql";
export const schema = makeSchema({
  types,
  outputs: {
    schema: join(process.cwd(), "schema.graphql"), 
    typegen: join(process.cwd(), "nexus-typegen.ts"), 
  },
})

First, we imported everything in scr/graphql/index.ts file as types using the following snippets:

import * as types from "./graphql";

Then we update the makeSchema method to use the imported types instead of the empty array ([]) that was there before with the following snippets:

export const schema = makeSchema({
  types, // same as: types:types
...

Open up the schema.graphql file at the root directory of your project, If your terminal is still running on the dev server you should see that the file has been automatically updated:

### This file was generated by Nexus Schema
### Do not make changes to this file directly

type AuthPayLoad {
  token: String!
  user: User!
}

type Mutation {
  signinUser(data: SignInUserInput!): AuthPayLoad!
  signupUser(data: SignupUserInput!): AuthPayLoad!
}

type Query {
  ok: Boolean!
}

input SignInUserInput {
  password: String!
  usernameOrEmail: String!
}

input SignupUserInput {
  email: String!
  fullname: String!
  password: String!
  username: String!
}

type User {
  email: String!
  fullname: String!
  id: String!
  password: String!
  username: String!
}

If you open the nexus-typegen.ts file, you should see something like this too:

/**
 * This file was generated by Nexus Schema
 * Do not make changes to this file directly
 */

declare global {
  interface NexusGen extends NexusGenTypes {}
}

export interface NexusGenInputs {
  SignInUserInput: { // input type
    password: string; // String!
    usernameOrEmail: string; // String!
  }
  SignupUserInput: { // input type
    email: string; // String!
    fullname: string; // String!
    password: string; // String!
    username: string; // String!
  }
}

export interface NexusGenEnums {
}

export interface NexusGenScalars {
  String: string
  Int: number
  Float: number
  Boolean: boolean
  ID: string
}

export interface NexusGenObjects {
  AuthPayLoad: { // root type
    token: string; // String!
    user: NexusGenRootTypes['User']; // User!
  }
  Mutation: {};
  Query: {};
  User: { // root type
    email: string; // String!
    fullname: string; // String!
    id: string; // String!
    password: string; // String!
    username: string; // String!
  }
}

export interface NexusGenInterfaces {
}

export interface NexusGenUnions {
}

export type NexusGenRootTypes = NexusGenObjects

export type NexusGenAllTypes = NexusGenRootTypes & NexusGenScalars

export interface NexusGenFieldTypes {
  AuthPayLoad: { // field return type
    token: string; // String!
    user: NexusGenRootTypes['User']; // User!
  }
  Mutation: { // field return type
    signinUser: NexusGenRootTypes['AuthPayLoad']; // AuthPayLoad!
    signupUser: NexusGenRootTypes['AuthPayLoad']; // AuthPayLoad!
  }
  Query: { // field return type
    ok: boolean; // Boolean!
  }
  User: { // field return type
    email: string; // String!
    fullname: string; // String!
    id: string; // String!
    password: string; // String!
    username: string; // String!
  }
}

export interface NexusGenFieldTypeNames {
  AuthPayLoad: { // field return type name
    token: 'String'
    user: 'User'
  }
  Mutation: { // field return type name
    signinUser: 'AuthPayLoad'
    signupUser: 'AuthPayLoad'
  }
  Query: { // field return type name
    ok: 'Boolean'
  }
  User: { // field return type name
    email: 'String'
    fullname: 'String'
    id: 'String'
    password: 'String'
    username: 'String'
  }
}

export interface NexusGenArgTypes {
  Mutation: {
    signinUser: { // args
      data: NexusGenInputs['SignInUserInput']; // SignInUserInput!
    }
    signupUser: { // args
      data: NexusGenInputs['SignupUserInput']; // SignupUserInput!
    }
  }
}

export interface NexusGenAbstractTypeMembers {
}

export interface NexusGenTypeInterfaces {
}

export type NexusGenObjectNames = keyof NexusGenObjects;

export type NexusGenInputNames = keyof NexusGenInputs;

export type NexusGenEnumNames = never;

export type NexusGenInterfaceNames = never;

export type NexusGenScalarNames = keyof NexusGenScalars;

export type NexusGenUnionNames = never;

export type NexusGenObjectsUsingAbstractStrategyIsTypeOf = never;

export type NexusGenAbstractsUsingStrategyResolveType = never;

export type NexusGenFeaturesConfig = {
  abstractTypeStrategies: {
    isTypeOf: false
    resolveType: true
    __typename: false
  }
}

export interface NexusGenTypes {
  context: any;
  inputTypes: NexusGenInputs;
  rootTypes: NexusGenRootTypes;
  inputTypeShapes: NexusGenInputs & NexusGenEnums & NexusGenScalars;
  argTypes: NexusGenArgTypes;
  fieldTypes: NexusGenFieldTypes;
  fieldTypeNames: NexusGenFieldTypeNames;
  allTypes: NexusGenAllTypes;
  typeInterfaces: NexusGenTypeInterfaces;
  objectNames: NexusGenObjectNames;
  inputNames: NexusGenInputNames;
  enumNames: NexusGenEnumNames;
  interfaceNames: NexusGenInterfaceNames;
  scalarNames: NexusGenScalarNames;
  unionNames: NexusGenUnionNames;
  allInputTypes: NexusGenTypes['inputNames'] | NexusGenTypes['enumNames'] | NexusGenTypes['scalarNames'];
  allOutputTypes: NexusGenTypes['objectNames'] | NexusGenTypes['enumNames'] | NexusGenTypes['unionNames'] | NexusGenTypes['interfaceNames'] | NexusGenTypes['scalarNames'];
  allNamedTypes: NexusGenTypes['allInputTypes'] | NexusGenTypes['allOutputTypes']
  abstractTypes: NexusGenTypes['interfaceNames'] | NexusGenTypes['unionNames'];
  abstractTypeMembers: NexusGenAbstractTypeMembers;
  objectsUsingAbstractStrategyIsTypeOf: NexusGenObjectsUsingAbstractStrategyIsTypeOf;
  abstractsUsingStrategyResolveType: NexusGenAbstractsUsingStrategyResolveType;
  features: NexusGenFeaturesConfig;
}

declare global {
  interface NexusGenPluginTypeConfig<TypeName extends string> {
  }
  interface NexusGenPluginInputTypeConfig<TypeName extends string> {
  }
  interface NexusGenPluginFieldConfig<TypeName extends string, FieldName extends string> {
  }
  interface NexusGenPluginInputFieldConfig<TypeName extends string, FieldName extends string> {
  }
  interface NexusGenPluginSchemaConfig {
  }
  interface NexusGenPluginArgConfig {
  }
}

If the file has not been updated, you might need to restart your server by running the following command:

npm run dev

Or you can run the generate script if you don't feel like starting the server to update the code:

npm run generate

Verifying a User's JSON Web Tokens

Before we can create a new note or make any modifications to it, we need to verify the owner of the note first. We will be verifying the owner by decrypting the owner's JSON Web Tokens. The decrypted JWT contains the user's id and username.

The id will be used to uniquely identify each user and their sticky notes. The user will be able to create, fetch, edit, and delete any notes that belong to them using the id.

Open up the src/index.ts file and import the jsonwebtoken library:

import jsonwebtoken from 'jsonwebtoken'

After the import, we'll create a new function that verifies the user's token right above the startApolloServer() function:

const getUser = (token: string, res: Response) => {
  try {
    if (token) {
      return jsonwebtoken.verify(token, process.env.JWT_SECRET!)
    }
    res.clearCookie("access_token");
    return null
  } catch (error) {
    return null
  }
}

The getUser function takes a user's token and the Express response object as parameters, then verifies and returns the user's token.

Null will be returned if either no token was supplied or if an error occurred while verifying the user's token.

Now, let's update the context object to return the decoded JWT so that it can be used in the resolver function:

      context: async ({ req, res }:{req:Request, res:Response})=> {
        if (req) {
          const token = req.cookies.access_token || ""
          const user = getUser(token, res);
          return {
            user,
            res
          };
        }
        return {
          res
        }
      }

If a request is sent to our GraphQL server, we will get the tokens from the request cookies using req.cookies.access_token or return an empty string("") if non was found using:

req.cookies.access_token || ""

We stored the decoded tokens into the user variable. Both the user and res object will be sent to the context object whenever a user makes a request to the server; otherwise, we'll simply return only the res object.

Let's update the express import to include the Request object:

import express, { Response, Request } from "express";

Defining the Types for the Sticky Note

Let's create a new file in src/graphql called Note.ts and import the following objects into it:

import { extendType, objectType, inputObjectType, nonNull } from "nexus";
import noteModel from './../models/note';
import {GraphQLError} from "graphql"

We've already discussed what extendType, objectType, inputObjectType, nonNull and GraphQLError are used for when we are creating the User types. In the second line, we imported the noteModel we created previously.

Below the imports, let's create a new objectType called Note and a new inputObjectType called NoteData.

const Note = objectType({
    name: "Note",
    definition(t) {
        t.string("id");
        t.nonNull.string("content");
        t.nonNull.string("color");
        t.nonNull.string("userId");
    },
});
const NoteData = inputObjectType({
    name: "NoteData",
    definition(t) {
        t.nonNull.string("content");
        t.nonNull.string("color");
    },
});

The Note type has the following fields: id, content, color, and userId that can be used to query the notes.

Also, we defined the following fields: content and color in the NoteData type. Both fields have non-nullable string type.

Fetching All Notes Belonging to a User

In this part, we will create our first GraphQL query that will be used to fetch every note that belongs to a user.

Type the following code below the NoteData object.

export const AllNotes = extendType({
    type: 'Query',
    definition(t) {
        t.nonNull.list.field('allNotes', {
            type: Note,
            async resolve(_parent, _args, context, _info) {
                try {
                    const { user } = context;
                    if (!user) {
                        throw new GraphQLError('You are not authenticated', {
                            extensions: {
                              code: 'UNAUTHENTICATED',
                              http: { status: 401 },
                            }
                          });
                    }
                    const notes = await noteModel.find(
                        {
                            userId: user.id,
                        }
                    );
                    console.log(notes)
                    return notes;
                }
                catch (error) {
                    throw error;
                }
            }
        })
    }
});

Using the Nexus extendType function, we extended the GraphQL query root type and added a new root field to it called allNotes. This time, we extended the GraphQL query root type instead of the mutation type because we are only fetching from the database and no modifications will be made to the note data.

We defined the return type of the query as an array of the Note type we created previously. Then we created a resolver function for the allNotes query named resolve. We performed all the operations that fetch the user's note inside the resolver function.

The context is the only argument we're using on this field's resolver function, so we prefixed _parent, _args, and _info with an underscore(_). Using the object destructuring method, we unpacked the user object that was passed down to the resolver via the context object.

In the following snippets:

if (!user) {
    throw new GraphQLError('You are not authenticated', {
       extensions: {
          code: 'UNAUTHENTICATED',
             http: { status: 401 },
                }
             });
          }

We checked if the user object passed down from context is valid. Remember, we returned a falsy value if the token is empty or not successfully decoded, and we returned the user if the token was successful in the getUser function.

If the user value is falsy, we will throw an UNAUTHENTICATED error, but if the user is valid, then we will fetch all the notes that belong to the user by executing the following Mongoose query:

 const notes = await noteModel.find(
                     {
                            userId: user.id,
                        }
                    );

The query above will search for all the notes whose userId matches the id of the user that is currently logged in, then stores the results into the notes variable.

Fetching a Single Note

Let's create another query that will be used to fetch a single note for an authenticated user. The user will have to provide the id of the note to be fetched. Add the following code below the AllNotes type:

export const SingleNote = extendType({
    type: 'Query',
    definition(t) {
        t.nonNull.field('singleNote', {
            type: Note,
            args: {
                noteId: 'String',
            },
            async resolve(_parent, args, context, _info) {
                const { noteId } = args;
                const { user } = context;
                const userId = user.id
                if (!user) {
                    throw new GraphQLError('You are not authenticated', {
                        extensions: {
                          code: 'UNAUTHENTICATED',
                          http: { status: 401 },
                        }
                      });
                }
                try {
                    const noteDetails = await noteModel.findOne({ _id: noteId, userId });
                    if(!noteDetails){
                        throw new Error("Note not found");
                    }
                    return noteDetails;
                } catch (error) {
                    throw error;
                }
            },
        })
    }
});

We extended the Query root type again and added a new root field to it called singleNote. After that, we defined the return type of the singleNote query as a non-nullable Note objectType. Also, we defined the expected argument for the singleNote query (noteId) as a string. Then we created a resolver function named resolve that query the database for the note.

We used the following query:

const noteDetails = await noteModel.findOne({ _id: noteId, userId });

to fetch the first note that matches the id and the userId provided then stores the query result into noteDetails variable. We used the following snippets to throw a not found error if the note was not found:

if(!noteDetails){
                        throw new Error("Note not found");
                    }

Creating A New Note

Now that we are done implementing the singleNote query, let's create our first mutation for the sticky note by adding a new type that will be used to create a new note.

Type the following code below the SingleNote type:

export const NewNote = extendType({
    type: 'Mutation',
    definition(t) {
        t.nonNull.field('newNote', {
            type: Note,
            args: {
                data: nonNull(NoteData)
            },
            async resolve(_parent, args, context, _info) {
                const { data } = args;
                const { user } = context;
                try {
                    if (!user) {
                        throw new GraphQLError('You are not authenticated', {
                            extensions: {
                              code: 'UNAUTHENTICATED',
                              http: { status: 401 },
                            }
                          });
                    }
                    const createdNoted = await noteModel.create({
                        content: data.content, color: data.color || 'yellow', userId: user.id
                    });
                    return createdNoted;
                } catch (error) {
                    throw error;
                }
            }
        })
    }
});

We extended the Mutation root type and added a new root field to it called newNote. Then we defined the return type of the newNote mutation as non-nullable Note type. Also, we defined the expected argument as a non-nullable noteData type. After that, we created a resolver function that creates the user's note if the user is authenticated.

We used the following queries:

const createdNoted = await noteModel.create({
                        content: data.content, color: data.color || 'yellow', userId: user.id
                    });

to create a new note document with the provided content, color and userId by using the create() function in Mongoose.

The data.color || 'yellow' means yellow will be used as the default color if the color args wasn't provided.

Modifying an existing Note

In this part, we are going to create a new type that edits an existing note belonging to a user. To know the specific note that the user wants to modify, the note id must be provided as an argument.

Let's add the following code below the NewNote type.

export const ModifyNote = extendType({
    type: 'Mutation',
    definition(t) {
        t.nonNull.field('modifyNote', {
            type: Note,
            args: {
                noteId: nonNull('String'),
                data: nonNull(NoteData)
            },
            async resolve(_parent, args, context, _info) {
                const { noteId, data: { content, color } } = args;
                const { user } = context;
                if (!user) {
                    throw new GraphQLError('You are not authenticated', {
                        extensions: {
                          code: 'UNAUTHENTICATED',
                          http: { status: 401 },
                        }
                      });
                }
                try {
                    const modifiedNote = await noteModel.findOneAndUpdate(
                        {
                            _id: noteId, userId: user.id,
                        },
                        { content, color },
                        {
                            runValidators: true,
                            new: true,
                        }
                    );
                    if (!modifiedNote) {
                        throw new Error("Unable to update note");
                    }
                    console.log(modifiedNote)
                    return modifiedNote;
                } catch (error) {
                    throw error;
                }
            }
        })
    }
});

Here's the summary of what we did in the code above:

We created a new field called modifyNote that extends the GraphQL Mutation root type.
We defined Note type as the return type for the field
we defined noteId and data as the expected argument for the modifyNote mutation. The noteId will be used used to search for the specific note that a user wants to modify. The note data will be used to make changes to the note when found.
The noteId argument is a non-nullable String while the type for the data argument is non-nullable NoteData type.
We created a resolver function named resolve.
The resolver function checks if a user is authenticated, then modifies the user's note if the user is confirmed.
The following query:

 const modifiedNote = await noteModel.findOneAndUpdate(
                        {
                            _id: noteId, userId: user.id,
                        },
                        { content, color },
                        {
                            runValidators: true,
                            new: true,
                        }
                    );

uses the findOneAndUpdate function in Mongoose to search for the first note that matches the noteId and userId provided in the arguments.
by default, Mongoose does not run validation on updates. We need to set the runValidators option to true every time we call the findOneAndUpdate or any update method to run the update validators on the query.
also by default, findOneAndUpdate does not return the updated document, it returns the document as it was before the update was applied. Setting the new option to true will return the updated document instead of the old document.
we saved the result of the query to modifiedNote variable.
Then return the modifiedNote if the update was successful or throw the Unable to update note error if it wasn't.

Deleting a Note

Let's perform the final mutation on this app by creating a new type that deletes a user's note. Only notes that the user has added can be deleted. To delete a note, the noteId must be provided.

Type the following code below the ModifyNote type:

export const DeleteNote = extendType({
    type: 'Mutation',
    definition(t) {
        t.nonNull.field('deleteNote', {
            type: Note,
            args: {
                noteId: nonNull('String')
            },
            async resolve(_parent, args, context, _info) {
                const { noteId } = args;
                const { user } = context;
                if (!user) {
                    throw new GraphQLError('You are not authenticated', {
                        extensions: {
                          code: 'UNAUTHENTICATED',
                          http: { status: 401 },
                        }
                      });
                }
                try {
                    const deletedNote = await noteModel.findOneAndDelete({
                        _id: noteId,
                        userId: user.id,
                    });
                    if (!deletedNote) {
                        throw new Error(" Note not found");
                    }
                    return deletedNote;
                } catch (error) {
                    throw error;
                }
            },
        })
    }
});

We extended the Mutation root type and added a new root field to it called deleteNote
The return type for the deleteNote field is defined as non-nullable Note type.
We also defined the noteId as the expected argument for the deleteNote mutation
the noteId has a non-nullable String type
We created a resolver function named resolve.
The resolver function deletes the note after verifying the user
the following query:

const deletedNote = await noteModel.findOneAndDelete({
                        _id: noteId,
                        userId: user.id,
                    });

searches for the first note that matches the noteId and the userId, deletes it, and then stores the deleted note into the deletedNote variable.

We return an error if the delete wasn't successful
or return the deleted note if the note was successfully removed from the database.

Generating the Note Schemas with Nexus

Let's connect all our exported note types to the makeSchema function. Open the src/graphql/index.ts file and add the following code below the user export that was there before:

export * from "./Note";

So everything looks like this:

export * from "./User"; 
export * from "./Note";

If we check the schema.graphql file now, we will notice that all the note types we created earlier have been converted to GraphQL schemas by Nexus:

### This file was generated by Nexus Schema
### Do not make changes to this file directly

type AuthPayLoad {
  token: String!
  user: User!
}

type Mutation {
  deleteNote(noteId: String!): Note!
  modifyNote(data: NoteData!, noteId: String!): Note!
  newNote(data: NoteData!): Note!
  signinUser(data: SignInUserInput!): AuthPayLoad!
  signupUser(data: SignupUserInput!): AuthPayLoad!
}

type Note {
  color: String!
  content: String!
  id: String
  userId: String!
}

input NoteData {
  color: String!
  content: String!
}

type Query {
  allNotes: [Note]!
  singleNote(noteId: String): Note!
}

input SignInUserInput {
  password: String!
  usernameOrEmail: String!
}

input SignupUserInput {
  email: String!
  fullname: String!
  password: String!
  username: String!
}

type User {
  email: String!
  fullname: String!
  id: String!
  password: String!
  username: String!
}

These are the GraphQL Schema Definition Language (SDL) codes that were generated by Nexus from the User and Note type codes that we wrote previously.

The AuthPayLoad type represents the payload that is returned when a user successfully signs in or signs up. It has two fields: token (which is a string representing an authentication token) and user (which is an object of type User).

The Note type represents a note object. It has four fields: id, content, color, and userId.

The NoteData input type represents the data that is passed as an argument to the newNote and modifyNote mutations. It has two fields: content and color.

The SignInUserInput and SignupUserInput input types represent the data that is passed as an argument to the signinUser and signupUser mutations. They have different fields, depending on the information that is needed to sign in or sign up.

The User type represents a user object. It has five fields: id, email, fullname, password, and username.

The Mutation type represents the root type for GraphQL mutations in this API. It has five fields: deleteNote, modifyNote, newNote, signinUser, and signupUser each of which corresponds to a different mutation that can be performed.

The Query type represents the root type for GraphQL queries in this API. It has two fields: allNotes and singleNote.

Testing the GraphQL APIs with Postman

One of the easiest and fastest ways to test our GraphQL API endpoints locally is through Postman. Postman is a powerful software for testing API requests, inspecting their responses, and easily debugging them. Click here to download and install it if you don't have it already.

Changing the `Secure` Cookie Attribute to `false` for testing purposes only

We need to modify a few settings specifically for these tests in order to test our APIs.

Open the .env file and change the SECURE_COOKIE from true to false. Without changing it, Postman will not send the cookies along with the request any time an authenticated user tries to access a secure endpoint (or maybe Postman sent it but the server rejected).

Changing the setting like that will make our website vulnerable, but we are only doing this for testing our API in development mode only. During production, the secure attribute must be set back to true because we set the sameSite attribute to none. Doing this is one of many ways to prevent Cross-site request forgery on the website.

Testing the `signupUser` Mutation

Launch your Postman and make sure your development server is running already at http://localhost:4000/graphql. If it isn't, run the following command to start it:

npm run dev

Create a new collection by clicking on the Collections tab, then click on the plus icon. You will be prompted to give your collection a name, let's name it Sticky Notes for now. You can rename it later if you prefer. Right-click on the created Sticky Notes collection or click on the three dots option button on it, then select Add request from the drop-down options. Name the request SignupUser. After that, change the request method from GET to POST. The Post request method is the method we are going to use throughout our test.

Enter http://localhost:4000/graphql in the URL text box. Below the URL textbox, select Body from the options tab, then select the GraphQL radio button.

After that, you will be presented with two text-area boxes named: QUERY and GRAPHQL VARIABLES.

Type the following queries into the QUERY box:

mutation SignupUser($data: SignupUserInput!) {
  signupUser(data: $data) {
    token
    user {
      email
      fullname
      id
      password
      username
    }
  }
}

And type the following into GRAPHQL VARIABLES

{
  "data": {
    "email": "janedoe@email.com",
    "fullname": "Jane Doe",
    "password": "invisible",
    "username": "janedoe"
  }
}

Then click on the Send button

After a successful registration, click on the Cookies below the Send button, you will see the access_token cookies sent from our GraphQL server. This token will be automatically attached to every request from now until we signout or maybe when it expires.

Testing the `signinUser` Mutation

To test the signinUser mutation, we'll add another request to the Sticky Notes collection and name it SigninUser. Then change the request method from GET to POST, and enter http://localhost:4000/graphql in the URL textbox. Select Body in the options tab below the URL textbox, then check the GraphQL radio button.

Type the following queries into the QUERY box:

mutation SignupUser($data: SignInUserInput!) {
  signinUser(data: $data) {
    token
    user {
      email
      fullname
      id
      password
      username
    }
  }
}

And type the following into the GRAPHQL VARIABLES:

{
  "data": {
    "password": "invisible",
    "usernameOrEmail": "janedoe"
  }
}

Then click on the Send button:

Testing the `newNote` Mutation

To test the NewNote mutation, we'll go through the same process we've been following since, we'll add another request to the Sticky Notes collection and name it NewNote. Then change the request method from GET to POST, and enter http://localhost:4000/graphql in the URL textbox. Select Body in the options tab below the URL textbox, then check the GraphQL radio button.

Type the following queries into the QUERY box:

mutation NewNote($data: NoteData!) {
  newNote(data: $data) {
    color
    content
    id
    userId
  }
}

GRAPHQL VARIABLES:

{
  "data": {
    "content": "sample",
    "color": "yellow"
  }
}

Testing the `modifyNote` Mutation

Add another request to the Sticky Notes collection and name it ModifyNote . Then change the request method from GET to POST, and enter http://localhost:4000/graphql in the URL textbox. Select Body in the options tab below the URL textbox, then check the GraphQL radio button.

Type the following queries into the QUERY box:

mutation ModifyNote($noteId: String!, $data: NoteData!) {
  modifyNote(noteId: $noteId, data: $data) {
    color
    content
    id
    userId
  }
}

GRAPHQL VARIABLES:


  { "noteId": "639a7cf1946da6008c0aba01",
  "data": {
    "content": "Note sample modified",
    "color": "green"
  }
}

Testing the `allNotes` Query

To fetch all the sticky notes belonging to a user, add another request to the Sticky Notes collection and name it AllNotes. Then change the request method from GET to POST, and enter http://localhost:4000/graphql in the URL textbox. Select Body in the options tab below the URL textbox, then check the GraphQL radio button.

Type the following queries into the QUERY box:

query AllNotes {
  allNotes {
    id
    content
    color
    userId
  }
}

Testing the `deleteNote` Mutation

To delete a note, add another request to the Sticky Notes collection and name it DeleteNote. Then change the request method from GET to POST, and enter http://localhost:4000/graphql in the URL textbox. Select Body in the options tab below the URL textbox, then check the GraphQL radio button.

Type the following queries into the QUERY box:

mutation Mutation($noteId: String!) {
  deleteNote(noteId: $noteId) {
    color
    content
    userId
    id
  }
}

GRAPHQL VARIABLES:

{
  "noteId": "639a7cf1946da6008c0aba01"
}

Testing the `signoutUser` Mutation

To test the signoutUser Mutation, add another request to the Sticky Notes collection and name it DeleteNote. Then change the request method from GET to POST, and enter http://localhost:4000/graphql in the URL textbox. Select Body in the options tab below the URL textbox, then check the GraphQL radio button.

Type the following queries into the QUERY box:

mutation signoutUser {
  signoutUser
}

When you click on "Cookies" below the send button after signing out the user, you will see that the access token cookies have been deleted:

Summary and Next Steps

In this section, we built the GraphQL server for the Sticky Note app using Apollo Server 4, Express.js, and MongoDB, following the code-first approach. We then defined various types and fields that can be used to query and modify the API. Finally, we tested the GraphQL APIs using Postman.

In the next section, we will make the frontend aspect built in the previous part communicate with the GraphQL APIs built in this section.

Learn Full-Stack Web Development with React and GraphQL by Building a Sticky Note App - Part one

Temitope — Mon, 09 Jan 2023 16:42:43 +0000

Introduction

👋 Hello everyone! This is a full-stack tutorial on how to build a Sticky Note app using GraphQL, React, and TypeScript.

GraphQL is a modern and advanced way of creating APIs that provides a flexible and efficient way to request data from a server. It was developed by Facebook and released publicly in 2015.

One of the major selling points of GraphQL is that it allows the client to request only the data it needs, nothing more and nothing less, rather than getting a fixed set of data from an endpoint. This can be more efficient and reduce the amount of data transferred over the network, which can be particularly useful when building mobile applications or when working with limited bandwidth.

What are We building?

We are developing Sticky Notes, a full-stack note-taking web application that enables you to do the following:

Create and edit notes: create and manage your sticky notes everywhere you are on your computer or mobile device.
Customize appearance: The background colors of your Sticky Notes can be changed and you can choose from seven different theme colors.
Create an account: sign up and create a new account to keep all your notes secure.
Auto-Save: Automatically save changes to your note as you are typing them, ensuring that changes to a note are not lost, even if the app or device crashes or the user closes the browser.
Manually save note: You can also manually save your note by clicking on the save icon.
Minimize or Maximize note: Maximize your note to concentrate only on the note you are working on or you can minimize to see all the notes you are working on.
Delete Note : You can permanently remove your Sticky Notes if they are no longer needed.

The Structure of this Tutorial

This tutorial is divided into three parts: frontend , backend , and fullstack.

The Frontend

The frontend section will focus on building the app using only React and TypeScript. We will use React to create the user interface and manage the state of the app. The purpose of this part is to demonstrate how the app works with React state before transitioning to using the Apollo GraphQL Client in the final section.

The Backend

This is the second part of the tutorial. In this section, we will build the GraphQL server for the app using Apollo Server 4, Express.js, Nexus, and MongoDB. We will define the schema and resolvers for our GraphQL API, as well as handle authentication, authorization, and data persistence.

The Fullstack

This is the final part of the tutorial. In this part, we will make the frontend communicate with the GraphQL server built in the backend and migrate the app state from the React state to the Apollo client cache.

Prerequisites

To get started with the frontend aspect of this tutorial, it is assumed that you are familiar with the following tools:

HTML and CSS : Since most of the HTML and CSS code used in this tutorial won't be discussed, a good understanding of HTML and CSS is expected.
JavaScript : A good knowledge of JavaScript is required. If you are already familiar with ES6 features such as the fat arrow function and object destructuring, you are ready to go.
React : You are good to go if you have interacted with a React state and component or, even better, created a to-do app with React.
TypeScript: Basic knowledge of TypeScript is what is needed here; if you already know what TypeScript is and why it's being used in the tech industry, along with your JavaScript skills, you're set to start.

Tools

The following tools will be used to build the frontend aspect of this tutorial:

Nodejs
React
TypeScript
Nextjs
Font Awesome

The GitHub Repository for this Project

The GitHub repository containing the finished code for this app can be found here:

Frontend: https://github.com/tope-olajide/sticky-note-react

Backend: https://github.com/tope-olajide/sticky-notes-backend

Fullstack: https://github.com/tope-olajide/sticky-notes

The Deployed Website

I deployed the frontend code of this project on Vercel and hosted the backend code on Render.

You can use the following link to view the deployed website for each section:

Frontend: sticky-note-react.vercel.app

Backend: https://sticky-note-app.onrender.com/graphql

Fullstack: sticky-note-app.vercel.app

Getting Started

Create a new directory called sticky-note-frontend. Navigate to the folder on your termainal and run the following command:

yarn create next-app --typescript

When asked for your project name, either type ./ to use the name of your current folder or manually type in the name of your project.

Next, you will be prompted to decide if you will like to use ESLint, select Yes.

After that, you'll need to wait for some seconds for Nextjs to finish installing TypeScript, React, and other dependencies.

After the installations, Nextjs will set up TypeScript support for our project and add a few folders and files to the root directory.

Let's install font awesome by running the following command on the terminal:

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Finally, we can run the following command on the terminal to start our frontend development server:

yarn run dev

The command will start our frontend development server on the following URL: http://localhost:3000.

Launch your browser and visit: http://localhost:3000 on it, you should see a " Welcome to Next.js!" screen that looks like this:

By default, Next.js will look for a file at pages/index.ts and render the contents of that file as the default page for the root URL. If a file at pages/index.ts does not exist, Next.js will display an error message.

We will be modifying the pages/index.ts file soon but before then, let's create a new folder inside the root directory called: components.

The components folder will be used to store all the react components that we will be creating very soon.

Updating the `styles/global.css` file

Open up the styles/global.css file in your editor and replace everything inside with the following code:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #F8FAFE;
  overflow: auto;

}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
.main-container {
 min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card, .delete-note-modal{
  width: 300px;
  height: 350px;
  background-color: #f9e675;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4); 
  border: 1px solid rgb(0, 0, 0,.5);
  margin: 1rem;
}
.delete-note-modal {
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.delete-note-modal h3 {
  margin: 0 0 1rem 0;
}

.delete-note-modal button {
  width: 90%;
  background-color: rgb(31, 15, 15);
}
.card-maximized {
  width: 100%;
  height: 100%;
  background-color: #f9e675;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
  border: 1px solid rgb(0, 0, 0,.5);
  position: fixed
  ;
  z-index: 10;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  top: 0;

}
.card-header {
 height: 10%;
}

.card-body {
  background-color: rgba(253, 253, 253, 0.4);
  height: 80%;
}

.text-area {
width: 100%;
height: 100%;
background-color: transparent;
border: none;
outline: none;
color: black;
z-index: 5;
resize: none;
font-size: 1rem;
font-family: 'Segoe UI', 'Roboto', 'Oxygen';
font-weight: 400;

}

.text-container{
width: 90%;
height: 100%;
margin: 0 auto;
}

.card-footer {
  width: 100%;
  height: 10%;
  border-top: 1px solid rgba(0, 0, 0, 0.4);
}

.icon-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.right-icon, .left-icon {
    display: flex;
}

.icon {
  margin: 3px;
  color: rgb(12, 11, 11);
  padding: 5px 7px;
  cursor: pointer;
  opacity: .8;
  font-size: 1.2rem;
}

.icon:hover {
  background-color: rgba(10, 10, 9, 0.2);
  opacity: 1;
}

.theme-color-container {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: black;
}

.theme-color:hover {
  opacity: .9;
  cursor: pointer;
}

.yellow, .green, .pink, .purple, .blue, .gray, .charcoal {
  width: 14.3%;

}

.yellow, #yellow {
background-color: #f9e675;
}

.green, #green {  
  background-color: #b2ed9e ;
}
.pink, #pink {
  background-color: #f2b3e4;
}
.purple, #purple {
  background-color: #ceb1ff;
}
.blue, #blue {
  background-color: #addcfe;
}
.gray, #gray {
  background-color: #dcdee2;
}
.charcoal, #charcoal {
  background-color: #77797e;
}
.notes-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}

.no-notes-container {
  display: flex;
  flex-direction: column;
  width: 350px;
  margin: 4rem auto;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 3rem 1rem;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
  background-color: #f9e675; ;
}
.no-notes-container button {
  background-color: #09060e; ;
}

.auth-container{
width: 350px;
margin: 2rem auto;
padding: 2rem;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
background-color: white;
}

.auth-form{
flex-wrap: wrap;
display: flex;
width:320px;
margin: 0 auto;
justify-content: center;
}
.auth-container h3 {
 text-align: center;
}
input {
border: 1px solid black;
margin: .5rem;
padding: 1rem;
font-size: 1rem;
width:320px;
outline: none;
}

.navbar{
  background-color: rgb(34, 32, 32);
  padding: 1rem;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar h1{
  margin: 0;
  font-size: 1.3rem;
  padding-left: 1rem;
  color: white;
}

.navbar .menu {
  display: flex;
}

.navbar .menu h5{
  margin: 0;
  color: white;
  padding: 0 1rem;
  text-transform: uppercase;
}

.navbar .menu h5:hover {
  opacity: .8;
  cursor: pointer;
}

.welcome-text h2{
  text-align: center;
  text-transform: uppercase;
  margin: 2rem 0 0rem 0;
}

button {
  border: none;
  margin: .5rem;
  padding: 1rem;
  font-size: 1rem;
  width:320px;
  outline: none;
  background-color: blue;
  color: white;
  cursor: pointer;
}

button:hover {
  opacity: .7;
}
.logout-button{
  width: 80px;
  padding: .5rem;
  border-radius: 3px;
  margin: .1rem;
  font-size: .9rem;
}
.show-error{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.show-error p {
  color: red;
  margin: 0;
  font-weight: 600;
}
.hide-error{
  display: none;
}
.error-icon {
margin:0;
color: red;
padding: .4rem;
}

.snackbar-container {
  min-width: 250px;
  background-color: rgb(29, 29, 32);
  color: #fff;
  text-align: center;
  border-radius: 2px;
  position: fixed;
  z-index: 1;
  right: 0%;
  bottom: 30px;
  font-size: 17px;
  padding: 0;
  margin-right: 30px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
}
.hide{
  display: none;
}

 @media screen and (max-width: 468px) {
  .auth-container{
    width: 90%;
    padding: 2.5rem 0;
    }
    .auth-form {
      width:90%;
      }
      .navbar h1{
        font-size: 1rem;
        padding-left: 0.5rem;
      }
      .navbar .menu h5{
        font-size: .7rem;
      }
}

@media screen and (max-width: 280px) {
  .auth-container {
    width: 100%;
    }
} 

footer {
width: 100%;
left: 0;
bottom: 0;
background-color: black;
text-align: center;
color: white;
margin-top: 5rem;
}

footer p {
  padding: 2rem 0;
}

Inside the styles directory, delete the Home.module.css file, we won't be needing it.

Creating the NoteCard Component

Open up the components directory and create a new file called NoteCard.tsx inside it.

The NoteCard component will serve as a template that will be used to create a new sticky note.

Open up the NoteCard.tsx file and add the following code:


import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus, faWindowMaximize, faTrash, faSave, faExclamationTriangle, faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons'

const NoteCard: React.FC = () => {
    return (
        <>
            <div className="card">
                <div className="card-header">
                    <div className="icon-container">
                        <div className="left-icon">
                            <div className="icon"><FontAwesomeIcon icon={faPlus} /></div>
                            <div className="icon" ><FontAwesomeIcon icon={faExclamationTriangle} /></div>
                            <div className="icon" > <FontAwesomeIcon icon={faCheck} /></div>
                            <div className="icon" > <FontAwesomeIcon icon={faSpinner} spin /></div>
                        </div>
                        <div className="right-icon">
                            <div className="icon"><FontAwesomeIcon icon={faSave} /></div>
                            <div className="icon"><FontAwesomeIcon icon={faWindowMaximize} /></div>
                            <div className="icon"><FontAwesomeIcon icon={faTrash} /></div>
                        </div>
                    </div>
                </div>
                <div className="card-body">
                    <div className="text-container">
                        <textarea className="text-area"></textarea>
                    </div>
                </div>
                <div className="card-footer">
                    <div className="theme-color-container">
                        <div className="theme-color yellow"> </div>
                        <div className="theme-color green"></div>
                        <div className="theme-color pink"></div>
                        <div className="theme-color purple"></div>
                        <div className="theme-color blue"></div>
                        <div className="theme-color gray"></div>
                        <div className="theme-color charcoal"></div>
                    </div>
                </div>
            </div>
        </>
    )
}
export default NoteCard

The NoteCard component is the react version of the card-single.html file which can be found inside the templates repository.

Next, we'll create a new file inside the components directory called NoteContainer.tsx.

Open up the newly created NoteContainer.tsx file in your editor and add the following code:

import NoteCard from "./NoteCard";

const NoteContainer = () => {
    return (
        <>
            <section className="notes-container">
                <NoteCard />
            </section>
        </>
    )
}

export default NoteContainer

We imported and rendered the NoteCard component inside the NoteContainer.

To see all our components in action, open the pages/index.ts file and delete everything inside it, then import and render the NoteContainer component in it like so:

import NoteContainer from "../components/NoteContainer";

function HomePage() {
  return <NoteContainer />
}

export default HomePage

If everything works fine, the screen should display a sticky note that looks like this:

If you have checked out the completed version of this project from the link provided earlier, you already know what each icon on the sticky note card represents and what they will be used for. We will implement all the features very soon.

Creating A New Sticky-Note

In this part, we will add another sticky note once a user clicks on the plus icon on a sticky note or the Add new button that will be created very soon.

At the root folder of our project, let's create a new folder called typings. All the typings file used for this project will be saved here. Inside the typings file, let's create a new file called index.tsx. open the index.tsx file, and create a new enum type called Theme:

export enum Theme {
    Yellow = "yellow",
    Green = "green",
    Pink = "pink",
    Purple = "purple",
    Blue = "blue",
    Gray = "gray",
    Charcoal = "charcoal"
}

We're using the enum keyword to declare all the theme colors available for use in our sticky notes app, which are:

Yellow
Green
Pink
Purple
Blue
Gray, and
Charcoal

Let's create another type definition for each sticky note called INote:

export interface INote {
    content: string;
    color: Theme;
    id: string;
    isMaximized: boolean;
    isDeleteNoteConfirmationVisible:boolean;
    isSaved: boolean;
    isSaving: boolean;
    isError: boolean;
}

We set some rules for the note data; for example, each note content and id must be in string format, the color must conform with the Theme rules, and isMaximized, isDeleteNoteConfirmationVisible, isSaved, isSaving, isError as boolean. Inside the NoteContainer component, let's create a new object called defaultNoteData:

    const defaultNoteData = {
        content: "",
        color: Theme.Yellow,
        id: `${Date.now()}`,
        isMaximized: false,
        isDeleteNoteConfirmationVisible: false,
        isSaved: false,
        isSaving: false,
        isError: true,
    }

The defaultNoteData object will be used to set the default value of the newly created note. The note content will be initialized with an empty string, and the default theme color will be yellow. I used Date.now() method to generate a temporary id for the sake of building the frontend part of this project.

The original id will be generated from the backend and will replace the temporary id once the note data is saved into the database. Also, notice how Template Literal was used to convert the Date.now() value to string. The rules we set for the id type is string, but the Date.now() return type is number so we converted it to string

Now, let's import the Theme and INote typings we created earlier into the NoteContainer:

import { Theme, INote } from '../typings'

After that, we will create a new state called notes in the NoteContainer. To do that, let's import the useState hook from react first:

import { useState } from 'react';

Then create the notes state below the defaultNoteData object like this:

const [notes, setNotes] = useState<Array<INote>>([]);

The notes state is an Array of the INote object type we created earlier. If any notes data provided does not conform with the Array of INote type, expect TypeScript to throw some errors.

Next, we will create a function that creates a new sticky note below the notes state:

    const createNote = () => {
        setNotes([...notes, defaultNoteData]);
        console.log(notes);
    }

The createNote function will create a new sticky note by inserting the defaultNoteData object into the notes state anytime we call the createNote function.

Next, we will invoke this function when a user clicks on the plus icon on a sticky note.

Define the type for the `NoteCard` component.

Let's create a new interface called INoteCardProps for the NoteCard component.

Open up the typings/index.ts file and create a new interface called INoteCardProps

export interface INoteCardProps {

}

The INoteCardProps will be used to provide type checking for the NoteCard component props which will be discussed very soon, but before then let's update the NoteCard component to use the INoteCardProps types.

In the NoteCard component, replace the following line of code:

const NoteCard: React.FC = () => {

With this:

const NoteCard: React.FC<INoteCardProps> = (props) => {

Notice how we passed a props as parameters to the NoteCard component. The props stand for properties in React. It is used for passing data from a parent component (the NoteContainer in this case) to a child component (the NoteCard). The React.FC (can also be written as React.FunctionComponent) is just like an interface that provides the props types (INoteCardProps in our case) for a React component (NoteCard).

Let's import the INoteCardProps into the NoteCard component like this:

import { INoteCardProps } from '../typings'

and update the INoteCardProps with more data:

export interface INoteCardProps {
    createNote(): void;
    id:string;
    color:string;
    isMaximized:boolean;
    contents: string;
    isSaved: boolean;
    isSaving: boolean;
    isError: boolean;
}

After that, we'll update the NoteContainer to render the NoteCard component with the notes data.

Replace the following lines of code in the NoteContainer component:

<section className="notes-container">
                <NoteCard />
            </section>

with the following snippets:

            <section className="notes-container">
                {notes.map((note: INote) => {
                    return (
                        <NoteCard
                            createNote={createNote}
                            key={note.id}
                            id={note.id}
                            color={note.color}
                            isMaximized={note.isMaximized}
                            contents ={note.content}
                            isSaved={note.isSaved}
                            isSaving={note.isSaving}
                            isError={note.isError}
                        />
                    )
                })}
            </section>

We iterated through the notes state and rendered each data with the NoteCard components. If we refresh the browser now, we should see a blank page.

There's no need to panic; this occured because the notes state is empty. Remember, we initialized it with an empty array, therefore React has nothing to render just yet. To fix that, we need to create a component that will be rendered anytime the state is empty. This component will inform the user that they have not added any notes, it will also include an Add New button that will be used to invoke the createNote function.

Creating the `NoStickyNotes` Component

To create the NoStickyNotes Component, let's create a new file called NoStickyNotes.tsx and add the following code in it:

const NoStickyNotes: React.FC = (props) => {
    return (
        <>
            <section className="no-notes-container">
              <h3>You have no sticky notes</h3><button> Add New </button>
            </section>
        </>
    )
}
export default NoStickyNotes

This component will display a text that says: "You have no sticky notes" with an Add New Button. This button does nothing for now. Let's make it call the createNote function once a user clicks on it.

Open up the typings/index.ts file and create another type definition for the NoStickyNotes component called INoStickyNotesProps:

export interface INoStickyNotesProps{
    createNote():void
}

Now let's update the NoStickyNotes component to use the INoStickyNotesProps type definitions:

import { INoStickyNotesProps } from "../typings"

const NoStickyNotes: React.FC<INoStickyNotesProps> = (props) => {
    return (
        <>
            <section className="no-notes-container">
              <h3>You have no sticky notes</h3><button onClick={props.createNote}> Add New </button>
            </section>
        </>
    )
}
export default NoStickyNotes

First, we imported the INoStickyNotesProps from the typings.tsx file, then invoke the createNote function anytime the "Add New" button is clicked.

The createNote function will be passed down as props to the NoStickyNotes component from the NotesContainer component soon.

Let's render the NoStickyNotes component in the NotesContainer component only when the notes state array is empty:

Open up the NotesContainer component and import the NoStickyNotes component:

import NoStickyNotes from "./NoStickyNotes";

Then add the following snippets below the createNote function and right above the return method:

    if (!notes.length) {
        return (
            <>
            <section className="notes-container">
                <NoStickyNotes
                    createNote={createNote}
                />
                </section>
            </>
        )
    }

We told React to render the NoStickyNotes components when the notes state array is empty. Also, notice how we pass down the createNote function as props to the NoStickyNotes component:

createNote={createNote}

If you check your browser now, you should see the NoStickyNotes component being rendered on the screen like this:

And when you click on the "Add New" Button, an empty sticky note with the defaultNoteData should be created, but nothing happens when you click on the plus icon. We will fix that in the section below.

Creating A New Sticky Note When a User Clicks on the Plus Icon

We want to be able to add more notes when a user clicks on the plus icon on any of the sticky notes. All we have to do now is to invoke the createNote function once the plus icon is clicked.

Let's open up the NoteCard component and locate this line of code inside the left-icon section:

<div className="icon"><FontAwesomeIcon icon={faPlus} /></div>

then replace it with the following snippets:

<div className="icon" onClick={props.createNote}><FontAwesomeIcon icon={faPlus} /></div>

And now, we can create as many notes as we want when we click on the plus icon:

Here's how the NoteContainer component is looking at the moment:

// NoteContainer.tsx
import NoteCard from "./NoteCard";
import { Theme, INote } from '../typings'
import { useState } from 'react';
import NoStickyNotes from "./NoStickyNotes";

const NoteContainer = () => {
    const defaultNoteData = {
        content: "",
        color: Theme.Yellow,
        id: `${Date.now()}`,
        isMaximized: false,
        isDeleteNoteConfirmationVisible: false,
        isSaved: false,
        isSaving: false,
        isError: true,
    }

    const [notes, setNotes] = useState<Array<INote>>([]);

    const createNote = () => {
        setNotes([...notes, defaultNoteData]);
        console.log(notes);
    }
    if (!notes.length) {
        return (
            <>
            <section className="notes-container">
                <NoStickyNotes
                    createNote={createNote}
                />
                </section>
            </>
        )
    }
    return (
        <>
            <section className="notes-container">
                {notes.map((note: INote) => {
                    return (
                        <NoteCard
                            createNote={createNote}
                            key={note.id}
                            id={note.id}
                            color={note.color}
                            isMaximized={note.isMaximized}
                            contents={note.content}
                            isSaved={note.isSaved}
                            isSaving={note.isSaving}
                            isError={note.isError}
                        />
                    )
                })}
            </section>

        </>
    )
}

export default NoteContainer

And the NoteCard component should be looking like this:

// NoteCard component
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus, faWindowMaximize, faTrash, faSave, faExclamationTriangle, faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons'
import { INoteCardProps } from '../typings'

const NoteCard: React.FC<INoteCardProps> = (props) => {
    return (
        <>
            <div className="card">
                <div className="card-header">
                    <div className="icon-container">
                        <div className="left-icon">
                        <div className="icon" onClick={props.createNote}><FontAwesomeIcon icon={faPlus} /></div>
                            <div className="icon" ><FontAwesomeIcon icon={faExclamationTriangle} /></div>
                            <div className="icon" > <FontAwesomeIcon icon={faCheck} /></div>
                            <div className="icon" > <FontAwesomeIcon icon={faSpinner} spin /></div>
                        </div>
                        <div className="right-icon">
                            <div className="icon"><FontAwesomeIcon icon={faSave} /></div>
                            <div className="icon"><FontAwesomeIcon icon={faWindowMaximize} /></div>
                            <div className="icon"><FontAwesomeIcon icon={faTrash} /></div>
                        </div>
                    </div>
                </div>
                <div className="card-body">
                    <div className="text-container">
                        <textarea className="text-area"></textarea>
                    </div>
                </div>
                <div className="card-footer">
                    <div className="theme-color-container">
                        <div className="theme-color yellow"> </div>
                        <div className="theme-color green"></div>
                        <div className="theme-color pink"></div>
                        <div className="theme-color purple"></div>
                        <div className="theme-color blue"></div>
                        <div className="theme-color gray"></div>
                        <div className="theme-color charcoal"></div>
                    </div>
                </div>
            </div>
        </>
    )
}
export default NoteCard

Changing the Theme Color

We already have different theme colors selected for this app. All the available colors are provided in the Themes enum we created earlier, and they can be selected at the bottom of each sticky note.

What we are going to do next is allow a user to customize each note with a different color from the list of colors provided in the Themes type. To do that, we'll create a new function called createNote, this function will receive the noteId and the note color as parameters.

Inside the NoteContainer component, let's create the changeColor function right below thecreateNote function:

    const changeColor = (noteId: string, color: Theme) => {
        const updatedNotes = notes.map((note: INote) => {
            if (note.id === noteId) {
                return {
                    ...note, color
                }
            }
            return note
        })
        setNotes(updatedNotes)
    }

The changeColor function will iterate through the notes state using the Array.map method, if any of the ids of the note object inside the notes array matches the noteId provided in the parameter, it will change the color of the note to the color provided in the parameter. The map method will always return a new array, which will be stored into the updatedNotes variable.

In the NoteCard component, add id={props.color} to the <div className="card"> element like this:

<div className = "card" id = {props.color}>

Doing this means the background color in the id will be used instead of the background color in the class name. Remember Specificity in CSS, id selectors are given higher priority over class selectors.

Replace the following lines of code:

                <div className="card-footer">
                    <div className="theme-color-container">
                        <div className="theme-color yellow"> </div>
                        <div className="theme-color green"></div>
                        <div className="theme-color pink"></div>
                        <div className="theme-color purple"></div>
                        <div className="theme-color blue"></div>
                        <div className="theme-color gray"></div>
                        <div className="theme-color charcoal"></div>
                    </div>
                </div>

With the following snippets:

                <div className="card-footer">
                    <div className="theme-color-container">
                        <div className="theme-color yellow" onClick={() => props.changeColor(props.id, Theme.Yellow)} > </div>
                        <div className="theme-color green" onClick={() => props.changeColor(props.id, Theme.Green)}></div>
                        <div className="theme-color pink" onClick={() => props.changeColor(props.id, Theme.Pink)}></div>
                        <div className="theme-color purple" onClick={() => props.changeColor(props.id, Theme.Purple)}></div>
                        <div className="theme-color blue" onClick={() => props.changeColor(props.id, Theme.Blue)}></div>
                        <div className="theme-color gray" onClick={() => props.changeColor(props.id, Theme.Gray)}></div>
                        <div className="theme-color charcoal" onClick={() => props.changeColor(props.id, Theme.Charcoal)}></div>
                    </div>
                </div>

So anytime a user clicks on any color on the sticky note, it calls the changeColor function with the id and color of the note selected as arguments.

Update the import from the typing file in the NoteCard component to include the Theme like so:

import { INoteCardProps, Theme } from '../typings'

After that, update the INoteCardProps by adding changeColor(id:string, color:Theme): void; to it:

export interface INoteCardProps {
    createNote(): void;
    id:string;
    color:string;
    isMaximized:boolean;
    contents: string;
    isSaved: boolean;
    isSaving: boolean;
    isError: boolean;
    changeColor(id:string, color:Theme): void;
}

In the NoteContainer, let's pass down the changeColor function as props to the NoteCard component by adding changeColor={changeColor} to it so everything looks like this:

<section className="notes-container">
                {notes.map((note: INote) => {
                    return (
                        <NoteCard
                            createNote={createNote}
                            key={note.id}
                            id={note.id}
                            color={note.color}
                            isMaximized={note.isMaximized}
                            contents ={note.content}
                            isSaved={note.isSaved}
                            isSaving={note.isSaving}
                            isError={note.isError}
                            changeColor={changeColor}
                        />
                    )
                })}
            </section>

Now you can check your browser, select any color you want, and watch your sticky note's background color change like this:

Minimizing and Maximizing a Stick Note

In this part, we will implement the feature that will allow a user to work in a distraction-free mode by maximizing a sticky note to cover the screen and minimize it when they are done.

Create a new function called toggleFullscreen below the changeColor function:

    const toggleFullscreen = (noteId: string) => {
        const updatedNotes = notes.map((note: INote) => {
            if (note.id === noteId) {
                return { ...note, isMaximized: !note.isMaximized }
            }
            return note
        })
        setNotes(updatedNotes)
    }

The toggleFullscreen function takes the noteId of the note the user wants to maximize as a parameter, then toggles its boolean value. If the isMaximized value of the selected note is true, it changes it to false and if it's false it will be changed to true. That is exactly what this line does:

return { ...note, isMaximized: !note.isMaximized }

There are two classes in the styles/global.css called card and card-maximized. The card class is the default size of every sticky note while the card-maximized class contains the styles that will maximize the sticky note card. All we have to do is switch between both classes with react anytime the minimize and maximize icon is clicked.

In the NoteCard component, let's update the following snippets:

<div className= "card" id={props.color}>

with this one:

<div className={props.isMaximized ? "card-maximized" : "card"} id={props.color}>

When a sticky note's isMaximized property is true, the card-maximized class is used; otherwise, the card class is used.

Let's make the faWindowMaximize icon call the toggleFullscreen function with the id of the note anytime it is clicked.

Update the following code:

<div className="icon"><FontAwesomeIcon icon={faWindowMaximize} /></div>

With the following snippets:

<div className="icon" onClick={() => props.toggleFullscreen(props.id)}><FontAwesomeIcon icon={faWindowMaximize} /></div>

After that, we'll update the INoteCardProps object in the typing file to include the toggleFullscreen function with the noteId as parameters:

export interface INoteCardProps {
    createNote(): void;
    id:string;
    color:string;
    isMaximized:boolean;
    contents: string;
    isSaved: boolean;
    isSaving: boolean;
    isError: boolean;
    changeColor(id:string, color:Theme): void;
    toggleFullscreen(noteId:string):void;
}

Finally, we'll pass the toggleFullscreen() function down to the NoteCard component in the NoteContainer components:

            <section className="notes-container">
                {notes.map((note: INote) => {
                    return (
                        <NoteCard
                            createNote={createNote}
                            key={note.id}
                            id={note.id}
                            color={note.color}
                            isMaximized={note.isMaximized}
                            contents ={note.content}
                            isSaved={note.isSaved}
                            isSaving={note.isSaving}
                            isError={note.isError}
                            changeColor={changeColor}
                            toggleFullscreen={toggleFullscreen}
                        />
                    )
                })}
            </section>

Anytime time a user clicks on the faWindowMaximize, the window should be minimized and maximized like this:

Deleting A Sticky Note

In this section, we will allow a user to permanently delete a sticky note. But before deleting the note, we'll display a confirmation message that will ask the user if they really want to continue with the action.

Inside the NoteContainer component, let's create a new function called toggleDeleteNoteConfirmationMessage:

    const toggleDeleteNoteConfirmationMessage = (noteId: string) => {
        const updatedNotes = notes.map((note: INote) => {
            if (note.id === noteId) {
                return { ...note, isDeleteNoteConfirmationVisible: !note.isDeleteNoteConfirmationVisible }
            }
            return note
        })
        setNotes(updatedNotes)
    }

This function will be used to toggle the visibility of the delete confirmation message on a sticky note.

Now let's create a function that can delete a note. Below the toggleDeleteNoteConfirmationMessage function, create a new function called deleteNote:

    const deleteNote = (noteId: string) => {
        const filteredNotes = notes.filter((note: INote) => {
            return note.id !== noteId;
        })
        setNotes(filteredNotes)
    }

The deleteNote function takes in the noteId as a parameter.

Right above the return statement in NoteCard component, let's add the following snippets:


    if (props.isDeleteNoteConfirmationVisible) {
        return (
            <section className="delete-note-modal" id={props.color}>
                <h3>This note will be permanently deleted, continue?</h3>
                <div>
                    <button onClick={() => props.deleteNote(props.id)}> Yes </button>
                    <button onClick={() => props.toggleDeleteNoteConfirmationMessage(props.id)}> No</button>
                </div>
            </section>
        )
    }

Update the INoteCardProps object in the typing file to include the isDeleteNoteConfirmationVisible boolean, toggleDeleteNoteModal, and toggleDeleteNoteConfirmationMessagefunction:

export interface INoteCardProps {
    createNote(): void;
    id:string;
    color:string;
    isMaximized:boolean;
    contents: string;
    isSaved: boolean;
    isSaving: boolean;
    isError: boolean;
    changeColor(id:string, color:Theme): void;
    toggleFullscreen(noteId:string):void;
    isDeleteNoteConfirmationVisible:boolean,
    toggleDeleteNoteConfirmationMessage(id:string):void;
    deleteNote(id:string):void;
}

Next, we need to call the toggleDeleteNoteConfirmationMessage function once a user clicks on the faTrash icon.

Update the following line of code:

  <div className="icon"><FontAwesomeIcon icon={faTrash} /></div>

With this:

<div className="icon" onClick={()=>props.toggleDeleteNoteConfirmationMessage(props.id)}><FontAwesomeIcon icon={faTrash} /></div>

Now we can pass down the isDeleteNoteConfirmationVisible , toggleDeleteNoteConfirmationMessage , and deleteNote function as props to the NoteCard component like this:

<section className="notes-container">
                {notes.map((note: INote) => {
                    return (
                        <NoteCard
                            createNote={createNote}
                            key={note.id}
                            id={note.id}
                            color={note.color}
                            isMaximized={note.isMaximized}
                            contents ={note.content}
                            isSaved={note.isSaved}
                            isSaving={note.isSaving}
                            isError={note.isError}
                            changeColor={changeColor}
                            toggleFullscreen={toggleFullscreen}
                            isDeleteNoteConfirmationVisible={note.isDeleteNoteConfirmationVisible}
                            toggleDeleteNoteConfirmationMessage = {toggleDeleteNoteConfirmationMessage}
                            deleteNote = {deleteNote}

                        />
                    )
                })}
            </section>

When you visit your browser and click on the trash icon on a sticky note, you should see a confirmation message with Yes and No buttons. When you click on the yes button, the note should be permanently deleted but when the No is clicked the confirmation message will be removed and your note will not be touched.

Summary and Next Step

In this section, we built the frontend aspect of this project using React and TypeScript . We implemented features that allow a user to create a new sticky note, delete it, minimize and maximize it, and change the background of each note.

We used Date.now() to generate a temporary id that will be used to uniquely identify a sticky note that the user is interacting with.

In the next part of this tutorial, we will build the GraphQL server for this app using Apollo Server 4. We will also add some authentication and authorization to the app.

Deepgram Word Solver - An anagram game that involves rearranging letter

Temitope — Mon, 11 Apr 2022 22:18:40 +0000

—

Overview of My Submission

Deepgram Word Solver, is an endless letter re-arrangement game built with Deepgram and React and NextJS. The goal is to form words out of given letters.

How it works?

The players will record their answers by holding the record button and releasing it to submit.

The recorded answer is then sent to a serverless function at the backend where Deepgram is allowed to perform its magic by transcribing the recorded answer into text. The text is now compared to the lists of anagrams.

Submission Category:

Gram Gamers

Link to Code on GitHub

tope-olajide / deepgram-word-solver

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from…

View on GitHub

Additional Resources / Info

—

Learn React Hook by building a Simple Blog App

Temitope — Thu, 16 Apr 2020 01:26:23 +0000

What is React?

React is a popular JavaScript library developed by Facebook for building user interfaces. It uses the concept of Virtual DOM to render Elements into the browser DOM because it is a popular belief that manipulating the browser DOM directly can be very slow and costly.

React developers often manipulate the virtual DOM and let React take care of updating the Browser DOM.

One of the biggest advantages of using React is the reusability of code. Components can be easily reused throughout an application or even across different applications, saving time and effort for developers.
This is especially helpful in large projects where there may be a lot of repetitive code. Additionally, React's modular architecture allows for easier testing and debugging, which can further speed up the development process.

Hooks in React

Hooks are functions that let you “hook into” React state and lifecycle features from function components.
Before the arrival of Hook, state and React lifecycles can only be used in a class component. Starting from version 16.8, React rolled out a lot of features that enable developers to hook into a React state without having to write a single class component.

Hooks provide a way for developers to manage state and other React features without needing to convert their functional components to class components. They also make it easier to reuse stateful logic across different components, as the logic can be encapsulated in a custom hook.

What we’re building

We are building a simple frontend CRUD blog app where a user can create a post, read the post, update post, and delete the post without making any API request to the server. You can view the final project here: https://react-simple-blog.now.sh or download the source code here: https://github.com/tope-olajide/react-simple-blog

The Setup

To follow up with this tutorial and get the app running, we are going to download and install the latest version of Node.js. (I am currently using version 12.13.1 for this tutorial)
Next, you'll launch your Command-Line Interface, install React and create a new project by running the following command:

npx create-react-app react-simple-blog

The above command will create a new directory called react-simple-blog and install React and its dependencies on it.

To make sure React is working, launch your CLI, navigate to the react-simple-blog folder (or whatever you chose to name the folder) and run :
npm start to start your React development server.
Once the server is running, React will automatically launch your browser and navigate to http://localhost:3000/ in it, which is the default homepage for our React app. If all goes well, you should see the create-react-app splash screen that looks like this:

Modify the `App.js` file

Let's update the App.js to display a welcoming message instead of the default flash screen.
Navigate to react-simple-blog/src on your computer, then
open the App.js file in your editor, and replace everything in it with the following code:

import React from "react";

const App = ( ) => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
};
export default App;

Here, we modified the App component to display Hello World. Your browser should automatically refresh and display a similar output like this:

The first line imports React from the node-modules. In the third line, we created a functional component called App, using the JavaScript fat arrow function.
Then we render the following JSX elements:

 return (
    <div>
      <h1>Hello World</h1>
    </div>
  );

In the last line, we exported the App component so that it can be used later.

What is JSX?

JSX stands for JavaScript Syntax Extension. It has a familiar syntax with plain HTML and it can also be used directly in your JavaScript file but no browser can read it without transpiling it first. JSX can be transpiled into JavaScript code by using a preprocessor build-tool like babel.
Babel has already been pre-installed with create-React-app, so you don't have to be worried about configuring the app to transform your JSX code into javascript.
You can read more about JSX here

Navigate to React-simple-blog/src and open the index.js file in your editor. This file serves as the starting point of the application and it is responsible for rendering the main component, which is the "App" component, to the root element located in the public/index.html file.
In the index.js file, the App component is imported on line 4 and then rendered to the browser using the React.render method on line 7. This means that when the user loads the webpage, the App component will be displayed inside the root div. This is how React components are rendered to the browser - by being inserted into the DOM through the "React.render" method.

Next, we are going to delete some files we are not using but came bundled with create-React-app. Navigate to react-simple-blog/src and delete the following files:
App.css,
App.test.js,
index.css,
logo.svg, and
setupTests.js

After that, open your index.js file and delete the third line:

Since we have removed the index.css file, there is no reason to import it again in the index.js, else we might end up with a "failed to compile" error.
By now, you should have just 3 files left in the src folder (i.e App.js, index.js and serviceWorker.js).

Let's create a new folder called Components inside the src folder. This folder will be used to store the remaining components we'll be building for this app:
react-simple-blog/src/Components.

Inside the Components folder, create a new file called CreateNewPost.jsx. From its name, you can easily guess what this new file will be used for.
Let us add the following code into the newly CreateNewPost.jsx file:

import React from "react";
const CreateNewPost = () => {
  return (
    <>
<form>
      <h1>Create New Post</h1>
      <input type ="text" placeHolder="title" size="39" required></input>
      <br />
      <br />
      <textarea placeHolder="contents" rows="8" cols="41"required></textarea>
      <br />
      <br />
      <button>Save Post</button>
</form>
    </>
  );
};
export default CreateNewPost;

If you have been following up with this tutorial from the beginning and you're familiar with HTML, there should be nothing strange to you here except for this opening and closing empty tag: <> </> which is a short syntax for <React.Fragment> </React.Fragment>. Using fragments instead of <div></div> is a little bit faster and has less memory usage. All we did here was create a new form that will be used to collect the user's input.

Also, it is good to know that React component name starts with an uppercase letter because this is how React distinguishes components from regular HTML elements or other functions.
By convention, only components that start with a capital letter are considered to be React components, while lower-case elements are assumed to be standard HTML elements.

To display the CreateNewPost component, we need to import it first in into the App component and render it.
To do that, open up the App.js and add the following code below the import React statement:

import CreateNewPost from './components/CreateNewPost'
To render CreateNewPost component, we'll replace

<h1>Hello World </h1>.

with

<CreateNewPost />

So the App component looks like this:

import React from "react";

import CreateNewPost from './Components/CreateNewPost'
const App = ( ) => {
  return (
    <div>
      <CreateNewPost />
    </div>
  );
};
export default App;

You may refresh your browser if React hasn't done so.

If everything went right, you should see an output that looks almost the same as this one:

We are not adding any CSS for now. Everything styling will be done towards the end of this app.

The 'Save Post' button does nothing for now, we'll add some functionalities to it once we're done with creating all the necessary components.

Our next task is to create the Post component, which will be responsible for displaying each individual post. If you are finding the concept of multiple components confusing, don't worry. As you see these components working together, everything will become clearer.

Let's create a new file inside the Components folder called Post.jsx and add the following code:


import React from 'react';

const Post = () => {
    return (
    <>
    <section>
    <h3>Post title will appear here</h3>
    <p> Post contents will appear here</p>
    <button>Edit</button>
    <button>Delete</button>
    </section>
    </>
    )
}
export default Post

In the code above, we import the React library, which is a prerequisite for writing React code. We then define the Post component as a function using arrow function syntax.

Inside the function, we use JSX to create a section element with a title and content of a blog post, as well as two buttons for editing and deleting the post.

These buttons are not working for now, we'll make them work later once we're done with building the remaining components.
To display the Post component, navigate to the App.js file and update it with the following code:

import React from "react";
import Posts from './Components/Post'
const App = ( ) => {
  return (
    <>
      <Posts />
    </>
  );
};
export default App;

After refreshing your browser, you should have a typical output that looks like this:

Next, you will create a new component named ModifyPost, which will be used for modifying a selected post. As the name suggests, this component will be used to modify the post, and we want it to be rendered by React only when a user clicks the Edit button. To create this component, navigate to the Components directory and create a new file called ModifyPost.jsx.

Then add the following code to the ModifyPost.jsx file:

import React from "react";
const ModifyPost = () => {
  return (
    <>
      <form>
        <h1>Modify Post</h1>
        <input type="text" placeholder="title" size="39" required></input>
        <br />
        <br />
        <textarea placeholder="contents" rows="8" cols="41" required></textarea>
        <br />
        <br />
        <button>Update Post</button>
      </form>
    </>
  );
};
export default ModifyPost;

Create the `DisplayAllPosts` component

The final component we will be creating for this tutorial is the DisplayAllPosts component.
This component will serve as a parent component to CreatePost, ModifyPost, and Post.

Navigate to the Components directory and create a new file called DisplayAllPosts.jsx, then add the following code to it:

import React from 'React';
import CreateNewPost from './CreateNewPost'
const DisplayAllPosts = () => {
    return (
    <>
    <CreateNewPost />
    </>
    )
}
export default DisplayAllPosts

Here, we created a new component called DisplayAllPost and rendered the CreateNewPost component inside it.

Now that we have finished building the components, it's time to bring them to life. As mentioned earlier, we intentionally did not add CSS to all the components at this stage, as the styling will be implemented once all the functionalities of this app are completed.

The next step is to capture user input as they type into the text field and directly save it into the component state variable. To do this, we'll be using the first React hook in this tutorial called useState.

State in React

In React, state is means an object that stores information about how a component works. It is important in React and helps to handle the changing parts of a user interface. The component keeps track of the state object, and you can change it using the setState() method.

Here are a few key points to keep in mind about state in React:

States in React are changeable and dynamic, meaning they can be updated throughout the lifecycle of a component.
A state holds information about the component it was declared in, and the component that declares a state is the owner of that state. No other components can directly access or modify it.
When the state of a component changes, the component will re-render itself, updating the corresponding elements in the DOM to reflect the new state. This makes it an efficient way to manage dynamic data and user input in React applications.

When we declare a state variable with useState, it returns an array with two items. The first item is the current value(state), and the second item is its updater function(setState) that is used to update the state. The array items returned from the useState function are destructured into state and setState variables respectively.

Having gained a brief understanding of the useState concept, let's modify the DisplayAllPosts component in the following ways:

import React, {useState} from 'React';
import CreateNewPost from './CreateNewPost'
const DisplayAllPosts = () => {
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const savePostTitleToState = event => {
  setTitle(event.target.value);
  console.log(title)
};
const savePostContentToState = event => {
  setContent(event.target.value);
  console.log(content)
};
    return (
    <>
    <CreateNewPost 
    savePostTitleToState = {savePostTitleToState}
    savePostContentToState = {savePostContentToState}
    />
    </>
    )
}
export default DisplayAllPosts

Here, two state variables, title and content, are created using the useState hook along with their corresponding updater functions, setTitle and setContent. Two functions, savePostTitleToState and savePostContentToState, are also defined to save user input values into the corresponding state variables. console.log() statements are added to these functions to view the input value as the user types.
Finally, the two functions are passed as props to the CreateNewPost component using the props keyword. Props are used to pass data, including functions and state, from a parent component, DisplayAllPosts in this case, to its child components, such as CreateNewPost.

The next step involves passing down the props data from the parent component, DisplayAllPosts, to its child component, CreateNewPost.

Open the CreateNewPost component and update the component to look like this:

import React from "react";
const CreateNewPost = props => {
  return (
    <>
      <form>
        <h1>Create New Post</h1>
        <input
          type="text"
          onChange={props.savePostTitleToState}
          placeholder="title"
          size="39"
          required
        ></input>
        <br />
        <br />
        <textarea
          onChange={props.savePostContentToState}
          placeholder="contents"
          rows="8"
          cols="41"
        required
        ></textarea>
        <br />
        <br />
        <button>Save Post</button>
      </form>
    </>
  );
};
export default CreateNewPost;

To see the changes you have made, refresh your browser and open your browser console (press ctrl+shift+i if you are using Chrome) to view the captured data. Enter some text in the input fields and if everything works correctly, you should see a similar output like this:

We will now move on to the next step, which involves saving the post title and content captured from the user into a new state variable called allPosts. This will be done by handling the onClick event of the Save Post button.

In the DisplayAllPosts.jsx file, create a new state called allPost:

const [allPosts, setAllPosts] = useState([]);

After that, we'll create a new function called savePost:

const savePost = () => {
    const id = Date.now();
    setAllPost([...allPost, {title, content, id}]);
    console.log(allPost);
  };

The savePost() function will be used to save the current post's title and content into the allPost state variable. The function first generates a unique ID using the Date.now() method and then uses the setAllPost() function, which is provided by the useState() hook, to add a new post to the allPost array. The new post is an object with title, content, and id properties that are set to the values of the title, content, and id variables, respectively. Finally, the function logs the allPost array to the console to show the new post has been added.

Let's update the savePost function to reset the title and content once the post has been added to the allPost array:

const savePost = () => {
    setAllPost([...allPost, { title, content }]);
    setTitle("");
    setContent("");
    console.log(allPost);
  };

Clearing the input field with `useRef`

We need to make sure a user can easily create a new post without having to manually delete the old content from the input fields. Clearing the state value will not affect the input field value on the DOM. To locate the input fields on the DOM and clear their value, we are going to use another React hook called useRef.

In React, the useRef hook creates a reference to a specific element or value in a component. This creates an object that can be updated without causing a re-render. With this hook, you can access and manipulate the properties of HTML elements like buttons or input fields, or store and access previous values of a component's props or state.

We are going to import useRef by updating the React import statement like this:

import React, { useState, useRef } from "react";

Next, we will initialize the useRef:

  const getTitle = useRef();
  const getContent = useRef();

Then pass down the refs to CreateNewPost component as props:

      <CreateNewPost
        savePostTitleToState={savePostTitleToState}
        savePostContentToState={savePostContentToState}
        getTitle={getTitle}
        getContent={getContent}
      />

After that, we'll navigate to the CreateNewPost.jsx and make it use the new props data we passed down to it.

The CreateNewPost component should be looking like this:

import React from "react";
const CreateNewPost = props => {
  return (
    <>
      <form>
        <h1>Create New Post</h1>
        <input
          type="text"
          onChange={props.savePostTitleToState}
          placeholder="title"
          size="39"
          required
          ref={props.getTitle}
        ></input>
        <br />
        <br />
        <textarea
          onChange={props.savePostContentToState}
          placeholder="contents"
          rows="8"
          cols="41"
         required
          ref={props.getContent}
        ></textarea>
        <br />
        <br />
        <button>Save Post</button>
      </form>
    </>
  );
};
export default CreateNewPost;

The ref attribute is used to get the value of the input and textarea fields, and the functions getTitle and getContent passed in as props are used to set the value of the ref.

Open the DisplayAllPosts.jsx file and update the savePost function to look like this:

const savePost = (event) => {
    event.preventDefault();
    setAllPosts([...allPosts, {title, content}]);
    console.log(allPosts);
    getTitle.current.value = "";
    getContent.current.value = "";
  };

We used the event.preventDefault() to prevent the default refreshing behaviour of HTML form when a user clicks on the submit button.

The fourth and fifth lines of the function are used to clear the input fields by setting the value of the getTitle and getContent refs to an empty string.

To use the savePost function, we'll pass it down as props to the CreateNewPost component. Let's update the return statement in DisplayAllPosts.jsx file:

  return (
    <>
      <CreateNewPost
        savePostTitleToState={savePostTitleToState}
        savePostContentToState={savePostContentToState}
        getTitle={getTitle}
        getContent={getContent}
        savePost={savePost}
      />
    </>
  );

Open the CreateNewPost component and make it use the savePost function we passed down to it like this:

import React from "react";
const CreateNewPost = props => {
  return (
    <>
      <form onSubmit={props.savePost}>
        <h1>Create New Post</h1>
        <input
          type="text"
          onChange={props.savePostTitleToState}
          placeholder="title"
          size="39"
          required
          ref={props.getTitle}
        ></input>
        <br />
        <br />
        <textarea
          onChange={props.savePostContentToState}
          placeholder="contents"
          rows="8"
          cols="41"
          required
          ref={props.getContent}
        ></textarea>
        <br />
        <br />
        <button>Save Post</button>
      </form>
    </>
  );
};
export default CreateNewPost;

Each time a user submits a post by clicking on the Save Post button, the onSubmit() event will trigger the savePost function we created earlier.

The DisplayAllPosts component should be looking like this:

import React, { useState, useRef } from "react";
import CreateNewPost from "./CreateNewPost";
const DisplayAllPosts = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [allPosts, setAllPosts] = useState([]);
  // Initialize useRef
  const getTitle = useRef();
  const getContent = useRef();

  const savePostTitleToState = event => {
    setTitle(event.target.value);
  };
  const savePostContentToState = event => {
    setContent(event.target.value);
  };

  const savePost = event => {
    event.preventDefault();
    setAllPosts([...allPosts, { title, content }]);
    console.log(allPosts);
    getTitle.current.value = "";
    getContent.current.value = "";
  };

  return (
    <>
      <CreateNewPost
        savePostTitleToState={savePostTitleToState}
        savePostContentToState={savePostContentToState}
        getTitle={getTitle}
        getContent={getContent}
        savePost={savePost}
      />
    </>
  );
};
export default DisplayAllPosts;

You can refresh the browser now and launch the browser console to see if the captured data is being saved correctly into the AllPosts state variable.

You should have a similar output that looks like this:

Now that the post data has been captured successfully, it's time to display them in the DisplayAllPost component. But before then, let's render the CreateNewPost component only when a user clicks on the Add New button and remove the component immediately the user clicks on the Save Post button. To do that, let's update the DisplayAllPost component to look like this:

import React, { useState, useRef } from "react";
import CreateNewPost from "./CreateNewPost";
const DisplayAllPosts = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [allPosts, setAllPosts] = useState([]);
  const [isCreateNewPost, setIsCreateNewPost] = useState(false);
  // Initialize useRef
  const getTitle = useRef();
  const getContent = useRef();

  const savePostTitleToState = event => {
    setTitle(event.target.value);
  };
  const savePostContentToState = event => {
    setContent(event.target.value);
  };
const toggleCreateNewPost =()=>{
    setIsCreateNewPost(!isCreateNewPost)
}
  const savePost = event => {
    event.preventDefault();
    const id = Date.now();
    setAllPosts([...allPosts, { title, content, id }]);
    console.log(allPosts);
    getTitle.current.value = "";
    getContent.current.value = "";
    toggleCreateNewPost()
  };
if(isCreateNewPost){
      return (
    <>
      <CreateNewPost
        savePostTitleToState={savePostTitleToState}
        savePostContentToState={savePostContentToState}
        getTitle={getTitle}
        getContent={getContent}
        savePost={savePost}
      />
    </>
  );
}
return (
    <>
    <h2>All Posts</h2>
    <br/>
    <br/>
    <button onClick={toggleCreateNewPost}>Create New</button>
    </>
)
};
export default DisplayAllPosts;

We created a new state variable called isCreateNewPost and we initialized it with a boolean value, false.
Then we created another function called toggleCreateNewpost, this function will make the isCreateNewPost state variable to swicth between true and false. If the previous state value of isCreateNewPost is true, toggleCreateNewpost will change it to false otherwise, true.

We added a new button called Create New. This button will call the toggleCreateNewpost function once it is invoked. Finally, we created a conditional statement that only renders the CreateNewPost component if the isCreateNewPost boolean value is true.

This process of rendering a component only when a condition is met is called Conditional Rendering in React.

After refreshing the browser, you can preview your changes. The output you see should be nearly identical to this one:

When you click on the Create New button, it should render the CreateNewPost component like so:

When you enter the post title and contents and click on the Save Post button, it should save them and render back the DisplayAllPosts component, but the post will not be displayed yet.
To display all the posts, we need to modify the Post component to receive the props that will be passed down to it from its parent component, DisplayAllPosts.

Open thePost.jsx and modify it to look like this:

import React from 'react';

const Post = (props) => {
    return (
    <>
    <section>
    <h3>{props.title}</h3>
    <p> {props.content}</p>
    <button>Edit</button>
    <button>Delete</button>
    </section>
    </>
    )
}
export default Post

Now that we are done with the Post component, let's modify the DisplayAllPosts to look like this:

import React, { useState, useRef } from "react";
import CreateNewPost from "./CreateNewPost";
import Post from "./Post";
const DisplayAllPosts = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [allPosts, setAllPosts] = useState([]);
  const [isCreateNewPost, setIsCreateNewPost] = useState(false);

  // Initialize useRef
  const getTitle = useRef();
  const getContent = useRef();

  const savePostTitleToState = event => {
    setTitle(event.target.value);
    console.log(title)
  };
  const savePostContentToState = event => {
    setContent(event.target.value);
    console.log(content)
  };
  const toggleCreateNewPost = () => {
    setIsCreateNewPost(!isCreateNewPost);
  };

  const savePost = event => {
    event.preventDefault();
    setAllPosts([...allPosts, { title, content }]);
    console.log(allPosts);
    getTitle.current.value = "";
    getContent.current.value = "";
    toggleCreateNewPost();
  };
  if (isCreateNewPost) {
    return (
      <>
        <CreateNewPost
          savePostTitleToState={savePostTitleToState}
          savePostContentToState={savePostContentToState}
          getTitle={getTitle}
          getContent={getContent}
          savePost={savePost}
        />
      </>
    );
  }

  return (
<>
      <h2>All Posts</h2>
      {!allPosts.length ? (
        <div>
          <h3>There is nothing to see here!</h3>
        </div>
      ) : (
        allPosts.map(eachPost => {
          return (
            <Post
              id={eachPost.id}
              key={eachPost.id}
              title={eachPost.title}
              content={eachPost.content}
            />
          );
        })
      )}

      <br />
      <br />
      <button onClick={toggleCreateNewPost}>Create New</button>
    </>
  );
};
export default DisplayAllPosts;

Here the DisplayAllPosts component has been modified to display the post data. If the allPosts array is empty it is going to display There is nothing to see here! on the screen else it is going to use the array.map() method to loop through the allPosts array data and pass down each post id, key, title and content as props to the Post component.
Refresh your browser, click on the Add New button, enter some value into the title and contents field and click on save.
If everything goes well, you should have a similar output that looks like this:

You can click on the Create New button to add more posts and see all the posts being rendered to the screen.

So far, we are done with the C and R (Create and Read) feature of our CRUD app. The next feature we are going to implement now is the Update feature.

This feature will enable the user to modify a selected post once the Edit button is clicked.

Open the DisplayAllPosts.js and create a new state called isModifyPost below the isCreateNewPost state:

const [isModifyPost, setIsModifyPost] = useState(false);

We will use this state to render the ModifyPost component once isModifyPost boolean value is true.

Next, we'll to create another function called toggleModifyPostComponent just below the toggleCreateNewPost function:

  const toggleModifyPostComponent = () => {
    setIsModifyPost(!isModifyPost)
  }

This function switches the value of the isModifyPost variable between true and false. If the previous value of the variable is false, it changes it to true, and if the previous value is true, it changes it to false.

Let's create another state called editPostId, below the isModifyPost state:

const [editPostId, setEditPostId] = useState("");

This state variable will be used to save the id of the post that a user wants to modify.

After that, you will create another function called editPost below the toggleModifyPostComponent function:

  const editPost = id => {
    setEditPostId(id);
    toggleModifyPostComponent();
  };

This function will be passed down to the Post component and get called from inside the Post component with the id of the post that the user clicks on as its parameter. The setEditPostId function will save the post id into editPostId state, while the toggleModifyPost function will render or remove the ModifyPost component depending on the isModifyPost state boolean value.

We are saving the id of the post that a user wants to modify into the editPostId state variable because we want the updatePost function to have access to it.

Now, we will create a new function called updatePost. This function will be used to update the modified post:\

  const updatePost = (event) => {
    event.preventDefault();
    const updatedPost = allPosts.map(eachPost => {
      if (eachPost.id === editPostId) {
        return {
          ...eachPost,
          title: title || eachPost.title,
          content: content || eachPost.content
        };
      }
      return eachPost;
    });
    setAllPosts(updatedPost);
    toggleModifyPostComponent();
  };

In this code, we used the map() method to loop through each post in the allPosts component to locate the post that the user wants to edit, based on the post id stored in the editPostId state variable. Then, we used the rest syntax (...) to modify only the title and content of the post, while keeping the id of the post unchanged. To prevent empty values from being saved when the user updates a post without making changes, we used the OR operator (||) to save the previous post title and content.

The next thing we need to do now is to render the ModifyPost component if the isModifyPost state variable is true.

In the DisplayAllPost.jsx, let's add the following code below the
if (isCreateNewPost){...}
statement:

  else if (isModifyPost) {
    const post = allPosts.find(post => {
      return post.id === editPostId;
    });
    return (
      <ModifyPost
        title={post.title}
        content={post.content}
        updatePost={updatePost}
        savePostTitleToState={savePostTitleToState}
        savePostContentToState={savePostContentToState}
      />
    );
  }

What we are tryig to achieve here is to preload the input fields in the ModifyPost component with the data of the selected post.
We also passed down the updatePost, saveTitleToState, savePostContentToState function to the ModifyPost component respectively. We have used saveTitleToState and savePostContentToState before in the CreateNewPost component to save user input value to the state variable.

Now we are going to use the props that was passed to the ModifyPost component. Open the ModifyPost.jsx and update its code to look like this:

import React from "react";
const ModifyPost = props => {
  return (
    <>
      <form>
        <h1>Modify Post</h1>
        <input
          defaultValue={props.title}
          onChange={props.savePostTitleToState}
          text
          placeholder="title"
          size="39"
        ></input>
        <br />
        <br />
        <textarea
          defaultValue={props.content}
          placeholder="contents"
          onChange={props.savePostContentToState}
          rows="8"
          cols="41"
        ></textarea>
        <br />
        <br />
        <button onClick ={props.updatePost}>Update Post</button>
      </form>
    </>
  );
};
export default ModifyPost;

We set the default value of the inputs field that will be rendered to the user with the post title and content that was passed down to this component. We also set the submit button with an onClick event which will call the updatePost function that was passed down to the ModifyPost component.
One more thing before we test the ModifyPost component, we will trigger the ModifyPost component once a user clicks on the edit button. Let's pass down the editPost function to the Post component from DisplayAllPosts component.

Let's modify the DisplayAllPosts component to render the Post component like this:

return (
    <>
      <h2>All Posts</h2>
      {!allPosts.length ? (
        <div>
          <h3>There is nothing to see here!</h3>
        </div>
      ) : (
        allPosts.map(eachPost => {
          return (
            <Post
              id={eachPost.id}
              key={eachPost.id}
              title={eachPost.title}
              content={eachPost.content}
              editPost={editPost}
            />
          );
        })
      )}
      <br />
      <br />
      <button onClick={toggleCreateNewPost}>Create New</button>
    </>
  );

Now we are going to update the Post component to use the editPost function that was passed to it.

The Post Component should be looking like this:

import React from 'react';

import React from "react";

const Post = ({ title, content, editPost, id }) => {
  return (
    <>
      <section>
        <h3>{title}</h3>
        <p> {content}</p>
        <button onClick={() => editPost(id)}>Edit</button>
        <button>Delete</button>
      </section>
    </>
  );
};
export default Post;

Before running the app, let's compare the DisplayAllPost.jsx file and make sure it looks like this:

import React, { useState, useRef } from "react";
import CreateNewPost from "./CreateNewPost";
import Post from "./Post";
import ModifyPost from "./ModifyPost"
const DisplayAllPosts = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [allPosts, setAllPosts] = useState([]);
  const [isCreateNewPost, setIsCreateNewPost] = useState(false);
  const [isModifyPost, setIsModifyPost] = useState(false);
  const [editPostId, setEditPostId] = useState("");

  // Initialize useRef
  const getTitle = useRef();
  const getContent = useRef();

  const savePostTitleToState = event => {
    setTitle(event.target.value);
  };
  const savePostContentToState = event => {
    setContent(event.target.value);
  };
  const toggleCreateNewPost = () => {
    setIsCreateNewPost(!isCreateNewPost);
  };
  const toggleModifyPostComponent = () => {
    setIsModifyPost(!isModifyPost)
  }
  const editPost = id => {
    setEditPostId(id);
    console.log(id)
    toggleModifyPostComponent();
  };
  const updatePost = (event) => {
    event.preventDefault();
    const updatedPost = allPosts.map(eachPost => {
      if (eachPost.id === editPostId) {
        console.log([eachPost.id, editPostId] )
        return {
          ...eachPost,
          title: title || eachPost.title,
          content: content || eachPost.content
        };
      }
      console.log(eachPost)
      return eachPost;
    });
    setAllPosts(updatedPost);
    toggleModifyPostComponent();
  };
  const savePost = event => {
    event.preventDefault();
    const id = Date.now();
    setAllPosts([...allPosts, { title, content, id }]);
    console.log(allPosts);
    setTitle("");
    setContent("");
    getTitle.current.value = "";
    getContent.current.value = "";
    toggleCreateNewPost();

  };
  if (isCreateNewPost) {
    return (
      <>
        <CreateNewPost
          savePostTitleToState={savePostTitleToState}
          savePostContentToState={savePostContentToState}
          getTitle={getTitle}
          getContent={getContent}
          savePost={savePost}
        />
      </>
    );
  }
  else if (isModifyPost) {
    const post = allPosts.find(post => {
      return post.id === editPostId;
    });
    return (
      <ModifyPost
        title={post.title}
        content={post.content}
        updatePost={updatePost}
        savePostTitleToState={savePostTitleToState}
        savePostContentToState={savePostContentToState}
      />
    );
  }
  return (
    <>
      <h2>All Posts</h2>
      {!allPosts.length ? (
        <div>
          <h3>There is nothing to see here!</h3>
        </div>
      ) : (
        allPosts.map(eachPost => {
          return (
            <Post
              id={eachPost.id}
              key={eachPost.id}
              title={eachPost.title}
              content={eachPost.content}
              editPost={editPost}
            />
          );
        })
      )}
      <br />
      <br />
      <button onClick={toggleCreateNewPost}>Create New</button>
    </>
  );
};
export default DisplayAllPosts;

Now we can refresh the browser to view the changes

Finally, we will to implement the last and probably the easiest feature of our CRUD app, the Delete feature.

This feature will enable a user to remove a specific post once they click on the delete button.

Open the DisplayAllPosts.jsx file and create a deletePost function below editPost function:

  const deletePost = id => {
    const modifiedPost = allPosts.filter(eachPost => {
      return eachPost.id !== id;
    });
    setAllPosts(modifiedPost);
  };

The deletePost function takes in the id of the post that a user wants to remove as its parameter. We used one of the JavaScript array methods called filter() to remove the post that matches the id.

Next we are going to pass down the deletePost function from the DisplayAllPosts component to the Post component.

To do that, we are going update the Post component we imported in DisplayAllPost.jsx by adding deletePost={deletePost} to the child component like so:

          return (
    <>
      <h2>All Posts</h2>
      {!allPosts.length ? (
        <div>
          <h3>There is nothing to see here!</h3>
        </div>
      ) : (
        allPosts.map(eachPost => {
          return (
            <Post
              id={eachPost.id}
              key={eachPost.id}
              title={eachPost.title}
              content={eachPost.content}
              editPost={editPost}
              deletePost={deletePost}
            />
          );
        })
      )}
      <br />
      <br />
      <button onClick={toggleCreateNewPost}>Create New</button>
    </>
  );

Finally, we will make use of the deletePost function we passed down to Post component by launching the Post.jsx file and updating it to look like this:

import React from "react";

const Post = ({ title, content, editPost, id, deletePost }) => {
  return (
    <>
      <section>
        <h3>{title}</h3>
        <p> {content}</p>
        <button onClick={() => editPost(id)}>Edit</button>
        <button onClick={() => deletePost(id)}>Delete</button>
      </section>
    </>
  );
};
export default Post;

When a user click on the Delete button, it will invoke the deletePost function we passed down to Post component with the id of the current post.

If all goes well we should have a similar output that looks like this:

Summary

This tutorial showed us how to create a basic blog frontend using React without making any API requests to a backend server. We didn't need to rely on a server to provide the data to our application, instead, we used React to create and manage our data. We also learned how to manipulate the state by performing CRUD (Create, Read, Update, Delete) operations on the state data. By doing so, we were able to add, read, update, and delete posts from our blog application.

We also used conditional rendering in our application to switch between two components. Conditional rendering allowed us to only display a specific component when a particular condition is met. This way, we could show or hide certain parts of our application based on user interactions or other factors. Overall, this tutorial provided a foundation for creating more complex React applications and using its features to manage data and manipulate the user interface.

Thanks for reading. The full code used in this tutorial can be found here: https://github.com/tope-olajide/react-simple-blog.

If you enjoy my post, please share it with others and give it some emojis so people can see it.

DEV Community: Temitope

Build the Product. Let AI Launch It: Creating VividLaunch for the Gemini Live Agent Challenge

The Vibe Coding Era: Why Building Apps Is Easy but Launching Them Is Hard

Introducing VividLaunch: The AI Creative Director for Product Launches

Why I Built VividLaunch for the Gemini Live Agent Challenge

Designing an AI Creative Director with Gemini

The Multi-Agent Architecture Behind VividLaunch

Using Gemini's Interleaved Output to Generate Multimodal Storyboards

The Google-Native Stack Powering VividLaunch

How Vertex AI Imagen and Veo Power Cinematic Content Generation

Streaming AI Creativity: Turning Gemini JSON into Real Videos

Comprehensive Marketing Orchestration: The Studios

The Social Studio: Intelligent A/B Testing

The Blog Studio: Distraction-Free Authority

Global Connectors: Secure Distribution

The Autopilot Command Center

Engineering Challenges

Fixing the “Breathless Narrator” Problem

Teaching AI Cinematic Motion: The Ken Burns Effect

Solving the Multimodal Identity Crisis

Building Subtitle Intelligence for Vertical Video

Lessons Learned

The Stability vs. Creativity Tradeoff

Designing an AI Interface That Feels Like a Creative Director

What's Next for VividLaunch?

Build the Product. Let AI Launch It.

Unbiased Intelligence in a Biased Game: Building Elite Sports Intelligence Engine with Elastic Agent Builder

Introduction

The Brain of the Operation: What the Agent Actually Does

Beyond RAG: From Search to Reasoning

The "Innovation" Protocol

Data Ingestion – Keeping the Engine Fresh

The Tools That Power the Engine

The Sample Frontend Apps (Review, News, Prediction, Chat)

The "War Stories": Overcoming Technical Hurdles

1. The Timeout Battle: 19 Tools vs. 60 Seconds

2. Prompt Refinement: From "Ambiguity" to "Direct Command"

Conclusion

LucideCrawl: AI-Powered Web Ingestion and Phishing Detection API Built on Xano

What I Built

API Documentation

Core Endpoints

/auth/signup API

Request Body

Example: Create a new account

Response

🔐 What this endpoint does

🧠 How /auth/signup fits into the platform

/auth/login

Example: Log in to an existing account

Response (simplified)

🧠 How Authentication Fits Into the Platform

/trust_scan API

/ask_the_page API

Example: Verify a banking login page

/crawl_webpage API

Example: Crawl a webpage

/site_crawl API

Input Parameters

Example: Crawl a small website

/load_sitemap API

Input Parameters

Example: Load and filter a sitemap

Response (simplified)

/generate_pdf_from_page API

Request Body

Example: Generate PDF

Response

/capture_screenshot API

Request Body

Example: Full-page PNG screenshot

Response

/generate_markdown_from_page API

Request Body

Example

Response

/extract_metadata_from_page API 🔍

Request Body

Example

Response

🧠 How `/auth/signup` fits into the platform

Destructuring with `rest` operator

Using the `rest` Syntax

Setting up the `InMemoryCache`

Making the `ApolloClient` instance available to all the React components in our App.

Creating the `AuthNavigationBar` Component

Creating the `MainNavigationBar` Component

Creating the `ErrorPage` Component

Creating the `Loading` Component

Creating the `user` and `note` Mutations

Creating the `user` Mutation

Creating the `note` Mutation

Creating the `note` Queries

Creating the `SignUp` Component

Creating the `SignUp` Page

Creating the `SignIn` Component

Creating the `sign-in` Page

Updating the `INoteCardProps` Interface

Defining the `IAllNoteData` interfaces

Updating the `NoteCard` component

Breaking down the `NoteCard` Component

Updating the `NoteContainer` Component

Breaking Down the `NoteContainer` component: