Sharvin Shah - freeCodeCamp.org

How to Build a Custom AI Chat Application with Next.js: Fine-Tune GPT Using Your Data

Sharvin Shah — Tue, 07 Oct 2025 11:11:07 +0000

In 2025, AI-powered applications have advanced from generic chatbots to highly specialised assistants that understand your specific field, communicate in your style, and give contextually relevant answers. While Large Language Models (LLMs) like GPT-5 have impressive general abilities, there is an increasing demand for AI that deeply understands particular businesses, personal brands, or specialised areas of knowledge.

Imagine having an AI assistant that not only knows about web development in general but also understands your specific coding style, knows your project history, and can answer questions in your voice. This isn't science fiction - it's what fine-tuning makes possible today.

In this tutorial, you'll learn how to fine-tune OpenAI's latest GPT-4.1 models and create a production-ready chat application using Next.js 15. I will guide you through the entire process: from preparing your dataset and submitting it for fine-tuning, to building a sleek chat interface that uses your custom model.

I'll show you this process using content from my agency website, mtechzilla.com, as example data. You'll learn how to scrape, clean, and format real-world content for training. Naturally, you'll want to use your own data - whether it's documentation, blog posts, customer support transcripts, or any other text that reflects the knowledge and style you want your AI to have.

This tutorial is for developers who are familiar with React and Node.js but are new to fine-tuning AI models. By the end, you'll have a fully functional, custom AI chat application ready to deploy.

As of September 2025, fine-tuning GPT-5 is not supported yet. This tutorial uses GPT-4.1. When GPT-5 fine-tuning becomes available, you'll mainly need to change the base model name.

Understanding Fine-Tuning

Before we jump into the code, let's explain what fine-tuning really means and when it's the best option for your project.

Fine-tuning means taking a pre-trained language model and training it further with your specific dataset. It's like teaching a smart student about your particular area of expertise and communication style. The model retains its general knowledge but becomes specialised in your field.

This is quite different from other methods of customising AI behavior. Retrieval-Augmented Generation (RAG) involves providing relevant context to the model when a query is made, similar to giving someone reference materials to use while answering questions. Prompt engineering, on the other hand, involves creating smart instructions to direct the model's behavior without any additional training. Fine-tuning, however, results in a model that has deeply learned and internalised your data.

The trade-offs in 2025 are clearer than ever. Fine-tuning requires an upfront investment in data preparation and training costs, but it leads to faster inference, no need for context injection, and a more consistent personality. RAG systems are cheaper to set up and easier to update, but they need vector databases and can have trouble matching nuanced styles. Prompt engineering is free and immediate, but it limits how much customisation you can achieve.

As of September 2025, OpenAI supports supervised fine-tuning for three new models: GPT-4.1, GPT-4.1-mini, and GPT-4.1-nano. Each model has different capabilities and costs. GPT-4.1-nano is the most affordable option, ideal for simpler tasks. GPT-4.1-mini balances performance and cost, while GPT-4.1 offers the highest intelligence for complex, domain-specific applications.

Fine-tuning is best when you need a consistent voice and style, have specialised knowledge not well-covered by the base model, want to reduce delay by removing context injection, or need to ensure specific behaviours without complicated prompts. If your needs involve frequently changing information, simple factual lookups, or only occasional customisation, consider using RAG or prompt engineering instead.

Prerequisites

Before we begin, make sure you have the following tools and accounts set up:

Node.js v22+ and npm (check with node --version)
Basic JavaScript knowledge for the scripts
Familiarity with React and TypeScript for the web app
An OpenAI API key with billing enabled (get one at https://platform.openai.com/docs/overview)
A code editor

You'll also need some content to train your model on. This could be blog posts, documentation, transcripts, or any text that represents the knowledge and style you want to impart to your AI.

If you get stuck, you can check the GitHub repository for assistance or contact me (I'm happy to help fellow developers).

Repository link: https://github.com/Sharvin26/ai-fine-tuning-project

Step 1: Dataset Preparation

The key to a successful fine-tuning project is having a well-prepared dataset. OpenAI needs training data in JSONL (JSON Lines) format, where each line is a complete JSON object representing a conversation. JSONL is a format where each line is a separate JSON object, which is great for handling large datasets efficiently. It allows for easy streaming and handling of data, making it ideal for machine learning tasks.

The JSONL structure that OpenAI requires for fine-tuning is as follows:

{
   "messages":[
      {
         "role":"system",
         "content":"You are a helpful assistant."
      },
      {
         "role":"user",
         "content":"What is React?"
      },
      {
         "role":"assistant",
         "content":"React is a JavaScript library..."
      }
   ]
}

Each line represents a complete conversation. For fine-tuning to be effective, you need at least 10 examples, though 50-100 typically yields better results.

Let's build a Node.js scraper that extracts content from a website and converts it into the proper format.

First, let's set up our scripts folder structure:

mkdir ai-fine-tuning-project
cd ai-fine-tuning-project
mkdir scripts
cd scripts
npm init -y
npm install cheerio axios dotenv openai
touch scraper.js fine-tune.js .gitignore .env

Open the ai-fine-tuning-project in a code editor and copy the following values into a .env file in the scripts folder.

OPENAI_API_KEY=sk-...your-api-key-here...
OPENAI_ORG_ID=org-...your-org-id...

Update the ENV variables with a valid API Key and Org ID from OpenAI.

Generate an API Key using this guide: Where do I find my OpenAI API Key?. Here are the best practices to keep your API Key safe: Best Practices for API Key Safety.
You can find your OpenAI Org ID here: OpenAI Organization Settings.

Add the following code to the .gitignore file:

# Environment variables
.env
.env.local
.env.*.local

# Dependencies
node_modules/

# Logs
*.log
logs/

# Cache and temporary files
.cache/
temp/
tmp/

# OS files
.DS_Store
Thumbs.db

# IDE files
.vscode/
.idea/
*.swp
*.swo

Update the scraper script (scraper.js) with the following code:

const cheerio = require("cheerio");
const axios = require("axios");
const fs = require("fs");
const OpenAI = require("openai");
require("dotenv").config();

const config = {
    urls: [
        {
            url: "https://www.mtechzilla.com/",
            contentType: "general",
        },
        {
            url: "https://www.mtechzilla.com/company/about-us",
            contentType: "about",
        },
        {
            url: "https://www.mtechzilla.com/services",
            contentType: "services",
        },
    ],
    openai: {
        apiKey: process.env.OPENAI_API_KEY,
        model: "gpt-5",
        trainingExamples: 50,
    },
    outputFile: "training_data.jsonl",
};

class AIScraper {
    constructor(config) {
        this.urls = config.urls;
        this.openaiConfig = config.openai;
        this.outputFile = config.outputFile;
        this.scrapedContent = [];
        this.trainingData = [];
        this.openai = new OpenAI({
            apiKey: this.openaiConfig.apiKey,
        });
        this.totalCost = 0;
    }

    async fetchPage(url) {
        try {
            const response = await axios.get(url, {
                timeout: 30000,
                headers: {
                    'User-Agent': 'Mozilla/5.0 (compatible; AI-Training-Data-Scraper/1.0)'
                }
            });
            return response.data;
        } catch (error) {
            console.error(`Failed to fetch ${url}: ${error.message}`);
            return null;
        }
    }

    extractContent(html, urlConfig) {
        const $ = cheerio.load(html);

        $('script, style, nav, header, footer').remove();
        $('[class*="cookie"], [class*="popup"], [class*="ad"]').remove();
        $('button, .btn').remove();

        const headings = [];
        $('h1, h2, h3, h4').each((_, elem) => {
            const text = $(elem).text().trim();
            if (text.length > 3 && text.length < 200) {
                headings.push(text);
            }
        });

        const paragraphs = [];
        $('p').each((_, elem) => {
            const text = $(elem).text().trim();
            if (text.length > 20) {
                paragraphs.push(text);
            }
        });

        const listItems = [];
        $('ul li, ol li').each((_, elem) => {
            const text = $(elem).text().trim();
            if (text.length > 5 && text.length < 200) {
                listItems.push(text);
            }
        });

        return {
            url: urlConfig.url,
            contentType: urlConfig.contentType,
            title: $('title').text().trim(),
            metaDescription: $('meta[name="description"]').attr('content') || '',
            headings: headings.slice(0, 10),
            paragraphs: paragraphs.slice(0, 15),
            listItems: listItems.slice(0, 20)
        };
    }

    formatContentForPrompt(content) {
        let formattedContent = `URL: ${content.url}\n`;
        formattedContent += `Content Type: ${content.contentType}\n`;
        formattedContent += `Title: ${content.title}\n\n`;

        if (content.metaDescription) {
            formattedContent += `Description: ${content.metaDescription}\n\n`;
        }

        if (content.headings.length > 0) {
            formattedContent += `Headings:\n${content.headings.map(h => `- ${h}`).join('\n')}\n\n`;
        }

        if (content.paragraphs.length > 0) {
            formattedContent += `Content:\n${content.paragraphs.join('\n\n')}\n\n`;
        }

        if (content.listItems.length > 0) {
            formattedContent += `Features/Services:\n${content.listItems.map(item => `- ${item}`).join('\n')}\n\n`;
        }

        return formattedContent;
    }

    async generateTrainingDataWithAI() {
        const allContent = this.scrapedContent.map(content => 
            this.formatContentForPrompt(content)
        ).join('\n' + '='.repeat(50) + '\n');

        const prompt = `Based on the website content below, generate ${this.openaiConfig.trainingExamples} diverse, natural Q&A pairs for training a customer service chatbot.

Website Content:
${allContent}

Create varied questions a real customer might ask, including:
- Company/business information
- Services or products offered  
- Contact and support questions
- General greetings and conversational questions
- FAQ-style questions

Make questions natural and human-like. Generate accurate answers based ONLY on the provided website content. Keep answers concise but informative.

Return a JSON object with a "training_data" array containing the Q&A pairs.`;

        try {
            const response = await this.openai.chat.completions.create({
                model: this.openaiConfig.model,
                messages: [
                    {
                        role: "system",
                        content: "You are an expert at creating training data for AI chatbots. Always return valid JSON. Output your final JSON response directly without any reasoning or explanation."
                    },
                    {
                        role: "user",
                        content: prompt,
                    },
                ],
                response_format: { 
                    type: "json_schema",
                    json_schema: {
                        name: "training_data_generation",
                        schema: {
                            type: "object",
                            properties: {
                                training_data: {
                                    type: "array",
                                    items: {
                                        type: "object",
                                        properties: {
                                            question: {
                                                type: "string",
                                                description: "A natural question a customer might ask"
                                            },
                                            answer: {
                                                type: "string", 
                                                description: "An accurate answer based on the website content"
                                            }
                                        },
                                        required: ["question", "answer"]
                                    }
                                }
                            },
                            required: ["training_data"]
                        }
                    }
                }
            });

            const generatedContent = response.choices[0].message.content?.trim();

            const actualInputTokens = response.usage.prompt_tokens;
            const actualOutputTokens = response.usage.completion_tokens;
            const actualCost = (actualInputTokens * 1.25 / 1000000) + (actualOutputTokens * 10 / 1000000);
            this.totalCost += actualCost;

            if (!generatedContent) {
                throw new Error("No content generated in response");
            }

            const structuredData = JSON.parse(generatedContent);
            const validTrainingData = [];

            if (structuredData.training_data && Array.isArray(structuredData.training_data)) {
                structuredData.training_data.forEach(item => {
                    if (item.question && item.answer) {
                        validTrainingData.push({
                            messages: [
                                {
                                    role: "system",
                                    content: "You are a helpful assistant. Answer questions accurately based on the website content."
                                },
                                {
                                    role: "user", 
                                    content: item.question
                                },
                                {
                                    role: "assistant",
                                    content: item.answer
                                }
                            ]
                        });
                    }
                });
            }

            this.trainingData = validTrainingData;
            console.log(`Generated ${validTrainingData.length} training examples`);

        } catch (error) {
            console.error(`OpenAI API error: ${error.message}`);
            throw error;
        }
    }

    async scrape() {
        console.log(`Starting scraper for ${this.urls.length} URLs`);

        for (const urlConfig of this.urls) {
            const html = await this.fetchPage(urlConfig.url);

            if (html) {
                const content = this.extractContent(html, urlConfig);
                this.scrapedContent.push(content);
                console.log(`Scraped: ${content.title || urlConfig.url}`);
            }

            await new Promise(resolve => setTimeout(resolve, 1000));
        }

        if (this.scrapedContent.length === 0) {
            throw new Error("No content scraped successfully");
        }

        await this.generateTrainingDataWithAI();

        console.log(`Scraped ${this.scrapedContent.length} pages, generated ${this.trainingData.length} examples`);
        console.log(`Total cost: $${this.totalCost.toFixed(4)}`);
    }

    saveToFile() {
        if (this.trainingData.length === 0) {
            console.error("No training data to save!");
            return;
        }

        const jsonl = this.trainingData
            .map(example => JSON.stringify(example))
            .join('\n');

        fs.writeFileSync(this.outputFile, jsonl);
        console.log(`Saved ${this.trainingData.length} examples to ${this.outputFile}`);
    }
}

async function main() {
    try {
        if (!config.openai.apiKey) {
            console.error("Please set your OpenAI API key in .env file");
            return;
        }

        const scraper = new AIScraper(config);
        await scraper.scrape();
        scraper.saveToFile();

        console.log("Scraping complete!");

    } catch (error) {
        console.error("Error:", error.message);
    }
}

main();

If you used a version of Node.js before 22, you might encounter issues when running the script. The recommended version is v22.18.0.

This code sets up an automated system for web scraping and creating AI-powered training data. It generates training datasets from website content. The script uses Cheerio to parse HTML from given URLs, extracting useful information like headings, paragraphs, and list items while ignoring unnecessary parts like scripts, navigation menus, and ads. After gathering the content, it uses OpenAI's API (configured to use GPT-4.1 with structured JSON output) to intelligently create natural question-and-answer pairs for fine-tuning purposes.

The generated Q&A pairs are formatted into JSONL files according to OpenAI's fine-tuning format. Each entry includes a system message, a user question, and an assistant response. The scraper also has useful features like rate limiting between requests, error handling, and cost tracking based on token usage ($1.25 per million input tokens and $10 per million output tokens). This allows you to keep track of expenses while generating training data.

However, this is a basic script that can be improved based on your website's design, audience, and goals. While it extracts various content sections and creates diverse question-and-answer pairs, you'll need to manually check the output to ensure quality and correct formatting, as OpenAI will reject improperly formatted data. In production environments, this verification process can be automated by updating the script with additional validation logic and quality checks.

Now, let's create our training_data.jsonl file by running our scraper:

node scraper.js

You should see the following output:

Starting scraper for 3 URLs
Scraped: MTechZilla: Custom Software and App Development Company
Scraped: About MTechZilla | Custom Software Development Agency
Scraped: Expert App & Web Development Services | MTechZilla
Generated 50 training examples
Scraped 3 pages, generated 50 examples
Total cost: $0.0632
Saved 50 examples to training_data.jsonl
Scraping complete!

Pro tip: Quality is more important than quantity. Review the generated training_data.jsonl file and refine any examples that don't accurately reflect the content or tone you want your AI to adopt.

Step 2: Fine-Tuning Submission

With our dataset prepared, let's create a script to submit it to OpenAI for fine-tuning. We'll use the GPT-4.1 models and handle the entire process from upload to completion.

Update the fine-tuning script (fine-tune.js):

const OpenAI = require("openai");
const fs = require("fs");
require("dotenv").config();

const CONFIG = {
    // Choose your base model for fine-tuning
    MODEL: "gpt-4.1-nano-2025-04-14", // Options: gpt-4.1-nano-2025-04-14, gpt-4.1-mini-2025-04-14, gpt-4.1-2025-04-14

    // Training file path
    TRAINING_FILE: "training_data.jsonl",

    // Polling interval for job status (in milliseconds)
    POLL_INTERVAL: 30000, // 30 seconds
};

class FineTuningManager {
    constructor() {
        if (!process.env.OPENAI_API_KEY) {
            throw new Error("OPENAI_API_KEY environment variable is required");
        }

        this.openai = new OpenAI({
            apiKey: process.env.OPENAI_API_KEY,
            organization: process.env.OPENAI_ORG_ID,
        });
    }

    // Step 1: Validate training data format
    validateTrainingData() {
        console.log("🔍 Validating training data format...");

        if (!fs.existsSync(CONFIG.TRAINING_FILE)) {
            throw new Error(`Training file not found: ${CONFIG.TRAINING_FILE}`);
        }

        const content = fs.readFileSync(CONFIG.TRAINING_FILE, "utf-8");
        const lines = content.split("\n").filter(line => line.trim());

        if (lines.length < 10) {
            throw new Error(`Need at least 10 examples. Found: ${lines.length}`);
        }

        let validExamples = 0;
        lines.forEach((line, index) => {
            try {
                const data = JSON.parse(line);

                // Validate JSONL structure as per OpenAI documentation
                if (!data.messages || !Array.isArray(data.messages) || data.messages.length < 2) {
                    throw new Error(`Invalid structure at line ${index + 1}`);
                }

                // Check for required roles
                const hasUser = data.messages.some(m => m.role === 'user');
                const hasAssistant = data.messages.some(m => m.role === 'assistant');

                if (!hasUser || !hasAssistant) {
                    throw new Error(`Missing user or assistant message at line ${index + 1}`);
                }

                validExamples++;
            } catch (e) {
                console.warn(`⚠️ Skipping line ${index + 1}: ${e.message}`);
            }
        });

        if (validExamples < 10) {
            throw new Error(`Need at least 10 valid examples. Found: ${validExamples}`);
        }

        console.log(`✅ Validation passed: ${validExamples} valid examples`);
        return validExamples;
    }

    // Step 2: Upload training file to OpenAI
    async uploadTrainingFile() {
        console.log("📤 Uploading training file...");

        const file = await this.openai.files.create({
            file: fs.createReadStream(CONFIG.TRAINING_FILE),
            purpose: "fine-tune",
        });

        console.log(`✅ File uploaded: ${file.id}`);
        return file.id;
    }

    // Step 3: Create fine-tuning job
    async createFineTuningJob(fileId) {
        console.log(`🚀 Creating fine-tuning job with model: ${CONFIG.MODEL}`);

        const job = await this.openai.fineTuning.jobs.create({
            training_file: fileId,
            model: CONFIG.MODEL,
            method: {
                type: "supervised"
            }
        });

        console.log(`✅ Fine-tuning job created: ${job.id}`);
        return job.id;
    }

    // Step 4: Monitor job until completion
    async monitorJob(jobId) {
        console.log("⏳ Monitoring fine-tuning job...");
        console.log("This typically takes 10-30 minutes...\n");

        while (true) {
            const job = await this.openai.fineTuning.jobs.retrieve(jobId);

            console.log(`Status: ${job.status}`);

            if (job.status === "succeeded") {
                console.log("\n🎉 Fine-tuning completed successfully!");
                console.log(`🎆 Your fine-tuned model ID: ${job.fine_tuned_model}`);
                return job.fine_tuned_model;
            } 

            if (job.status === "failed") {
                throw new Error(`Fine-tuning failed: ${job.error?.message || 'Unknown error'}`);
            }

            if (job.status === "cancelled") {
                throw new Error("Fine-tuning was cancelled");
            }

            // Wait before checking again
            await new Promise(resolve => setTimeout(resolve, CONFIG.POLL_INTERVAL));
        }
    }

    // Complete supervised fine-tuning workflow
    async runFineTuning() {
        try {
            console.log("🤖 Starting OpenAI Supervised Fine-Tuning\n");
            console.log(`📋 Using model: ${CONFIG.MODEL}`);
            console.log(`📄 Training file: ${CONFIG.TRAINING_FILE}\n`);

            // Step 1: Validate data
            const validExamples = this.validateTrainingData();

            // Step 2: Upload file
            const fileId = await this.uploadTrainingFile();

            // Step 3: Create job
            const jobId = await this.createFineTuningJob(fileId);

            // Step 4: Monitor completion
            const modelId = await this.monitorJob(jobId);

            console.log("\n" + "=".repeat(60));
            console.log("SUCCESS! Your fine-tuned model is ready!");
            console.log("=".repeat(60));
            console.log(`\n Model ID: ${modelId}`);
            console.log(`Trained on ${validExamples} examples`);
            console.log("\n Next steps:");
            console.log("1. Copy the Model ID above");
            console.log("2. Use it in your application to access your custom model");

            return modelId;

        } catch (error) {
            console.error(`\n❌ Fine-tuning failed: ${error.message}`);

            if (error.message.includes("not found")) {
                console.log("💡 Tip: Make sure training_data.jsonl exists in the current directory");
            } else if (error.message.includes("API_KEY")) {
                console.log("💡 Tip: Set OPENAI_API_KEY in your .env file");
            }

            throw error;
        }
    }
}

// Main execution
async function main() {
    const manager = new FineTuningManager();
    await manager.runFineTuning();
}

if (require.main === module) {
    main().catch(console.error);
}

module.exports = FineTuningManager;

This script manages the entire fine-tuning process once your training data is ready from the scraper. It works as an automated manager, taking your JSONL training file and turning it into a custom OpenAI model designed for your specific needs. The process begins with thorough validation, ensuring your training file exists, has at least 10 valid examples, and follows OpenAI's required format with correct message roles (user and assistant). This validation step is important because OpenAI will reject data that isn't formatted correctly, so identifying issues early saves you time and API costs.

This script provides a complete fine-tuning workflow with the new GPT-4.1 models. You can choose from nano (cheapest), mini (balanced), or full (most capable) models, depending on your needs and budget. Once validation is successful, the script uploads your training file to OpenAI's servers and starts a fine-tuning job using your selected base model. The script uses supervised fine-tuning, which means your model learns directly from the question-answer pairs you provided, adjusting its responses to fit your website's information and tone.

The easiest part is the monitoring phase, where the script automatically checks the fine-tuning job status every 30 seconds until it's done. Fine-tuning usually takes 10-30 minutes, depending on your dataset size and the base model you chose. During the process, you'll get clear status updates in the console. Once it's finished, the script gives you your custom model ID, which you can use right away in your applications. It also provides helpful error messages and tips if something goes wrong, like reminding you to check your API key or verify that your training file exists.

Now let's submit our training_data.jsonl file for fine-tuning with the following command:

node fine-tune.js

You should see the following output:

🎉 Fine-tuning completed successfully!
🎆 Your fine-tuned model ID: ft:gpt-4.1-nano-2025-04-14:...

============================================================
SUCCESS! Your fine-tuned model is ready!
============================================================

 Model ID: ft:ft:gpt-4.1-nano-2025-04-14:...
Trained on 50 examples

 Next steps:
1. Copy the Model ID above
2. Use it in your application to access your custom model

Pro tip: Start with the nano model to test your dataset and workflow. It's the most cost-effective option and often enough for domain-specific knowledge. You can always train with a larger model later by updating configuration in fine-tune.js.

Step 3: Next.js Application Setup

Now that our model is trained, let's build a modern chat application. We'll set up a separate web folder with a Next.js app using TypeScript and shadcn/ui for components.

First, navigate back to the project root:

cd ..

Then create the web application:

npx create-next-app@latest web

Choose the following options during the setup:

✔ Would you like to use TypeScript? › Yes
✔ Which linter would you like to use? › ESLint
✔ Would you like to use Tailwind CSS? › Yes
✔ Would you like your code inside a `src/` directory? › Yes
✔ Would you like to use App Router? (recommended) › Yes
✔ Would you like to use Turbopack? (recommended) › No
✔ Would you like to customize the import alias (`@/*` by default)? › No

Navigate to the web directory:

cd web

Install the required packages using the following command:

npm install ai @ai-sdk/openai @ai-sdk/react openai lucide-react

Now let's set up shadcn/ui for beautiful components:

npx shadcn@latest init

Choose the following option during the setup:

✔ Which color would you like to use as the base color? › Slate

And add the following shadcn components:

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add scroll-area
npx shadcn@latest add avatar

Create the .env.local file using the following command:

touch .env.local

Add your environment variables in web/.env.local:

OPENAI_API_KEY=sk-...your-api-key...
OPENAI_ORG_ID=org-...your-org-id...
FINE_TUNED_MODEL=ft:gpt-4.1-nano-2025-04-14:... # Your model ID from fine-tuning

In the src directory, create a new folder named types. Inside this folder, create a file called chat.ts and copy and paste the following code:

// web/src/types/chat.ts
export interface Message {
    id: string;
    role: "user" | "assistant" | "system";
    content: string;
    createdAt?: Date;
}

export interface ChatRequest {
    messages: Message[];
    model?: string;
}

export interface ChatResponse {
    message: Message;
    usage?: {
        prompt_tokens: number;
        completion_tokens: number;
        total_tokens: number;
    };
}

This TypeScript code defines the data structures (interfaces) for a chat application, setting a standard for how messages and API interactions should be formatted in your app. The Message interface specifies what each chat message must include: a unique ID, a role indicating if it's from the user, assistant, or system, the message content, and an optional timestamp. The ChatRequest interface organizes the data you send to your fine-tuned model, including an array of messages (the conversation history) and an optional model parameter to specify which fine-tuned model to use.

Finally, the ChatResponse interface defines what you'll receive from the API: the assistant's reply message and optional usage statistics that show how many tokens were used for prompts and completions. This helps you track costs. By defining these interfaces, TypeScript ensures type safety throughout your application, catching errors during development and providing autocomplete suggestions in your code editor. This makes your chat application more robust and easier to maintain.

Update the app/layout.tsx with meta information and chat layout:

// web/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
    title: "AI Chat - Powered by Custom Fine-Tuned Model",
    description: "Chat with an AI trained on custom content",
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        "en" className="h-full">
            `${inter.className} h-full bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900`}
                suppressHydrationWarning={true}
            >
                {children}
            
        
    );
}

This code sets up the root layout for a Next.js application, acting as a wrapper around every page in your chat app. It starts by importing the Inter font from Google Fonts and configures it to use Latin characters, giving your application a clean, modern appearance.

The metadata object sets the page title and description that appear in browser tabs and search engine results, which is important for SEO and user experience. The RootLayout component brings everything together: it wraps all your app's pages (using the children prop) in a consistent HTML structure with full-height styling (h-full) and a pleasant gradient background. This background changes from light slate tones in light mode to dark slate in dark mode, automatically matching the user's system settings. The suppressHydrationWarning attribute addresses a common Next.js issue where server-rendered HTML might slightly differ from client-rendered HTML (often due to things like timestamps or theme detection), preventing console warnings.

This layout ensures that every page in your chat application shares the same basic styling, typography, and metadata, so you don't need to repeat the code on each page. It gives us a solid foundation with TypeScript for type safety, shadcn/ui for standard components, effective management of environment variables, and a clean project structure that is easy to maintain and expand.

Step 4: Building the Chat Interface

Let's build a beautiful, responsive chat interface using shadcn components and the Vercel AI SDK's powerful streaming features.

First, create the main chat component in src/components/chat.tsx:

// web/src/components/chat.tsx
"use client";

import { useChat } from "@ai-sdk/react";
import { useRef, useEffect, useState } from "react";
import { Send, Bot, User, Loader2, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
    CardDescription,
} from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

export default function Chat() {
    const scrollAreaRef = useRef(null);
    const inputRef = useRef(null);
    const [input, setInput] = useState("");

    const {
        messages,
        sendMessage,
        status,
        error,
        regenerate,
        stop,
        setMessages,
    } = useChat({
        onError: (error) => {
            console.error("Chat error:", error);
        },
        onFinish: () => {
            inputRef.current?.focus();
        },
    });

    const isLoading = status === "streaming" || status === "submitted";

    // Add welcome message on mount
    useEffect(() => {
        if (messages.length === 0) {
            setMessages((prev) => [
                ...prev,
                {
                    id: "welcome",
                    role: "assistant" as const,
                    parts: [
                        {
                            type: "text" as const,
                            text: "Hello! I'm your custom AI assistant, trained on specific content. How can I help you today?",
                        },
                    ],
                },
            ]);
        }
    }, [messages.length, setMessages]);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (!input.trim() || isLoading) return;

        sendMessage({
            role: "user",
            parts: [{ type: "text", text: input }],
        });
        setInput("");
    };

    const handleInputChange = (e: React.ChangeEvent) => {
        setInput(e.target.value);
    };

    // Auto-scroll to bottom when new messages arrive
    useEffect(() => {
        if (scrollAreaRef.current) {
            const scrollContainer = scrollAreaRef.current.querySelector(
                "[data-radix-scroll-area-viewport]"
            );
            if (scrollContainer) {
                scrollContainer.scrollTop = scrollContainer.scrollHeight;
            }
        }
    }, [messages]);


    return (
        "flex h-screen max-w-5xl mx-auto p-4">
            "flex-1 flex flex-col shadow-xl overflow-hidden">
                {/* Header */}
                "border-b flex-shrink-0">
                    "flex items-center space-x-4">
                        "relative">
                            "h-10 w-10">
                                "bg-primary text-primary-foreground">
                                    "h-6 w-6" />
                                
                            
                            "absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-background animate-pulse" />
                        
                        "flex-1">
                            Custom AI Assistant
                            
                                Powered by your fine-tuned model
                            
                        
                    
                

                {/* Messages Area */}
                "flex-1 min-h-0">
                    "p-4 space-y-4 pb-4">
                        {messages.map((message) => {
                            const isUser = (message.role as string) === "user";
                            return (
                                "flex",
                                        isUser ? "justify-end" : "justify-start"
                                    )}
                                >
                                    "flex items-start gap-3 max-w-[85%] min-w-0",
                                            isUser && "flex-row-reverse"
                                        )}
                                    >
                                        {/* Avatar */}
                                        "h-8 w-8 shrink-0">
                                            "bg-primary text-primary-foreground"
                                                        : "bg-muted"
                                                )}
                                            >
                                                {isUser ? (
                                                    "h-4 w-4" />
                                                ) : (
                                                    "h-4 w-4" />
                                                )}
                                            
                                        

                                        {/* Message Content */}
                                        "space-y-1 min-w-0 flex-1">
                                            "rounded-lg px-4 py-2.5 text-sm max-w-full",
                                                    isUser
                                                        ? "bg-primary text-primary-foreground"
                                                        : "bg-muted"
                                                )}
                                            >
                                                "whitespace-pre-wrap break-words leading-relaxed overflow-wrap-anywhere">
                                                    {message.parts?.map((part, index) => {
                                                        if (part.type === "text") {
                                                            return {part.text};
                                                        }
                                                        return null;
                                                    })}
                                                
                                            
                                        
                                    
                                
                            );
                        })}

                        {/* Loading Indicator */}
                        {isLoading && (
                            "flex justify-start">
                                "flex items-center gap-3 max-w-[85%]">
                                    "h-8 w-8">
                                        "bg-muted">
                                            "h-4 w-4" />
                                        
                                    
                                    "bg-muted rounded-lg px-4 py-2.5">
                                        "flex items-center gap-2">
                                            "h-3 w-3 animate-spin" />
                                            "text-sm text-muted-foreground">
                                                Thinking...
                                            
                                        
                                    
                                
                            
                        )}

                        {/* Error Message */}
                        {error && (
                            "flex justify-center px-4">
                                "bg-destructive/10 border border-destructive/20 rounded-lg p-3 max-w-md">
                                    "flex items-start gap-2">
                                        "h-4 w-4 text-destructive mt-0.5" />
                                        "space-y-1">
                                            "text-sm text-destructive">
                                                {error.message ||
                                                    "Something went wrong. Please try again."}
                                            
                                            
                                        
                                    
                                
                            
                        )}
                    
                

                {/* Input Area */}
                "border-t p-4 flex-shrink-0">
                    "flex gap-2">
                        type="text"
                            value={input}
                            onChange={handleInputChange}
                            placeholder="Type your message..."
                            disabled={isLoading}
                            className={cn(
                                "flex-1 px-3 py-2 text-sm rounded-md border border-input bg-background",
                                "placeholder:text-muted-foreground",
                                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                                "disabled:cursor-not-allowed disabled:opacity-50"
                            )}
                            autoFocus
                        />

                        {isLoading ? (
                            
                        ) : (
                            
                        )}
                    

                    {/* Character Counter */}
                    {input.length > 0 && (
                        "mt-2 text-xs text-muted-foreground text-right">
                            {input.length} / 4000
                        
                    )}
                
            
        
    );
}

This code creates the main chat interface component where users interact with your fine-tuned AI model. It primarily uses the useChat hook from Vercel's AI SDK, which manages all the complex messaging tasks, such as sending messages, receiving streaming responses, managing conversation state, and handling errors. The component sets up several React hooks: useRef for managing DOM elements like the scroll area and input field, useState for the input text, and useEffect for side effects like auto-scrolling and showing a welcome message when the chat first loads.

The UI is built using shadcn/ui components to create a polished, professional look with minimal effort. The layout has three main sections: a header showing the AI assistant's status (with a pulsing green dot to indicate it's online), a scrollable message area in the middle, and an input form at the bottom. Each message is displayed with an avatar (a user icon for human messages and a bot icon for AI responses) and styled differently based on who sent it. User messages appear on the right with a primary color background, while assistant messages appear on the left with a muted background. The component includes thoughtful UX details like automatic scrolling to the latest message, focus management that returns to the input field after sending, and a character counter showing how close you are to the 4000-character limit.

The component also manages different states smoothly: it shows a "Thinking..." animation with a spinning loader while the AI creates a response, displays error messages with a retry button if something goes wrong, and even lets users stop the response mid-stream if it takes too long. When loading, the send button changes into a "Stop" button, giving users full control over the conversation. Everything is wrapped in responsive styling that adjusts to different screen sizes, ensuring your chat interface looks great whether users are on desktop or mobile devices.

Now, update the main page to use the chat component:

// web/app/page.tsx
import Chat from "@/components/chat";

export default function Home() {
    return (
        "h-screen">
            
        
    );
}

This chat interface uses shadcn/ui components to create a polished, professional look. It includes features like real-time message streaming, animated loading states, error handling with retry options, automatic scrolling to the latest messages, a responsive design for all devices, keyboard shortcuts, accessibility features, and a character counter to keep users informed.

Step 5: API Route Integration

Now let's create the backend API route that connects our chat interface to the fine-tuned OpenAI model with proper streaming support.

// web/app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText, convertToModelMessages } from "ai";
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
    try {
        // Parse request body
        const body = await req.json();
        const { messages } = body;

        // Validate messages
        if (!messages || !Array.isArray(messages)) {
            return NextResponse.json(
                { error: "Invalid request format" },
                { status: 400 }
            );
        }

        // Convert UI messages to model messages using AI SDK utility
        const modelMessages = convertToModelMessages(messages);

        // Check if we have any valid messages
        if (modelMessages.length === 0) {
            return NextResponse.json(
                { error: "No valid messages provided" },
                { status: 400 }
            );
        }

        // Add system prompt to prevent hallucination and guide the model
        const systemPrompt = {
            role: "system" as const,
            content: `You are a helpful assistant answering questions about MTechZilla, a software development company. 

IMPORTANT INSTRUCTIONS:
- Only answer questions based on information you were specifically trained on about MTechZilla
- If you don't know something or weren't trained on specific information, say "I don't have that specific information in my training data"
- Never make up or guess information about MTechZilla
- Be accurate and only provide information you're confident about

Answer questions accurately based on your training data about MTechZilla's services, technologies, and approach.`
        };

        // Prepend system message if not already present
        const hasSystemMessage = modelMessages.some(msg => msg.role === 'system');
        if (!hasSystemMessage) {
            modelMessages.unshift(systemPrompt);
        }

        // Load fine-tuned model ID from environment variable
        const fineTunedModelId = process.env.FINE_TUNED_MODEL;

        // Ensure we have a valid model ID
        if (!fineTunedModelId) {
            throw new Error("No fine-tuned model ID available");
        }

        // Call OpenAI with streaming using the new AI SDK
        const result = streamText({
            model: openai(fineTunedModelId),
            messages: modelMessages,
            temperature: 0.1, // Lower temperature for more deterministic, factual responses
        });

        // Log stream start
        console.log(`Stream started`);

        // Return UI message stream response for useChat compatibility
        return result.toUIMessageStreamResponse({
            headers: {
                "Cache-Control": "no-cache, no-transform",
                "X-Accel-Buffering": "no",
            },
        });
    } catch (error: unknown) {
        console.error("Chat API Error:", error);

        // Handle specific errors
        if (error && typeof error === "object" && "status" in error) {
            const errorWithStatus = error as { status: number };

            if (errorWithStatus.status === 401) {
                return NextResponse.json(
                    {
                        error: "Authentication failed. Check API key configuration.",
                    },
                    { status: 401 }
                );
            }

            if (errorWithStatus.status === 404) {
                return NextResponse.json(
                    {
                        error: "Model not found. Check your fine-tuned model ID.",
                    },
                    { status: 404 }
                );
            }

            if (errorWithStatus.status === 429) {
                return NextResponse.json(
                    {
                        error: "OpenAI rate limit reached. Please try again later.",
                    },
                    { status: 429 }
                );
            }
        }

        // Generic error
        return NextResponse.json(
            { error: "An error occurred. Please try again." },
            { status: 500 }
        );
    }
}

This code sets up the backend API endpoint that connects your chat interface to your fine-tuned OpenAI model. When a user sends a message, this Next.js API route receives the request, checks if the messages are correctly formatted, and converts them from the UI format to the structure that OpenAI's API needs using the AI SDK's convertToModelMessages tool. A key feature is the system prompt injection before sending messages to your model. The code automatically adds specific instructions, telling the AI to only respond based on its training data about MTechZilla (in this example) and to clearly say "I don't have that specific information" instead of making things up. This is crucial for preventing errors and ensuring the chatbot remains accurate and reliable.

The route loads your fine-tuned model ID from environment variables to keep sensitive settings secure. It uses Vercel's AI SDK to call OpenAI with streaming enabled, so responses appear word-by-word in real-time instead of waiting for the entire response. The temperature is set to 0.1, making the model more predictable and factual—perfect for a customer service chatbot where accuracy is more important than creativity. The streamText function handles all the streaming details, and the response is returned in a format that works directly with the useChat hook in your frontend component.

The code includes thorough error handling for common issues: authentication failures (invalid API keys), model not found errors (incorrect model ID), rate limiting (too many requests), and general server errors. Each error type returns a specific, helpful message to make debugging easier during development and to provide clear feedback to users if something goes wrong. The response headers include cache control directives to ensure fresh data and prevent buffering issues during streaming, guaranteeing a smooth, real-time chat experience for your users.

Step 6: Testing Your Application

With everything set up, let's test the complete application and ensure it works correctly.

First, make sure you've added your fine-tuned model ID to the environment file:

OPENAI_API_KEY=sk-...your-api-key...
OPENAI_ORG_ID=org-...your-org-id...
FINE_TUNED_MODEL=ft:gpt-4.1-nano-2025-04-14:... # Copy from scripts/model_info.json

Start the development server:

npm run dev

Open http://localhost:3000 in your browser, and you'll see the following UI:

Test various scenarios:

Domain Knowledge Test: Ask questions related to your training data
Conversation Flow: Have a multi-turn conversation
Edge Cases: Try very long inputs, rapid messages, network interruptions
Mobile Testing: Test on different screen sizes

Conclusion

Congratulations! You've successfully fine-tuned a GPT-4.1 model and built a chat application ready for production, showing the power of custom AI. We've transformed raw website content into structured training data, used OpenAI's latest models for fine-tuning, and built a modern Next.js app with real-time streaming and a nice interface. The key to successful fine-tuning is knowing when it's the right choice - use it for a consistent brand voice, specialised domain knowledge, and reducing RAG complexity, but consider the RAG option for information that changes often. Our modular project structure keeps training scripts separate from the web app, making it easy to retrain models and add new features.

As you continue, remember that fine-tuning is a step-by-step process. Watch how users interact, gather feedback, and keep improving your model with new training examples. Avoid common mistakes like using too little data (aim for 50+ good examples), ignoring validation errors, and not setting up proper rate limits and error handling. In 2025, AI customisation is changing fast, with trends toward more efficient models, continuous learning, and hybrid methods that mix different techniques. What used to need a team of ML engineers can now be done by few developers with the right skills. You now have the tools and knowledge to create specialised AI applications that truly understand and serve your specific area.

For founders considering AI adoption, I've created a free guide: AI or No AI? The 2025 Founder's Decision Playbook - a framework to help decide when AI truly adds value.

Feel free to connect with me on LinkedIn and Twitter.

How to Build a Production Ready eCommerce Website with ReactJS, TailwindCSS, PlanetScale and Stripe

Sharvin Shah — Tue, 25 Oct 2022 16:30:14 +0000

Hello, welcome to this tutorial. Today we're going to build a production-ready eCommerce website using ReactJS, TailwindCSS, PlanetScale, and Stripe.

Before we begin, you should be familiar with the basics of React.js and Next.js to get the most out of this guide.

If you're not and need to brush up, I recommend you go through the ReactJS and NextJS documentation.

The stack we will use:

ReactJS is a JavaScript library for building user interfaces. It is declarative and component-based.
NextJS is a React-based framework that lets us render data on the server side. It helps Google crawl the application which results in SEO benefits.
PlanetScale is a database as a service that is developed on Vitess, an open-source technology that powers YouTube and uses MySQL internally.
TailwindCSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in our markup.
Prisma is an ORM built for NodeJS and TypeScript which handles automated migrations, type-safety, and auto-completion.
Vercel will host our application. It scales well, all without any configuration, and deployment is instant.
Stripe is a payment gateway, and we will use it to accept online payments on the website.

How to Configure PlanetScale, Stripe, NextJS, Prisma and Other Libraries
How to Implement Mock Data, Category-Products API and All Category-Single Category UI
How to Implement Single Product UI and Stripe Checkout
How to Deploy the Website to Production

I am going to divide this tutorial into four separate sections.

At the start of every section, you will find a Git commit that has the code developed in that section. Also, if you want to see the complete code, then it is available in this repository.

How to Configure PlanetScale, Stripe, NextJS, TailwindCSS, and Prisma.

In this section, we'll implement the following functionality:

Create a PlanetScale Account and Database.
Create a Stripe Account.
Configure NextJS, TailwindCSS, and Prisma.

You can find the eCommerce website code implemented in this section at this commit.

How to Configure PlanetScale:

To create a PlanetScale account, visit this URL. Click on Get started button at the top right corner.

PlanetScale Landing Page

You can either create an account using GitHub or a traditional email-password. Once the account is created, then click on the "create" link.

PlanetScale Dashboard Page

You'll receive the following modal:

PlanetScale New Database Modal

Fill in the details and click on the Create database button. Once the database is created you'll be redirected to the following page:

PlanetScale Ecommerce Website Database Page

Click on connect and a modal will open. This modal will contain a Database URL and this password cannot be generated again. So copy and paste it into a safe location.

PlanetScale Database Username and Password Modal

How to Configure Stripe:

To create a Stripe account, go to this URL. Once you've created the account, click on the Developer Button from the Nav menu. You'll see API keys on the left side and you'll find the Publishable key and Secret key under Standard keys.

Publishable key: These are the keys that can be publicly-accessible in a web or mobile app’s client-side code.

Secret key: This is a secret credential and should be securely stored in the server code. This key is used to call the Stripe API.

How to Configure NextJS, TailwindCSS, and Prisma.

First, we will create a NextJS app using the following command:

npx create-next-app ecommerce-tut --ts --use-npm

Once the project is created, open it with your favourite editor. You'll get the following structure:

Project Structure

Let's create a directory named src. We will move the pages and styles directory to that src folder. You'll get the following structure:

Project Structure after moving Pages and Styles.

Install the following packages:

npm i @ngneat/falso @prisma/client @stripe/stripe-js @tanstack/react-query currency.js next-connect react-icons react-intersection-observer stripe

We also need to install dev dependencies:

npm i --save-dev @tanstack/react-query-devtools autoprefixer postcss tailwindcss

Let's understand each of the packages:

@ngneat/falso: We will use this library to create mock data for our eCommerce website. In an ideal world, you would have an admin panel to add the products, but it is not in the scope of this tutorial.
@prisma/client: We will use this library to connect to our database, run migrations, and do all CRUD operations on the database.
@stripe/stripe-js: We will use this library to redirect users to the stripe checkout page and process payment.
@tanstack/react-query: We will use this library for managing our asynchronous state, that is caching API responses.
currency.js: We will use this library for converting our prices to two decimal format.
next-connect: We will use this library for routing purposes on our Next API layer.
react-icons: We will use this library for adding icons to our buttons and links.
react-intersection-observer: Have you seen infinite scrolling on a lot of websites and wondered how it is implemented? We will use this library to implement that based on the viewport.
stripe: We will use the Stripe library to connect with Stripe API from our Next API layer.
@tanstack/react-query-devtools: We will use this library as the only dev dependency to view and manage our cache during development time.
TailwindCSS: We will use this as our CSS library that also requires PostCSS and AutoPrefixer.

Let's configure TailwindCSS into our project using the following command:

npx tailwindcss init -p

You'll get the following response:

TailwindCSS Config Success

Now go to tailwind.config.js and update it with the following code:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/pages/**/*.{js,ts,jsx,tsx}",
        "./src/components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

To generate the CSS, Tailwind needs access to all the HTML Elements. We will be writing the UI components under pages and components only, so we pass it under content.

If you need to use any plugins, for example, typography, then you need to add them under the plugins array. If you need to extend the default theme provide by Tailwind, then you need to add it under theme.extend section.

Now go to /src/styles/globals.css and replace the existing code with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

We will add these three directives in our globals.css file. The meaning of each directive is as follows:

@tailwind base: This injects a base style provided by Tailwind.
@tailwind components: This injects classes and any other classes added by the plugin.
@tailwind utilities: This injects hover, focus, responsive, dark mode and any other utility added by the plugin.

Remove the Home.module.css from src/styles directory and go to src/pages/index.ts and replace the existing code with the following:

import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
    return (
        
            
                All Products
                
                
            

            
                Hello
            
        
    );
};

export default Home;

When we run the create-next-app command to create the project, it adds some boilerplate code. Here we removed that in some instances while replacing index.ts with an h1 and text that says "Hello".

It's time to run the website using the following command:

npm run dev

You'll get the following response:

Open http://localhost:3000 on your browser, and you'll get the following screen with a hello message:

Screen with Hello Message

Let's configure Prisma into our project using the following command:

npx prisma init

You'll get the following response:

Prisma Successfully Configured Message

Under prisma/schema.prisma replace the existing code with the following code:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider             = "mysql"
  url                  = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

model Category {
  id        String    @id @default(cuid())
  name      String    @unique
  createdAt DateTime  @default(now())
  products  Product[]
}

model Product {
  id          String    @id @default(cuid())
  title       String    @unique
  description String
  price       String
  quantity    Int
  image       String
  createdAt   DateTime  @default(now())
  category    Category? @relation(fields: [categoryId], references: [id])
  categoryId  String?
}

This file consists of our database source that is MySQL. We are using MySQL because PlanetScale supports MySQL only.

Also, we have created two models that are:

Product:

title: Every product will have a unique title.
description: This is just information about the product.
price: It is of String type because it will hold a decimal value.
quantity: It is of Int type because it will hold a numerical value.
image: Representation of what the product will look like. We will use placeimg for the purpose of this tutorial.
createdAt: The date when a product is added.
category: A foreign relationship with the category model.

We are using cuid() instead of uuid() for the id because they are better for horizontal scaling and sequential lookup performance. Prisma has inbuilt support for CUID. You can read more about it here.

Now time to update our .env file with the following:

DATABASE_URL=

STRIPE_SECRET_KEY=

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=

You'll find the Stripe secret key and publishable key under the dashboard. The database URL is the one that we had copy-pasted earlier and kept in a safe location. Update this .env with those credentials.

Also, note that the .gitignore file created by NextJS doesn't ignore the .env file. It is configured to ignore the .env.local file. But Prisma requires .env, so we will replace the .gitignore file content with the following:

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

Ideally, Prisma manages schema migration using the prisma migrate command. But as PlanetScale has its schema migration mechanism inbuilt, we will use that. Use the following command to push migration to our current main branch.

Note, our main branch is not yet promoted as a production branch.

npx prisma db push

Now let's generate the Prisma client using the following command:

npx prisma generate

Go to the PlanetScale Dashboard, and there you'll find two tables created:

PlanetScale Two Tables Created

Click on these tables, and you'll be redirected to the following page:

PlanetScale Database Schema

How to Implement Mock Data, Category-Products API, and All Category-Single Category UI.

In this section, we'll implement the following functionality:

Create mock data
Create a Category and Product API.
Create an All Category and Single Category UI.

You can find the eCommerce website code implemented in this section at this commit.

How to Create the Mock Data:

Under the prisma directory, create a file named seed.ts and copy-paste the following code:

import {
    randBetweenDate,
    randNumber,
    randProduct,
    randProductAdjective,
} from "@ngneat/falso";
import { PrismaClient } from "@prisma/client";

const primsa = new PrismaClient();

const main = async () => {
    try {
        await primsa.category.deleteMany();
        await primsa.product.deleteMany();
        const fakeProducts = randProduct({
            length: 1000,
        });
        for (let index = 0; index < fakeProducts.length; index++) {
            const product = fakeProducts[index];
            const productAdjective = randProductAdjective();
            await primsa.product.upsert({
                where: {
                    title: `${productAdjective} ${product.title}`,
                },
                create: {
                    title: `${productAdjective} ${product.title}`,
                    description: product.description,
                    price: product.price,
                    image: `${product.image}/tech`,
                    quantity: randNumber({ min: 10, max: 100 }),
                    category: {
                        connectOrCreate: {
                            where: {
                                name: product.category,
                            },
                            create: {
                                name: product.category,
                                createdAt: randBetweenDate({
                                    from: new Date("10/06/2020"),
                                    to: new Date(),
                                }),
                            },
                        },
                    },
                    createdAt: randBetweenDate({
                        from: new Date("10/07/2020"),
                        to: new Date(),
                    }),
                },
                update: {},
            });
        }
    } catch (error) {
        throw error;
    }
};

main().catch((err) => {
    console.warn("Error While generating Seed: \n", err);
});

Here we are creating 1000 fake products and adding them to the database.

We are following these steps to add the products:

Delete all the categories using the deleteMany() function.
Delete all the product using the deleteMany() function.
The above are optional steps, but it's always a good idea to rerun the seed script with a clean table.
As the title attribute from the product table has unique property associated with it we bind it with the randProductAdjective function output to make repetitions less likely.
But still, there is a probability that the title property created by the falso gets repeated. So we use the upsert method from @prisma/client.
We are also creating/associating the category when we create a product.

Now go to package.json and update the following code below scripts:

"prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\" prisma/seed.ts"
},

We will use the ts-node package to run our seed script command. The seed script is written in TypeScript while ts-node converts TypeScript code to JavaScript.

Use the following command to install the package:

npm i --save-dev ts-node

As the ts-node will convert the code to JavaScript, we can execute the following command to seed the tables with mock data:

npx prisma db seed

You'll get the following output that will show it has started running. It will take some time to seed the tables with mock data.

Once the seed command is successful, you'll get the following response:

The benefit of Prisma is that it also has a studio, which can be used to view the database in a local development environment. Use the following command to run this studio:

npx prisma studio

Open http://localhost:5555, on your browser, and you'll get the following screen with all the tables:

Prisma Studio

The number of Products and Categories may vary on your side or be similar, as this is random data.

How to Create the Category and Product APIs:

Under the src/pages/api category you'll find a file named hello.ts. Remove this file and create two directories named categories and products.

Inside those categories, create a file named index.ts and copy-paste the following code:

import type { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { prisma } from "../../../lib/prisma";
import { TApiAllCategoriesResp, TApiErrorResp } from "../../../types";

const getCategories = async (
    _req: NextApiRequest,
    res: NextApiResponse
) => {
    try {
        const categories = await prisma.category.findMany({
            select: {
                id: true,
                name: true,
                products: {
                    orderBy: {
                        createdAt: "desc",
                    },
                    take: 8,
                    select: {
                        title: true,
                        description: true,
                        image: true,
                        price: true,
                    },
                },
            },
            orderBy: {
                createdAt: "desc",
            },
        });
        return res.status(200).json({ categories });
    } catch (error) {
        return res.status(500).json({
            message: "Something went wrong!! Please try again after sometime",
        });
    }
};

const handler = nc({ attachParams: true }).get(getCategories);

export default handler;

In the above snippet, we are doing the following:

When we create a file under the pages>api directory, NextJS treats it as a Serverless API. So by creating a file named categories/index.ts we are informing Next that it needs to convert this to the /api/categories API.
Using the next-connect library we are making sure that only the get operation is allowed for the getCategories function.
Under this function, we are querying the database with an order as desc for the createdAt property and we only take the latest eight product rows for each category row. We also select a specific property from the product and category that are required by the front end.

We don't query all the products for each category in this API, because it will slow down our response time.

You'll find that we have imported prisma and types files. Let's create two directories under src named lib and types.

Under the lib directory, create a file named prisma.ts, and under the types directory create a file named index.ts.

Let's create our global Prisma constant under prisma.ts. Copy-paste the following code:

import { PrismaClient } from "@prisma/client";

declare global {
    var prisma: PrismaClient;
}

export const prisma =
    global.prisma ||
    new PrismaClient({
        log: [],
    });

if (process.env.NODE_ENV !== "production") global.prisma = prisma;

Here we are creating a global prisma variable which we can use across the project.

Let's add the types that we will use application-wide under src/types/index.ts.

Copy-paste the following code:

export type TApiAllCategoriesResp = {
    categories: {
        id: string;
        name: string;
        products: {
            title: string;
            description: string;
            image: string;
            price: string;
        }[];
    }[];
};

export type TApiSingleCategoryWithProductResp = {
    category: {
        id: string;
        name: string;
        products: {
            id: string;
            title: string;
            description: string;
            image: string;
            price: string;
            quantity: number;
        }[];
        hasMore: boolean;
    };
};

export type TApiSingleProductResp = {
    product: {
        title: string;
        description: string;
        price: string;
        quantity: number;
        image: string;
    };
};

export type TApiErrorResp = {
    message: string;
};

Here we are creating four types which will be used across the project.

I'll be using Postman to test this API. Postman is a utility for developing APIs. You can call the APIs, and Postman will show the response based on how you structure it.

Just update the URL in Postman to:

http://localhost:3000/api/categories

And you'll get the following response:

All Categories Resp

Now let's create an API to get a single category's information with its products.

Under the src/pages/api/categories directory create a file named [id].ts and copy-paste the following code:

import type { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { prisma } from "../../../lib/prisma";
import {
    TApiErrorResp,
    TApiSingleCategoryWithProductResp
} from "../../../types";

const getSingleCategory = async (
    req: NextApiRequest,
    res: NextApiResponse
) => {
    try {
        const id = req.query.id as string;
        const cursorId = req.query.cursorId;
        if (cursorId) {
            const categoriesData = await prisma.category.findUnique({
                where: {
                    id,
                },
                select: {
                    id: true,
                    name: true,
                    products: {
                        orderBy: {
                            createdAt: "desc",
                        },
                        take: 12,
                        skip: 1,
                        cursor: {
                            id: cursorId as string,
                        },
                        select: {
                            id: true,
                            title: true,
                            description: true,
                            image: true,
                            price: true,
                            quantity: true,
                        },
                    },
                },
            });

            if (!categoriesData) {
                return res.status(404).json({ message: `Category not found` });
            }

            let hasMore = true;
            if (categoriesData.products.length === 0) {
                hasMore = false;
            }

            return res
                .status(200)
                .json({ category: { ...categoriesData, hasMore } });
        }

        const categoriesData = await prisma.category.findUnique({
            where: {
                id,
            },
            select: {
                id: true,
                name: true,
                products: {
                    orderBy: {
                        createdAt: "desc",
                    },
                    take: 12,
                    select: {
                        id: true,
                        title: true,
                        description: true,
                        image: true,
                        price: true,
                        quantity: true,
                    },
                },
            },
        });
        if (!categoriesData) {
            return res.status(404).json({ message: `Category not found` });
        }

        let hasMore = true;
        if (categoriesData.products.length === 0) {
            hasMore = false;
        }

        return res
            .status(200)
            .json({ category: { ...categoriesData, hasMore } });
    } catch (error) {
        return res.status(500).json({
            message: "Something went wrong!! Please try again after sometime",
        });
    }
};

const handler = nc({ attachParams: true }).get(getSingleCategory);

export default handler;

In the above snippet, we are doing the following:

By creating a file named [id].ts under src/pages/api/categories we are telling NextJS to convert this to the /api/categories/[id] API.
The [id] is the category id from the category table.
Using the next-connect library we are making sure that only the get operation is allowed for the getSingleCategory function.
Under this function, we are querying the database with order as desc for the createdAt property and we only take the latest twelve product rows. We also select a specific property from the product that is required by the front end.

In this API, you will find that we have implemented pagination also. It helps us get more products under one category.

There are two kinds of pagination. One is cursor based, and another is offset-based pagination.

So why did we choose cursor-based pagination instead of offset-based pagination?

According to the Prisma docs,

"Offset pagination does not scale at a database level. For example, if you skip 200,00 records and take the first 10, the database still has to traverse the first 200,00 records before returning the 10 that you asked for - this negatively affects performance."

For more information read this helpful guide.

Update the URL in Postman to:

http://localhost:3000/api/categories/cl91683hp006d0mvlxlg5u176?cursorId=cl91685ht00b00mvllxjwzkqk

Our URL consists of two ids and you'll need to add cl91683hp006d0mvlxlg5u176 from the previous all-category response. This cl91685ht00b00mvllxjwzkqk id is just the cursor of the product and you can add this as the last one you want.

You'll get the following response:

Single Category Resp

Now let's create an API to get single product information.

Under the src/pages/api/products directory create a file named [title].ts and copy-paste the following code:

import type { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { prisma } from "../../../lib/prisma";
import { TApiErrorResp, TApiSingleProductResp } from "../../../types";

const getSingleProduct = async (
    req: NextApiRequest,
    res: NextApiResponse
) => {
    try {
        const title = req.query.title as string;
        const product = await prisma.product.findUnique({
            where: {
                title,
            },
            select: {
                title: true,
                description: true,
                price: true,
                quantity: true,
                image: true,
            },
        });
        if (!product) {
            return res.status(404).json({ message: `Product not found` });
        }
        return res.status(200).json({ product });
    } catch (error) {
        return res.status(500).json({
            message: "Something went wrong!! Please try again after sometime",
        });
    }
};

const handler = nc({ attachParams: true }).get(getSingleProduct);

export default handler;

In the above snippet, we are doing the following:

By creating a file named [title].ts under src/pages/api/products we are informing NextJS to convert this to the /api/products/[title] API.
The [title] is the product title from the product table.
Using the next-connect library we are making sure that only the get operation is allowed for the getSingleProduct function.
Under this function, we are querying the database using the findUnique query based on the title.

Update the URL in Postman to:

http://localhost:3000/api/products/Practical Gorgeous Fresh Shoes

Here Practical Gorgeous Fresh Shoes is the title of the product we want to get. You can replace it with any product title from your database.

You'll get the following response:

Single Product Resp

How to Create the All Category and Single Category UIs:

Under src/pages/_app.tsx, replace the existing code with the following:

import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import type { AppProps } from "next/app";
import queryClient from "../lib/query";
import "../styles/globals.css";

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <QueryClientProvider client={queryClient}>
            <ReactQueryDevtools initialIsOpen={false} />
            <Component {...pageProps} />
        QueryClientProvider>
    );
}

export default MyApp;

Here we are wrapping all our components with React QueryClient Provider. But we also need to pass in the Client Context.

Under the src/lib directory create a new file named query.ts and copy-paste the following code:

import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default queryClient;

We are initiating a new QueryClient object and assigning it to the queryClient variable and exporting it as default. The reason we do this is that in this way we get to keep the queryClient object as a global context.

Under src/pages/index.tsx, replace the existing code with the following:

import { useQuery } from "@tanstack/react-query";
import type { NextPage } from "next";
import Head from "next/head";
import Navbar from "../components/Navbar";
import ProductGrid from "../components/ProductGrid";
import Skelton from "../components/Skelton";

const Home: NextPage = () => {
    const getAllCategories = async () => {
        try {
            const respJSON = await fetch("/api/categories");
            const resp = await respJSON.json();
            return resp;
        } catch (error) {
            throw error;
        }
    };

    const { isLoading, data } = useQuery(
        ["AllCategoreiesWithProducts"],
        getAllCategories
    );

    const categories = data?.categories;

    return (
        <div>
            <Head>
                <title>All Productstitle>
                <meta name="description" content="All Products" />
                <link rel="icon" href="/favicon.ico" />
            Head>

            <main className="container mx-auto">
                <Navbar />
                {isLoading ? (
                    <Skelton />
                ) : (
                    <>
                        {categories && categories?.length > 0 && (
                            <ProductGrid
                                showLink={true}
                                categories={categories}
                            />
                        )}
                    
                )}
            main>
        
    );
};

export default Home;

Let's understand our code.

Here we are fetching the data from the /api/categories endpoint that we wrote earlier. We are using useQuery to cache this data with the key AllCategoreiesWithProducts.

But there are three components that we haven't created yet. Let's create those and understand each one.

Under the src directory, create a components directory. Under the newly created components directory, create three files named Navbar.tsx, ProductGrid.tsx and Skelton.tsx.

Under Navbar.tsx copy-paste the following code:

import NextLink from "next/link";

const Navbar = () => {
    return (
        <div className="relative bg-white mx-6">
            <div className="flex items-center justify-between pt-6 md:justify-start md:space-x-10">
                <div className="flex justify-start lg:w-0 lg:flex-1">
                    <h1 className="text-2xl">
                        <NextLink href="/" className="cursor-pointer">
                            Ecomm App
                        NextLink>
                    h1>
                div>
            div>
        div>
    );
};

export default Navbar;

Here we have created an h1 with the text as Ecomm App. We have wrapped this text around NextLink and set the location as /. So when user clicks on this, they will be redirected to the home page.

Under ProductGrid.tsx copy-paste the following code:

import NextImage from "next/image";
import NextLink from "next/link";
import { useEffect } from "react";
import { AiOutlineRight } from "react-icons/ai";
import { useInView } from "react-intersection-observer";
import { TApiAllCategoriesResp } from "../types";

interface IProductGrid extends TApiAllCategoriesResp {
    showLink: boolean;
    hasMore?: boolean;
    loadMoreFun?: Function;
}

const ProductGrid = (props: IProductGrid) => {
    const { categories, showLink, loadMoreFun, hasMore } = props;
    const { ref, inView } = useInView();

    useEffect(() => {
        if (inView) {
            if (loadMoreFun) loadMoreFun();
        }
    }, [inView, loadMoreFun]);

    return (
        <div className="bg-white">
            {categories.map((category) => (
                <div className="mt-12  p-6" key={category.name}>
                    <div className="flex flex-row justify-between">
                        <span className="inline-flex items-center rounded-md bg-sky-800 px-8 py-2 text-md font-medium text-white">
                            {category.name}
                        span>
                        {showLink && (
                            <NextLink href={`/category/${category.id}`}>
                                <p className="flex flex-row gap-2 underline hover:cursor-pointer items-center">
                                    View More
                                    <AiOutlineRight />
                                p>
                            NextLink>
                        )}
                    div>
                    <div className="mt-6  grid grid-cols-1 gap-y-10 gap-x-6 xl:gap-x-8 sm:grid-cols-2 lg:grid-cols-4">
                        {category?.products.map((product) => (
                            <div
                                className="p-6 group rounded-lg border border-gray-200 bg-neutral-200"
                                key={product.title}
                            >
                                <div className="min-h-80 w-full overflow-hidden rounded-md group-hover:opacity-75 lg:aspect-none lg:h-80">
                                    <NextImage
                                        priority={true}
                                        layout="responsive"
                                        width="25"
                                        height="25"
                                        src={`${product.image}`}
                                        alt={product.title}
                                        className="h-full w-full object-cover object-center lg:h-full lg:w-full"
                                    />
                                div>
                                <div className="relative mt-2">
                                    <h3 className="text-sm font-medium text-gray-900">
                                        {product.title}
                                    h3>
                                    <p className="mt-1 text-sm text-gray-500">
                                        {product.price}
                                    p>
                                div>
                                <div className="mt-6">
                                    <NextLink
                                        href={`/product/${product.title}`}
                                    >
                                        <p className="relative flex items-center justify-center rounded-md border border-transparent bg-sky-800 py-2 px-8 text-sm font-medium text-white hover:bg-sky-900 hover:cursor-pointer">
                                            View More Details
                                        p>
                                    NextLink>
                                div>
                            div>
                        ))}
                    div>
                    {!showLink && (
                        <div className="flex items-center justify-center mt-8">
                            {hasMore ? (
                                <button
                                    ref={ref}
                                    type="button"
                                    className="inline-flex items-center rounded-md border border-transparent bg-sky-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-sky-900"
                                >
                                    Loading...
                                button>
                            ) : (
                                <div className="border-l-4 border-yellow-400 bg-yellow-50 p-4 w-full">
                                    <div className="flex">
                                        <div className="ml-3">
                                            <p className="text-sm text-yellow-700">
                                                You have viewed all the Products
                                                under this category.
                                            p>
                                        div>
                                    div>
                                div>
                            )}
                        div>
                    )}
                    {showLink && (
                        <div className="w-full border-b border-gray-300 mt-24" />
                    )}
                div>
            ))}
        div>
    );
};

export default ProductGrid;

Here we have created a grid that will show 1 column for the base screen. For the sm screen it will show 2 columns and for the lg screen it will show 4 columns.

Under this, we have a single card which has a Title, Price, and View More Details button. The View More Details button redirects the user to a single product page which will create a bit later.

Apart from that, we are using the useInView hook from the react-intersection-observer library to find the user's cursor on the screen. This ref is attached to a Loading... button and once user is near it then we execute the loadMoreFn function.

It makes an API call to the server to get the next twelve rows from the last cursor.

Under Skelton.tsx copy-paste the following code:

const Skelton = () => {
    return (
        <>
            <div className="mt-12 h-8 w-40 rounded-lg bg-gray-200" />
            <div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
                {Array(16)
                    .fill(0)
                    .map((_val, index) => (
                        <div className="rounded-2xl bg-black/5 p-4" key={index}>
                            <div className="h-60 rounded-lg bg-gray-200" />
                            <div className="space-y-4 mt-6 mb-4">
                                <div className="h-3 w-3/5 rounded-lg bg-gray-200" />
                                <div className="h-3 w-4/5 rounded-lg bg-gray-200" />
                            div>
                        div>
                    ))}
            div>
        
    );
};

export default Skelton;

We are using placeimg to get fake images for our product and we are using the Next Image component which requires that it be mentioned under next.config.js.

Replace the existing code in next.config.js with the following code:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    images: {
        domains: ["placeimg.com"],
    },
};

module.exports = nextConfig

We will need to restart our server. Use the following command to start your development server again:

npm run dev

Open http://localhost:3000/ and you'll see the following UI:

All Products Page

Now let's create a single category page that the user can go to using a View More link.

Under src/pages create a directory named category. Under this directory create a file named [id].tsx and copy paste the following code:

import { useInfiniteQuery } from "@tanstack/react-query";
import Head from "next/head";
import { useRouter } from "next/router";
import Navbar from "../../components/Navbar";
import ProductGrid from "../../components/ProductGrid";
import Skelton from "../../components/Skelton";

const SingleCategory = () => {
    const router = useRouter();

    const getSingleCategory = async ({ pageParam = null }) => {
        try {
            let url = `/api/categories/${router.query.id}`;
            if (pageParam) {
                url += `?cursorId=${pageParam}`;
            }
            const respJSON = await fetch(url);
            const resp = await respJSON.json();
            return resp;
        } catch (error) {
            throw error;
        }
    };

    const { isLoading, data, fetchNextPage, isError } = useInfiniteQuery(
        [`singleCategory ${router.query.id as string}`],
        getSingleCategory,
        {
            enabled: !!router.query.id,
            getNextPageParam: (lastPage) => {
                const nextCursor =
                    lastPage?.category?.products[
                        lastPage?.category?.products?.length - 1
                    ]?.id;
                return nextCursor;
            },
        }
    );

    const allProductsWithCategory: any = {
        name: "",
        products: [],
        hasMore: true,
    };

    data?.pages.map((page) => {
        if (page?.category) {
            if (page.category?.name) {
                allProductsWithCategory.name = page.category?.name;
            }
            if (page.category?.products && page.category?.products.length > 0) {
                allProductsWithCategory.products.push(
                    ...page.category?.products
                );
            }
        }
        return page?.category;
    });

    if (data?.pages[data?.pages.length - 1]?.category?.products.length === 0) {
        allProductsWithCategory.hasMore = false;
    }

    return (
        <div>
            <Head>
                <title>
                    {isLoading
                        ? "Loading..."
                        : `All ${allProductsWithCategory?.name} Product`}
                title>
                <meta
                    name="description"
                    content="Generated by create next app"
                />
                <link rel="icon" href="/favicon.ico" />
            Head>
            <main className="container mx-auto">
                <Navbar />
                {isLoading ? (
                    <Skelton />
                ) : (
                    <>
                        {allProductsWithCategory &&
                            allProductsWithCategory.products.length > 0 && (
                                <ProductGrid
                                    hasMore={allProductsWithCategory.hasMore}
                                    showLink={false}
                                    categories={[allProductsWithCategory]}
                                    loadMoreFun={fetchNextPage}
                                />
                            )}
                    
                )}
            main>
        
    );
};

export default SingleCategory;

Here we are calling the /api/categories/[id] API to get the latest twelve products for that category id.

We are using the useInfiniteQuery hook from react query to fetch the data. This hook is useful for cursor-based pagination. We will be using the ProductGrid component that we created earlier.

Open http://localhost:3000/, click on the View More link for any of the category, and you'll see the following UI:

Single Category Page

The difference between the previous UI and the current is that we now don't have the View More Link in the top right corner. Also, when you scroll below, you'll get more products for that category.

Once we scroll through all the products in that category we will see the following warning alert:

How to Implement Single Product UI and Stripe Checkout.

In this section, we'll implement the following functionality:

Create Single Product UI
Create Stripe Checkout

You can find the eCommerce website code implemented in this section at this commit.

How to Create the Single Product UI:

Under the src/pages directory create a directory named product.

Under this directory create a file named [title].tsx and copy-paste the following code:

import { loadStripe, Stripe } from "@stripe/stripe-js";
import { useMutation, useQuery } from "@tanstack/react-query";
import Head from "next/head";
import NextImage from "next/image";
import { useRouter } from "next/router";
import Navbar from "../../components/Navbar";
import Skelton from "../../components/Skelton";

const stripePromiseclientSide = loadStripe(
    process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);

const SingleProduct = () => {
    const router = useRouter();

    const getSingleProduct = async () => {
        try {
            const title = router?.query?.title;

            const respJSON = await fetch(`/api/products/${title}`);
            const resp = await respJSON.json();
            return resp;
        } catch (error) {
            throw error;
        }
    };

    const { mutate, isLoading: mutationIsLoading } = useMutation(
        async (body: any) => {
            try {
                const respJSON = await fetch("/api/create-checkout-session", {
                    method: "POST",
                    body: JSON.stringify(body),
                });
                const resp = await respJSON.json();
                const stripe = (await stripePromiseclientSide) as Stripe;
                const result = await stripe.redirectToCheckout({
                    sessionId: resp.id,
                });
                return result;
            } catch (error) {
                throw error;
            }
        }
    );

    const { data, isLoading } = useQuery(
        [`singleProduct, ${router?.query?.title}`],
        getSingleProduct,
        {
            enabled: !!router?.query?.title,
        }
    );

    const product = data?.product;

    return (
        <div>
            <Head>
                <title>{isLoading ? "Loading..." : `${product?.title}`}title>
                <meta
                    name="description"
                    content="Generated by create next app"
                />
                <link rel="icon" href="/favicon.ico" />
            Head>
            <main className="container mx-6 md:mx-auto">
                <Navbar />
                {isLoading ? (
                    <Skelton />
                ) : (
                    <div className="bg-white">
                        <div className="pt-6 pb-16 sm:pb-24">
                            <div className="mx-auto mt-8">
                                <div className="flex flex-col md:flex-row gap-x-8">
                                    <div className="min-h-80 w-full overflow-hidden rounded-md group-hover:opacity-75 lg:aspect-none lg:h-80">
                                        <NextImage
                                            layout="responsive"
                                            width="25"
                                            height="25"
                                            src={`${product.image}`}
                                            alt={product.title}
                                            className="h-full w-full object-cover object-center lg:h-full lg:w-full"
                                        />
                                    div>
                                    <div className="lg:col-span-5 lg:col-start-8 mt-8 md:mt-0">
                                        <h1 className="text-xl font-medium text-gray-900 ">
                                            {product.title}
                                        h1>
                                        <p className="text-xl font-light text-gray-700 mt-4">
                                            {product.description}
                                        p>
                                        <p className="text-xl font-normal text-gray-500 mt-4">
                                            USD {product.price}
                                        p>
                                        <button
                                            onClick={() =>
                                                mutate({
                                                    title: product.title,
                                                    image: product.image,
                                                    description:
                                                        product.description,
                                                    price: product.price,
                                                })
                                            }
                                            disabled={mutationIsLoading}
                                            type="button"
                                            className="inline-flex items-center rounded-md border border-transparent bg-sky-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-sky-900  mt-4"
                                        >
                                            Buy Now
                                        button>
                                    div>
                                div>
                            div>
                        div>
                    div>
                )}
            main>
        div>
    );
};

export default SingleProduct;

Here we are calling /api/products/title API to get the latest product. We have also created Stripe Interface for creating a checkout method once a user clicks the Buy Now button.

Once the user clicks the Buy Now button, we make an API call to /api/create-checkout-session using the useMutation hook. On a successful response, we redirect the user to the Stripe default checkout page.

Open http://localhost:3000/ and click on View More Details button for any product.

You'll see the following UI:

Single Product Page

You can also visit this page by clicking on the View More link and then clicking on the View More Details button for any product.

How to Set Up Stripe Checkout:

To set up Stripe Checkout, we need to add a new file under the lib directory.

Create a new file named stripe.ts under the lib directory and copy paste the following code:

import Stripe from "stripe";

const stripeServerSide = new Stripe(process.env.STRIPE_SECRET_KEY!, {
    apiVersion: "2022-08-01",
});

export { stripeServerSide };

Here we are creating server-side instances of Stripe. Now under the pages/api directory, create a new file named create-checkout-session.ts and copy-paste the following code:

import currency from "currency.js";
import type { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";
import { stripeServerSide } from "../../lib/stripe";
import { TApiErrorResp } from "../../types";

const checkoutSession = async (
    req: NextApiRequest,
    res: NextApiResponse<any | TApiErrorResp>
) => {
    try {
        const host = req.headers.origin;
        const referer = req.headers.referer;
        const body = JSON.parse(req.body);
        const formatedPrice = currency(body.price, {
            precision: 2,
            symbol: "",
        }).multiply(100);
        const session = await stripeServerSide.checkout.sessions.create({
            mode: "payment",
            payment_method_types: ["card"],
            line_items: [
                {
                    price_data: {
                        currency: "usd",
                        product_data: {
                            name: body?.title,
                            images: [body.image],
                            description: body?.description,
                        },
                        unit_amount_decimal: formatedPrice.toString(),
                    },
                    quantity: 1,
                },
            ],
            success_url: `${host}/thank-you`,
            cancel_url: `${referer}?status=cancel`,
        });
        return res.status(200).json({ id: session.id });
    } catch (error) {
        return res.status(500).json({
            message: "Something went wrong!! Please try again after sometime",
        });
    }
};

const handler = nc({ attachParams: true }).post(checkoutSession);

export default handler;

In the snippet above we are doing the following:

Formatting the price with precision as two and multiplying it by 100 as Stripe expects the unit_amount in cents by default.
We create the session and pass the id as the response.

Now we need to create another page named thank-you.tsx under the src/pages directory. Once the product purchase is successful, Stripe Checkout will redirect to this page.

Copy-paste the following code under this file:

import Head from "next/head";
import { useRouter } from "next/router";
import { HiCheckCircle } from "react-icons/hi";
import Navbar from "../components/Navbar";

const ThankYou = () => {
    const router = useRouter();
    return (
        <div>
            <Head>
                <title>Thank Youtitle>
                <meta name="description" content="All Products" />
                <link rel="icon" href="/favicon.ico" />
            Head>

            <main className="container mx-auto">
                <Navbar />
                <div className="rounded-md bg-green-50 p-4 mt-8">
                    <div className="flex">
                        <div className="flex-shrink-0">
                            <HiCheckCircle
                                className="h-5 w-5 text-green-400"
                                aria-hidden="true"
                            />
                        div>
                        <div className="ml-3">
                            <h3 className="text-sm font-medium text-green-800">
                                Order Placed
                            h3>
                            <div className="mt-2 text-sm text-green-700">
                                <p>
                                    Thank you for your Order. We have placed the
                                    order and your email will recieve further
                                    details.
                                p>
                            div>
                            <button
                                onClick={() => router.push("/")}
                                type="button"
                                className="inline-flex items-center rounded-md border border-transparent bg-sky-800 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-sky-900 mt-4"
                            >
                                Continue Shopping
                            button>
                        div>
                    div>
                div>
            main>
        div>
    );
};

export default ThankYou;

Open http://localhost:3000/ and click on the View More Details button of any product.

Click on the Buy Now button and you'll be redirected to the following page:

Add all the details for the test card. You can use any card from this link. Stripe provides various test cards which work only during Test Mode. Once you click on Pay and payment processing happens, Stripe will redirect you to the success page.

Thank You Page

How to Deploy the Website to Production

In this section, we'll implement the following functionality:

Promote our PlanetScale branch to Main.
Deploy the app on Vercel.

How to Promote the PlanetScale Branch to Main:

To promote the branch to main, we can do it either via the terminal or dashboard. I'll use the dashboard for this tutorial.

Go to your project on PlanetScale and you'll find the following message on the dashboard:

PlanetScale Database Promotion

Let's click on the Promote a branch to production button and you'll get a confirmation model. Click on the Promote branch button. Once done you'll get a toast with a success message.

How to Deploy to Vercel:

If you don't have an account on Vercel, you can create one here.

You can create a project on GitHub and push it to the Main branch. If you don't know how, you can check out this tutorial.

Once the project is pushed on GitHub, go to Vercel and create an Add New button and select Project from the drop down.

Add New Project Vercel

You'll get the following the UI:

Select Git Provider Vercel

As we have pushed the code on GitHub, let's click on the Continue with GitHub button. You'll get the following UI:

Select Git Repository Vercel

Click on Import and you'll get the following UI:

Configure Project Vercel

Click on the Environment Variables and add these three there:

Add NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, STRIPE_SECRET_KEY, and DATABASE_URL

Once done click the Deploy button. You'll get the following UI once the deployment starts:

Deploying Vercel

Once deployed, Vercel will give you a Unique URL.

Visit this URL and you'll find its failing. Let's go to the deployment > functions and you'll see the following error:

Prisma generate Fails

We need to update our build command in package.json as follows:

"build": "npx prisma generate && next build",

Push the code again to the Git repository and you'll find that Vercel starts redeploying your project.

Once the deployment is done, you can visit your application URL and you'll find it shows all your products.

With this, we have created our production-ready eCommerce application. If you have built the website along with the tutorial, then a very big congratulations to you on this achievement.

Thank you for reading!

Feel free to connect with me on Twitter and Github.

If you want any project to be developed or want to consult with me, you can DM me on my Twitter (@sharvinshah26 ).

How to Build a TodoApp using ReactJS, NextJS, and Supabase

Sharvin Shah — Tue, 07 Dec 2021 15:48:26 +0000

Hello folks, welcome to this tutorial. Today we're going to build a production-ready Todo application with React, Next, and Supabase.

Before we begin, you should be familiar with the basics of React.js and Next.js to get the most out of this guide.

If you're not and need to brush up, I would recommend that you go through the ReactJS documentation and NextJS documentation.

Here's what we're going to build

We'll build a ToDo app that looks like this:

And here's the tech we'll use:

ReactJS: a JavaScript library for building user interfaces. It is declarative and component-based.
NextJS: a React-based framework that lets us render data on the server-side. It helps Google crawl the application which results in SEO benefits.
Supabase: provides authentication, database, and storage that we are going to use in our application.
Chakra UI: is a simple, modular, and accessible component library that will provide us with the building blocks to build the application.
Vercel: will host our application. It scales well, all without any configuration, and deployment is instant.

Why use Supabase?

According to the Supabase documentation, Supabase is "an open source Firebase alternative".

However, Supabase is not completely similar to Firebase. The difference between the two is that Supabase uses Postgres (a relational database) for storing data whereas Firebase uses the NoSQL mechanism to store data.

Personally, I typically use Postgres as my primary database and I have found it to scale well.

Supabase provides the following services:

Authentication
Postgres database
Real time rest server
Row level security
Storage bucket

Now let's understand how it works:

Architectural Diagram from Supabase documentation

Alright, what's going on here?

As you already know, Supabase uses Postgres as a database – but it also has many other components which provide different services.

One of my favorites is Realtime. Supabase uses the Elixir server to set up a web socket connection to listen for insert, update, and delete the events.

PostgRest directly converts the Postgres database into a Rest API.

GoTrue is an API for managing users and issuing SWT tokens.

Postgres-Meta is a Restful API for managing the Postgres database.

Kong is an API gateway.

Note: All these definitions are taken from the supabase documentation. To read more about how Supabase works, you can visit their documentation.

And with that, we're ready to dive into our project. Here's what we'll cover:

How to configure Supabase tables, auth, and storage
How to implement sign-in using Supabase
How to show all todos, add new todos, and update and delete todos
How to update profile details and avatar
How to deploy the app to Vercel and configure Supabase authentication

I am going to divide this tutorial into four separate sections. At the start of every section, you will find a Git commit that has the code developed in that section. Also If you want to see the complete code, then it is available in this repository.

How to Configure Supabase Tables, Auth, and Storage

In this section, we'll implement the following functionality:

Create a Supabase project.
Setup authentication for users and policies.
Configure database and policies for users and todos.

To create a Supabase project, visit the following link. Click on the "Start your project" button and login via GitHub (at the time of writing this article, they only support GitHub as an auth provider).

Once you've created your account, click on New project where it will ask for the organization. By default, Supabase will create an organizational account for you with your username. I'll be using the default but you can create your own for this project.

Once the organization is selected, Supabase will ask for the project name, database password, and region.

Supabase Create Project

Fill out this form and click on the Create new project button.

Supabase will start setting up the application. It may take a few minutes to set up.

Under the Project API keys section, you'll see two types of keys:

Supabase Project API Keys

anon is a public API key and it can be used on the client-side.

service_role is a private API key and you use it on the server-side only. This key can bypass the row-level security and mutate the data.

What is Row Level Security in Supabase?

You might be wondering – what is row-level security and why it is so important?

Well, Supabase has a client library to access data directly from the browser and for that, we use the anon key. As the anon key is on the client, anyone can have access to the key via the network tab.

But there are some cases where we don't want the data to be directly accessed by the browser using the client library.

In these cases, we can set up row-level security, which specifies which data can be accessed using the anon key.

To learn more about row-level security, read this documentation.

Returning back to the application, once the project is configured you'll get the following message "Welcome to your new project."

How to Create Tables in the Database

Now let's create a script to create tables in our database.

Go to the SQL section from the sidebar and click on New query.

SQL section from Supabase panel

Click on New Query and copy-paste the following code:

create table profiles (
  id uuid references auth.users not null,
  username text unique,
  avatarUrl text,
  website text,
  bio text,
  joinedAt timestamp with time zone default timezone('utc'::text, now()) not null,

  primary key (id),
  unique(username)
);

alter table profiles enable row level security;

create policy "Profiles are viewable by user only."
  on profiles for select
  using ( auth.uid() = id );

create policy "Users can insert their own profile."
  on profiles for insert
  with check ( auth.uid() = id );

create policy "Users can update own profile."
  on profiles for update
  using ( auth.uid() = id );

begin;
  drop publication if exists supabase_realtime;
  create publication supabase_realtime;
commit;
alter publication supabase_realtime add table profiles;

-- Set up Storage!
insert into storage.buckets (id, name)
values ('avatars', 'avatars');

create policy "Avatar images are publicly accessible."
  on storage.objects for select
  using ( bucket_id = 'avatars');

create policy "Anyone can upload an avatar."
  on storage.objects for insert
  with check ( bucket_id = 'avatars' );

create policy "Anyone can update an avatar."
  on storage.objects for update
  with check ( bucket_id = 'avatars' );

Let's understand this Profiles script piece by piece.

First, we create table profiles that relate to users in our TodoApp. To understand how to set up unique in a table, we have set up username as a unique constraint and primary key as id.

After that, we set up the row-level security and assign policies so that each individual can access only their data.

After that, we enable real-time for our database. Realtime gives an event whenever there are any changes in the row, and we can update the UI accordingly.

Now click on the RUN button at the right corner and you'll get the following message:

Success. No rows returned

Now let's create our todos table. For generating the table, click on the New query button and copy-paste the following script:

create table todos (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  title text,
  description text,
  "isComplete" boolean default false,
  insertedAt timestamp with time zone default timezone('utc'::text, now()) not null
);

alter table todos enable row level security;

create policy "Individuals can create todos." on todos for
    insert with check (auth.uid() = user_id);

create policy "Individuals can view their own todos. " on todos for
    select using (auth.uid() = user_id);

create policy "Individuals can update their own todos." on todos for
    update using (auth.uid() = user_id);

create policy "Individuals can delete their own todos." on todos for
    delete using (auth.uid() = user_id);

Now click on the RUN button at the right corner, and you'll get the following message:

Success. No rows returned

To confirm our tables are generated, go to the table editor section from the sidebar.

Table Editor section from Supabase panel

Inside the table editor, you'll find our tables generated successfully.

Supabase Table sidebar

As you can see in the above Todos Script, we didn't enable real-time. To enable a real-time server, we need to go to the Database > Replication section.

Database section from Supabase panel

Here you'll see the following view:

Supabase Database Replication Section

Click on the 1 table button under source and then toggle the switch for todos. It will enable a real-time server for our todos also.

Now suppose we want to disable row-level security for todos (note that this is not advisable), but just for the scope of the article to understand how to, we will disable it.

Go to the Authentication section and, inside that, go to the Policies.

Authentication section from Supabase panel

Now you'll see the todos section with RLS enabled written in the green box. Click on the Disable RLS option at the top right-hand corner of this box. It will disable the row-level security for our application.

The code for this section is available under this commit if you need to refer to it in the future for reference.

https://github.com/Sharvin26/TodoApp-supabase/tree/b253c904f2f39ac80808620cf51c9584bfa90f4d

First, let's create our application using the following command:

npx create-next-app todo_app

It's time to install our dependencies and have a basic configuration in place.

How to Install Chakra UI

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Note: If you use zsh you'll need to add the escape character () after @ as follows:

npm i @chakra-ui/react @emotion/react@\^11 @emotion/styled@\^11 framer-motion@\^4

Now let's clean up our code by removing the code that is not required and configuring ChakraUI into our application.

As per Chakra's documentation, we need to wrap with ChakraProvider in the pages/_app.js. Go to the _app.js and copy-paste the following code:

import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import customTheme from "../lib/theme";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={customTheme}>
      <Component {...pageProps} />
    ChakraProvider>
  );
}

export default MyApp;

Let's create a directory under our root directory and name it lib. Under this directory, create a file named theme.js.

Copy-paste the following code inside this file:

import { extendTheme } from "@chakra-ui/react"

const config = {
  initialColorMode: "light",
  useSystemColorMode: false,
}

const theme = extendTheme({ config })

export default theme

Now under the pages directory, create a _document.js file and copy-paste the following code:

import { ColorModeScript } from "@chakra-ui/react"
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
import theme from "../lib/theme"

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          {/* 👇 Here's the script */}
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        body>
      Html>
    )
  }
}

By creating _document.js and theme.js we have just set our color to be light by default.

From ChakraUI version 1.6.12, it sets the system chosen color by default. So for some users who have dark mode enabled for the browser, the application will have a dark color theme. Dark mode is nice, but for starting purposes, we only want the color to be light.

Go to index.js and copy paste the following code:

import { Box } from "@chakra-ui/react";
import Head from "next/head";

const Home = () => {
  return (
    <div>
      <Head>
        <title>TodoApptitle>
        <meta
          name="description"
          content="Awesome todoapp to store your awesome todos"
        />
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main>
        <Box>Hello worldBox>
      main>
    div>
  );
};

export default Home;

How to Install the Supabase Client Library

npm i @supabase/supabase-js

Under lib directory create a file named client.js.

Under that file copy paste the following code:

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
const SUPBASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

const client = createClient(SUPABASE_URL, SUPBASE_ANON_KEY);

export { client as supabaseClient };

Here we are just creating a Supabase Client which will be used throughout the project.

Now under the root directory create a .env.local file and copy-paste the following part with Supabase URL and anon key:

NEXT_PUBLIC_SUPABASE_URL=#Add_your_supabase_url 
NEXT_PUBLIC_SUPABASE_ANON_KEY=#Add_your_supabase_key

You can find the Supabase URL and anon key under the Settings > API section.

Under Project API keys is the anon key and under Config is the URL.

With this, our Supabase client is configured and ready to use.

Let's run our application using the following command:

npm run dev

You'll get the following output:

Todo App Home Screen

Now under the pages directory, create a file named signin.js and copy-paste the following code:

import {
  Alert,
  AlertIcon,
  Box,
  Button,
  chakra,
  FormControl,
  FormLabel,
  Heading,
  Input,
  Stack,
  Text,
} from "@chakra-ui/react";
import { useState } from "react";
import { supabaseClient } from "../lib/client";

const SignIn = () => {
  const [email, setEmail] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [error, setError] = useState(null);

  const submitHandler = async (event) => {
    event.preventDefault();
    setIsLoading(true);
    setError(null);
    try {
      const { error } = await supabaseClient.auth.signIn({
        email,
      });
      if (error) {
        setError(error.message);
      } else {
        setIsSubmitted(true);
      }
    } catch (error) {
      setError(error.message);
    } finally {
      setIsLoading(false);
    }
  };

  const changeHandler = (event) => {
    setEmail(event.target.value);
  };

  return (
    <Box minH="100vh" py="12" px={{ base: "4", lg: "8" }} bg="gray.50">
      <Box maxW="md" mx="auto">
        <Heading textAlign="center" m="6">
          Welcome to Todo App
        Heading>
        {error && (
          <Alert status="error" mb="6">
            <AlertIcon />
            <Text textAlign="center">{error}Text>
          Alert>
        )}
        <Box
          py="8"
          px={{ base: "4", md: "10" }}
          shadow="base"
          rounded={{ sm: "lg" }}
          bg="white"
        >
          {isSubmitted ? (
            <Heading size="md" textAlign="center" color="gray.600">
              Please check {email} for login link
            Heading>
          ) : (
            <chakra.form onSubmit={submitHandler}>
              <Stack spacing="6">
                <FormControl id="email">
                  <FormLabel>Email addressFormLabel>
                  <Input
                    name="email"
                    type="email"
                    autoComplete="email"
                    required
                    value={email}
                    onChange={changeHandler}
                  />
                FormControl>
                <Button
                  type="submit"
                  colorScheme="blue"
                  size="lg"
                  fontSize="md"
                  isLoading={isLoading}
                >
                  Sign in
                Button>
              Stack>
            chakra.form>
          )}
        Box>
      Box>
    Box>
  );
};

export default SignIn;

Here we have created a form and used a supabase auth method to sign in the user.

Note: In supabaseClient.auth.signIn method, when you don't pass a password, it considers the authentication method as the magic link.

Now go to the _app.js and copy paste the following code:

import { ChakraProvider } from "@chakra-ui/react";
import { useRouter } from "next/router";
import { useEffect } from "react";
import { supabaseClient } from "../lib/client";
import customTheme from "../lib/theme";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const user = supabaseClient.auth.user();

  useEffect(() => {
    const { data: authListener } = supabaseClient.auth.onAuthStateChange(
      (event, session) => {
        handleAuthSession(event, session);
        if (event === "SIGNED_IN") {
          const signedInUser = supabaseClient.auth.user();
          const userId = signedInUser.id;
          supabaseClient
            .from("profiles")
            .upsert({ id: userId })
            .then((_data, error) => {
              if (!error) {
                router.push("/");
              }
            });
        }
        if (event === "SIGNED_OUT") {
          router.push("/signin");
        }
      }
    );

    return () => {
      authListener.unsubscribe();
    };
  }, [router]);

  useEffect(() => {
    if (user) {
      if (router.pathname === "/signin") {
        router.push("/");
      }
    }
  }, [router.pathname, user, router]);

  const handleAuthSession = async (event, session) => {
    await fetch("/api/auth", {
      method: "POST",
      headers: new Headers({ "Content-Type": "application/json" }),
      credentials: "same-origin",
      body: JSON.stringify({ event, session }),
    });
  };

  return (
    <ChakraProvider theme={customTheme}>
      <Component {...pageProps} />
    ChakraProvider>
  );
}

export default MyApp;

Now inside the API directory, remove the hello.js file and create a new file called auth.js. Copy-paste the following code in that new file:

import { supabaseClient } from "../../lib/client";

export default function handler(req, res) {
  supabaseClient.auth.api.setAuthCookie(req, res);
}

The code under _app.js is crucial for authentication when the user clicks on the magic link.

Supabase provides a listener method under the hood auth.onAuthStateChange which gives two events SIGNED_IN and SIGNED_OUT.

We use SIGNED_IN event to set a cookie by calling /api/auth which uses another method exposed by supabase. This method auth.api.setAuthCookie is useful to set cookies via server-side. Once the user is authenticated we push the user to the / page where all todos will be.

Now let's restart our server using npm run dev and then go to http://localhost:3000/signin. You'll see the following UI:

Todo SignIn Page

Add your email and click the submit button. Go to the email and click on verify, and you'll be redirected to the / page.

How to Show All Todos, Add New Todos, and Update and Delete Todos

The code is available under this commit if you need to refer to it in the future for reference.

https://github.com/Sharvin26/TodoApp-supabase/tree/c2d1361b461d301549a813fda350c69a3e23e579

Before implementing Todo crud operations, let's implement the logout functionality. Go to index.js and replace the existing code with the following code:

import Head from "next/head";
import { useRouter } from "next/router";
import { useEffect } from "react";
import Navbar from "../components/Navbar";
import { supabaseClient } from "../lib/client";

const Home = () => {
  const router = useRouter();
  const user = supabaseClient.auth.user();

  useEffect(() => {
    if (!user) {
      router.push("/signin");
    }
  }, [user, router]);

  return (
    <div>
      <Head>
        <title>TodoApptitle>
        <meta
          name="description"
          content="Awesome todoapp to store your awesome todos"
        />
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main>
        <Navbar />
      main>
    div>
  );
};

export default Home;

Create a component directory under the root directory, and inside the component directory create a file named Navbar.js. Copy-paste the following content under that file:

import { Box, Button, ButtonGroup, Flex, Heading } from "@chakra-ui/react";
import NavLink from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import { supabaseClient } from "../lib/client";

const Navbar = () => {
  const router = useRouter();
  const [isLogoutLoading, setIsLogoutLoading] = useState(false);

  const logoutHandler = async () => {
    try {
      setIsLogoutLoading(true);
      await supabaseClient.auth.signOut();
      router.push("/signin");
    } catch (error) {
      router.push("/signin");
    } finally {
      setIsLogoutLoading(false);
    }
  };

  return (
    <Box height="100%" p="5" bg="gray.100">
      <Box maxW="6xl" mx="auto">
        <Flex
          as="nav"
          aria-label="Site navigation"
          align="center"
          justify="space-between"
        >
          <Heading mr="4">TodoAppHeading>
          <Box>
            <NavLink href="/profile">ProfileNavLink>
            <ButtonGroup spacing="4" ml="6">
              <Button colorScheme="blue">Add TodoButton>
              <Button
                colorScheme="red"
                onClick={logoutHandler}
                isLoading={isLogoutLoading}
              >
                Logout
              Button>
            ButtonGroup>
          Box>
        Flex>
      Box>
    Box>
  );
};

export default Navbar;

We have created a navbar component with a Profile link, Add Todo button, and a Logout button.

The logoutHandler uses a Supabase method called signOut to clear the session and log us out of the application.

Go to http://localhost:3000 and click on the Logout button.

The cookie will be cleared from the browser, and the user will get redirected to the sign-in page.

TodoApp Home Page

How to Add a Todo

Go to the Navbar.js and copy paste the following code:

import { Box, Button, ButtonGroup, Flex, Heading } from "@chakra-ui/react";
import NavLink from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import { supabaseClient } from "../lib/client";

const Navbar = ({ onOpen }) => {
  const router = useRouter();
  const [isLogoutLoading, setIsLogoutLoading] = useState(false);

  const logoutHandler = async () => {
    try {
      setIsLogoutLoading(true);
      await supabaseClient.auth.signOut();
      router.push("/signin");
    } catch (error) {
      router.push("/signin");
    } finally {
      setIsLogoutLoading(false);
    }
  };

  return (
    <Box height="100%" p="5" bg="gray.100">
      <Box maxW="6xl" mx="auto">
        <Flex
          as="nav"
          aria-label="Site navigation"
          align="center"
          justify="space-between"
        >
          <Heading mr="4">TodoAppHeading>
          <Box>
            <NavLink href="/profile">ProfileNavLink>
            <ButtonGroup spacing="4" ml="6">
              <Button colorScheme="blue" onClick={onOpen}>
                Add Todo
              Button>
              <Button
                colorScheme="red"
                onClick={logoutHandler}
                isLoading={isLogoutLoading}
              >
                Logout
              Button>
            ButtonGroup>
          Box>
        Flex>
      Box>
    Box>
  );
};

export default Navbar;

Here we have just assigned an onClick handler to our Add Todo button which will open a modal to add a todo.

Now create a file named ManageTodo.js under the components directory and copy paste the following code:

import {
  Alert,
  AlertIcon,
  Button,
  ButtonGroup,
  FormControl,
  FormHelperText,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Switch,
  Text,
  Textarea,
} from "@chakra-ui/react";
import { useState } from "react";
import { supabaseClient } from "../lib/client";

const ManageTodo = ({ isOpen, onClose, initialRef }) => {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [isComplete, setIsComplete] = useState(false);
  const [isLoading, setIsLoading] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const submitHandler = async (event) => {
    event.preventDefault();
    setErrorMessage("");
    if (description.length <= 10) {
      setErrorMessage("Description must have more than 10 characters");
      return;
    }
    setIsLoading(true);
    const user = supabaseClient.auth.user();
    const { error } = await supabaseClient
      .from("todos")
      .insert([{ title, description, isComplete, user_id: user.id }]);
    setIsLoading(false);
    if (error) {
      setErrorMessage(error.message);
    } else {
      closeHandler();
    }
  };

  const closeHandler = () => {
    setTitle("");
    setDescription("");
    setIsComplete(false);
    onClose();
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      isCentered
      initialFocusRef={initialRef}
    >
      <ModalOverlay />
      <ModalContent>
        <form onSubmit={submitHandler}>
          <ModalHeader>Add TodoModalHeader>
          <ModalCloseButton />
          <ModalBody pb={6}>
            {errorMessage && (
              <Alert status="error" borderRadius="lg" mb="6">
                <AlertIcon />
                <Text textAlign="center">{errorMessage}Text>
              Alert>
            )}
            <FormControl isRequired={true}>
              <FormLabel>TitleFormLabel>
              <Input
                ref={initialRef}
                placeholder="Add your title here"
                onChange={(event) => setTitle(event.target.value)}
                value={title}
              />
            FormControl>

            <FormControl mt={4} isRequired={true}>
              <FormLabel>DescriptionFormLabel>
              <Textarea
                placeholder="Add your description here"
                onChange={(event) => setDescription(event.target.value)}
                value={description}
              />
              <FormHelperText>
                Description must have more than 10 characters.
              FormHelperText>
            FormControl>

            <FormControl mt={4}>
              <FormLabel>Is Completed?FormLabel>
              <Switch
                value={isComplete}
                id="is-completed"
                onChange={(event) => setIsComplete(!isComplete)}
              />
            FormControl>
          ModalBody>

          <ModalFooter>
            <ButtonGroup spacing="3">
              <Button
                onClick={closeHandler}
                colorScheme="red"
                type="reset"
                isDisabled={isLoading}
              >
                Cancel
              Button>
              <Button colorScheme="blue" type="submit" isLoading={isLoading}>
                Save
              Button>
            ButtonGroup>
          ModalFooter>
        form>
      ModalContent>
    Modal>
  );
};

export default ManageTodo;

This part will be responsible for adding and updating the todos. Here we have created a modal with a form and 3 form control elements.

Once the form is submited we call a supabase server with following code:

const { error } = await supabaseClient
      .from("todos")
      .insert([{ title, description, isComplete, user_id: user.id }]);

This just inserts a new todo inside our supabase table.

Now let's go to pages > index.js file and copy paste the following code:

import { useDisclosure } from "@chakra-ui/hooks";
import Head from "next/head";
import { useRouter } from "next/router";
import { useEffect, useRef } from "react";
import ManageTodo from "../components/ManageTodo";
import Navbar from "../components/Navbar";
import { supabaseClient } from "../lib/client";

const Home = () => {
  const initialRef = useRef();
  const { isOpen, onOpen, onClose } = useDisclosure();

  const router = useRouter();
  const user = supabaseClient.auth.user();

  useEffect(() => {
    if (!user) {
      router.push("/signin");
    }
  }, [user, router]);

  return (
    <div>
      <Head>
        <title>TodoApptitle>
        <meta
          name="description"
          content="Awesome todoapp to store your awesome todos"
        />
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main>
        <Navbar onOpen={onOpen} />
        <ManageTodo isOpen={isOpen} onClose={onClose} initialRef={initialRef} />
      main>
    div>
  );
};

export default Home;

Here we are using useDisclosure hook from Chakra to maintain the modal state. Besides that you'll see we have passed onOpen to the Navbar and added the ManageTodo component.

Now go to http://localhost:3000 and click on Add Todo Button. You'll see the following screen:

Add Todo Modal

Fill out the form, click save, and then go to the Supabase todos table. You'll find that a new todo has been added to our table.

Note: Supabase sometimes requires manual refresh when a new record is added.

How to Get All Todos

So our todos are getting added successfully. Now let's work on getting all todos from a Supabase table.

Under the components directory, create a file named SingleTodo.js and copy paste the following code:

import { Box, Divider, Heading, Text, Tag } from "@chakra-ui/react";

const SingleTodo = ({ todo }) => {
  const getDateInMonthDayYear = (date) => {
    const d = new Date(date);
    const options = {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
    };
    const n = d.toLocaleDateString("en-US", options);
    const replase = n.replace(new RegExp(",", "g"), " ");
    return replase;
  };

  return (
    <Box
      position="relative"
      maxW="sm"
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
      p="4"
    >
      <Heading size="md" mt="3">{todo.title}Heading>
      <Tag
        position="absolute"
        top="3"
        right="2"
        bg={todo.isComplete ? "green.500" : "yellow.400"}
        borderRadius="3xl"
        size="sm"
      />
      <Text color="gray.400" mt="1" fontSize="sm">
        {getDateInMonthDayYear(todo.insertedat)}
      Text>
      <Divider my="4" />
      <Text noOfLines={[1, 2, 3]} color="gray.800">
        {todo.description}
      Text>
    Box>
  );
};

export default SingleTodo;

This is just UI code with a utitlity function converting the date to human readable format.

Go to the index.js and replace the old code with following code:

import { useDisclosure } from "@chakra-ui/hooks";
import { Box, SimpleGrid, Text, HStack, Tag } from "@chakra-ui/react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";
import ManageTodo from "../components/ManageTodo";
import Navbar from "../components/Navbar";
import SingleTodo from "../components/SingleTodo";
import { supabaseClient } from "../lib/client";

const Home = () => {
  const initialRef = useRef();
  const [todos, setTodos] = useState([]);

  const router = useRouter();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const user = supabaseClient.auth.user();

  useEffect(() => {
    if (!user) {
      router.push("/signin");
    }
  }, [user, router]);

  useEffect(() => {
    if (user) {
      supabaseClient
        .from("todos")
        .select("*")
        .eq("user_id", user?.id)
        .order("id", { ascending: false })
        .then(({ data, error }) => {
          if (!error) {
            setTodos(data);
          }
        });
    }
  }, [user]);

  useEffect(() => {
    const todoListener = supabaseClient
      .from("todos")
      .on("*", (payload) => {
        const newTodo = payload.new;
        setTodos((oldTodos) => {
          const newTodos = [...oldTodos, newTodo];
          newTodos.sort((a, b) => b.id - a.id);
          return newTodos;
        });
      })
      .subscribe();

    return () => {
      todoListener.unsubscribe();
    };
  }, []);

  return (
    <div>
      <Head>
        <title>TodoApptitle>
        <meta
          name="description"
          content="Awesome todoapp to store your awesome todos"
        />
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main>
        <Navbar onOpen={onOpen} />
        <ManageTodo isOpen={isOpen} onClose={onClose} initialRef={initialRef} />
        <HStack m="10" spacing="4" justify="center">
          <Box>
            <Tag bg="green.500" borderRadius="3xl" size="sm" mt="1" /> Complete
          Box>
          <Box>
            <Tag bg="yellow.400" borderRadius="3xl" size="sm" mt="1" />{" "}
            Incomplete
          Box>
        HStack>
        <SimpleGrid
          columns={{ base: 2, md: 3, lg: 4 }}
          gap={{ base: "4", md: "6", lg: "8" }}
          m="10"
        >
          {todos.map((todo) => (
            <SingleTodo todo={todo} key={todo.id} />
          ))}
        SimpleGrid>
      main>
    div>
  );
};

export default Home;

Let's understand the code. Here we have added two useEffects:

  useEffect(() => {
    if (user) {
      supabaseClient
        .from("todos")
        .select("*")
        .eq("user_id", user?.id)
        .order("id", { ascending: false })
        .then(({ data, error }) => {
          if (!error) {
            setTodos(data);
          }
        });
    }
  }, [user]);

This useEffect is usefull when the page is rendered for the first time. We query data from the Supabase table for that particular user in descending fashion.

  useEffect(() => {
    const todoListener = supabaseClient
      .from("todos")
      .on("*", (payload) => {
        const newTodo = payload.new;
        setTodos((oldTodos) => {
          const newTodos = [...oldTodos, newTodo];
          newTodos.sort((a, b) => b.id - a.id);
          return newTodos;
        });
      })
      .subscribe();

    return () => {
      todoListener.unsubscribe();
    };
  }, []);

This useEffect is a real time subscription with the Supabase real time server. Whenever a new todo is added we get the payload event which we use to add the todo in our local state.

Note: the Supabase docs suggest not using real time subscription on a server-side application.

Now go to http://localhost:3000 and add a todo. You'll see the following view:

All Todos

How to Update a Todo

Updating the todo mechanism might be complex for beginners. So I'll explain the process as simply as I can:

We create a todo state in our parent component of index.js. This todo state is updated when user clicks on SingleTodo.
We pass an openHandler function for doing that. This function updates the todo state with the clicked todo detail and opens the modal.
In ManageTodo.js we have written a useEffect with a dependency of todo which updates the values of title, description, and isComplete whenever the todo changes.
At last we update the todo in our table using the Supbase update method on the basis of todo id.

Time to implement the code. Under the components directory, go to SingleTodo.js and replace the code with the following:

import { Box, Divider, Heading, Tag, Text } from "@chakra-ui/react";

const SingleTodo = ({ todo, openHandler }) => {
  const getDateInMonthDayYear = (date) => {
    const d = new Date(date);
    const options = {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
    };
    const n = d.toLocaleDateString("en-US", options);
    const replase = n.replace(new RegExp(",", "g"), " ");
    return replase;
  };

  return (
    <Box
      position="relative"
      maxW="sm"
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
      p="4"
      onClick={() => openHandler(todo)}
    >
      <Heading size="md" mt="3">
        {todo.title}
      Heading>
      <Tag
        position="absolute"
        top="3"
        right="2"
        bg={todo.isComplete ? "green.500" : "yellow.400"}
        borderRadius="3xl"
        size="sm"
      />
      <Text color="gray.400" mt="1" fontSize="sm">
        {getDateInMonthDayYear(todo.insertedat)}
      Text>
      <Divider my="4" />
      <Text noOfLines={[1, 2, 3]} color="gray.800">
        {todo.description}
      Text>
    Box>
  );
};

export default SingleTodo;

Under the components directory go to ManageTodo.js and replace the code with the following code:

import {
  Alert,
  AlertIcon,
  Button,
  ButtonGroup,
  FormControl,
  FormHelperText,
  FormLabel,
  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Switch,
  Text,
  Textarea,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { supabaseClient } from "../lib/client";

const ManageTodo = ({ isOpen, onClose, initialRef, todo, setTodo }) => {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [isComplete, setIsComplete] = useState(false);
  const [isLoading, setIsLoading] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  useEffect(() => {
    if (todo) {
      setTitle(todo.title);
      setDescription(todo.description);
      setIsComplete(todo.isComplete);
    }
  }, [todo]);

  const submitHandler = async (event) => {
    event.preventDefault();
    setErrorMessage("");
    if (description.length <= 10) {
      setErrorMessage("Description must have more than 10 characters");
      return;
    }
    setIsLoading(true);
    const user = supabaseClient.auth.user();
    let supabaseError;
    if (todo) {
      const { error } = await supabaseClient
        .from("todos")
        .update({ title, description, isComplete, user_id: user.id })
        .eq("id", todo.id);
      supabaseError = error;
    } else {
      const { error } = await supabaseClient
        .from("todos")
        .insert([{ title, description, isComplete, user_id: user.id }]);
      supabaseError = error;
    }

    setIsLoading(false);
    if (supabaseError) {
      setErrorMessage(supabaseError.message);
    } else {
      closeHandler();
    }
  };

  const closeHandler = () => {
    setTitle("");
    setDescription("");
    setIsComplete(false);
    setTodo(null);
    onClose();
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      isCentered
      initialFocusRef={initialRef}
    >
      <ModalOverlay />
      <ModalContent>
        <form onSubmit={submitHandler}>
          <ModalHeader>{todo ? "Update Todo" : "Add Todo"}ModalHeader>
          <ModalCloseButton onClick={closeHandler} />
          <ModalBody pb={6}>
            {errorMessage && (
              <Alert status="error" borderRadius="lg" mb="6">
                <AlertIcon />
                <Text textAlign="center">{errorMessage}Text>
              Alert>
            )}
            <FormControl isRequired={true}>
              <FormLabel>TitleFormLabel>
              <Input
                ref={initialRef}
                placeholder="Add your title here"
                onChange={(event) => setTitle(event.target.value)}
                value={title}
              />
            FormControl>

            <FormControl mt={4} isRequired={true}>
              <FormLabel>DescriptionFormLabel>
              <Textarea
                placeholder="Add your description here"
                onChange={(event) => setDescription(event.target.value)}
                value={description}
              />
              <FormHelperText>
                Description must have more than 10 characters.
              FormHelperText>
            FormControl>

            <FormControl mt={4}>
              <FormLabel>Is Completed?FormLabel>
              <Switch
                isChecked={isComplete}
                id="is-completed"
                onChange={(event) => setIsComplete(!isComplete)}
              />
            FormControl>
          ModalBody>

          <ModalFooter>
            <ButtonGroup spacing="3">
              <Button
                onClick={closeHandler}
                colorScheme="red"
                type="reset"
                isDisabled={isLoading}
              >
                Cancel
              Button>
              <Button colorScheme="blue" type="submit" isLoading={isLoading}>
                {todo ? "Update" : "Save"}
              Button>
            ButtonGroup>
          ModalFooter>
        form>
      ModalContent>
    Modal>
  );
};

export default ManageTodo;

Let's understand the code above. Here we are checking if the user has clicked on the update button ( By checking if todo exists ) and then showing the data in the initial object.

Based upon the condition, showing update text instead of Save text on the button. Also, based upon condition, we execute supabase update if todo exists and if not then insert.

Go to pages > index.js and replace the existing code with the following code:

import { useDisclosure } from "@chakra-ui/hooks";
import { Box, HStack, SimpleGrid, Tag } from "@chakra-ui/react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";
import ManageTodo from "../components/ManageTodo";
import Navbar from "../components/Navbar";
import SingleTodo from "../components/SingleTodo";
import { supabaseClient } from "../lib/client";

const Home = () => {
  const initialRef = useRef();
  const [todos, setTodos] = useState([]);
  const [todo, setTodo] = useState(null);

  const router = useRouter();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const user = supabaseClient.auth.user();

  useEffect(() => {
    if (!user) {
      router.push("/signin");
    }
  }, [user, router]);

  useEffect(() => {
    if (user) {
      supabaseClient
        .from("todos")
        .select("*")
        .eq("user_id", user?.id)
        .order("id", { ascending: false })
        .then(({ data, error }) => {
          if (!error) {
            setTodos(data);
          }
        });
    }
  }, [user]);

  useEffect(() => {
    const todoListener = supabaseClient
      .from("todos")
      .on("*", (payload) => {
        const newTodo = payload.new;
        setTodos((oldTodos) => {
          const exists = oldTodos.find((todo) => todo.id === newTodo.id);
          let newTodos;
          if (exists) {
            const oldTodoIndex = oldTodos.findIndex(
              (obj) => obj.id === newTodo.id
            );
            oldTodos[oldTodoIndex] = newTodo;
            newTodos = oldTodos;
          } else {
            newTodos = [...oldTodos, newTodo];
          }
          newTodos.sort((a, b) => b.id - a.id);
          return newTodos;
        });
      })
      .subscribe();

    return () => {
      todoListener.unsubscribe();
    };
  }, []);

  const openHandler = (clickedTodo) => {
    setTodo(clickedTodo);
    onOpen();
  };

  return (
    <div>
      <Head>
        <title>TodoApptitle>
        <meta
          name="description"
          content="Awesome todoapp to store your awesome todos"
        />
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main>
        <Navbar onOpen={onOpen} />
        <ManageTodo
          isOpen={isOpen}
          onClose={onClose}
          initialRef={initialRef}
          todo={todo}
          setTodo={setTodo}
        />
        <HStack m="10" spacing="4" justify="center">
          <Box>
            <Tag bg="green.500" borderRadius="3xl" size="sm" mt="1" /> Complete
          Box>
          <Box>
            <Tag bg="yellow.400" borderRadius="3xl" size="sm" mt="1" />{" "}
            Incomplete
          Box>
        HStack>
        <SimpleGrid
          columns={{ base: 2, md: 3, lg: 4 }}
          gap={{ base: "4", md: "6", lg: "8" }}
          m="10"
        >
          {todos.map((todo) => (
            <SingleTodo todo={todo} key={todo.id} openHandler={openHandler} />
          ))}
        SimpleGrid>
      main>
    div>
  );
};

export default Home;

Here we add the ManageTodo component that we created and pass props that are used by this component.

Now go to http://localhost:3000 and click on any todo to update it and you'll see the following view:

Update Todo

How to Delete a Todo

This functionality will need us to update our some of existing code. First we will do that and then understand how it works and why changes are required.

Go to the SingleTodo.js inside the components directory and replace the existing code with the following code:

import {
  Box,
  Divider,
  Heading,
  Tag,
  Text,
  Button,
  Center,
} from "@chakra-ui/react";

const SingleTodo = ({ todo, openHandler, deleteHandler, isDeleteLoading }) => {
  const getDateInMonthDayYear = (date) => {
    const d = new Date(date);
    const options = {
      year: "numeric",
      month: "long",
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
    };
    const n = d.toLocaleDateString("en-US", options);
    const replase = n.replace(new RegExp(",", "g"), " ");
    return replase;
  };

  return (
    <Box
      position="relative"
      maxW="sm"
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
      p="4"
      onClick={() => openHandler(todo)}
    >
      <Heading size="md" mt="3">
        {todo.title}
      Heading>
      <Tag
        position="absolute"
        top="3"
        right="2"
        bg={todo.isComplete ? "green.500" : "yellow.400"}
        borderRadius="3xl"
        size="sm"
      />
      <Text color="gray.400" mt="1" fontSize="sm">
        {getDateInMonthDayYear(todo.insertedat)}
      Text>
      <Divider my="4" />
      <Text noOfLines={[1, 2, 3]} color="gray.800">
        {todo.description}
      Text>
      <Center>
        <Button
          mt="4"
          size="sm"
          colorScheme="red"
          onClick={(event) => {
            event.stopPropagation();
            deleteHandler(todo.id);
          }}
          isDisabled={isDeleteLoading}
        >
          Delete
        Button>
      Center>
    Box>
  );
};

export default SingleTodo;

Here we have added a delete button with an onClick event. Now this delete event is under another event which opens the modal. So whenever we click on delete it will open the modal too.

We don't want this behavour, so we use a method from event called stopPropagation. This method doesn't allow events from children to be passed to the parent.

Now go to the index.js inside the pages directory and replace the existing code with the following code:

import { useDisclosure } from "@chakra-ui/hooks";
import { Box, HStack, SimpleGrid, Tag } from "@chakra-ui/react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";
import ManageTodo from "../components/ManageTodo";
import Navbar from "../components/Navbar";
import SingleTodo from "../components/SingleTodo";
import { supabaseClient } from "../lib/client";

const Home = () => {
  const initialRef = useRef();
  const [todos, setTodos] = useState([]);
  const [todo, setTodo] = useState(null);
  const [isDeleteLoading, setIsDeleteLoading] = useState(false);

  const router = useRouter();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const user = supabaseClient.auth.user();

  useEffect(() => {
    if (!user) {
      router.push("/signin");
    }
  }, [user, router]);

  useEffect(() => {
    if (user) {
      supabaseClient
        .from("todos")
        .select("*")
        .eq("user_id", user?.id)
        .order("id", { ascending: false })
        .then(({ data, error }) => {
          if (!error) {
            setTodos(data);
          }
        });
    }
  }, [user]);

  useEffect(() => {
    const todoListener = supabaseClient
      .from("todos")
      .on("*", (payload) => {
        if (payload.eventType !== "DELETE") {
          const newTodo = payload.new;
          setTodos((oldTodos) => {
            const exists = oldTodos.find((todo) => todo.id === newTodo.id);
            let newTodos;
            if (exists) {
              const oldTodoIndex = oldTodos.findIndex(
                (obj) => obj.id === newTodo.id
              );
              oldTodos[oldTodoIndex] = newTodo;
              newTodos = oldTodos;
            } else {
              newTodos = [...oldTodos, newTodo];
            }
            newTodos.sort((a, b) => b.id - a.id);
            return newTodos;
          });
        }
      })
      .subscribe();

    return () => {
      todoListener.unsubscribe();
    };
  }, []);

  const openHandler = (clickedTodo) => {
    setTodo(clickedTodo);
    onOpen();
  };

  const deleteHandler = async (todoId) => {
    setIsDeleteLoading(true);
    const { error } = await supabaseClient
      .from("todos")
      .delete()
      .eq("id", todoId);
    if (!error) {
      setTodos(todos.filter((todo) => todo.id !== todoId));
    }
    setIsDeleteLoading(false);
  };

  return (
    <div>
      <Head>
        <title>TodoApptitle>
        <meta
          name="description"
          content="Awesome todoapp to store your awesome todos"
        />
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main>
        <Navbar onOpen={onOpen} />
        <ManageTodo
          isOpen={isOpen}
          onClose={onClose}
          initialRef={initialRef}
          todo={todo}
          setTodo={setTodo}
        />
        <HStack m="10" spacing="4" justify="center">
          <Box>
            <Tag bg="green.500" borderRadius="3xl" size="sm" mt="1" /> Complete
          Box>
          <Box>
            <Tag bg="yellow.400" borderRadius="3xl" size="sm" mt="1" />{" "}
            Incomplete
          Box>
        HStack>
        <SimpleGrid
          columns={{ base: 2, md: 3, lg: 4 }}
          gap={{ base: "4", md: "6", lg: "8" }}
          m="10"
        >
          {todos.map((todo, index) => (
            <SingleTodo
              todo={todo}
              key={index}
              openHandler={openHandler}
              deleteHandler={deleteHandler}
              isDeleteLoading={isDeleteLoading}
            />
          ))}
        SimpleGrid>
      main>
    div>
  );
};

export default Home;

Let's understand the deleteHandler method first. In this method we use the Supabase client to delete a record from the todos table. Once it's successfully deleted, we use the filter method to remove the todo from our local state.

For the useEffect which has the todoListener we add an if condition based on an event type. We don't want to do anything on the DELETE event as we are updating the local state in deleteHandler.

Go to http://localhost:3000 and you'll see the following view:

Click the Delete button and you'll see that the todo is gone from our todos view.

With this we have completed our TODO CRUD operation flow.

How to Update Profile Details and Avatars

The Profile Update Operation code is available under this commit if you need to refer to it in the future for reference.

https://github.com/Sharvin26/TodoApp-supabase/tree/fb7055b83c847709cb6cc5c6aa26553ecee4026f

Before working on the profile section we have to make our TodoApp Heading as a route so we can go back to the home page from the profile page.

In Navbar.js under the components directory replace the existing code with the following code:

import { Box, Button, ButtonGroup, Flex, Heading } from "@chakra-ui/react";
import NavLink from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import { supabaseClient } from "../lib/client";

const Navbar = ({ onOpen }) => {
  const router = useRouter();
  const [isLogoutLoading, setIsLogoutLoading] = useState(false);

  const logoutHandler = async () => {
    try {
      setIsLogoutLoading(true);
      await supabaseClient.auth.signOut();
      router.push("/signin");
    } catch (error) {
      router.push("/signin");
    } finally {
      setIsLogoutLoading(false);
    }
  };

  return (
    <Box height="100%" p="5" bg="gray.100">
      <Box maxW="6xl" mx="auto">
        <Flex
          as="nav"
          aria-label="Site navigation"
          align="center"
          justify="space-between"
        >
          <NavLink href="/">
            <Heading mr="4" as="button">
              TodoApp
            Heading>
          NavLink>
          <Box>
            <NavLink href="/profile">ProfileNavLink>
            <ButtonGroup spacing="4" ml="6">
              {router.pathname === "/" && (
                <Button colorScheme="blue" onClick={onOpen}>
                  Add Todo
                Button>
              )}
              <Button
                colorScheme="red"
                onClick={logoutHandler}
                isLoading={isLogoutLoading}
              >
                Logout
              Button>
            ButtonGroup>
          Box>
        Flex>
      Box>
    Box>
  );
};

export default Navbar;

Let's start working on building the last part of our app which is the profile section. This section will have a form which can update the username, website, bio and an avatar.

To store our pictures we will be using Supabase storage. By default these storage buckets are private and can be accessed using a token. But for the sake of this article we will make the bucket public. But if you are storing any sensitive information make sure to keep that bucket private.

Go to https://app.supabase.io/ and go to the storage tab. There you'll see the avatars listed under All Buckets.

Click on the three dots and select the Make public option.

Back to our code: inside the pages directory create a file named profile.js and copy paste the following code:

import {
  Avatar,
  Box,
  Button,
  Flex,
  FormControl,
  FormLabel,
  Input,
  Stack,
  Textarea,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";
import Navbar from "../components/Navbar";
import { supabaseClient } from "../lib/client";

const Profile = () => {
  const [email, setEmail] = useState("");
  const [username, setUsername] = useState("");
  const [website, setWebsite] = useState("");
  const [bio, setBio] = useState("");
  const [avatarurl, setAvatarurl] = useState("");

  const [isLoading, setIsLoading] = useState(false);
  const [isImageUploadLoading, setIsImageUploadLoading] = useState(false);

  const user = supabaseClient.auth.user();

  useEffect(() => {
    if (user) {
      setEmail(user.email);
      supabaseClient
        .from("profiles")
        .select("*")
        .eq("id", user.id)
        .then(({ data, error }) => {
          if (!error) {
            setUsername(data[0].username || "");
            setWebsite(data[0].website || "");
            setBio(data[0].bio || "");
            setAvatarurl(data[0].avatarurl || "");
          }
        });
    }
  }, [user]);

  const updateHandler = async (event) => {
    event.preventDefault();
    setIsLoading(true);
    const body = { username, website, bio };
    const userId = user.id;
    const { error } = await supabaseClient
      .from("profiles")
      .update(body)
      .eq("id", userId);
    if (!error) {
      setUsername(body.username);
      setWebsite(body.website);
      setBio(body.bio);
    }
    setIsLoading(false);
  };

  function makeid(length) {
    let result = "";
    const characters =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    const charactersLength = characters.length;
    for (var i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
  }

  const uploadHandler = async (event) => {
    setIsImageUploadLoading(true);
    const avatarFile = event.target.files[0];
    const fileName = makeid(10);

    const { error } = await supabaseClient.storage
      .from("avatars")
      .upload(fileName, avatarFile, {
        cacheControl: "3600",
        upsert: false,
      });
    if (error) {
      setIsImageUploadLoading(false);
      console.log("error", error);
      return;
    }
    const { publicURL, error: publicURLError } = supabaseClient.storage
      .from("avatars")
      .getPublicUrl(fileName);
    if (publicURLError) {
      setIsImageUploadLoading(false);
      console.log("publicURLError", publicURLError);
      return;
    }
    const userId = user.id;
    await supabaseClient
      .from("profiles")
      .update({
        avatarurl: publicURL,
      })
      .eq("id", userId);
    setAvatarurl(publicURL);
    setIsImageUploadLoading(false);
  };

  return (
    <Box>
      <Navbar />
      <Box mt="8" maxW="xl" mx="auto">
        <Flex align="center" justify="center" direction="column">
          <Avatar
            size="2xl"
            src={avatarurl || ""}
            name={username || user?.email}
          />
          <FormLabel
            htmlFor="file-input"
            my="5"
            borderRadius="2xl"
            borderWidth="1px"
            textAlign="center"
            p="2"
            bg="blue.400"
            color="white"
          >
            {isImageUploadLoading ? "Uploading....." : "Upload Profile Picture"}
          FormLabel>
          <Input
            type="file"
            hidden
            id="file-input"
            onChange={uploadHandler}
            multiple={false}
            disabled={isImageUploadLoading}
          />
        Flex>
        <Stack
          borderWidth="1px"
          borderRadius="lg"
          overflow="hidden"
          p={5}
          mt="-2"
          spacing="4"
          as="form"
          onSubmit={updateHandler}
        >
          <FormControl id="email" isRequired>
            <FormLabel>EmailFormLabel>
            <Input type="email" isDisabled={true} value={email} />
          FormControl>
          <FormControl id="username" isRequired>
            <FormLabel>UsernameFormLabel>
            <Input
              placeholder="Add your username here"
              type="text"
              value={username}
              onChange={(event) => setUsername(event.target.value)}
            />
          FormControl>
          <FormControl id="website" isRequired>
            <FormLabel>Website URLFormLabel>
            <Input
              placeholder="Add your website here"
              type="url"
              value={website}
              onChange={(event) => setWebsite(event.target.value)}
            />
          FormControl>
          <FormControl id="bio" isRequired>
            <FormLabel>BioFormLabel>
            <Textarea
              placeholder="Add your bio here"
              value={bio}
              onChange={(event) => setBio(event.target.value)}
            />
          FormControl>
          <Button colorScheme="blue" type="submit" isLoading={isLoading}>
            Update
          Button>
        Stack>
      Box>
    Box>
  );
};

export default Profile;

Here we have 4 FormControl elements, and each is pre-filled if a value exists. This is possible because on render useEffect runs which uses the Supabase client to fetch the user record from the auth and profiles tables.

Note: the auth table is maintained by Supabase and can be accessed via client using following command:

supabase.auth.user()

Except images, other records can be updated using the updateHandler function. This function updates the user record using id.

The uploadHandler function is responsible for uploading the image to the storage bucket and setting the avatarurl in the profiles table for a record based on id.

The upload method from Supabase uploads the image while the getPublicUrl method gives us a public URL of the image. We use the from('profiles').update method to update the record.

Visit http://localhost:3000 and click on profile link. You'll see the following view:

Now you can use the update method to update your username, website URL, and bio.

With this our TodoApp is completed and ready for production.

How to Deploy the App to Vercel and Configure Supabase Authentication

Before deploying the application on Vercel we need to run the npm run build command and check the terminal output to see if we have any errors.

There are two ways to configure an application on Vercel:

Using the Vercel npm library and pushing the code locally to a Vercel server
Connecting the Vercel bot to the GitHub repository.

I am going to use the second method.

You need to create a repository on GitHub and push the code over there.

If you haven't created an account on Vercel, then you can go to https://vercel.com/ and click on the sign up button.

Once you've created your account you'll be directed to a dashboard that looks like this:

Vercel Dashboard

Click on the New Project button. It will ask you to install the Vercel bot and permissions.

Note: You can allow the Vercel bot to read all repositories from your GitHub account or give permission for the currently created repository.

Click the Import button on the GitHub repository created above:

Vercel Import Project from Github

Now it will ask if you want to create a team. Team is a feature available under the Pro Plan. By default Vercel is under the hobby plan. For now I'll skip that.

Vercel Create Team

Now you'll need to add environment variables. Add them from .env.local.

Click on the Accordion that's in front of Environment Variables and add the variables over there as follows:

Vercel Configure Env and Build Settings

Once they are added, click on the Deploy button. After the deployment is successful you'll get the following screen:

Vercel Deployment Success

Now click on the gray box where your application is shown. It will redirect you to a page where you can find preconfigured domain for your applications.

Vercel Project Overview

Yes vercel provides subdomains for which we can set a custom domain also. For now we will use the Vercel domain. Copy the first domain under the Domains section and go to your Supabase project.

Go to Authentication > Settings and update the Site URL and Additional Redirect URLs to the copied URL (make sure to add https:// in front of the copied URL):

Supabase Authentication Settings

With this, we have created our production-ready todo application. If you have built the app along with the tutorial, then a very big congratulations to you on this achievement.

Thank you for reading!

Feel free to connect with me on Twitter and Github.

If you want any project to be developed or want to consult with me, you can DM me on my Twitter (@sharvinshah26).

How to Build a Quiz App using NextJS, Chakra UI, and Firebase

Sharvin Shah — Tue, 13 Apr 2021 16:31:50 +0000

Hello, everyone! Welcome to this hands-on tutorial. Before we begin you should be familiar with the basics of ReactJS, NextJS, and Firebase. If you're not, I would recommend that you go through their documentation.

Here's what we're going to build:

And here's the tech we'll use:

TypeScript: provides type-safe code which helps us find bugs during build time.
NextJS: a React-based framework that lets us render data on the server-side. This helps Google crawl the application and which results in SEO benefits.
Chakra UI: a simple, modular, and accessible component library that will give us the building blocks that we need to build the application.
Firebase: provides Firestore and authentication that we are going to use in our application. We will use Firestore to save a quiz, the user-info, and answers. We'll use authentication to provide the Google SignIn feature to the user.
Vercel: will host our application. It scales well, all without any configuration, and deployment is instant.
Formik: provides us various components to build forms. It is hard to develop forms without formik.
Yup: A form always needs to be validated. Yup is a library which we will be using for this purpose. Yup and Formik work together very well, and not much configuration is required.

I am going to divide this tutorial into four separate sections. At the start of every section, you will find a Git commit that has the code developed in that section. Also, If you want to see the complete code it is available in this repository.

How to Set Up Auth and User Collection.
How to Add a Quiz and Display Multiple Quizzes.
How to Show a Single Quiz, How to Answer a Quiz and How to Validate the Answer.
How to Deploy the App to Vercel and Firebase Authentication Configuration.

Let's get started.

How to Set Up Auth and User Collection

In this section following we'll implement the following functionality:

How to configure NextJS and Chakra UI in our quiz app.
How to configure Firebase Authentication and Firestore.
How to set up Navbar, Signup and Sign-out mechanisms.

You can find the quiz app code implemented in this section at this commit.

How to configure NextJS and Chakra UI in our quiz app:

To create a NextJS application you need to use the following command:

npx create-next-app quizapp

You'll get the following directory structure:

+-- node_modules
+-- pages
+-- public
+-- styles
+-- .gitignore
+-- package-lock.json
+-- package.json
+-- README.md

Note: I am using NextJS version 10.1.3 and React version 17.0.2. You can confirm the version in your package.json.

Now let's convert our codebase into TypeScript-compatible code.

In the root directory of the project, create a file named tsconfig.json using the following command:

touch tsconfig.json

After that, install the TypeScript dependencies inside the project using the following command:

npm install --save-dev typescript @types/react @types/node

After that, convert the following files like this:

pages/_app.js => pages/_app.tsx
pages/index.js => pages/index.tsx

Remove the pages/api directory. Now go to the pages/_app.tsx and replace the full code as follows:

import { AppProps } from 'next/app'

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default App

Go to pages/index.tsx and replace it with the following code:

import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>QuizApptitle>
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main>main>
      <footer>footer>
    div>
  );
}

Now start the development server using the following command:

npm run dev

The first time when you start the development server, Next will:

Populate the tsconfig.json file for you.
Create the next-env.d.ts file, which ensures that Next types are picked up by the TypeScript compiler. You should not touch this file.

Delete the styles directory from the root directory.

After following the above steps you'll have the following directory structure:

+-- node_modules
+-- pages
|   +-- _app.tsx
|   +-- index.tsx
+-- public
+-- .gitignore
+-- package-lock.json
+-- package.json
+-- README.md
+-- tsconfig.json

Now go to http://localhost:3000 and you'll find an empty screen.

Let's install Chakra UI using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Note: If you use zsh you'll need to add the escape character () after @ as follows:

npm i @chakra-ui/react @emotion/react@\^11 @emotion/styled@\^11 framer-motion@\^4

As per chakra documentation, we need to wrap with ChakraProvider in the pages/_app.tsx as follows:

import { ChakraProvider } from '@chakra-ui/react';
import { AppProps } from 'next/app';

function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    ChakraProvider>
  );
}

export default App;

Basically, this will perform CSSReset and pass the chakra theme to the component.

Now we will create our Navbar component.

To create this component first we need to create a directory named src in the root directory and cut/paste the pages directory inside the src directory.

After that create a directory named common under the src directory.

Under the common directory create a file named Navbar.tsx. Copy/paste the following code inside that file:

import React from 'react';
import { Box, Divider, Flex, Heading, Link } from '@chakra-ui/react';
import { useRouter } from 'next/router';

const Navbar: React.FC<{}> = () => {
  const router = useRouter();

  return (
    <>
      <Flex justify="space-between" m={4}>
        <Heading onClick={() => router.push('/')} as="button">
          QuizApp
        Heading>
        <Box>
          <Box p={2}>
            <Link
              p={2}
              onClick={() => router.push('/signin')}
              fontWeight={
                router.pathname === '/signin' ? 'extrabold' : 'normal'
              }
            >
              Sign In
            Link>
          Box>
        Box>
      Flex>
      <Divider
        css={{
          boxShadow: '1px 1px #888888',
        }}
      />
    
  );
};

export default Navbar;

After that go to pages/index.tsx and add the following line between the

tag.

You'll also need to import the Navbar using the following syntax:

import Navbar from '../common/Navbar';

Go to your web browser and open http://localhost:3000 and you'll see the following output:

How to Configure Firebase Authentication and Firestore:

Now let's configure Firebase. Go to the firebase console. Click on Add project:

After that add your project name as follows:

Next, it will ask if you want to enable Google Analytics or not. I prefer to disable it, but you can switch it on if you want.

Now click on Create project. It will take some time to create the project.

Once the project is created you'll see the following screen:

After clicking on continue you'll see a dashboard that looks like this:

Click on the Settings > Project Settings > General. Inside the General tab scroll down and in the Your apps card, select the third option (after the Android icon).

It will ask for some details to register the app. Add your app's nickname as follows:

After you've clicked on register app, Firebase will give you a snippet. Copy-paste these details into a file and then you can click on continue to console.

Now go to the service accounts tab in project settings and click on the button Generate new private key. It will download some configurations that we will need for firebase-admin.

Now go back and click on the Authentication tab:

After that click on the Get started button and you'll get the following screen:

Now click on Google text and click the Enable button:

Select the project configured email as your email id.

Click on the Firestore tab and click on Create database button.

Once you've clicked on Create database it will ask for the mode. Select test mode for developing the application.

Click on Next. It will ask for the location. Select the appropriate option and then click the Enable button.

Now back to our project. Install the following dependencies using this npm command:

npm i firebase firebase-admin

Create a directory named lib inside the src directory.

In the lib directory create two files named firebase.ts and firebase-admin.ts.

Copy the following code inside firebase.ts:

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

try {
  firebase.initializeApp(firebaseConfig);
} catch (err) {
  if (!/already exists/.test(err.message)) {
    console.error('Firebase initialization error', err.stack);
  }
}

export default firebase;

Here we initialize the Firebase library using apikey, authdomain and projectId.

Paste the following code inside firebase-admin.ts:

import admin from 'firebase-admin';

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
      privateKey: process.env.FIREBASE_PRIVATE_KEY,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
    }),
    databaseURL: process.env.FIREBASE_DATABASE_URL,
  });
}

const db = admin.firestore();
const auth = admin.auth();

export { db, auth };

Here we initialize the firebase-admin library using projectId, privateKey, clientEmail, and databaseURL.

Now in the root directory create a file named .env.local and paste in the following code:

NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=

FIREBASE_PRIVATE_KEY=
FIREBASE_CLIENT_EMAIL=
FIREBASE_DATABASE_URL=

You'll find NEXT_PUBLIC_FIREBASE_API_KEY, NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, NEXT_PUBLIC_FIREBASE_PROJECT_ID inside the Firebase Console > Settings > Project Settings > General > Your Apps Card.

You'll find FIREBASE_PRIVATE_KEY, FIREBASE_CLIENT_EMAIL under the service account tab. We can generate a new private key using the Generate new private key button. That file contains both sets of data.

For the FIREBASE_DATABASE_URL add https://.firebaseio.com. Replace database-name with your database name.

Note: You can find the database-name under firebase console > firestore in the data tab (refer to the screen shot below).

Now in the lib directory create a third file named auth.tsx. This is going to contain our Authorization mechanism and state. Paste the following code in this file:

import { Context, createContext, useContext, useEffect, useState } from 'react';
import { addUser } from '../utils/db';
import firebase from './firebase';

interface Auth {
  uid: string;
  email: string | null;
  name: string | null;
  photoUrl: string | null;
  token: string | null;
}

interface AuthContext {
  auth: Auth | null;
  loading: boolean;
  siginWithGoogle: () => Promise<void>;
  signOut: () => Promise<void>;
}

const authContext: Context = createContext({
  auth: null,
  loading: true,
  siginWithGoogle: async () => {},
  signOut: async () => {},
});

const formatAuthState = (user: firebase.User): Auth => ({
  uid: user.uid,
  email: user.email,
  name: user.displayName,
  photoUrl: user.photoURL,
  token: null,
});

function useProvideAuth() {
  const [auth, setAuth] = useStatenull>(null);
  const [loading, setLoading] = useState<boolean>(true);

  const handleAuthChange = async (authState: firebase.User | null) => {
    if (!authState) {
      setLoading(false);
      return;
    }
    const formattedAuth = formatAuthState(authState);
    formattedAuth.token = await authState.getIdToken();
    setAuth(formattedAuth);
    setLoading(false);
  };

  const signedIn = async (
    response: firebase.auth.UserCredential,
    provider: String = 'google'
  ) => {
    if (!response.user) {
      throw new Error('No User');
    }
    const authUser = formatAuthState(response.user);
    await addUser({ ...authUser, provider });
  };

  const clear = () => {
    setAuth(null);
    setLoading(true);
  };

  const siginWithGoogle = async () => {
    setLoading(true);
    return firebase
      .auth()
      .signInWithPopup(new firebase.auth.GoogleAuthProvider())
      .then(signedIn);
  };
  const signOut = async () => {
    return firebase.auth().signOut().then(clear);
  };

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(handleAuthChange);
    return () => unsubscribe();
  }, []);

  return {
    auth,
    loading,
    siginWithGoogle,
    signOut,
  };
}

export function AuthProvider({ children }: any) {
  const auth = useProvideAuth();
  return {children};
}

export const useAuth = () => useContext(authContext);

In the src directory create a folder named utils and under that folder create a file named db.ts. Add the following code inside that file:

import firebase from '../lib/firebase';

export const addUser = async (authUser: any) => {
  const resp = await firebase
    .firestore()
    .collection('users')
    .doc(authUser.uid as string)
    .set({ ...authUser }, { merge: true });
  return resp;
};

Go to the Navbar.tsx under component directory and update the previous code with the following code:

import { Box, Divider, Flex, Heading, Link } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { useAuth } from '../lib/auth';

const Navbar: React.FC<{}> = () => {
  const { auth, signOut } = useAuth();
  const router = useRouter();

  return (
    <>
      <Flex justify="space-between" m={4}>
        <Heading onClick={() => router.push('/')} as="button">
          QuizApp
        Heading>
        <Box>
          {auth ? (
            <Box p={2}>
              <Link
                p={2}
                fontWeight={
                  router.pathname === '/quiz/new' ? 'extrabold' : 'normal'
                }
                onClick={() => router.push('/quiz/new')}
              >
                Add new quiz
              Link>
              <Link p={2} onClick={() => signOut()}>
                Logout
              Link>
            Box>
          ) : (
            <Box p={2}>
              <Link
                p={2}
                onClick={() => router.push('/signin')}
                fontWeight={
                  router.pathname === '/signin' ? 'extrabold' : 'normal'
                }
              >
                Sign In
              Link>
            Box>
          )}
        Box>
      Flex>
      <Divider
        css={{
          boxShadow: '1px 1px #888888',
        }}
      />
    
  );
};

export default Navbar;

Replace the _app.tsx with the following code:

import { ChakraProvider } from '@chakra-ui/react';
import { AppProps } from 'next/app';
import { AuthProvider } from '../lib/auth';

function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <AuthProvider>
        <Component {...pageProps} />
      AuthProvider>
    ChakraProvider>
  );
}

export default App;

Create a new file named signin.tsx under the pages directory and add the following code:

import { Button, Center, Container, Heading, VStack } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
import { FcGoogle } from 'react-icons/fc';
import Navbar from '../common/Navbar';
import { useAuth } from '../lib/auth';

const signin = () => {
  const { auth, siginWithGoogle } = useAuth();
  const router = useRouter();

  if (auth) {
    router.push((router.query.next as string) || '/');
  }

  return (
    <>
      <Navbar />
      <Container>
        <Center mt={10}>
          <VStack spacing="4">
            <Heading fontSize="3xl" mb={2}>
              Hello, Welcome to the Quiz App!!
            Heading>
            <Button leftIcon={<FcGoogle />} onClick={() => siginWithGoogle()}>
              Sign In with Google
            Button>
          VStack>
        Center>
      Container>
    
  );
};

export default signin;

You'll need to install react-icons. To install react-icons use the following command:

npm i react-icons

Now restart the development server and go to the http://localhost:3000. Click on the Sign In link and you'll get the following screen.

Now click the Sign in with Google Button. After a successful sign-in, you will be redirected to the Home page.

How to Add a Quiz and Display Multiple Quizzes

In this section we'll implement the following functionality:

How to set up the Add a Quiz mechanism.
How to set up the Display Multiple Quizzes mechanism.

You can find the quiz app code in this section at this commit.

How to set up the Add a Quiz mechanism:

Now we will focus on adding the quiz. To add a new quiz we will use Formik. It will help us configure the dynamic form and Yup will help us with the validation of those forms.

Let's install both the libraries using the following command.

npm i formik yup

We will also use a package named uuid to give a unique identifier to our questions and options. To install the package use the following command:

npm i uuid

We will also need chakra icons so install them using the following command:

npm i @chakra-ui/icons

We will need Axios to make an API call to our Next serverless environment. Use the following command to install it:

npm i axios

Inside the src > pages directory create a new directory named quiz and under that directory create a new directory named new.

Inside the new directory create a file named index.tsx and paste the following code into it:

import { AddIcon, MinusIcon } from '@chakra-ui/icons';
import {
  Box,
  Button,
  Center,
  Container,
  Divider,
  Flex,
  FormControl,
  FormErrorMessage,
  FormLabel,
  IconButton,
  Input,
  SimpleGrid,
  Text,
  Textarea,
} from '@chakra-ui/react';
import { Field, FieldArray, Form, Formik, getIn } from 'formik';
import { useRouter } from 'next/router';
import React, { useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';
import * as yup from 'yup';
import Navbar from '../../../common/Navbar';
import { useAuth } from '../../../lib/auth';
import { addQuizApi } from '../../../utils/service';

const optionData = [
  {
    label: 'Option A:',
  },
  {
    label: 'Option B:',
  },
  {
    label: 'Option C:',
  },
  {
    label: 'Option D:',
  },
];

const answerOption = [
  {
    label: 'A',
    answer: 0,
  },
  {
    label: 'B',
    answer: 1,
  },
  {
    label: 'C',
    answer: 2,
  },
  {
    label: 'D',
    answer: 3,
  },
];

const Index = () => {
  const { auth, loading } = useAuth();

  const router = useRouter();

  useEffect(() => {
    if (!auth && !loading) {
      router.push('/signin?next=/quiz/new');
    }
  }, [auth, loading]);

  const questionsData = {
    title: '',
    options: [{ title: '' }, { title: '' }, { title: '' }, { title: '' }],
    answer: '0',
  };

  const initialValues = {
    title: '',
    description: '',
    questions: [questionsData],
  };

  const validationSchema = yup.object().shape({
    title: yup.string().required('Required'),
    description: yup.string().required('Required'),
    questions: yup
      .array()
      .of(
        yup.object().shape({
          title: yup.string().required('Required!'),
          options: yup.array().of(
            yup.object().shape({
              title: yup.string().required('Required!'),
            })
          ),
        })
      )
      .required('Must add a question'),
  });

  const submitHandler = async (values, actions) => {
    try {
      values = {
        ...values,
        createdAt: new Date(),
        updatedAt: new Date(),
        questions: values.questions.map((question) => {
          return {
            ...question,
            options: question.options.map((option) => {
              return { ...option, optionId: uuidv4() };
            }),
            questionId: uuidv4(),
          };
        }),
      };
      await addQuizApi(auth, values);
      router.push('/');
    } catch (error) {
      console.log('error', error);
    } finally {
      actions.setSubmitting(false);
    }
  };

  return (
    <>
      <Navbar />
      <Container
        maxW="3xl"
        mt={5}
        mb={5}
        borderWidth="1px"
        borderRadius="lg"
        p={6}
        boxShadow="xl"
      >
        <Formik
          initialValues={initialValues}
          onSubmit={submitHandler}
          validationSchema={validationSchema}
        >
          {(props) => (
            <Form>
              <Field name="title">
                {({ field, form }) => (
                  <FormControl
                    isInvalid={form.errors.title && form.touched.title}
                  >
                    <FormLabel htmlFor="title" fontSize="xl">
                      Quiz Title
                    FormLabel>
                    <Input {...field} id="title" />
                    <FormErrorMessage>{form.errors.title}FormErrorMessage>
                  FormControl>
                )}
              Field>
              <Field name="description">
                {({ field, form }) => (
                  <FormControl
                    isInvalid={
                      form.errors.description && form.touched.description
                    }
                  >
                    <FormLabel htmlFor="description" fontSize="xl" mt={4}>
                      Quiz description
                    FormLabel>
                    <Textarea {...field} id="description" />
                    <FormErrorMessage>
                      {form.errors.description}
                    FormErrorMessage>
                  FormControl>
                )}
              Field>
              <Field name="questions">
                {({ field }) => (
                  <FormControl>
                    <FormLabel htmlFor="questions" fontSize="xl" mt={4}>
                      Enter your question data:
                    FormLabel>
                    <Box ml={4}>
                      <FieldArray {...field} name="questions" id="questions">
                        {(fieldArrayProps) => {
                          const { push, remove, form } = fieldArrayProps;
                          const { values, errors, touched } = form;
                          const { questions } = values;
                          const errorHandler = (name) => {
                            const error = getIn(errors, name);
                            const touch = getIn(touched, name);
                            return touch && error ? error : null;
                          };
                          return (
                            <div>
                              {questions.map((_question, index) => {
                                return (
                                  <Flex key={index} direction="column">
                                    <FormControl
                                      isInvalid={errorHandler(
                                        `questions[${index}][title]`
                                      )}
                                    >
                                      <FormLabel
                                        htmlFor={`questions[${index}][title]`}
                                      >
                                        Question Title:
                                      FormLabel>
                                      <Input
                                        name={`questions[${index}][title]`}
                                        as={Field}
                                        mb={
                                          !errorHandler(
                                            `questions[${index}][title]`
                                          ) && 3
                                        }
                                      />
                                      <FormErrorMessage>
                                        {errorHandler(
                                          `questions[${index}][title]`
                                        )}
                                      FormErrorMessage>
                                    FormControl>
                                    <SimpleGrid
                                      minChildWidth="300px"
                                      spacing="10px"
                                      mb={{ base: 4 }}
                                    >
                                      {optionData.map((option, subIndex) => (
                                        <FormControl
                                          mb={2}
                                          key={subIndex}
                                          isInvalid={errorHandler(
                                            `questions[${index}][options][${subIndex}].title`
                                          )}
                                        >
                                          <FormLabel
                                            htmlFor={`questions[${index}][options][${subIndex}].title`}
                                          >
                                            {option.label}
                                          FormLabel>
                                          <Input
                                            name={`questions[${index}][options][${subIndex}].title`}
                                            as={Field}
                                          />
                                          <FormErrorMessage>
                                            {errorHandler(
                                              `questions[${index}][options][${subIndex}].title`
                                            )}
                                          FormErrorMessage>
                                        FormControl>
                                      ))}
                                    SimpleGrid>
                                    <Box>
                                      <Text mb="8px">Correct Answer:Text>
                                      <Field
                                        component="select"
                                        name={`questions[${index}][answer]`}
                                        style={{
                                          width: '100%',
                                          padding: '10px',
                                        }}
                                      >
                                        {answerOption.map((value, key) => (
                                          <option
                                            value={value.answer}
                                            key={key}
                                          >
                                            {value.label}
                                          option>
                                        ))}
                                      Field>
                                    Box>
                                    <Flex
                                      direction="row"
                                      justify="flex-end"
                                      mt={4}
                                    >
                                      {index > 0 && (
                                        <IconButton
                                          onClick={() => remove(index)}
                                          aria-label="Remove Question"
                                          icon={<MinusIcon />}
                                          variant="ghost"
                                        >
                                          -
                                        IconButton>
                                      )}
                                      {index === questions.length - 1 && (
                                        <IconButton
                                          onClick={() => push(questionsData)}
                                          aria-label="Add Question"
                                          icon={<AddIcon />}
                                          variant="ghost"
                                        >
                                          +
                                        IconButton>
                                      )}
                                    Flex>
                                    {index !== questions.length - 1 && (
                                      <Divider
                                        mt={2}
                                        mb={4}
                                        css={{
                                          boxShadow: '1px 1px #888888',
                                        }}
                                      />
                                    )}
                                  Flex>
                                );
                              })}
                            div>
                          );
                        }}
                      FieldArray>
                    Box>
                  FormControl>
                )}
              Field>
              <Center>
                <Button
                  colorScheme="green"
                  isLoading={props.isSubmitting}
                  type="submit"
                  disabled={!(props.isValid && props.dirty)}
                >
                  Submit Quiz
                Button>
              Center>
            Form>
          )}
        Formik>
      Container>
    
  );
};

export default Index;

Let's understand the code above.

Note: Don't copy/paste the individual code snippets below. I took pieces from the big code block above and broke them into smaller chunks so we can understand what's going on.

const questionsData = {
  title: '',
  options: [{ title: '' }, { title: '' }, { title: '' }, { title: '' }],
  answer: '0',
};

const initialValues = {
  title: '',
  description: '',
  questions: [questionsData],
};

<Formik
   initialValues={initialValues}
   onSubmit={submitHandler}
   validationSchema={validationSchema}
>
    {(props) => (
       <Form>
         #Input field and button
       Form>
    )}
Formik>

is a wrapper that takes 3 props. The initialValues that are defined above and passed here as props are then passed down to the Input fields defined in between.

"questions" id="questions">
  {(fieldArrayProps) => {
    const { push, remove, form } = fieldArrayProps;
    const { values, errors, touched } = form;
    const { questions } = values;
    const errorHandler = (name) => {
      const error = getIn(errors, name);
      const touch = getIn(touched, name);
      return touch && error ? error : null;
    };
    return (<div> 
      // Input fields
    div>)
  };

Inside this form, you'll find that the FieldArray component is defined. This component is provided by Formik itself. When we want dynamic input fields, we can use this component.

The fieldArrayProps consists of two important elements named push and remove which helps us add a new input field and remove it.

We are using the getIn utility from Formik to validate our fields and check if there are any errors.

const validationSchema = yup.object().shape({
  title: yup.string().required('Required'),
  description: yup.string().required('Required'),
  questions: yup
    .array()
    .of(
      yup.object().shape({
        title: yup.string().required('Required!'),
        options: yup.array().of(
          yup.object().shape({
            title: yup.string().required('Required!'),
          })
        ),
      })
    )
    .required('Must add a question'),
});

Above is the Yup syntax which defines the object shape. For further information please refer to yup's documentation.

We combine the validation schema with Yup and pass it to Formik. Formik internally maps them with the name defined in the input field.

const submitHandler = async (values, actions) => {
  try {
    values = {
      ...values,
      createdAt: new Date(),
      updatedAt: new Date(),
      questions: values.questions.map((question) => {
        return {
          ...question,
          options: question.options.map((option) => {
            return { ...option, optionId: uuidv4() };
          }),
          questionId: uuidv4(),
        };
      }),
    };
    await addQuizApi(auth, values);
    router.push('/');
  } catch (error) {
    console.log('error', error);
  } finally {
    actions.setSubmitting(false);
  }
};

The onSubmit is invoked when a user clicks enter on the keyboard or presses the submit button on the website. We have to pass submitHandler as a reference to it.

Inside that function, we set a unique id for our questions and options and make an API call to store it on our Firestore collection.

Now inside the src > utils directory, create a new file named service.ts and add the following code:

import axios from 'axios';

export const addQuizApi = async (auth, values) => {
  try {
    const header = {
      'Content-Type': 'application/json',
      token: auth.token,
    };
    const resp = await axios.post('/api/quiz', values, { headers: header });
    return resp;
  } catch (error) {
    throw error;
  }
};

Inside the src > pages directory create a new directory named api. All the files under this directory will run as the serverless environment by default.

Inside the api directory create a directory named quiz. Here create a new file named index.ts and paste in the following code:

import { NextApiRequest, NextApiResponse } from 'next';
import { auth } from '../../../lib/firebase-admin';
import { addQuiz as addQuizFb } from '../../../utils/db';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  switch (req.method) {
    case 'POST':
      await addQuiz(req, res);
      break;
    default:
      res.status(405).json({ status: false, message: 'Method Not found' });
      break;
  }
};

const addQuiz = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const user = await auth.verifyIdToken(req.headers.token as string);
    const quizData = { ...req.body, userId: user.uid };
    await addQuizFb(quizData);
    return res
      .status(200)
      .json({ status: true, message: 'Quiz added successfully...' });
  } catch (error) {
    return res
      .status(500)
      .json({ status: false, message: 'Something went wrong' });
  }
};

Now go to the src > utils > db.ts directory and add the following code after the addUser function:

export const addQuiz = async (quizData) => {
  let response = await firebase.firestore().collection('quiz').add(quizData);
  return response;
};

Now, let's run our development server and try to add a new quiz.

npm run dev

Go to http://localhost:3000 and click on the Add new quiz link in the navbar. You'll get the following output:

Now fill in the form and click on Submit Quiz button. Go to the Firebase console and you'll see that a new collection named quiz has been created.

Note: For the FIREBASE_PRIVATE_KEY in .env.local, remember to add string quotation marks around it or you'll get the following error:

FirebaseAppError: Failed to parse private key: Error: Invalid PEM formatted message.

How to set up the Display Multiple Quizzes mechanism:

Now let's show our quiz list on the / route. Go to the pages > index.js and update the existing code with the following code:

import { Box, Container, Divider, Flex, Heading, SimpleGrid, Text } from '@chakra-ui/react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import React from 'react';
import Navbar from '../common/Navbar';
import { getAllQuiz, getAllUsers } from '../utils/db';

const Home = (props) => {
  const quiz = JSON.parse(props.quiz);
  const router = useRouter();

  const generateQuizCard = (singleQuiz) => {
    return (
      <Box m={3} borderWidth="1px" borderRadius="lg" p={6} boxShadow="xl">
        <Heading as="h3" size="lg">
          {singleQuiz.title}
        Heading>

          <Text color="gray.500" mt={2}>
            Posted By: {singleQuiz.user.name}
          Text>
          <Text color="gray.500" mt={2}>
            No of Questions: {singleQuiz.questions.length}
          Text>

        <Divider mt={3} mb={3} />
        <Text noOfLines={[1, 2, 3]}>{singleQuiz.description}Text>
      Box>
    );
  };

  return (
    <Box>
      <Head>
        <title>QuizApptitle>
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main>
        <header>
          <Navbar />
          <Container maxW="6xl">
            {quiz.length > 0 && (
              <SimpleGrid minChildWidth="400px">
                {quiz.map((singleQuiz) => (
                  <Box
                    key={singleQuiz.id}
                    onClick={() => router.push(`/quiz/${singleQuiz.id}`)}
                    as="button"
                    textAlign="start"
                    m={2}
                  >
                    {generateQuizCard(singleQuiz)}
                  Box>
                ))}
              SimpleGrid>
            )}
          Container>
        header>
      main>
      <footer>footer>
    Box>
  );
};

export async function getServerSideProps(_context) {
  const quiz = await getAllQuiz();
  const users = await getAllUsers();
  const data = quiz.map((singleQuiz: any) => {
    return { ...singleQuiz, user: users.find((user) => user.id === singleQuiz.userId)};
  });
  return { props: { quiz: JSON.stringify(data) } };
}

export default Home;

Now go to the src > utils > db.ts and add the following after addQuiz function:

export const getAllQuiz = async () => {
  const snapshot = await firebase.firestore().collection('quiz').get();
  const quiz = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
  return quiz;
};

export const getAllUsers = async () => {
  const snapshot = await firebase.firestore().collection('users').get();
  const users = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
  return users;
}

Go to http://localhost:3000 and refresh the page. You'll get the following output:

How to Show a Single Quiz, How to Answer a Quiz and How to Validate the Answer

In this section following will be implemented:

How to sett up the Show a Single Quiz and Answer Quiz mechanisms.
How to set up the Validate Answer mechanism.

You can find the quiz app code implemented in this section at this commit.

How to set up the Show a Single Quiz and Answer Quiz mechanisms:

Create a new directory named [id] under src > pages > quiz. Inside this directory create a file named index.tsx and paste in the following code:

import {
  Button,
  Center,
  Container,
  Divider,
  FormControl,
  FormLabel,
  Heading,
  HStack,
  RadioGroup,
  SimpleGrid,
  Text,
} from '@chakra-ui/react';
import { Field, Form, Formik } from 'formik';
import { NextPageContext } from 'next';
import { useRouter } from 'next/router';
import React, { useEffect } from 'react';
import Navbar from '../../../common/Navbar';
import { useAuth } from '../../../lib/auth';
import { getSingleQuiz } from '../../../utils/db';
import { addAnswerApi } from '../../../utils/service';

const ShowQuiz = (quiz, onSubmit) => {
  return (
    <Container
      maxW="7xl"
      mt={5}
      mb={5}
      borderWidth="1px"
      borderRadius="lg"
      p={6}
      boxShadow="xl"
    >
      <Center flexDirection="column">
        <Heading>{quiz.title}Heading>
      Center>
      <Text mt={4}>{quiz.description}Text>
      <Heading mt={4} size="lg">
        Questions:
      Heading>
      <Divider
        mt={4}
        mb={4}
        css={{
          boxShadow: '1px 1px #888888',
        }}
      />
      <Formik initialValues={{}} onSubmit={onSubmit}>
        {(props) => (
          <Form>
            {quiz.questions.map((singleQuiz, key) => (
              <Field name={singleQuiz.questionId} key={key}>
                {({ field, _form }) => (
                  <FormControl
                    as="fieldset"
                    isRequired={true}
                    mb={{ base: 4, md: 0 }}
                  >
                    <FormLabel as="legend">{singleQuiz.title}FormLabel>
                    <RadioGroup>
                      <SimpleGrid minChildWidth="120px" mb={2}>
                        {singleQuiz.options.map((option, subkey) => (
                          <HStack key={subkey}>
                            <Field
                              {...field}
                              type="radio"
                              name={singleQuiz.questionId}
                              value={option.optionId}
                            />
                            <Text>{option.title}Text>
                          HStack>
                        ))}
                      SimpleGrid>
                    RadioGroup>
                  FormControl>
                )}
              Field>
            ))}
            <Center mt={10}>
              <Button
                type="submit"
                isLoading={props.isSubmitting}
                colorScheme="green"
              >
                Submit
              Button>
            Center>
          Form>
        )}
      Formik>
    Container>
  );
};

const SingleQuiz = (props) => {
  const { auth, loading } = useAuth();

  const router = useRouter();

  useEffect(() => {
    if (!auth && !loading) {
      router.push(`/signin?next=/quiz/${props.quizId}`);
    }
  }, [auth, loading]);

  const quiz = JSON.parse(props.quiz);

  const onSubmit = async (values, actions) => {
    try {
      const resp = await addAnswerApi(auth, props.quizId, values);
      const answerId = resp.data.data.answerId;
      router.push(`/quiz/${props.quizId}/answer/${answerId}`);
    } catch (error) {
      console.log('error', error);
    } finally {
      actions.setSubmitting(false);
    }
  };

  return (
    <>
      <Navbar />
      {quiz && ShowQuiz(quiz, onSubmit)}
    
  );
};

export async function getServerSideProps(context: NextPageContext) {
  const quizId = context.query.id;
  const quizData = await getSingleQuiz(quizId);
  return { props: { quiz: quizData, quizId } };
}

export default SingleQuiz;

Inside src > utils > db.ts add the following code below the getAllUsers function:

export const getSingleQuiz = async (quizId) => {
  const snapshot = await firebase
    .firestore()
    .collection('quiz')
    .doc(String(quizId))
    .get();
  const quizData = snapshot.exists ? JSON.stringify(snapshot.data()) : null;
  return quizData;
};

Inside src > utils > service.ts add the following code below the addQuizApi function:

export const addAnswerApi = async (auth, quizId, values) => {
  try {
    const header = {
      'Content-Type': 'application/json',
      token: auth.token,
    };
    const resp = await axios.post(
      `/api/quiz/${quizId}/answer`,
      {
        questions: values,
        createdAt: new Date(),
        updatedAt: new Date(),
      },
      { headers: header }
    );
    return resp;
  } catch (error) {
    throw error;
  }
};

Inside src > pages > api > quiz directory, create a new directory named [id].

How to set up the Validate Answer mechanism:

Inside this directory create a file named answer.ts and paste in the following code:

import { NextApiRequest, NextApiResponse } from 'next';
import { auth } from '../../../../lib/firebase-admin';
import { addAnswer as addAnswerFb } from '../../../../utils/db';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  switch (req.method) {
    case 'POST':
      await addAnswer(req, res);
      break;
    default:
      res.status(405).json({ status: false, message: 'Method Not found' });
      break;
  }
};

const addAnswer = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const user = await auth.verifyIdToken(req.headers.token as string);
    const data = {
      ...req.body,
      quizId: req.query.id,
      userId: user.uid,
    };
    const response = await addAnswerFb(data);
    return res
      .status(200)
      .json({ status: true, data: { answerId: response.id } });
  } catch (error) {
    return res
      .status(500)
      .json({ status: false, message: 'Something went wrong' });
  }
};

Inside src > utils > db.ts add the following code below the getSingleQuiz function:

export const addAnswer = async (data) => {
  const response = await firebase.firestore().collection('answer').add(data);
  return response;
};

Go to http://localhost:3000, refresh the page, and click on the quiz. You'll get the following output:

Now you can answer the question and press submit. Right now it will go to a 404 page. We will need to create a page where we can show the correct answer.

Inside the src > pages > quiz > [id] directory, create a new directory called answer. Inside that directory create a new file called [answerId].tsx and paste in the following code:

import {
  Box,
  Center,
  Container,
  Divider,
  Heading,
  Radio,
  RadioGroup,
  SimpleGrid,
  Text,
} from '@chakra-ui/react';
import { NextPageContext } from 'next';
import React from 'react';
import Navbar from '../../../../common/Navbar';
import { getAnswer, getSingleQuiz } from '../../../../utils/db';

const answer = (props) => {
  const quiz = JSON.parse(props.quiz);
  const answer = JSON.parse(props.answer);

  return (
    <>
      <Navbar />
      {quiz && answer && (
        <Container maxW="3xl" mt={5}>
          <Center flexDirection="column">
            <Heading>Correct Answer for {quiz.title}Heading>
            <Text mt={4}>{quiz.description}Text>
          Center>
          <Divider
            mt={4}
            mb={4}
            css={{
              boxShadow: '1px 1px #888888',
            }}
          />
          {quiz.questions.map((singleQuiz, index) => {
            return (
              <Box
                mt={index !== 0 && 4}
                key={index}
                borderWidth="1px"
                borderRadius="lg"
                p={6}
                boxShadow="xl"
                backgroundColor={
                  answer.questions[singleQuiz.questionId] &&
                  singleQuiz.options[singleQuiz.answer].optionId ===
                    answer.questions[singleQuiz.questionId]
                    ? 'green.200'
                    : 'red.200'
                }
              >
                <Text>
                  {index + 1}) {singleQuiz.title}
                Text>
                <RadioGroup>
                  <SimpleGrid minChildWidth="120px" mt={2}>
                    {singleQuiz.options.map((option, index) => (
                      <Radio value={option.title} isDisabled key={index}>
                        {option.title}
                      Radio>
                    ))}
                  SimpleGrid>
                RadioGroup>
                <Text mt={3}>
                  Correct Answer: {singleQuiz.options[singleQuiz.answer].title}
                Text>
                {answer.questions[singleQuiz.questionId] ? (
                  <Text>
                    Selected Answer:{' '}
                    {
                      singleQuiz.options.find(
                        (option) =>
                          option.optionId ===
                          answer.questions[singleQuiz.questionId]
                      ).title
                    }
                  Text>
                ) : (
                  <Text>Not AnsweredText>
                )}
              Box>
            );
          })}
        Container>
      )}
    
  );
};

export async function getServerSideProps(context: NextPageContext) {
  const quizId = context.query.id;
  const answerId = context.query.answerId;
  const quizData = await getSingleQuiz(quizId);
  const answerData = await getAnswer(answerId);
  return { props: { answer: answerData, quiz: quizData } };
}

export default answer;

Inside src > utils > db.ts add the following code below the addAnswer function:

export const getAnswer = async (answerId) => {
  const answerSnapshot = await firebase
    .firestore()
    .collection('answer')
    .doc(String(answerId))
    .get();
  let answerData = answerSnapshot.exists
    ? JSON.stringify(answerSnapshot.data())
    : null;
  return answerData;
};

Go to http://localhost:3000, refresh the page, click on the quiz and answer the question. You'll get the following output:

With this, we have completed our application and it's ready to be deployed on Vercel. In the next section, we will configure the deployment mechanism.

How to Deploy the App to Vercel and Firebase Authentication Configuration

There are two ways to configure an application on Vercel:

Using the Vercel npm library and pushing the code locally to a Vercel server
Connecting the Vercel bot to the GitHub repository.

I am going to use the second method.

You need to create a repository on GitHub and push the code over there.

If you haven't created an account on Vercel then you can go to https://vercel.com/ and click on the sign up button.

Once you've created your account you'll be directed to a dashboard that looks like this:

Click on the New Project button. It will ask you to install the Vercel bot and permissions.

Note: You can allow the Vercel bot to read all repositories from your GitHub account or give permission for the currently created repository.

Click the Import button on the GitHub repository created above:

Now you'll need to add environment variables. Add them from .env.local.

Once they are added click on the Deploy button. After the deployment is successful you'll get the following screen.

Note: the URL may be in this format -.vercel.app.

Our Sign In won't work now. We have to add our new URL to the allowed URLs in the Firebase console.

Go to the Firebase console > Authentication and click on Sign-in-methods and scroll down. You'll see the Authorized domains table.

Click on the Add domain button, copy the newly generated URL, and click on add. Now open the deployed quiz application and test it.

Note: If you receive an error while adding a new quiz or answering the quiz, go to Vercel dashboard > Select the project > Select the settings tab > Select Environment Variables and update your FIREBASE_PRIVATE_KEY once again.

With this, we have created our production-ready quiz application. If you have built the app along with the tutorial, then a very big congratulations to you on this achievement.

Next Steps:

If you want to build more features into this app, here are few next steps you can consider:

Dashboard for users. (Show Profile Information, Update, and Delete. Show Quiz Added, Update and Delete. Show Quiz Answer.)
Firestore security rules modification.
Rich text markdown for Quiz questions and options.

Thank you for reading!

Feel free to connect with me on Twitter and Github.

If you want any project to be developed or want to consult with me, you can DM me on my Twitter (@sharvin26).

The Ultimate Guide to Python: How to Go From Beginner to Pro

Sharvin Shah — Fri, 01 May 2020 16:47:40 +0000

If you have an interest in Data Science, Web Development, Robotics, or IoT you must learn Python. Python has become the fastest-growing programming language due to its heavy usage and wide range of applications.

For a beginner or a person from a non-tech background, learning Python is a good choice. The syntax is like talking and writing plain English. For example, consider this syntax which shows its resemblance to the English language.

print("Hello folks")

We will use Python3 in this tutorial as it is widely used. Most of Python's frameworks and libraries support this version.

Note: Any version above 3.5.2 supports most of the libraries and frameworks.

Index:

Introduction
Installation
Python shell
Comment
Print
Indentation
Variables
Operators
Conditional Statements
For Loops
While loops
User Input
Typecasting
Dictionaries
Lists
Tuples
Sets
Functions and Arguments
Args
keyword Arguments
Default Arguments
kwargs
Scope
Return Statement
Lambda Expression
List comprehension
OOPS concepts
Classes
Methods
Objects
Constructor
Instance attribute
Class attributes
Self
Inheritance
Super
Multiple Inheritance
Polymorphism
Encapsulation
Decorators
Exceptions
Package Import
JSON Handling

Note: The beginning of this guide is geared towards beginners. If you have intermediate experience in Python, feel free to skip ahead using the links above.

Introduction:

As per Github's octoverse, Python is the second most used language by developers in 2019.

Octoverse graph of how languages have evolved

Before learning any language, it's helpful to know how that language came into existence. Well, Python was developed by Guido van Rossum, a Dutch programmer, and was released in 1991.

Python is an Interpreted language. It uses the CPython Interpreter to compile the Python code to byte code. For a beginner, you don't need to know much about CPython, but you must be aware of how Python works internally.

The philosophy behind Python is that code must be readable. It achieves this with the help of indentation. It supports many programming paradigms like Functional and Object Oriented programming. You will understand more about these as you read through the article.

The basic question that most beginners have in mind is what a language can do. Here are some of the use-cases of Python:

Server-side development ( Django, Flask )
Data Science ( Pytorch, Tensor-flow )
Data analysis / Visualisation ( Matplotlib )
Scripting ( Beautiful Soup )
Embedded development

Note: I do not endorse any of the above-mentioned libraries or frameworks in particular. They are popular and broadly used in their respective domains.

Installation

The first step of learning any programming language is installing it. Python comes bundled with most operating systems nowadays. Use the following command in your terminal to check if Python is available:

python3 --version

You'll see the following output:

Python 3.7.0

Note that your version of Python might be different. If you have Python installed and the version is above 3.5.2 then you can skip this section.

For those who don't have Python installed, follow the steps below:

Windows User
Mac User
Linux User

Windows User:

Go to Python's official website.
Click on the download button ( Download Python 3.8.2 ) [ Note: The version may differ based on when you are reading this article ]
Go to the path where the package is downloaded and double-click the installer.
Check the box indicating to "Add Python 3.x to PATH" and then click on "Install Now".
Once done you'll get a prompt that "Setup was successful". Check again if python is configured properly using the above command.
To confirm if Python is installed and configured properly, use the command python3 --version.

Mac User:

First install xcode from the app store.
If you want to install Xcode using the terminal then use the following command:

xcode-select --install

After that, we will use the brew package manager to install Python. To install and configure brew, use the following command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Once brew setup is done, use the following command to update any outdated packages:

brew update

Use the following command to install Python:

brew install python3

To confirm if Python is installed and configured properly, use the command python3 --version.

Linux User:

To install Python using apt, use the following command:

sudo apt install python3

To install the Python using yum, use the following command:

sudo yum install python3

To confirm if Python is installed and configured properly, use the command python3 --version.

Python shell:

The shell is one of the most useful tools you'll come across. The Python shell gives us the power to quickly test any concept before integrating it into our application.

Go to the terminal or command line prompt. Enter python3 command and you'll get the following output:

➜ python3.7
Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 26 2018, 23:26:24)
[Clang 6.0 (clang-600.0.57)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>>

In this tutorial, we will learn some concepts with the help of the python3 shell which you can see above. From now on, whenever I mention go to the Python shell, it means that you have to use the python3 command.

To learn the remaining concepts we will create a file called "testing" with the extension .py. To run this file we will use the following command:

python3 testing.py

Let's go to the Python shell. Type 10 + 12 after the >>> mark. You'll get the output 22:

>>> 10 + 12
22

Commenting:

Comments make it easy to write code as they help us (and others) understand why a particular piece of code was written. Another awesome thing about comments is that they help improve the readability of the code.

# Stay Safe

When you add the above syntax, the Python interpreter understands that it is a comment. Everything after # is not executed.

You may be wondering why you should use comments. Imagine you are a developer and you have been assigned to a huge project. The project has more than a thousand lines of code. To understand how everything works you'll need to go line by line and read through all the code.

What's a better solution than that? Ah-ha! Comments. Comments help us understand why a particular piece of code was written and what it returns or does. Consider it as documentation for every piece of code.

Print:

Other than debugging tools from the editor, the thing which helps developers solve problems most often is a print statement. The print statement is one of the most underrated pieces of syntax in all of programming.

So how does it help in debugging an issue? Well, consider that you have a module and you want to check the flow of execution to understand or debug it. There are two options. Either you can use a debugger or add a print statement.

It's not always possible to use a debugger. For example, if you are using the Python shell, then a debugger is not available. In such a scenario, print helps us. Another scenario is when your application is running. You can add a print statement that will display in the logs of your application and monitor them in runtime.

Python provides a inbuilt print method with the following syntax:

print("Stay safe...")

Indentation:

Another interesting part of this language is indentation. Why? Well, the answer is simple: It makes the code readable and well-formatted. It is compulsory in Python to follow the rules of indentation. If proper indentation is not followed you'll get the following error:

IndentationError: unexpected indent

See, even the errors in Python are so readable and easy to understand. At the start, you may be annoyed by the compulsion of indentation. But with the time you'll understand that indentation is a developer's friend.

Variables:

As the name implies, a variable is something that can change. A variable is a way of referring to a memory location used by a computer program.

Well in most programming languages you need to assign the type to a variable. But in Python, you don’t need to. For example, to declare an integer in C, the following syntax is used: int num = 5;. In Python it's num = 5 .

Go to the Python shell and perform the operation step by step:

Integer: Numerical values that can be positive, negative, or zero without a decimal point.

>>> num = 5
>>> print(num)
5
>>> type(num)
<class 'int'>

As you can see here we have declared a num variable and assigned 5 as a value. Python's inbuilt type method can be used to check the type of variable. When we check the type of num we see the output . For now, just focus on the int in that output. int represents an integer.

Float: Similar an integer but with one slight difference – floats are a numerical value with a decimal place.

>>> num = 5.0
>>> print(num)
5.0
>>> type(num)
<class 'float'>

Here we have assigned a number with a single decimal to the num. When we check the type of num we can see it is float.

String: A formation of characters or integers. They can be represented using double or single quotes.

>>> greet = "Hello user"
>>> print(greet)
Hello user
>>> type(greet)
<class 'str'>

Here we have assigned a string to greet. The type of greet is a string as you can see from the output.

Boolean: A binary operator with a True or False value.

>>> is_available = True
>>> print(is_available)
True
>>> type(is_available)
<class 'bool'>

Here we have assigned a True value to is_available. The type of this variable is boolean. You can only assign True or False. Remember T and F should be capital or it will give an error as follows:

>>> is_available = true
Traceback (most recent call last):
  File "", line 1, in 
NameError: name 'true' is not defined

NoneType: This is used when we don't have the value of the variable.

>>> num = None
>>> print(num)
None
>>> type(num)
<class 'NoneType'>

Operators:

Take a look at the image below to see all the arithmetic operators available in Python:

Operators table

Let's go over the operators one by one.

Arithmetic operators

These include addition, subtraction, deletion, exponentiation, modulus, and floor division. Also the shorthand syntax for some operators.

First, we will declare two variables, a and b.

>>> a = 6 # Assignment
>>> b = 2

Let's try our basic arithmetic operations:

>>> a + b # Addition
8
>>> a - b # Subtraction
4
>>> a * b # Multiplication
12
>>> a / b # Division
3.0
>>> a ** b # Exponentiation
36

To test for other arithmetic operations let's change the value of a and b.

>>> a = 7
>>> b = 3
>>> a % b # Modulus
1
>>> a // b # Floor division
2

Shorthand arithmetic operations are also available in Python. Refer back to the image above to test them out. To print the output of the shorthand operations use the print statement.

Comparison operators

These include equal to, greater than, and less than.

>>> a = 5 # Assign
>>> b = 2 # Assign
>>> a > b # Greater than
True
>>> a < b # less then
False
>>> a == b # Equal to
False
>>> a >= 5 # Greater than or equal to
True
>>> b <= 1 # Less than or equal to
False

Logical operators

These operators include not, and, & or.

>>> a = 10
>>> b = 2
>>> a == 2 and b == 10 # and
False
>>> a == 10 or b == 10 # or
True
>>> not(a == 10) # not
False
>>> not(a == 2)
True

Conditional Statements:

As the name suggests, conditional statements are used to evaluate if a condition is true or false.

Many times when you are developing an application you need to check a certain condition and do different things depending on the outcome. In such scenarios conditional statements are useful. If, elif and else are the conditional statements used in Python.

We can compare variables, check if the variable has any value or if it's a boolean, then check if it's true or false. Go to the Python shell and perform the operation step by step:

Condition Number 1: We have an integer and 3 conditions here. The first one is the if condition. It checks if the number is equal to 10.

The second one is the elif condition. Here we are checking if the number is less than 10.

The last condition is else. This condition executes when none of the above conditions match.

>>> number = 5
>>> if number == 10:
...     print("Number is 10")
... elif number < 10:
...     print("Number is less than 10")
... else:
...     print("Number is more than 10")
...

Output:

Number is less than 10

Note: It is not compulsory to check that two conditions are equal in the if condition. You can do it in the elif also.

Condition Number 2: We have a boolean and 2 conditions here. Have you noticed how we are checking if the condition is true? If is_available, then print "Yes it is available", else print "Not available".

>>> is_available = True
>>> if is_available:
...     print("Yes it is available")
... else:
...     print("Not available")
...

Output:

Yes it is available

Condition Number 3: Here we have reversed condition number 2 with the help of the not operator.

>>> is_available = True
>>> if not is_available:
...     print("Not available")
... else:
...     print("Yes it is available")
...

Output:

Yes it is available

Condition Number 4: Here we are declaring the data as None and checking if the data is available or not.

>>> data = None
>>> if data:
...     print("data is not none")
... else:
...     print("data is none")
...

Output:

data is none

Condition Number 5: You can also use an inline if in Python. The syntax to achieve this is the following:

>>> num_a = 10
>>> num_b = 5
>>> if num_a > num_b: print("num_a is greater than num_b")
...

Output:

num_a is greater than num_b

Condition Number 6: You can also use an inline if else in Python. The syntax to achieve this is the following:

expression_if_true if condition else expression_if_false

Example:

>>> num = 5
>>> print("Number is five") if num == 5 else print("Number is not five")

Output:

Number is five

Conditional Number 7: You can also use nested if-else statements. The syntax to achieve this is the following:

>>> num = 25
>>> if num > 10:
...     print("Number is greater than 10")
...     if num > 20:
...             print("Number is greater than 20")
...     if num > 30:
...             print("Number is greater than 30")
... else:
...     print("Number is smaller than 10")
...

Output:

Number is greater than 10
Number is greater than 20

Condition Number 8: You can also use the and operator in a conditional statement. It states if condition1 and condition2 both are true then execute it.

>>> num = 10
>>> if num > 5 and num < 15:
...     print(num)
... else:
...     print("Number may be small than 5 or larger than 15")
...

Output:

As our number is between 5 and 15 we get the output of 10.

Condition Number 9: You can also use the or operator in a conditional statement. It states that if either condition1 or condition2 is true then execute it.

>>> num = 10
>>> if num > 5 or num < 7:
...     print(num)
...

Output:

Are you confused because the value of num is 10 and our second condition states that num is less than 7? So why do we get the output as 10? It's because of the or condition. As one of the conditions matches, it will execute it.

For Loops:

Another useful method in any programming language is an iterator. If you have to implement something multiple times, what will you do?

print("Hello")
print("Hello")
print("Hello")

Well, that's one way to do it. But imagine you have to do it a hundred or a thousand times. Well, that's a lot of print statements we have to write. There's a better way called iterators or loops. We can either use a for or while loop.

Here we are using the range method. It specifies the range until which the loop should be repeated. By default, the starting point is 0.

>>> for i in range(3):
...     print("Hello")
...

Output:

Hello
Hello
Hello

You can also specify the range in this way range(1,3).

>>> for i in range(1,3):
...     print("Hello")
...

Output:

Hello
Hello

"Hello" is only printed two times as we have specified the range here. Think of the range as Number on right - Number on left.

Well, you can also add an else statement in the for loop.

>>> for i in range(3):
...     print("Hello")
... else:
...     print("Finished")

Output:

Hello
Hello
Hello
Finished

See our loop iterated 3 times ( 3 - 0 ) and once that is done it executed the else statement.

We can also nest a for loop inside another for loop.

>>> for i in range(3):
...     for j in range(2):
...             print("Inner loop")
...     print("Outer loop")
...

Output:

Inner loop
Inner loop
Outer loop
Inner loop
Inner loop
Outer loop
Inner loop
Inner loop
Outer loop

As you can see the inner loop print statement executed two times. After that outer loop print statement executed. Again the inner loop executed two times. So what is happening here? If you are confused then consider this to solve it:

Our Interpreter comes and sees that there is a for loop. It goes down again and checks there is another for loop.
So now it will execute the inner for loop two times and exit. Once it's finished it knows that outer for loop has instructed it to repeat two more times.
It starts again and sees the inner for loop and repeats.

Well, you can also choose to pass a certain for loop condition. What does pass mean here? Well whenever that for loop will occur and the Interpreter sees the pass statement it won't execute it and will move to the next line.

>>> for i in range(3):
...     pass
...

You will not get any output on the shell.

While loops:

Another loop or iterator available in Python is the while loop. We can achieve some of the same results with the help of a while loop as we achieved with the for loop.

>>> i = 0
>>> while i < 5:
...     print("Number", i)
...     i += 1
...

Output:

Number 0
Number 1
Number 2
Number 3
Number 4

Remember whenever you use a while loop it's important that you add an increment statement or a statement that will end the while loop at some point. If not then the while loop will execute forever.

Another option is to add a break statement in a while loop. This will break the loop.

>>> i = 0
>>> while i < 5:
...     if i == 4:
...             break
...     print("Number", i)
...     i += 1
...

Output:

Number 0
Number 1
Number 2
Number 3

Here we are breaking the while loop if we find the value of i to be 4.

Another option is to add an else statement in while loop. The statement will be executed after the while loop is completed.

>>> i = 0
>>> while i < 5:
...     print("Number", i)
...     i += 1
... else:
...     print("Number is greater than 4")
...

Output:

Number 0
Number 1
Number 2
Number 3
Number 4
Number is greater than 4

The continue statement can be used to skip the current execution and to proceed to the next.

>>> i = 0
>>> while i < 6:
...     i += 1
...     if i == 2:
...             continue
...     print("number", i)
...

Output:

number 1
number 3
number 4
number 5
number 6

User Input:

Imagine you are building a command-line application. Now you have to take the user input and act accordingly. To do that you can use Python's inbuilt input method.

The syntax to achieve this is as follows:

variable = input(".....")

Example:

>>> name = input("Enter your name: ")
Enter your name: Sharvin

When you use the input method and press enter, you'll be prompted with the text that you enter in the input method. Let's check if our assignment is working or not:

>>> print(name)
Sharvin

There it is! It is working perfectly. Here Sharvin is of the type string.

>>> type(name)
<class 'str'>

Let's try one more example where we will assign an integer rather than a string and check the type.

>>> date = input("Today's date: ")
Today's date: 12
>>> type(date)
str'>

Are you confused? We entered an integer 12 and it's still giving us its type as a string. It's not a bug. It's how input is intended to work. To convert the string to integer we will use typecasting.

Typecasting:

We saw that the input method returns a string for the integer also. Now if we want to compare this output with another integer then we need a way to convert it back to an integer.

>>> date_to_int = int(date)
>>> type(date_to_int)
<class 'int'>

Here we took the date that we have declared above in the User input section and converted it into the integer using the Python's inbuilt int method. This is called typecasting.

Basically you can do the following conversion with the help of typecasting:

integer to string: str()
string to integer: int()
integer to float: float()

Note: Conversion from float to integer is also possible.

>>> type(date)
<class 'str'>

# Converting from string to float
>>> date_to_float = float(date)
>>> type(date_to_float)
<class 'float'>

# Converting from float to string
>>> date_to_string = str(date_to_float)
>>> type(date_to_string)
<class 'str'>

# Converting from float to integer
>>> date_to_int = int(date_to_float)
>>> type(date_to_int)
<class 'int'>

Dictionaries:

Imagine you want to store some user details. So how can you store these details? Yes, we can use variable to store them as follows:

>>> fname = "Sharvin"
>>> lname = "Shah"
>>> profession = "Developer"

To access this value we can do the following:

>>> print(fname)
Sharvin

But is this an elegant and optimized way to access it? The answer is no. To make it more friendly, let's store the data in a key-value dictionary.

What is a dictionary? A dictionary is a collection that is unordered and mutable ( i.e. it can be updated ).

Following is the format of the dictionary:

data = {
    "key" : "value"
}

Let's understand the dictionary further by an example:

>>> user_details = {
...     "fname": "Sharvin",
...     "lname": "Shah",
...     "profession": "Developer"
... }

How to access a value in a dictionary

We can access the value inside a dictionary in two ways. We will take a look at both and then debug them to find out which is better.

Method 1: To access the value of fname key from user_details dictionary we can use the following syntax:

>>> user_details["fname"]
'Sharvin'

Method 2: We can also access the value of fname key from user_details dictionary using get.

>>> user_details.get("fname")
'Sharvin'

I know method 1 looks easier to understand. The problem with it occurs when we try to access the data that is not available in our dictionary.

>>> user_details["age"]
Traceback (most recent call last):
  File "", line 1, in 
KeyError: 'age'

We get a KeyError which indicates that the key is not available. Let's try the same scenario with method 2.

>>> user_details.get("age")

We do not get anything printed in our console. Let's debug it further to know why this happened. Assign a variable age to our get operation and we will print it in our console.

>>> age = user_details.get("age")
>>> print(age)
None

So when get doesn't find the key it sets the value to None. Because of this, we do not get any error. Now you may be wondering which one is right. Most of the time using method 2 makes more sense, but for some strict checking conditions, we need to use method 1.

How to check if a key exists

You may be wondering how to check if the dictionary has a particular key or not in it. Python provides the built-in method keys() to solve this issue.

>>> if "age" in user_details.keys():
...     print("Yes it is present")
... else:
...     print("Not present")
...

We will get the following output:

Not present

What if we want to check if the dictionary is empty or not? To understand this let's declare an empty dictionary as follows:

>>> user_details = {}

When we use if-else on a dictionary directly it either returns true if data is present or false if empty.

>>> if user_details:
...     print("Not empty")
... else:
...     print("Empty")
...

Output:

Empty

We can also use Python's inbuilt method bool to check if the dictionary is empty or not. Remember bool returns False if the dictionary is empty and True if it is filled.

>>> bool(user_details)
False

>>> user_details = {
...     "fname" : "Sharvin"
... }
>>> bool(user_details)
True

How to update the value of an existing key

So now we know how to get a particular key and find if it exists – but how do you update it in the dictionary?

Declare a dictionary as follows:

>>> user_details = {
...     "fname":"Sharvin",
...     "lname": "Shah",
...     "profession": "Developer"
... }

To update the value use the following syntax:

>>> user_details["profession"] = "Software Developer"
>>> print(user_details)
{'fname': 'Sharvin', 'lname': 'Shah', 'profession': 'Software Developer'}

Updating a value of key in dictionary is same as assigning a value to the variable.

How to add a key-value pair

The next question is how to add a new value to the dictionary? Let's add an age key with a value of 100.

>>> user_details["age"] = "100"
>>> print(user_details)
{'fname': 'Sharvin', 'lname': 'Shah', 'profession': 'Software Developer', 'age': '100'}

As you can see a new key-value is added in our dictionary.

How to remove a key-value pair

To remove a key-value from the dictionary, Python provides an inbuilt method called pop.

>>> user_details.pop("age")
'100'

>>> print(user_details)
{'fname': 'Sharvin', 'lname': 'Shah', 'profession': 'Software Developer'}

This removes the age key-value pair from the user_details dictionary. We can also use a del operator to delete the value.

>>> del user_details["age"]

>>> print(user_details)
{'fname': 'Sharvin', 'lname': 'Shah', 'profession': 'Software Developer'}

The del method can also be used to delete complete dictionary. Use the following syntax to delete complete dictionary del user_details.

How to copy a dictionary

A dictionary cannot be copied in a traditional way. For example, you cannot copy value of dictA to dictB as follows:

dictA = dictB

To copy the values you need to use the copy method.

>>> dictB = user_details.copy()

>>> print(dictB)
{'fname': 'Sharvin', 'lname': 'Shah', 'profession': 'Software Developer'}

Lists:

Imagine you have a bunch of data that is not labeled. In other words, each piece of data doesn't have a key that defines it. So how will you store it? Lists to the rescue. They are defined as follows:

data = [ 1, 5, "xyz", True ]

A list is a collection of random, ordered, and mutable data (i.e., it can be updated).

How to access list elements

Let's try to access the first element:

>>> data[1]
5

Wait what happened here? We are trying to access the first element but we are getting the second element. Why?

Indexing of the list begins from zero. So what do I mean by this? The indexing of the position of the elements begins from zero. The syntax to access an element is as follows:

list[position_in_list]

To access the first element we need to access it as follows:

>>> data[0]
1

You can also specify a range to access the element between those positions.

>>> data[2:4]
['xyz', True]

Here, the first value represents the start while the last value represents the position until which we want the value.

How to add an item to a list

To add an item in the list we need to use the append method provided by python.

>>> data.append("Hello")

>>> data
[1, 5, 'abc', True, 'Hello']

How to change the value of an item

To change the value of an item, use the following syntax:

>>> data[2] = "abc"

>>> data
[1, 5, 'abc', True]

How to remove an item from a list

To remove an item from a list we can use the Python's inbuilt remove method.

>>> data.remove("Hello")
>>> data
[1, 5, 'abc', True]

How to loop through a list

We can also loop through the list to find a certain element and operate on it.

>>> for i in data:
...     print(i)
...

Output:

1
5
abc
True

How to check if an item exists or not

To check if a particular item exists or not in list we can use if loop as follows:

>>> if 'abc' in data:
...     print("yess..")
...
yess..

How to copy list data

To copy list data from one list to another we need to use copy method.

>>> List2 = data.copy()
>>> List2
[1, 5, 'abc', True]

How to check the length of a list

We can also check the length of list using Python's inbuilt len method.

>>> len(data)
4

How to join two lists

To join two list we can use the + operator.

>>> list1 = [1, 4, 6, "hello"]
>>> list2 = [2, 8, "bye"]
>>> list1 + list2
[1, 4, 6, 'hello', 2, 8, 'bye']

What happens if we try to access a element position which is not available in the list? We get a list index out of range error in such a condition.

>>> list1[6]
Traceback (most recent call last):
  File "", line 1, in 
IndexError: list index out of range

Tuples:

The tuple is a data type which is ordered and immutable (i.e. data cannot be changed).

Let's create a tuple:

>>> data = ( 1, 3 , 5, "bye")
>>> data
(1, 3, 5, 'bye')

How to access a tuple element

We can access elements in the tuple the same way as we access them in a list:

>>> data[3]
'bye'

We can access the index range as follows:

>>> data[2:4]
(5, 'bye')

How to change a tuple's value

If you are thinking wait – how can we change the value of tuple, then you are right my friend. We cannot change the value of tuple as it is immutable. We get the following error if we try to change the value of a tuple:

>>> data[1] = 8
Traceback (most recent call last):
  File "", line 1, in 
TypeError: 'tuple' object does not support item assignment

There's a workaround available to change the value of a tuple:

>>> data = ( 1, 3 , 5, "bye")
>>> data_two = list(data) # Convert data to list
>>> data_two[1] = 8 # Update value as list is mutable
>>> data = tuple(data_two) # Convert again to tuple
>>> data
(1, 8, 5, 'bye')

All other methods that we have seen in the list are applicable for the tuple also.

[ Note: Once a tuple is created a new value cannot be added in it. ].

Sets:

Sets are another data type in Python which are unordered and unindexed. Sets are declared as follows:

>>> data = { "hello", "bye", 10, 15 }
>>> data
{10, 15, 'hello', 'bye'}

How to access a value

As sets are unindexed we cannot directly access the value in a set. Thus to access the value in the set you need to use a for loop.

>>> for i in data:
...     print(i)
...

10
15
hello
bye

How to change a value

Once the set is created, values cannot be changed.

How to add an item

To add an item to the set python provides an inbuilt method called add.

>>> data.add("test")
>>> data
{10, 'bye', 'hello', 15, 'test'}

How to check length

To check the length of the set we use the len method.

>>> len(data)
5

How to remove an item

To remove an item use the remove method:

>>> data.remove("test")
>>> data
{10, 'bye', 'hello', 15}

Functions and Arguments:

Functions are a handy way to declare an operation that we want to perform. With the help of functions, you can separate logic according to the operation.

Functions are a block of code that helps us in the reusability of the repetitive logic. Functions can be both inbuilt and user-defined.

To declare a function we use the def keyword. Following is the syntax of the functions:

>>> def hello_world():
...     print("Hello world")
...

Here we are declaring a function which, when called, prints a "Hello world" statement. To call a function we use the following syntax:

>>> hello_world()

We will get the following output:

Hello world

Remember that the () brackets in a function call means to execute it. Remove those round brackets and try the call again.

>>> hello_world

You'll get the following output:

When we remove the round brackets from the function call then it gives us a function reference. Here above as you can see the reference of function hello_world points to this memory address 0x1083eb510.

Consider you have to perform an addition operation. You can do it by declaring a and b and then performing the addition.

>>> a = 5
>>> b = 10
>>> a + b
15

This is one way to go. But now consider that the value of a and b have changed and you need to do it again.

>>> a = 5
>>> b = 10
>>> a + b
15
>>> a = 2
>>> b = 11
>>> a + b
13

This still looks doable. Now imagine we need to add a set of two numbers a hundred times. The numbers within the set are different for every calculation. That's a lot to do. Don't worry – we have a function at our disposal to solve this issue.

>>> def add(a,b):
...     print(a+b)
...

Here we are adding a and b as a compulsory argument to the add function. To call this function we will use the following syntax:

>>> add(10,5)

Output:

See how easy it is to define a function and use it? So what happens if we don't pass an argument?

>>> add()
Traceback (most recent call last):
  File "", line 1, in 
TypeError: add() missing 2 required positional arguments: 'a' and 'b'

Python throws a TypeError and informs us that the function requires two arguments.

Can you guess what will happen if we pass a third argument?

>>> add(10,5,1)
Traceback (most recent call last):
  File "", line 1, in 
TypeError: add() takes 2 positional arguments but 3 were given

Well, Python will inform us that we have passed 3 arguments but there are only 2 positional arguments.

So what can we do when we don't know how many arguments a function can take? To solve this issue we use args and kwargs.

Args:

When you don't know how many arguments will be passed to the function, use args and kwargs (kwargs are discussed below).

To pass n number of arguments to a function we use args. We add a * in front of the argument.

Remember when you attach a * in front, you will be receiving a tuple of arguments.

>>> def add(*num):
...     print(num)
...

Here *num is an instance of args. Now when we call the function add we can pass in n number of arguments and it won't throw a TypeError.

>>> add(1,2,3)
(1, 2, 3)

>>> add(1,2,3,4)
(1, 2, 3, 4)

Now to perform the addition operation we will use the Python's builtin function sum

>>> def add(*num):
...     print(sum(num))
...

Now when we call the add function we will get the following output:

>>> add(1,2,3) # Function call
6
>>> add(1,2,3,4) # Function call
10

Keyword Arguments:

There are times when we don't know the order of the arguments that will be passed to our function when it's called. In such a scenario we use keyword arguments because you can pass them in any order in your call and our function will know the value. Take a look at this example:

>>> def user_details(username, age):
...     print("Username is", username)
...     print("Age is", age)
...

Let's call this function as follows:

>>> user_details("Sharvin", 100)

We will get the following output:

Username is Sharvin
Age is 100

Well this looks correct, but imagine if we called our function in this way:

>>> user_details(100, "Sharvin")

We will get the following output:

Username is 100
Age is Sharvin

This does not look right. What happened is username took the value of 100 while age took the value of "Sharvin". In scenarios like this where we don't know the order of arguments we can use keyword arguments when calling the function:

>>> user_details(age=100, username="Sharvin")

Output:

Username is Sharvin
Age is 100

Default Argument:

Suppose there is a condition where we are not sure if a particular argument will get a value or not when the function is called. In such a scenario we can use Default arguments as follows:

>>> def user_details(username, age = None):
...     print("Username is", username)
...     print("Age is", age)
...

Here we are assigning a None to our age argument. If we don't pass a second argument while calling the function it will take None as a default value.

Let's call the function:

>>> user_details("Sharvin")

Output:

Username is Sharvin
Age is None

If we pass in the second argument it will override None and use it as the value.

>>> user_details("Sharvin", 200)
Username is Sharvin
Age is 200

But what will happen if we assign the first argument in our function as default and the second as a compulsory argument? Go to the Python shell and try this out:

>>> def user_details(username=None, age):
...     print("Username is", username)
...     print("Age is", age)
...

You'll get the following error:

  File "", line 1
SyntaxError: non-default argument follows default argument

Remember: All compulsory arguments must be declared first and then the default argument must be declared.

kwargs:

There can be a situation where you don't know how many keyword arguments will be passed into the function. In such a scenario we can use Kwargs.

To use kwargs we put ** in front of the argument.

Remember: When you attach a ** in front, you will be receiving a dictionary of arguments.

Let's understand this by example. We will declare a function which accepts username as it's argument with ** in front of it.

>>> def user(**username):
...     print(username)
...

When we call the user function as follows we will receive a dictionary.

>>> user(username1="xyz",username2="abc")

Output:

{'username1': 'xyz', 'username2': 'abc'}

So what's happening here? It looks the same as args, right?

No, it's not. In args, you cannot access a particular value by its name as it is in the form of a tuple. Here we get the data in the form of a dictionary so we can easily access the value.

Consider this example:

>>> def user(**user_details):
...     print(user_details['username'])
...

Let's call our function:

>>> user(username="Sharvin",age="1000")

And you'll get the following output:

Sharvin

Scope:

A scope defines where a variable or function is available. There are two types of scope in Python: Global and Local.

Global Scope

A variable or function created in the main body of Python code is called a global variable or function and is part of the global scope. For example:

>>> greet = "Hello world"
>>> def testing():
...     print(greet)
...
>>> testing()
Hello world

Here the variable greet is available globally because it is declared in the body of the program.

Local Scope

A variable or function created inside a function is called a local variable or function and is part of the local scope:

>>> def testing():
...     greet = "Hello world"
...     print(greet)
...
>>> testing()
Hello world

Here greet is created inside the testing function and is only available there. Let's try to access it in our main body and see what happens:

>>> print(greet)
Traceback (most recent call last):
  File "", line 1, in 
NameError: name 'greet' is not defined

Remember: Restart the Python console by pressing ctrl + d and starting the shell again by using the python3 command before testing the code above. The first example has you declare the greet variable in the global scope meaning it will still be available in memory when you run the second example.

As greet is not available globally we get the error that it is not defined.

Return Statement:

Until now our functions are pretty simple. They are receiving data, processing it, and printing them. But in the real world, you need a function to return output so that it can be used in different operations.

To achieve this, return statements are used. Remember, return statements are only part of functions and methods. The syntax for the return statement is quite easy.

>>> def add(a, b):
...     return a + b
...
>>> add(1,3)
4

Instead of printing our addition, we are returning the output. The value of the returned output can also be stored in a variable.

>>> sum = add(5,10)
>>> print(sum)
15

Lambda Expression:

Consider a situation where you don't want to perform much computation in a function. In such a situation writing a full-fledged function doesn't make sense. To solve this we use a lambda expression or lambda function.

So what is a lambda expression? It is an anonymous function and they are restricted to a single expression. The lambda expression can take n number of arguments.

The syntax for lambda expression is:

variable = lambda arguments: operation

Let's understand it more by example:

>>> sum = lambda a: a + 10

Here we have declared a variable sum which we are using to call the lambda function. a represents the argument that is passed to that function.

Let's call our function:

>>> x(5)
15

List comprehension:

Consider a situation where you want a list of squares. Normally you'll declare a squares list and then in a for loop you'll square out the numbers.

>>> squares = []
>>> for x in range(10):
...     squares.append(x**2)
...
>>> squares
[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

Well this is doable, but we can achieve this in a single line with the help of list comprehension.

There are two ways to achieve this. Let's understand both of them.

>>> squares = list(map(lambda x: x**2, range(10)))
>>> squares
[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

Here we are using list constructor to build a list and inside that lambda function which squares out the number. Another way to achieve the same result is as follows:

>>> squares = list(x**2 for x in range(10))
>>> squares
[0, 1, 4, 9, 16, 25, 36, 49, 64, 81]

I prefer this way because it is easier to more concise and easier to understand.

What about when we have a condition where we want a set of two numbers that are the same? Well, we need to write two for loops and one if loop.

Let's see how that will look:

>>> num_list = []
>>> for i in range(10):
...     for j in range(10):
...             if i == j:
...                     num_list.append((i,j))
...
>>> num_list
[(0, 0), (1, 1), (2, 2), (3, 3), (4, 4), (5, 5), (6, 6), (7, 7), (8, 8), (9, 9)]

That's a lot of work. And in terms of readability it's hard to understand.

Let's use list comprehension to achieve the same result.

>>> num_list = list((i,j) for i in range(10) for j in range(10) if i == j)

>>> num_list
[(0, 0), (1, 1), (2, 2), (3, 3), (4, 4), (5, 5), (6, 6), (7, 7), (8, 8), (9, 9)]

See how easy it is to get the same output in a single expression? Well, that's the power of list comprehension.

OOP concepts:

Python is a multi-paradigm programming language. It means Python can use different approaches to solve a problem. One of the paradigms is procedural or functional programming. It structures the code like a recipe – a set of steps in the form of functions and code blocks.

Another approach to solving the problem is by creating classes and objects. This is known as object-oriented oriented programming. An object is a collection of data (variables) and methods that act on those data. And classes are a blueprint for each object.

The important thing to understand in object-oriented programming is that objects are at the center of the paradigm – they not only represent the data but also the structure of the program.

You can choose the paradigm that best suits the problem at hand, mix different paradigms in one program, and/or switch from one paradigm to another as your program evolves.

Advantages of object oriented programming

Inheritance: This is one of the most useful concepts in OOP. It specifies that the child object will have all the properties and behavior of the parent object. Thus Inheritance allows us to define a class that inherits all the methods and properties from another class.
Polymorphism: To understand polymorphism let’s divide the word into two parts. The first part "poly" means many and "morph" means to form or shape. Thus polymorphism means one task can be performed in many different ways.

For example, you have a class animal, and all animals speak. But they speak differently. Here, the “speak” behavior is polymorphic and depends on the animal. So, the abstract “animal” concept does not actually “speak”, but specific animals (like dogs and cats) have a concrete implementation of the action “speak”.

Polymorphism means the same function name or method name being used for different types.

Encapsulation: In object-oriented programming you can restrict access to methods and variables – we can make the methods and variables private. This can prevent the data from being modified by accident and is known as encapsulation.

First, we will understand classes, objects, and constructors. Then after that, we will look into the above properties again. If you already know about classes, objects, and constructors, feel free to skip ahead.

Classes:

There are primitive data structures available in Python, for example, numbers, strings, and lists. These can all be used for simple representations like name, place, cost, and so on.

But what if we have more complex data? If there is a pattern in the repetition of the properties of that data, what can we do?

Suppose we have 100 different animals. Every animal has a name, age, legs, etc. What if we want to add other properties to each animal, or one more animal gets added to that list? To manage such a complex scenario we need classes.

According to the official Python documentation:

Classes provide a means of bundling data and functionality together. Creating a new class creates a new type of object, allowing new instances of that type to be made.

Each class instance can have attributes attached to it for maintaining its state. Class instances can also have methods (defined by its class) for modifying its state.

Syntax of class:

class ClassName:

    -1>
    .
    .
    .

We use class keyword to define a class. We will define a class Car.

class Car:
    pass

Methods:

Methods look the same as functions. The only difference is that methods are dependent on an object. A function can be invoked by name while methods need to be invoked by using their class reference. They are defined inside the class.

In our example, let's create two methods. One is an engine and another is a wheel. These two methods define the parts available in our car.

The below program will give us a better idea of classes:

>>> class Car:
...     def engine(self):
...             print("Engine")
...

>>> Car().engine()
Engine

Here we are calling the engine method by using the Car() reference.

To summarize, the class provides a blueprint of what should be defined but it does not provide any real content. The Car class above defines the engine but it will not state what a specific car’s engine is. It is specified by the object.

Objects:

The object is an instance of the class. Let’s consider the above example of a car. Here Car is our class and toyota is the object of the car. We can create multiple copies of the object. Every object must be defined using the class.

The syntax for creating an object is:

toyota = Car()

Let’s consider our Car example to understand objects a bit better:

class Car:

    def engine(self):
        print("Engine")

    def wheel(self):
        print("Wheel")

toyota = Car()

The above toyota = Car() is a class object. Class objects support two kinds of operations: attribute references and instantiation.

Class instantiation uses function notation. The instantiation operation (“calling” a class object) creates an empty object.

Now we can call different methods from our class Car using the object toyota that we have created. let’s call the method engine and wheel.

Open your editor and create a file named mycar.py. In that file copy the code below:

class Car:

    def engine(self):
        print("Engine")

    def wheel(self):
        print("Wheel")

if __name__ == "__main__":
    toyota = Car()
    toyota.engine()
    toyota.wheel()

Save the above code. Now let's take a closer look at our program.

Here we are creating a toyota object with the help of Car class. The toyota.engine() is a method object. What exactly happens when a method object is called?

In the call toyota.engine() doesn't take any argument but if you see the method declaration we can see that it takes a self argument.

You may be confused about why it is not throwing an error. Well whenever we use a method object, the call toyota.engine() is converted to Car.engine(toyota). We will understand more about the self in the upcoming section.

Run the program using the following command.

python mycar.py

You'll get the following output:

Engine
Wheel

Constructor:

The __init__ method is the constructor method in Python. The constructor method is used to initialize the data.

Go to the Python shell and enter this example:

>>> class Car():
...     def __init__(self):
...             print("Hello I am the constructor method.")
...

When we will call our class we will get the following output:

>>> toyota = Car()
Hello I am the constructor method.

Note: You will never have to call the init() method – it gets called automatically when you create a class instance.

Instance attributes:

All the classes have objects and all the objects have attributes. Attributes are the properties. We use __init__() method to specify an object’s initial attribute.

Let’s consider our car example:

class Car():
    def __init__(self, model): 
        self.model = model  #instance attribute

In our example, each Car() has a specific model. Thus instance attributes are unique data to each instance.

Class attributes:

We saw that instance attributes are specific to each object but class attributes are the same for all the instances. Let us look at the example of the car with the help of class attributes.

class Car():

    no_of_wheels = 4 #class attribute

So each car can have different models but all the cars will have only 4 wheels.

Self:

Now let’s understand what self means and how we use it in object-oriented programming. self represents the instance of a class. By using the self keyword we can access the data initialized in the constructor and methods of a class.

Let's look at an example of how self can be used. Let’s create a method named brand under our class Car.

Inside that __init__ method, we will pass a model by passing our car’s model name when we are instantiating our object. This name can be accessed anywhere in the class, for example self.model in our case.

Go to the file named mycar.py and replace old code with this code:

class Car(): 

  def __init__(self, model): 
    self.model = model

  def brand(self): 
    print("The brand is", self.model)  

if __name__ == "__main__":
  car = Car("Bmw")
  car.brand()

Now when we run our above program using the following command:

python mycar.py

We will get the following output:

The brand is Bmw

Note: self is a convention and not a real Python keyword. self is an argument in a method and we can use another name in place of it. But it is recommended to use self because it increases the readability of your code.

Inheritance:

Inheritance refers to when a class inherits the property of another class.

The class from which properties are inherited is called the base class. The class which inherits the property of another class is called the derived class.

Inheritance can be defined as a parent and child relationship. The child inherits the properties of the parent. Thus making the child a derived class while parent is a base class. Here the term property refers to attributes and methods.

The syntax for a derived class definition looks like this:

class DerivedClassName(BaseClassName):
    -1>
    .
    .
    .

It’s important to note that child classes override or extend the attributes and behaviors of parent class methods. This is to say that child classes inherit all of the the attributes and behaviors of their parents – but they're also able to specify different behavior to follow.

The most basic type of class is an object, which generally all other classes inherit as their parent. Let’s modify our previous example to understand how inheritance works.

We will create a base class named vehicle:

class Vehicle:
    def __init__(self, name):
        self.name = name

    def getName(self):
        return self.name

We have created a class Vehicle and instantiated a constructor with self.name which we are using in getName method. Whenever this method will be called, it will return the name that has been passed when an object is instantiated for that class.

Now let’s create a child class Car:

class Vehicle:
    def __init__(self, name):
        self.name = name

    def getName(self):
        return self.name

class Car(Vehicle):
  pass

Car is a child class of Vehicle. It inherits all the method and attributes of parent class.

Now let’s use methods and attribute from the Vehicle class in our child class Car.

class Vehicle:

    def __init__(self, name, color='silver'):
        self.name = name
        self.color = color

    def get_name(self):
        return self.name

    def get_color(self):
        return self.color

class Car(Vehicle):
  pass

audi = Car("Audi r8")
print("The name of our car is", audi.get_name(), "and color is", audi.get_color())

Let's understand what we have done here.

We have declared a class named Vehicle with a constructor that takes name as an argument while color has a default argument.

We have two methods inside it. get_name returns name while get_color returns the color. We have instantiated an object and passed the car name.

One thing you'll notice here that we are using base class methods in our child class declaration.

Run the above program using the following command:

python mycar.py

Output:

The name of our car is Audi r8 and color is silver

We can also override a parent method or attribute. In the above example, we have defined our vehicle color has silver. But what if the color of our car is black?

Now for every child class, we can’t make changes in the parent class. There comes the overriding functionality.

class Vehicle:

    def __init__(self, name, color='silver'):
        self.name = name
        self.color = color

    def get_name(self):
        return self.name

    def get_color(self):
        return self.color

class Car(Vehicle):

    def get_color(self):
        self.color = 'black'
        return self.color

audi = Car("Audi r8")
print("The name of our car is", audi.get_name(), "and color is", audi.get_color()

As you can see in the above program, I have not instantiated a constructor. The reason behind this is that our child class Car is only using attributes from the Vehicle class and it is already inheriting them. So in such a scenario, there is no need to re-instantiate these attributes.

Now when we run the above program we will get the following output:

The name of our car is Audi r8 and color is black

Super:

super() returns a temporary object of the superclass that then allows us to call that superclass’s methods.

Calling the previously built methods with super() saves us from needing to rewrite those methods in our subclass, and allows us to swap out superclasses with minimal code changes. Thus super extends the functionality of the inherited method.

Let’s extend our car example using super(). We will instantiate a constructor with brand_name and color in the parent class, Vehicle. Now we will call this constructor from our child class (Car) using super. We will create a get_description method which is returning self.model from Car class and self.brand_name, self.color from the Vehicle class.

class Vehicle:

    def __init__(self, brand_name, color):
        self.brand_name = brand_name
        self.color = color

    def get_brand_name(self):
        return self.brand_name

class Car(Vehicle):

    def __init__(self, brand_name, model, color):  
        super().__init__(brand_name, color)       
        self.model = model

    def get_description(self):
        return "Car Name: " + self.get_brand_name() + self.model + " Color:" + self.color

c = Car("Audi ",  "r8", " Red")
print("Car description:", c.get_description())
print("Brand name:", c.get_brand_name())

When we run the above program we get following output:

Car description: Car Name: Audi r8 Color: Red
Brand name: Audi

Multiple Inheritance:

When a class inherits the method and attributes from multiple parent class then it is called multiple inheritance. This allows us to use the property from multiple base classes or parent classes in a derived or child class.

The general syntax of multiple Inheritance is as follows:

class DerivedClassName(Base1, Base2, Base3):
    -1>
    .
    .
    .

Let’s extend our vehicle example using the multiple inheritance property. Here in this example, we will create 3 classes i.e. Vehicle, Cost and Car

The classes Vehicle and Cost will be the Parent class. A Vehicle class represents the general property while the Cost class represents its pricing.

As Car has a general property and cost will have two parent classes. Thus we will inherit multiple parent classes.

class Vehicle:

    def __init__(self, brand_name):
        self.brand_name = brand_name

    def get_brand_name(self):
        return self.brand_name


class Cost:        

    def __init__(self, cost):
        self.cost = cost

    def get_cost(self):
        return self.cost


class Car(Vehicle, Cost):    

    def __init__(self, brand_name, model, cost): 
        self.model = model 
        Vehicle.__init__(self, brand_name) 
        Cost.__init__(self, cost) 

    def get_description(self):
        return self.get_brand_name() + self.model + " is the car " + "and it's cost is " + self.get_cost()

c = Car("Audi ",  "r8", "2 cr")
print("Car description:", c.get_description())

Here you will find one thing in the above program that is different from all the other programs in this tutorial. I have used Vehicle.__init__(self, brand_name) in the constructor of Car class. This is one way of calling attributes from the parent class. Another was is super which I have explained above.

When we run the above program we will get the following output:

Car description: Audi r8 is the car and it's cost is 2 cr

Though it can be used effectively, multiple inheritance should be done with care so that our programs do not become ambiguous and difficult for other programmers to understand.

Polymorphism:

The word polymorphism means having many forms. In programming, polymorphism means same function name (but different signatures) being uses for different types.

Let’s extend our car program using polymorphism. We will create two classes, Car and Bike. Both the classes have common method or function, but they are printing different data. The program is pretty self-explanatory:

class Car: 

    def company(self): 
        print("Car belongs to Audi company.")

    def model(self): 
        print("The Model is R8.") 

    def color(self): 
        print("The color is silver.") 

class Bike: 

    def company(self): 
        print("Bike belongs to pulsar company.") 

    def model(self): 
        print("The Model is dominar.") 

    def color(self): 
        print("The color is black.") 

def func(obj): 
    obj.company() 
    obj.model() 
    obj.color() 

car = Car() 
bike = Bike() 

func(car) 
func(bike)

When we run the above code we will get the following output:

Car belongs to Audi company.
The Model is R8.
The color is silver.
Bike belongs to pulsar company.
The Model is dominar.
The color is black.

Encapsulation:

In most object-oriented programming, we can restrict access to methods and variables. This can prevent the data from being modified by accident and is known as encapsulation.

Let’s use encapsulation in our car example. Now imagine we have a super-secret engine. In the first example, we will hide our engine using a private variable. In the second example, we will hide our engine using a private method.

Example 1:

class Car:

  def __init__(self): 
    self.brand_name = 'Audi '
    self.model = 'r8'
    self.__engine = '5.2 L V10'

  def get_description(self):
        return self.brand_name + self.model + " is the car"

c = Car()
print(c.get_description)
print(c.__engine)

In this example self.__engine is a private attribute. When we run this program we will get the following output.

Audi r8 is the car
AttributeError: 'Car' object has no attribute '__engine'

We get an error that Car object doesn't have _engine because it is a private object.

Example 2:

We can also define a private method by adding __ in front of the method name. Following is the example of how we can define a private method.

class Car:

  def __init__(self):
      self.brand_name = 'Audi '
      self.model = 'r8'

  def __engine(self):
      return '5.2 L V10'

  def get_description(self):
      return self.brand_name + self.model + " is the car"


c = Car()
print(c.get_description())
print(c.__engine())

In this example def __engine(self) is a private method. When we run this program we will get the following output.

Audi r8 is the car
AttributeError: 'Car' object has no attribute '__engine'

Now suppose we want to access the private attribute or method we can do it in the following way:

class Car:

  def __init__(self):
      self.brand_name = 'Audi '
      self.model = 'r8'
      self.__engine_name = '5.2 L V10'

  def __engine(self):
      return '5.2 L V10'

  def get_description(self):
      return self.brand_name + self.model + " is the car"


c = Car()
print(c.get_description())
print("Accessing Private Method: ", c._Car__engine()) 
print("Accessing Private variable: ", c._Car__engine_name)

The output of the following program is:

Audi r8 is the car
Accessing Private Method:  5.2 L V10
Accessing Private variable:  5.2 L V10

Encapsulation gives you more control over the degree of coupling in your code. It allows a class to change its implementation without affecting other parts of the code.

Decorator:

Imagine you have to extend the functionality of multiple functions. How will you do that?

Well, one way is you can make functional calls and in that function, you can handle it. Making changes in 30 to 40 function calls and remembering where to place the call is a messy task. But the more elegant way provided by Python is with decorators.

What is a decorator? A decorator is a function that takes a function and extends its functionality without modifying it explicitly. Well, I understand if you are still confused about what decorators are. Don't worry – we have a tool named example to explain it.

Let's try an example to understand the decorator. There are two ways to write a decorator.

Method 1

We declare a decorator function and in the arguments of the function we expect the function to be passed as an argument. Inside that, we write a wrapper function where operations are carried out and it is returned.

>>> def my_decorator(func):
...     def wrapper():
...             print("Line Number 1")
...             func()
...             print("Line Number 3")
...     return wrapper
...
>>> def say_hello():
...     print("Hello I am line Number 2")
...

To call the function we assign the decorator with say_hello as an argument.

>>> say_hello = my_decorator(say_hello)

We can also check the reference using say_hello. We will get the output that tells us it has been wrapped by the my_decorator function.

.wrapper at 0x10dc84598>

Let's call our say_hello function:

>>> say_hello()
Line Number 1
Hello I am line Number 2
Line Number 3

See the magic the line "Hello I am line Number 2" gets printed in between Line Number 1 and 3 because the function call gets executed there.

Method 1 is clunky, and because of that many people prefer a different approach.

Method 2

Here our decorator declaration remains same but we change how the call is assigned to that decorator. Whichever function requires that decorator wraps itself with @decorator_name.

>>> def my_decorator(func):
...     def wrapper():
...             print("Line Number 1")
...             func()
...             print("Line Number 3")
...     return wrapper
...
>>> @my_decorator
... def say_hello():
...     print("Hello I am line Number 2")
...
>>> say_hello()

Output is the same:

Line Number 1
Hello I am line Number 2
Line Number 3

A decorator is a powerful tool and it is used in the following development scenarios of an application:

Setup logger
Setup configuration
Setup Error catching
Extending common functionality for all function and classes

Exceptions:

When we were learning various syntax we came across various errors. Those errors occurred because of the syntax. But in a real-world application, errors (or commonly known as bugs) not only occur due to syntax issues but also because of network errors or some other cause.

To handle these issues we use Try - Except. In try block, we write the expression that we want to be executed, while in except block we catch the error. The Try-Except block looks as follows:

try:
    expression
except:
    catch error

Let's understand this by an example:

>>> try:
...     print(value)
... except:
...     print("Something went wrong")
...

Here we are trying to print the value variable but it is not defined. So we get the following output:

Something went wrong

You may be thinking that the line "something went wrong" is not that helpful. So how can we know what went wrong here?

We can print the exception and use it to find out what went wrong. Let's test this in our example:

>>> try:
...     print(value)
... except Exception as e:
...     print(e)
...

And the result is:

name 'value' is not defined

Whoa! That's magic. It is notifying me that 'value' is not defined.

Python also provides a tool named raise. Suppose you don't want a certain condition to occur and if it occurs you want to raise it. In such condition you can use raise. Consider the example below:

>>> i = 5
>>> if i < 6:
...     raise Exception("Number below 6 are not allowed")
...

The output we get is as follows:

Traceback (most recent call last):
  File "", line 2, in 
Exception: Number below 6 are not allowed

There are many sub-types of Exceptions, so I recommend that you go through the Python Documentation to understand them.

Package Import:

You have learned the basics of Python and now you are all ready to build awesome applications. But hold on – we are still missing some important topics.

Without package import, you will be forced to write everything in one single file. Imagine what a mess it will be.

Create two files named main.py and hello.py. Remember both file needs to be in the same directory.

Under hello.py copy paste the following code:

def say_hello():
    print("Hello world")

Under main.py copy paste the following code:

import hello

if __name__ == "__main__":
    hello.say_hello()

In hello.py we have declared a say_hello() function which prints "Hello world". In main.py you'll see an import statement. We are importing the hello module and calling the say_hello() function from that module.

Run our program using the following command:

➜ python main.py

Output:

Hello world

Now let's understand how to import a module which is in another directory.

Let's create a directory named "data" and move our hello.py inside that directory.

Go to the main.py and change the previous import statement.

from data import hello

if __name__ == "__main__":
    hello.say_hello()

There are two ways to import from a directory.

Method 1: from data import hello
Method 2: import data.hello

I prefer method 1 because of its readability. You can choose whichever method looks better to you.

Let's run our application using the following command:

➜ python main.py

And an error occurs. Wait why did this happen? We did everything right. Let's go through the error:

Traceback (most recent call last):
  File "main.py", line 1, in 
    from data import hello
ImportError: No module named data

Well Python is telling us that it doesn't recognize a module named data. To solve this issue create a __init__.py inside data directory. Leave the file blank and run the program again and you'll get the following output:

Hello world

Well python by default does not treat a directory as a module. To inform Python to treat a directory as a module, __init__.py is required.

JSON Handling:

If you have worked previously with web development or app development you may be aware that all the API calls take place in JSON format. While JSON looks similar to a dictionary in Python, remember that it's very different.

To handle JSON, Python provides an inbuilt json package. To use this package we need to import it as follows:

import json

This library provides two methods which help us in handling the JSON. Let's understand them one by one.

JSON loads:

If you have a JSON string and want to convert it back to a dictionary you need to use the loads method. Go to the Python shell and copy-paste the following code:

>>> import json
>>> json_string = '{ "user_name":"Sharvin", "age":1000}' #JSON String
>>> type(json_string)
<class 'str'>
>>> data = json.loads(json_string)
>>> type(data)
<class 'dict'>
>>> data
{'user_name': 'Sharvin', 'age': 1000}

JSON dumps:

Now let's convert our data back to the JSON string format using the dumps method.

>>> jsonString = json.dumps(data)
>>> type(jsonString)
<class 'str'>
>>> jsonString
'{"user_name": "Sharvin", "age": 1000}'

To learn more about JSON Manipulation, go through the Python Documentation.

That's it!

And we're done! I hope you now understand the basics of Python. Congratulations! That's a huge achievement.

Feedback is welcomed. Also if you want to learn about any other topic you can tweet the topic name on Twitter and include my Twitter handle. [ @sharvinshah26 ]

Feel free to connect with me on Twitter and Github.

How to Use Flux to Manage State in ReactJS - Explained with an Example

Sharvin Shah — Mon, 20 Apr 2020 19:25:36 +0000

If you have started working on ReactJS recently then you might be wondering how to manage state in React so that your application can scale.

To solve this state management issue, many companies and people have developed various solutions. Facebook, who developed ReactJS, came up with a solution called Flux.

You may have heard about Redux if you have worked on front end technology such as AngularJS or EmberJS. ReactJS also has a library for implementing Redux.

But before learning Redux I would advise you to go through Flux and understand it. After that give Redux a try. I say this because Redux is a more advanced version of Flux. If the concepts of Flux are clear then you can learn redux and integrate it into your application.

What is flux?

Flux uses a unidirectional data flow pattern to solve state management complexity. Remember it is not a framework – rather it's more of a pattern that targets to solve the state management issue.

Are you wondering what's wrong with the existing MVC framework? Imagine your client's application scales up. You have interaction between many models and views. How would it look?

Credit: Image from Facebook F8 Flux Event

The relationship between components gets complicated. It becomes hard to scale the application. Facebook faced the same issue. To solve this issue they architected a Single directional data flow.

Credit: Image from Facebook's Flux Doc

As you can see from the image above, there are a lot of components used in Flux. Let's go through all the components one by one.

View: this component renders the UI. Whenever any user interaction occurs on it (like an event) then it fires off the action. Also when the Store informs the View that some change has occurred, it re-renders itself. For example, if a user clicks the Add button.

Action: this handles all the events. These events are passed by the view component. This layer is generally used to make API calls. Once the action is done it is dispatched using the Dispatcher. The action can be something like add a post, delete a post, or any other user interaction.

The common structure of the payload for dispatching an event is as follows:

{
    actionType: "",
    data: {
        title: "Understanding Flux step by step",
        author: "Sharvin"
    }
}

The actionType key is compulsory and it is used by the dispatcher to pass updates to the related store. It is also a known practice to use constants to hold the value name for actionType key so no typos occur. Data holds the event information that we want to dispatch from Action to Store. The name for this key can be anything.

Dispatcher: this is the central hub and singleton registry. It dispatches the payload from Actions to Store. Also makes sure that there are no cascading effects when an action is dispatched to the store. It ensures that no other action happens before the data layer has completed processing and storing operations.

Consider this component has a traffic controller in the system. It is a centralized list of callbacks. It invokes the callback and broadcasts the payload it received from the action.

Due to this component, the data flow is predictable. Every action updates the specific store with the callback that is registered with the dispatcher.

Store: this holds the app state and is a data layer of this pattern. Do not consider it as a model from MVC. An application can have one or many app stores. Stores get updated because they have a callback that is registered using the dispatcher.

Node's event emitter is used to update the store and broadcast the update to view. The view never directly updates the application state. It is updated because of the changes to the store.

This is only part of Flux that can update the data. Interfaces implemented in the store are as follows:

The EventEmitter is extended to inform the view that store data has been updated.
Listeners like addChangeListener and removeChangeListener are added.
emitChange is used to emit the change.

Consider the above diagram with more stores and views. Still, the pattern and the flow of data will be the same. This is because this is a single direction and predictable data flow, unlike MVC or Two-way binding. This improves the data consistency and it's easier to find the bug.

Flux Data Flow

Well, Flux brings the following key benefits to the table with the help of unidirectional data flow:

The code becomes quite clear and easy to understand.
Easily testable using Unit Test.
Scalable apps can be built.
Predictable data flow.

Note: The only drawback with the Flux is that there is some boilerplate that we need to write. Besides the boilerplate, there is little code we need to write when adding components to the existing application.

Application Template

To learn how to implement flux in ReactJS, we will build a Posts page. Here we will display all the posts. The application template is available at this commit. We will use this as the template for integrating Flux on top of it.

To clone the code from this commit, use the following command:

git clone  https://github.com/Sharvin26/DummyBlog.git

git checkout 0d56987b2d461b794e7841302c9337eda1ad0725

We will require a react-router-dom and bootstrap module. To install these packages, use the following command:

npm install react-router-dom@5.0.0 bootstrap@4.3.1

Once done you'll see the following application:

DummyBlog

To understand Flux in detail we will only implement the GET posts page. Once that is done you'll realize the process is the same for POST, EDIT and DELETE.

Here you'll see the following directory structure:

+-- README.md 
+-- package-lock.json
+-- package.json
+-- node_modules
+-- .gitignore
+-- public
|   +-- index.html
+-- src
|   +-- +-- components
|   +-- +-- +-- common
|   +-- +-- +-- +-- NavBar.js
|   +-- +-- +-- PostLists.js
|    +-- +-- pages
|   +-- +-- +-- Home.js
|   +-- +-- +-- NotFound.js
|   +-- +-- +-- Posts.js
|   +-- index.js
|   +-- App.js
|   +-- db.json

Note: We have added here a db.json file. This is a dummy data file. Since we don't want to build APIs and instead focus on Flux, we will retrieve the data from this file.

Our Application's base component is index.js. Here we have rendered the App.js inside the index.html under public directory using the render and getElementById methods. The App.js is used for configuring the routes.

We are also adding NavBar component at the top of the other so it will be available for all the components.

Inside the pages directory we have 3 files => Home.js, Posts.js, and NotFound.js. Home.js is simply used to display the Home component. When a user routes to a URL which doesn't exist, then NotFound.js renders.

The Posts.js is the parent component and it is used to get the data from the db.json file. It passes this data to the PostLists.js under the components directory. This component is a dumb component and it only handles the UI. It gets the data as props from its parent component (Posts.js) and displays it in the form of cards.

Now that we are clear about how our blog app is working we will start with integrating Flux on top of it.

Integrating Flux

Install Flux using the following command:

npm install flux@3.1.3

To integrate Flux in our application we will divide this section into 4 subsections:

Dispatcher
Actions
Stores
View

Note: The complete code is available at this repository.

Dispatcher

First, create two new folders named actions and stores under the src directory. After that create a file named appDispatcher.js under the same src directory.

Note: From now all the files which are related to Flux will have Camel casing as they are not ReactJS components.

Go to the appDispatcher.js and copy-paste the following code:

import { Dispatcher } from "flux";
const dispatcher = new Dispatcher();
export default dispatcher;

Here we are importing the Dispatcher from the flux library that we installed, creating a new object and exporting it so that our actions module can use it.

Actions

Now go to the actions directory and create two files named actionTypes.js and postActions.js. In the actionTypes.js we will define the constants that we require in postActions.js and store module.

The reason behind defining constants is that we don't want to make typos. You don't have to define constants but it is generally considered a good practice.

// actionTypes.js

export default {
    GET_POSTS: "GET_POSTS",
};

Now inside the postActions.js, we will retrieve the data from db.json and use the dispatcher object to dispatch it.

//postActions.js

import dispatcher from "../appDispatcher";
import actionTypes from "./actionTypes";
import data from "../db.json";

export function getPosts() {
    dispatcher.dispatch({
        actionTypes: actionTypes.GET_POSTS,
        posts: data["posts"],
    });
}

Here in the above code, we have imported the dispatcher object, actionTypes constant, and data. We are using a dispatcher object's dispatch method to send the data to the store. The data in our case will be sent in the following format:

{
    actionTypes: "GET_POSTS",
    posts: [
        {
            "id": 1,
            "title": "Hello World",
            "author": "Sharvin Shah",
            "body": "Example of blog application"
        },
        {
            "id": 2,
            "title": "Hello Again",
            "author": "John Doe",
            "body": "Testing another component"
        }
    ]
}

Stores

Now we need to build the store which will act as a data layer for storing the posts. It will have an event listener to inform the view that something has changed, and will register using dispatcher with the actions to get the data.

Go to the store directory and create a new file called postStore.js. Now first, we will import EventEmitter from the Events package. It is available in the NodeJS by default. We will also import the dispatcher object and actionTypes constant file here.

import { EventEmitter } from "events";
import dispatcher from "../appDispatcher";
import actionTypes from "../actions/actionTypes";

We will declare the constant of the change event and a variable to hold the posts whenever the dispatcher passes it.

const CHANGE_EVENT = "change";
let _posts = [];

Now we will write a class that extends the EventEmitter as its base class. We will declare the following methods in this class:

addChangeListener: It uses the NodeJS EventEmitter.on. It adds a change listener that accepts the callback function.

removeChangeListener: It uses the NodeJS EventEmitter.removeListener*.* Whenever we don't want to listen for a specific event we use the following method.

emitChange: It uses the NodeJS EventEmitter.emit*.* Whenever any change occurs, it emits that change.

This class will also have a method called getPosts which returns the variable _posts that we have declared above the class.

Below the variable declaration add the following code:

class PostStore extends EventEmitter {
    addChangeListener(callback) {
        this.on(CHANGE_EVENT, callback);
    }

    removeChangeListener(callback) {
        this.removeListener(CHANGE_EVENT, callback);
    }

    emitChange() {
        this.emit(CHANGE_EVENT);
    }

    getPosts() {
        return _posts;
    }
}

Now create the store object of our PostStore class. We will export this object so that we can use it in the view.

const store = new PostStore();

After that, we will use the dispatcher's register method to receive the payload from our Actions component.

To register for the specific event, we need to use the actionTypes value and determine which action has occurred and process the data accordingly. Add the following code below the object declaration:

dispatcher.register((action) => {
    switch (action.actionTypes) {
        case actionTypes.GET_POSTS:
            _posts = action.posts;
            store.emitChange();
            break;
        default:
    }
});

We will export the object from this module so others can use it.

export default store;

View

Now we will update our view to send the event to postActions whenever our Posts page is loaded and receive the payload from the postStore. Go to Posts.js under the pages directory. You'll find the following code inside the useEffect method:

useEffect(() => {
    setposts(data["posts"]);
}, []);

We will change how our useEffect reads and updates the data. First, we will use the addChangeListener method from the postStore class and we will pass an onChange callback to it. We will set the posts state value to have a return value of the getPosts method from the postStore.js file.

At the start, the store will return an empty array as there is no data available. So we will call a _getPosts_ method from the postActions.js. This method will read the data and pass it to the store. Then the store will emit the change and addChangeListener will listen to the change and update the value of the posts in its onChange callback.

If this seems confusing don't worry – check out the flow chart below which makes it easier to understand.

Remove the old code and update the following code inside Posts.js:

import React, { useState, useEffect } from "react";
import PostLists from "../components/PostLists";
import postStore from "../stores/postStore";
import { getPosts } from "../actions/postActions";

function PostPage() {
    const [posts, setPosts] = useState(postStore.getPosts());

    useEffect(() => {
        postStore.addChangeListener(onChange);
        if (postStore.getPosts().length === 0) getPosts();
        return () => postStore.removeChangeListener(onChange);
    }, []);

    function onChange() {
        setPosts(postStore.getPosts());
    }

    return (
        <div>
            <PostLists posts={posts} />
        div>
    );
}

export default PostPage;

Here you'll find that we have also removed the import and also we are using setPosts inside our callback instead of useEffect method. The return () => postStore.removeChangeListener(onChange); is used to remove the listener once the user leaves that page.

With this go to the Blog Page and you'll find that our blog app is working. The only difference is that now instead of reading the data in the useEffect method we are reading it in actions, storing it in the store, and sending it to the components that require it.

When using the actual API you'll find that the application loads the data from the API one time and stores it in the store. When we revisit the same page you'll observe that no API call is required again. You can monitor it under the source tab in Chrome Developer console.

And we're done!! I hope this tutorial has made the idea of Flux clearer and you'll be able to use it in your projects.

Feel free to connect with me on Twitter and Github.

How to Build a TodoApp using ReactJS and Firebase

Sharvin Shah — Wed, 15 Apr 2020 00:01:20 +0000

Hello folks, welcome to this tutorial. Before we begin you should be familiar with basic ReactJS concepts. If you're not, I would recommend that you go through the ReactJS documentation.

We will use the following components in this application:

How our application is going to look:

Account creation

TodoApp Dashboard

Application Architecture:

Application Architecture

Understanding our components:

You may be wondering why we are using firebase in this application. Well, it provides secure Authentication, a Real-time database, a Serverless Component, and a Storage bucket.

We are using Express here so that we don't need to handle HTTP Exceptions. We are going to use all the firebase packages in our functions component. This is because we don't want to make our client application too big, which tends to slow the loading process of the UI.

Note: I am going to divide this tutorial into four separate sections. At the start of every section, you will find a git commit that has the code developed in that section. Also If you want to see the complete code then it is available in this repository.

Section 1: Developing Todo APIs

In this section**,** we are going to develop these elements:

Configure the firebase functions.
Install the Express framework and build Todo APIs.
Configuring firestore as database.

The Todo API code implemented in this section can be found at this commit.

Configure Firebase Functions:

Go to the Firebase console.

Firebase Console

Select the Add Project option. After that follow the gif down below step by step to configure the firebase project.

Firebase Configuration

Go to the functions tab and click on the Get Started button:

Functions Dashboard

You will see a dialogue box which has instructions on How to set up the Firebase Functions. Go to your local environment. Open a command-line tool. To install the firebase tools in your machine use the command below:

 npm install -g firebase-tools

Once that is done then use the command firebase init to configure the firebase functions in your local environment. Select the following options when initialising the firebase function in the local environment:

Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices => Functions: Configure and deploy Cloud Functions
First, let’s associate this project directory with a Firebase project …. \=> Use an existing project
Select a default Firebase project for this directory => application_name
What language would you like to use to write Cloud Functions? => JavaScript
Do you want to use ESLint to catch probable bugs and enforce style? => N
Do you want to install dependencies with npm now? (Y/n) => Y

After the configuration is done you will get the following message:

✔ Firebase initialization complete!

This will be our directory structure once the initialization is completed:

+-- firebase.json 
+-- functions
|   +-- index.js
|   +-- node_modules
|   +-- package-lock.json
|   +-- package.json

Now open the index.js under functions directory and copy-paste the following code:

const functions = require('firebase-functions');

exports.helloWorld = functions.https.onRequest((request, response) => {
     response.send("Hello from Firebase!");
});

Deploy the code to firebase functions using the following command:

firebase deploy

Once the deployment is done you will get the following logline at the end of your command line:

> ✔  Deploy complete!
> Project Console: https://console.firebase.google.com/project/todoapp-/overview

Go to the Project Console > Functions and there you will find the URL of the API. The URL will look like this:

https://-todoapp-.cloudfunctions.net/helloWorld

Copy this URL and paste it in the browser. You will get the following response:

Hello from Firebase!

This confirms that our Firebase function has been configured properly.

Install the Express Framework:

Now let’s install the Express framework in our project using the following command:

npm i express

Now let's create an APIs directory inside the functions directory. Inside that directory, we will create a file named todos.js. Remove everything from the index.js and then copy-paste the following code:

//index.js

const functions = require('firebase-functions');
const app = require('express')();

const {
    getAllTodos
} = require('./APIs/todos')

app.get('/todos', getAllTodos);
exports.api = functions.https.onRequest(app);

We have assigned the getAllTodos function to the /todos route. So all the API calls on this route will execute via the getAllTodos function. Now go to the todos.js file under APIs directory and here we will write the getAllTodos function.

//todos.js

exports.getAllTodos = (request, response) => {
    todos = [
        {
            'id': '1',
            'title': 'greeting',
            'body': 'Hello world from sharvin shah' 
        },
        {
            'id': '2',
            'title': 'greeting2',
            'body': 'Hello2 world2 from sharvin shah' 
        }
    ]
    return response.json(todos);
}

Here we have declared a sample JSON object. Later we will derive that from the Firestore. But for the time being we will return this. Now deploy this to your firebase function using the command firebase deploy. It will ask for permission to delete the module helloworld – just enter y.

The following functions are found in your project but do not exist in your local source code: helloWorld

Would you like to proceed with deletion? Selecting no will continue the rest of the deployments. (y/N) y

Once this is done go to the Project Console > Functions and there you will find the URL of the API. The API will look like this:

https://-todoapp-.cloudfunctions.net/api

Now go to the browser and copy-paste the URL and add /todos at the end of this URL. You will get the following output:

[
        {
            'id': '1',
            'title': 'greeting',
            'body': 'Hello world from sharvin shah' 
        },
        {
            'id': '2',
            'title': 'greeting2',
            'body': 'Hello2 world2 from sharvin shah' 
        }
]

Firebase Firestore:

We will use a firebase firestore as a real-time database for our application. Now go to the Console > Database in Firebase Console. To configure firestore follow the gif below:

Configuring Firestore

Once the configuration is done then click on the Start Collection button and set Collection ID as todos. Click Next and you will get the following popup:

Creating Database Manually

Ignore the DocumentID key. For the field, type, and value, refer to the JSON down below. Update the value accordingly:

{
    Field: title,
    Type: String,
    Value: Hello World
},
{
    Field: body,
    Type: String,
    Value: Hello folks I hope you are staying home...
},
{
    Field: createtAt,
    type: timestamp,
    value: Add the current date and time here
}

Press the save button. You will see that the collection and the document is created. Go back to the local environment. We need to install firebase-admin which has the firestore package that we need. Use this command to install it:

npm i firebase-admin

Create a directory named util under the functions directory. Go to this directory and create a file name admin.js. In this file we will import the firebase admin package and initialize the firestore database object. We will export this so that other modules can use it.

//admin.js

const admin = require('firebase-admin');

admin.initializeApp();

const db = admin.firestore();

module.exports = { admin, db };

Now let’s write an API to fetch this data. Go to the todos.js under the functions > APIs directory. Remove the old code and copy-paste the code below:

//todos.js

const { db } = require('../util/admin');

exports.getAllTodos = (request, response) => {
    db
        .collection('todos')
        .orderBy('createdAt', 'desc')
        .get()
        .then((data) => {
            let todos = [];
            data.forEach((doc) => {
                todos.push({
                    todoId: doc.id,
                    title: doc.data().title,
                    body: doc.data().body,
                    createdAt: doc.data().createdAt,
                });
            });
            return response.json(todos);
        })
        .catch((err) => {
            console.error(err);
            return response.status(500).json({ error: err.code});
        });
};

Here we are fetching all the todos from the database and forwarding them to the client in a list.

You can also run the application locally using firebase serve command instead of deploying it every time. When you run that command you may get an error regarding credentials. To fix it, follow the steps mentioned below:

Go to the Project Settings (Settings icon at the top left-hand side)
Go to the service accounts tab
Down there will be the option of Generating a new key. Click on that option and it will download a file with a JSON extension.
We need to export these credentials to our command line session. Use the command below to do that:

export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/[FILE_NAME].json"

After that run firebase serve command. If you still get the error then use the following command: firebase login --reauth. It will open the Google sign-in page in a browser. Once sign-in is done then it will work without any error.

You will find a URL in the logs of your command-line tool when you run a firebase serve command. Open this URL in browser and append /todos after it.

✔ functions[api]: http function initialized (http://localhost:5000/todoapp-//api).

You will get the following JSON output in your browser:

[
    {
        "todoId":"W67t1kSMO0lqvjCIGiuI",
        "title":"Hello World",
        "body":"Hello folks I hope you are staying home...",
        "createdAt":{"_seconds":1585420200,"_nanoseconds":0 }
    }
]

Writing Other APIs:

It's time to write all the other todo APIs that we are going to require for our application.

Create Todo item: Go to the index.js under the functions directory. Import postOneTodo method under the existing getAllTodos. Also, assign the POST route to that method.

//index.js

const {
    ..,
    postOneTodo
} = require('./APIs/todos')

app.post('/todo', postOneTodo);

Go to the todos.js inside the functions directory and add a new method postOneTodo under the existing getAllTodos method.

//todos.js

exports.postOneTodo = (request, response) => {
    if (request.body.body.trim() === '') {
        return response.status(400).json({ body: 'Must not be empty' });
    }

    if(request.body.title.trim() === '') {
        return response.status(400).json({ title: 'Must not be empty' });
    }

    const newTodoItem = {
        title: request.body.title,
        body: request.body.body,
        createdAt: new Date().toISOString()
    }
    db
        .collection('todos')
        .add(newTodoItem)
        .then((doc)=>{
            const responseTodoItem = newTodoItem;
            responseTodoItem.id = doc.id;
            return response.json(responseTodoItem);
        })
        .catch((err) => {
            response.status(500).json({ error: 'Something went wrong' });
            console.error(err);
        });
};

In this method, we are adding a new Todo to our database. If the elements of our body are empty then we will return a response of 400 or else we will add the data.

Run the firebase serve command and open the postman application. Create a new request and select the method type as POST. Add the URL and a body of type JSON.

URL: http://localhost:5000/todoapp-//api/todo

METHOD: POST

Body: {
   "title":"Hello World",
   "body": "We are writing this awesome API"
}

Press the send button and you will get the following response:

{
     "title": "Hello World",
     "body": "We are writing this awesome API",
     "createdAt": "2020-03-29T12:30:48.809Z",
     "id": "nh41IgARCj8LPWBYzjU0"
}

Delete Todo item: Go to the index.js under the functions directory. Import the deleteTodo method under the existing postOneTodo. Also, assign the DELETE route to that method.

//index.js

const {
    ..,
    deleteTodo
} = require('./APIs/todos')

app.delete('/todo/:todoId', deleteTodo);

Go to the todos.js and add a new method deleteTodo under the existing postOneTodo method.

//todos.js

exports.deleteTodo = (request, response) => {
    const document = db.doc(`/todos/${request.params.todoId}`);
    document
        .get()
        .then((doc) => {
            if (!doc.exists) {
                return response.status(404).json({ error: 'Todo not found' })
            }
            return document.delete();
        })
        .then(() => {
            response.json({ message: 'Delete successfull' });
        })
        .catch((err) => {
            console.error(err);
            return response.status(500).json({ error: err.code });
        });
};

In this method, we are deleting a Todo from our database. Run the firebase serve command and go to the postman. Create a new request, select the method type as DELETE and add the URL.

URL: http://localhost:5000/todoapp-//api/todo/

METHOD: DELETE

Press the send button and you will get the following response:

{
   "message": "Delete successfull"
}

Edit Todo item: Go to the index.js under the functions directory. Import the editTodo method under the existing deleteTodo. Also, assign the PUT route to that method.

//index.js

const {
    ..,
    editTodo
} = require('./APIs/todos')

app.put('/todo/:todoId', editTodo);

Go to the todos.js and add a new method editTodo under the existing deleteTodo method.

//todos.js

exports.editTodo = ( request, response ) => { 
    if(request.body.todoId || request.body.createdAt){
        response.status(403).json({message: 'Not allowed to edit'});
    }
    let document = db.collection('todos').doc(`${request.params.todoId}`);
    document.update(request.body)
    .then(()=> {
        response.json({message: 'Updated successfully'});
    })
    .catch((err) => {
        console.error(err);
        return response.status(500).json({ 
                error: err.code 
        });
    });
};

In this method, we are editing a Todo from our database. Remember here we are not allowing the user to edit the todoId or createdAt fields. Run the firebase serve command and go to the postman. Create a new request, select the method type as PUT, and add the URL.

URL: http://localhost:5000/todoapp-//api/todo/

METHOD: PUT

Press the send button and you will get the following response:

{  
   "message": "Updated successfully"
}

Directory structure till now:

+-- firebase.json 
+-- functions
|   +-- API
|   +-- +-- todos.js
|   +-- util
|   +-- +-- admin.js
|   +-- index.js
|   +-- node_modules
|   +-- package-lock.json
|   +-- package.json
|   +-- .gitignore

With this, we have completed the first section of the application. You can go ahead have some coffee, take a break, and after that we will work on developing the User APIs.

Section 2: Developing User APIs

In this section**,** we are going to develop these components:

User Authentication ( Login and Signup ) API.
GET and Update user details API.
Update the user profile picture API.
Securing the existing Todo API.

The User API code implemented in this section can be found at this commit.

So let’s start building the User Authentication API. Go to the Firebase console > Authentication.

Firebase Authentication Page

Click on the Set up sign-in-method button. We will use email and password for user validation. Enable the Email/Password option.

Firebase Set up Sign up page

Right now we will manually create our user. First, we will build the Login API. After that we will build the Sign-Up API.

Go to the Users Tab under Authentication, fill in the User details, and click on the Add User button.

Adding user manually

First, we need to install the firebase package, which consists of the Firebase Authentication library, using the following command:

npm i firebase

Once the installation is done go to the functions > APIs directory. Here we will create a users.js file. Now Inside index.js we import a loginUser method and assign the POST route to it.

//index.js

const {
    loginUser
} = require('./APIs/users')

// Users
app.post('/login', loginUser);

Go to the Project Settings > General and there you will find the following card:

Getting Firebase configuration

Select the Web Icon and then follow the gif down below:

Select the continue to console option. Once this is done you will see a JSON with firebase config. Go to the functions > util directory and create a config.js file. Copy-paste the following code in this file:

// config.js

module.exports = {
    apiKey: "............",
    authDomain: "........",
    databaseURL: "........",
    projectId: ".......",
    storageBucket: ".......",
    messagingSenderId: "........",
    appId: "..........",
    measurementId: "......."
};

Replace ............ with the values that you get under Firebase console > Project settings > General > your apps > Firebase SD snippet > config.

Copy-paste the following code in the users.js file:

// users.js

const { admin, db } = require('../util/admin');
const config = require('../util/config');

const firebase = require('firebase');

firebase.initializeApp(config);

const { validateLoginData, validateSignUpData } = require('../util/validators');

// Login
exports.loginUser = (request, response) => {
    const user = {
        email: request.body.email,
        password: request.body.password
    }

    const { valid, errors } = validateLoginData(user);
    if (!valid) return response.status(400).json(errors);

    firebase
        .auth()
        .signInWithEmailAndPassword(user.email, user.password)
        .then((data) => {
            return data.user.getIdToken();
        })
        .then((token) => {
            return response.json({ token });
        })
        .catch((error) => {
            console.error(error);
            return response.status(403).json({ general: 'wrong credentials, please try again'});
        })
};

Here we are using a firebase signInWithEmailAndPassword module to check if the user-submitted credentials are right. If they are right then we send the token of that user or else a 403 status with a "wrong credentials" message.

Now let’s create validators.js under the functions > util directory. Copy-paste the following code in this file:

// validators.js

const isEmpty = (string) => {
    if (string.trim() === '') return true;
    else return false;
};

exports.validateLoginData = (data) => {
   let errors = {};
   if (isEmpty(data.email)) errors.email = 'Must not be empty';
   if (isEmpty(data.password)) errors.password = 'Must not be  empty';
   return {
       errors,
       valid: Object.keys(errors).length === 0 ? true : false
    };
};

With this our LoginAPI is completed. Run the firebase serve command and go to the postman. Create a new request, select the method type as POST, and add the URL and body.

URL: http://localhost:5000/todoapp-//api/login

METHOD: POST

Body: {   
    "email":"Add email that is assigned for user in console", 
    "password": "Add password that is assigned for user in console"
}

Hit the send request button in postman and you will get the following output:

{   
    "token": ".........."
}

We will use this token in an upcoming part to get the user details. Remember this token expires in 60 minutes. To generate a new token use this API again.

The default authentication mechanism of firebase only allows you to store information like email, password, etc. But we need more information to identify if this user owns that todo so that they can perform read, update and delete operations on it.

To achieve this goal we are going to create a new collection called users. Under this collection, we will store the user’s data which will be mapped to the todo based on the username. Each username will be unique for all the users on the platform.

Go to the index.js. We import a signUpUser method and assign the POST route to it.

//index.js

const {
    ..,
    signUpUser
} = require('./APIs/users')

app.post('/signup', signUpUser);

Now go to the validators.js and add the following code below the validateLoginData method.

// validators.js

const isEmail = (email) => {
    const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (email.match(emailRegEx)) return true;
    else return false;
};

exports.validateSignUpData = (data) => {
    let errors = {};

    if (isEmpty(data.email)) {
        errors.email = 'Must not be empty';
    } else if (!isEmail(data.email)) {
        errors.email = 'Must be valid email address';
    }

    if (isEmpty(data.firstName)) errors.firstName = 'Must not be empty';
    if (isEmpty(data.lastName)) errors.lastName = 'Must not be empty';
    if (isEmpty(data.phoneNumber)) errors.phoneNumber = 'Must not be empty';
    if (isEmpty(data.country)) errors.country = 'Must not be empty';

    if (isEmpty(data.password)) errors.password = 'Must not be empty';
    if (data.password !== data.confirmPassword) errors.confirmPassword = 'Passowrds must be the same';
    if (isEmpty(data.username)) errors.username = 'Must not be empty';

    return {
        errors,
        valid: Object.keys(errors).length === 0 ? true : false
    };
};

Now go to the users.js and add the following code below the loginUser module.

// users.js

exports.signUpUser = (request, response) => {
    const newUser = {
        firstName: request.body.firstName,
        lastName: request.body.lastName,
        email: request.body.email,
        phoneNumber: request.body.phoneNumber,
        country: request.body.country,
        password: request.body.password,
        confirmPassword: request.body.confirmPassword,
        username: request.body.username
    };

    const { valid, errors } = validateSignUpData(newUser);

    if (!valid) return response.status(400).json(errors);

    let token, userId;
    db
        .doc(`/users/${newUser.username}`)
        .get()
        .then((doc) => {
            if (doc.exists) {
                return response.status(400).json({ username: 'this username is already taken' });
            } else {
                return firebase
                        .auth()
                        .createUserWithEmailAndPassword(
                            newUser.email, 
                            newUser.password
                    );
            }
        })
        .then((data) => {
            userId = data.user.uid;
            return data.user.getIdToken();
        })
        .then((idtoken) => {
            token = idtoken;
            const userCredentials = {
                firstName: newUser.firstName,
                lastName: newUser.lastName,
                username: newUser.username,
                phoneNumber: newUser.phoneNumber,
                country: newUser.country,
                email: newUser.email,
                createdAt: new Date().toISOString(),
                userId
            };
            return db
                    .doc(`/users/${newUser.username}`)
                    .set(userCredentials);
        })
        .then(()=>{
            return response.status(201).json({ token });
        })
        .catch((err) => {
            console.error(err);
            if (err.code === 'auth/email-already-in-use') {
                return response.status(400).json({ email: 'Email already in use' });
            } else {
                return response.status(500).json({ general: 'Something went wrong, please try again' });
            }
        });
}

We validate our user data, and after that we send an email and password to the firebase createUserWithEmailAndPassword module to create the user. Once the user is created successfully we save the user credentials in the database.

With this our SignUp API is completed. Run the firebase serve command and go to the postman. Create a new request, select the method type as POST. Add the URL and body.

URL: http://localhost:5000/todoapp-//api/signup

METHOD: POST

Body: {
   "firstName": "Add a firstName here",
   "lastName": "Add a lastName here",
   "email":"Add a email here",
   "phoneNumber": "Add a phone number here",
   "country": "Add a country here",
   "password": "Add a password here",
   "confirmPassword": "Add same password here",
   "username": "Add unique username here"
}

Hit the send request button in postman and you will get the following Output:

{   
    "token": ".........."
}

Now go to the Firebase console > Database and there you will see the following output:

As you can see our user’s collection is successfully created with one document in it.

3. Upload User Profile Picture:

Our users will be able to upload their profile picture. To achieve this we will be using Storage bucket. Go to the Firebase console > Storage and click on the Get started button. Follow the GIF below for the configuration:

Now go to the Rules tab under Storage and update the permission for the bucket access as per the image below:

To upload the profile picture we will be using the package named busboy. To install this package, use the following command:

npm i busboy

Go to index.js. Import the uploadProfilePhoto method below the existing signUpUser method. Also assign the POST route to that method.

//index.js

const auth = require('./util/auth');

const {
    ..,
    uploadProfilePhoto
} = require('./APIs/users')

app.post('/user/image', auth, uploadProfilePhoto);

Here we have added an authentication layer so that only a user associated with that account can upload the image. Now create a file named auth.js in functions > utils directory. Copy-paste the following code in that file:

// auth.js

const { admin, db } = require('./admin');

module.exports = (request, response, next) => {
    let idToken;
    if (request.headers.authorization && request.headers.authorization.startsWith('Bearer ')) {
        idToken = request.headers.authorization.split('Bearer ')[1];
    } else {
        console.error('No token found');
        return response.status(403).json({ error: 'Unauthorized' });
    }
    admin
        .auth()
        .verifyIdToken(idToken)
        .then((decodedToken) => {
            request.user = decodedToken;
            return db.collection('users').where('userId', '==', request.user.uid).limit(1).get();
        })
        .then((data) => {
            request.user.username = data.docs[0].data().username;
            request.user.imageUrl = data.docs[0].data().imageUrl;
            return next();
        })
        .catch((err) => {
            console.error('Error while verifying token', err);
            return response.status(403).json(err);
        });
};

Here we are using the firebase verifyIdToken module to verify the token. After that we are decoding the user details and passing them in the existing request.

Go to the users.js and add the following code below the signup method:

// users.js

deleteImage = (imageName) => {
    const bucket = admin.storage().bucket();
    const path = `${imageName}`
    return bucket.file(path).delete()
    .then(() => {
        return
    })
    .catch((error) => {
        return
    })
}

// Upload profile picture
exports.uploadProfilePhoto = (request, response) => {
    const BusBoy = require('busboy');
    const path = require('path');
    const os = require('os');
    const fs = require('fs');
    const busboy = new BusBoy({ headers: request.headers });

    let imageFileName;
    let imageToBeUploaded = {};

    busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
        if (mimetype !== 'image/png' && mimetype !== 'image/jpeg') {
            return response.status(400).json({ error: 'Wrong file type submited' });
        }
        const imageExtension = filename.split('.')[filename.split('.').length - 1];
        imageFileName = `${request.user.username}.${imageExtension}`;
        const filePath = path.join(os.tmpdir(), imageFileName);
        imageToBeUploaded = { filePath, mimetype };
        file.pipe(fs.createWriteStream(filePath));
    });
    deleteImage(imageFileName);
    busboy.on('finish', () => {
        admin
            .storage()
            .bucket()
            .upload(imageToBeUploaded.filePath, {
                resumable: false,
                metadata: {
                    metadata: {
                        contentType: imageToBeUploaded.mimetype
                    }
                }
            })
            .then(() => {
                const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`;
                return db.doc(`/users/${request.user.username}`).update({
                    imageUrl
                });
            })
            .then(() => {
                return response.json({ message: 'Image uploaded successfully' });
            })
            .catch((error) => {
                console.error(error);
                return response.status(500).json({ error: error.code });
            });
    });
    busboy.end(request.rawBody);
};

With this our Upload Profile Picture API is completed. Run the firebase serve command and go to the postman. Create a new request, select the method type as POST, add the URL, and in the body section select type as form-data.

The request is protected so you’ll need to send the bearer token also. To send the bearer token, log in again if the token has expired. After that in Postman App > Authorization tab > Type > Bearer Token and in the token section paste the token.

URL: http://localhost:5000/todoapp-//api/user/image

METHOD: GET

Body: { REFER THE IMAGE down below }

Hit the send request button in postman and you will get the following Output:

{        
    "message": "Image uploaded successfully"
}

4. Get User Details:

Here we are fetching the data of our user from the database. Go to the index.js and import the getUserDetail method and assign GET route to it.

// index.js

const {
    ..,
    getUserDetail
} = require('./APIs/users')

app.get('/user', auth, getUserDetail);

Now go to the users.js and add the following code after the uploadProfilePhoto module:

// users.js

exports.getUserDetail = (request, response) => {
    let userData = {};
    db
        .doc(`/users/${request.user.username}`)
        .get()
        .then((doc) => {
            if (doc.exists) {
                userData.userCredentials = doc.data();
                return response.json(userData);
            }    
        })
        .catch((error) => {
            console.error(error);
            return response.status(500).json({ error: error.code });
        });
}

We are using the firebase doc().get() module to derive the user details. With this our GET User Details API is completed. Run the firebase serve command and go to the postman. Create a new request, select the method type: GET, and add the URL and body.

The request is protected so you’ll need to send the bearer token also. To send the bearer token, log in again if the token has expired.

URL: http://localhost:5000/todoapp-//api/user
METHOD: GET

Hit the send request button in postman and you will get the following Output:

{
   "userCredentials": {
       "phoneNumber": "........",
       "email": "........",
       "country": "........",
       "userId": "........",
       "username": "........",
       "createdAt": "........",
       "lastName": "........",
       "firstName": "........"
    }
}

5. Update user details:

Now let’s add the functionality to update the user details. Go to the index.js and copy-paste the following code:

// index.js

const {
    ..,
    updateUserDetails
} = require('./APIs/users')

app.post('/user', auth, updateUserDetails);

Now go to the users.js and add the updateUserDetails module below the existing getUserDetails :

// users.js

exports.updateUserDetails = (request, response) => {
    let document = db.collection('users').doc(`${request.user.username}`);
    document.update(request.body)
    .then(()=> {
        response.json({message: 'Updated successfully'});
    })
    .catch((error) => {
        console.error(error);
        return response.status(500).json({ 
            message: "Cannot Update the value"
        });
    });
}

Here we are using the firebase update method. With this our Update User Details API is completed. Follow the same procedure for a request as with the Get User Details API above with one change. Add body in the request here and method as POST.

URL: http://localhost:5000/todoapp-//api/user

METHOD: POST

Body : {
    // You can edit First Name, last Name and country
    // We will disable other Form Tags from our UI
}

Hit the send request button in postman and you will get the following Output:

{
    "message": "Updated successfully"
}

6. Securing Todo APIs:

To secure the Todo API so that only the chosen user can access it, we will make a few changes in our existing code. Firstly, we will update our index.js as follows:

// index.js

// Todos
app.get('/todos', auth, getAllTodos);
app.get('/todo/:todoId', auth, getOneTodo);
app.post('/todo',auth, postOneTodo);
app.delete('/todo/:todoId',auth, deleteTodo);
app.put('/todo/:todoId',auth, editTodo);

We have updated all the Todo routes by adding auth so that all the API calls will require a token and can only be accessed by the particular user.

After that go to the todos.js under the functions > APIs directory.

Create Todo API: Open the todos.js and under the postOneTodo method add the username key as follows:

const newTodoItem = {
     ..,
     username: request.user.username,
     ..
}

GET All Todos API: Open the todos.js and under the getAllTodos method add the where clause as follows:

db
.collection('todos')
.where('username', '==', request.user.username)
.orderBy('createdAt', 'desc')

Run the firebase serve and test our GET API. Don’t forget to send the bearer token. Here you will get a response error as follows:

{   
    "error": 9
}

Go to the command line and you will see the following lines logged:

i  functions: Beginning execution of "api">  Error: 9 FAILED_PRECONDITION: The query requires an index. You can create it here: >      at callErrorFromStatus

Open this in the browser and click on create index.

Once the index is built send the request again and you will get the following output:

[
   {
      "todoId": "......",
      "title": "......",
      "username": "......",
      "body": "......",
      "createdAt": "2020-03-30T13:01:58.478Z"
   }
]

Delete Todo API: Open the todos.js and under the deleteTodo method add the following condition. Add this condition inside the document.get().then() query below the !doc.exists condition.

..
if(doc.data().username !== request.user.username){
     return response.status(403).json({error:"UnAuthorized"})
}

Directory structure up to now:

+-- firebase.json 
+-- functions
|   +-- API
|   +-- +-- todos.js 
|   +-- +-- users.js
|   +-- util
|   +-- +-- admin.js
|   +-- +-- auth.js
|   +-- +-- validators.js
|   +-- index.js
|   +-- node_modules
|   +-- package-lock.json
|   +-- package.json
|   +-- .gitignore

With this we have completed our API backend. Take a break, have a coffee, and after that we will start building the front end of our application

Section 3: User Dashboard

In this section**,** we are going to develop these components:

Configure ReactJS and Material UI.
Building Login and SignUp Form.
Building Account Section.

The User Dashboard code implemented in this section can be found at this commit.

1. Configure ReactJS and Material UI:

We will use the create-react-app template. It gives us a fundamental structure for developing the application. To install it, use the following command:

npm install -g create-react-app

Go to the root folder of the project where the functions directory is present. Initialize our front end application using the following command:

create-react-app view

Remember to use version v16.13.1 of the ReactJS library_._

Once the installation is completed then you'll see the following in your command line logs:

cd view
  npm start
Happy hacking!

With this, we have configured our React application. You’ll get the following directory structure:

+-- firebase.json 
+-- functions { This Directory consists our API logic }
+-- view { This Directory consists our FrontEnd Compoenents }
+-- .firebaserc
+-- .gitignore

Now run the application using the command npm start . Go to the browser on [http://localhost:3000/](http://localhost:3000/) and you’ll see the following output:

Now we will remove all the unnecessary components. Go to the view directory and then remove all the files which have [ Remove ] in front of them. For this, refer to the directory tree structure below.

+-- README.md [ Remove ]
+-- package-lock.json
+-- package.json
+-- node_modules
+-- .gitignore
+-- public
|   +-- favicon.ico [ Remove ]
|   +-- index.html
|   +-- logo192.png [ Remove ]
|   +-- logo512.png [ Remove ]
|   +-- manifest.json
|   +-- robots.txt
+-- src
|   +-- App.css
|   +-- App.test.js
|   +-- index.js
|   +-- serviceWorker.js
|   +-- App.js
|   +-- index.css [ Remove ]
|   +-- logo.svg [ Remove ]
|   +-- setupTests.js

Go to index.html under the public directory and remove the following lines:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Now go to the App.js under the src directory and replace the old code with the following code:

import React from 'react';
function App() {
  return (
    <div>
    div>
  );
}
export default App;

Go to the index.js and remove the following import:

import './index.css'

I have not deleted the App.css nor I am using it in this application. But if you want to delete or use it you are free to do that.

Go to the browser on [http://localhost:3000/](http://localhost:3000/) and you’ll get a blank screen output.

To install Material UI go to the view directory and copy-paste this command in the terminal:

npm install @material-ui/core

Remember to use version v4.9.8 of the Material UI library.

To develop the login form go to App.js. At the top of App.js add the following imports:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import login from './pages/login';

We are using Switch and Route to assign routes for our TodoApp. Right now we will add only the /login route and assign a login component to it.

// App.js

<Router>
    <div>
       <Switch>
           <Route exact path="/login" component={login}/>
       Switch>
    div>
Router>

Create a pages directory under the existing view directory and a file named login.js under the pages directory.

We will import Material UI components and the Axios package in the login.js:

// login.js

// Material UI components
import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import withStyles from '@material-ui/core/styles/withStyles';
import Container from '@material-ui/core/Container';
import CircularProgress from '@material-ui/core/CircularProgress';

import axios from 'axios';

We will add the following styles to our login page:

// login.js

const styles = (theme) => ({
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main
    },
    form: {
        width: '100%',
        marginTop: theme.spacing(1)
    },
    submit: {
        margin: theme.spacing(3, 0, 2)
    },
    customError: {
        color: 'red',
        fontSize: '0.8rem',
        marginTop: 10
    },
    progess: {
        position: 'absolute'
    }
});

We will create a class named login which has a form and submit handler inside it.

// login.js

class login extends Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
            errors: [],
            loading: false
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.UI.errors) {
            this.setState({
                errors: nextProps.UI.errors
            });
        }
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ loading: true });
        const userData = {
            email: this.state.email,
            password: this.state.password
        };
        axios
            .post('/login', userData)
            .then((response) => {
                localStorage.setItem('AuthToken', `Bearer ${response.data.token}`);
                this.setState({ 
                    loading: false,
                });        
                this.props.history.push('/');
            })
            .catch((error) => {                
                this.setState({
                    errors: error.response.data,
                    loading: false
                });
            });
    };

    render() {
        const { classes } = this.props;
        const { errors, loading } = this.state;
        return (
            <Container component="main" maxWidth="xs">
                <CssBaseline />
                <div className={classes.paper}>
                    <Avatar className={classes.avatar}>
                        <LockOutlinedIcon />
                    Avatar>
                    <Typography component="h1" variant="h5">
                        Login
                    Typography>
                    <form className={classes.form} noValidate>
                        <TextField
                            variant="outlined"
                            margin="normal"
                            required
                            fullWidth
                            id="email"
                            label="Email Address"
                            name="email"
                            autoComplete="email"
                            autoFocus
                            helperText={errors.email}
                            error={errors.email ? true : false}
                            onChange={this.handleChange}
                        />
                        <TextField
                            variant="outlined"
                            margin="normal"
                            required
                            fullWidth
                            name="password"
                            label="Password"
                            type="password"
                            id="password"
                            autoComplete="current-password"
                            helperText={errors.password}
                            error={errors.password ? true : false}
                            onChange={this.handleChange}
                        />
                        <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            color="primary"
                            className={classes.submit}
                            onClick={this.handleSubmit}
                            disabled={loading || !this.state.email || !this.state.password}
                        >
                            Sign In
                            {loading && <CircularProgress size={30} className={classes.progess} />}
                        Button>
                        <Grid container>
                            <Grid item>
                                <Link href="signup" variant="body2">
                                    {"Don't have an account? Sign Up"}
                                Link>
                            Grid>
                        Grid>
                        {errors.general && (
                            <Typography variant="body2" className={classes.customError}>
                                {errors.general}
                            Typography>
                        )}
                    form>
                div>
            Container>
        );
    }
}

At the end of this file add the following export:

export default withStyles(styles)(login);

Add our firebase functions URL to view > package.json as follows:

Remember: Add a key named proxy below the existing browserslist JSON object

"proxy": "https://-todoapp-.cloudfunctions.net/api"

Install the Axios and material icon package using the following commands:

// Axios command:
npm i axios
// Material Icons:
npm install @material-ui/icons

We have added a login route in App.js. In the login.js we have created a class component that handles the state, sends the post request to the login API using the Axios package. If the request is successful then we store the token. If we get errors in the response we simply render them on the UI.

Go to the browser at [http://localhost:3000/login](http://localhost:3000/login) and you’ll see the following Login UI.

Login Page

Try filling wrong credentials or sending an empty request and you will get the errors. Send a valid request. Go to the Developer console > Application. You will see that users token is store in the Local storage. Once the Login is successful we will be routed back to the Home page.

Google Chrome Developer Console

To develop the Signup form go to App.js and update the existing Route component with the line below:

// App.js

"/signup" component={signup}/>

Don’t forget to import:

// App.js

import signup from './pages/signup';

Create a file named signup.js under the pages directory.

Inside the signup.js we will import the Material UI and Axios package:

// signup.js

import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import withStyles from '@material-ui/core/styles/withStyles';
import CircularProgress from '@material-ui/core/CircularProgress';

import axios from 'axios';

We will add the following styles to our signup page:

// signup.js


const styles = (theme) => ({
    paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    },
    avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(3)
    },
    submit: {
        margin: theme.spacing(3, 0, 2)
    },
    progess: {
        position: 'absolute'
    }
});

We will create a class named signup which has a form and submit handler inside it.

// signup.js

class signup extends Component {
    constructor(props) {
        super(props);

        this.state = {
            firstName: '',
            lastName: '',
            phoneNumber: '',
            country: '',
            username: '',
            email: '',
            password: '',
            confirmPassword: '',
            errors: [],
            loading: false
        };
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.UI.errors) {
            this.setState({
                errors: nextProps.UI.errors
            });
        }
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ loading: true });
        const newUserData = {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            phoneNumber: this.state.phoneNumber,
            country: this.state.country,
            username: this.state.username,
            email: this.state.email,
            password: this.state.password,
            confirmPassword: this.state.confirmPassword
        };
        axios
            .post('/signup', newUserData)
            .then((response) => {
                localStorage.setItem('AuthToken', `${response.data.token}`);
                this.setState({ 
                    loading: false,
                });    
                this.props.history.push('/');
            })
            .catch((error) => {
                this.setState({
                    errors: error.response.data,
                    loading: false
                });
            });
    };

    render() {
        const { classes } = this.props;
        const { errors, loading } = this.state;
        return (
            <Container component="main" maxWidth="xs">
                <CssBaseline />
                <div className={classes.paper}>
                    <Avatar className={classes.avatar}>
                        <LockOutlinedIcon />
                    Avatar>
                    <Typography component="h1" variant="h5">
                        Sign up
                    Typography>
                    <form className={classes.form} noValidate>
                        <Grid container spacing={2}>
                            <Grid item xs={12} sm={6}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="firstName"
                                    label="First Name"
                                    name="firstName"
                                    autoComplete="firstName"
                                    helperText={errors.firstName}
                                    error={errors.firstName ? true : false}
                                    onChange={this.handleChange}
                                />
                            Grid>
                            <Grid item xs={12} sm={6}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="lastName"
                                    label="Last Name"
                                    name="lastName"
                                    autoComplete="lastName"
                                    helperText={errors.lastName}
                                    error={errors.lastName ? true : false}
                                    onChange={this.handleChange}
                                />
                            Grid>

                            <Grid item xs={12} sm={6}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="username"
                                    label="User Name"
                                    name="username"
                                    autoComplete="username"
                                    helperText={errors.username}
                                    error={errors.username ? true : false}
                                    onChange={this.handleChange}
                                />
                            Grid>

                            <Grid item xs={12} sm={6}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="phoneNumber"
                                    label="Phone Number"
                                    name="phoneNumber"
                                    autoComplete="phoneNumber"
                                    pattern="[7-9]{1}[0-9]{9}"
                                    helperText={errors.phoneNumber}
                                    error={errors.phoneNumber ? true : false}
                                    onChange={this.handleChange}
                                />
                            Grid>

                            <Grid item xs={12}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="email"
                                    label="Email Address"
                                    name="email"
                                    autoComplete="email"
                                    helperText={errors.email}
                                    error={errors.email ? true : false}
                                    onChange={this.handleChange}
                                />
                            Grid>

                            <Grid item xs={12}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    id="country"
                                    label="Country"
                                    name="country"
                                    autoComplete="country"
                                    helperText={errors.country}
                                    error={errors.country ? true : false}
                                    onChange={this.handleChange}
                                />
                            Grid>

                            <Grid item xs={12}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    name="password"
                                    label="Password"
                                    type="password"
                                    id="password"
                                    autoComplete="current-password"
                                    helperText={errors.password}
                                    error={errors.password ? true : false}
                                    onChange={this.handleChange}
                                />
                            Grid>
                            <Grid item xs={12}>
                                <TextField
                                    variant="outlined"
                                    required
                                    fullWidth
                                    name="confirmPassword"
                                    label="Confirm Password"
                                    type="password"
                                    id="confirmPassword"
                                    autoComplete="current-password"
                                    onChange={this.handleChange}
                                />
                            Grid>
                        Grid>
                        <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            color="primary"
                            className={classes.submit}
                            onClick={this.handleSubmit}
                            disabled={loading || 
                                !this.state.email || 
                                !this.state.password ||
                                !this.state.firstName || 
                                !this.state.lastName ||
                                !this.state.country || 
                                !this.state.username || 
                                !this.state.phoneNumber}
                        >
                            Sign Up
                            {loading && <CircularProgress size={30} className={classes.progess} />}
                        Button>
                        <Grid container justify="flex-end">
                            <Grid item>
                                <Link href="login" variant="body2">
                                    Already have an account? Sign in
                                Link>
                            Grid>
                        Grid>
                    form>
                div>
            Container>
        );
    }
}

At the end of this file add the following export:

export default withStyles(styles)(signup);

The logic for the Signup component is the same as the login component. Go to the browser at [http://localhost:3000/signup](http://localhost:3000/signup) and you’ll see the following Signup UI. Once the Signup is successful we will be routed back to the Home page.

Sign up Form

Chrome Developer Console

4. Account Section:

To build the account page we will need to first create our Home page from where we will load the account section. Go to the App.js and update the following route:

// App.js

"/" component={home}/>

Don't forget the import:

// App.js

import home from './pages/home';

Create a new file named home.js . This file will be the index of our application. The Account and Todo sections both load on this page based on the button click.

Import the Material UI packages, Axios package, our custom Account, todo components, and auth middleware.

// home.js

import React, { Component } from 'react';
import axios from 'axios';

import Account from '../components/account';
import Todo from '../components/todo';

import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import withStyles from '@material-ui/core/styles/withStyles';
import AccountBoxIcon from '@material-ui/icons/AccountBox';
import NotesIcon from '@material-ui/icons/Notes';
import Avatar from '@material-ui/core/avatar';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import CircularProgress from '@material-ui/core/CircularProgress';

import { authMiddleWare } from '../util/auth'

We will set our drawerWidth as follows:

const drawerWidth = 240;

We will add the following style to our Home page:

const styles = (theme) => ({
    root: {
        display: 'flex'
    },
    appBar: {
        zIndex: theme.zIndex.drawer + 1
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0
    },
    drawerPaper: {
        width: drawerWidth
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3)
    },
    avatar: {
        height: 110,
        width: 100,
        flexShrink: 0,
        flexGrow: 0,
        marginTop: 20
    },
    uiProgess: {
        position: 'fixed',
        zIndex: '1000',
        height: '31px',
        width: '31px',
        left: '50%',
        top: '35%'
    },
    toolbar: theme.mixins.toolbar
});

We will create a class named home. This class will have an API call to get the User's profile picture, First name and Last name. Also it will have logic to choose which component to display, either Todo or Account:

class home extends Component {
    state = {
        render: false
    };

    loadAccountPage = (event) => {
        this.setState({ render: true });
    };

    loadTodoPage = (event) => {
        this.setState({ render: false });
    };

    logoutHandler = (event) => {
        localStorage.removeItem('AuthToken');
        this.props.history.push('/login');
    };

    constructor(props) {
        super(props);

        this.state = {
            firstName: '',
            lastName: '',
            profilePicture: '',
            uiLoading: true,
            imageLoading: false
        };
    }

    componentWillMount = () => {
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        axios
            .get('/user')
            .then((response) => {
                console.log(response.data);
                this.setState({
                    firstName: response.data.userCredentials.firstName,
                    lastName: response.data.userCredentials.lastName,
                    email: response.data.userCredentials.email,
                    phoneNumber: response.data.userCredentials.phoneNumber,
                    country: response.data.userCredentials.country,
                    username: response.data.userCredentials.username,
                    uiLoading: false,
                    profilePicture: response.data.userCredentials.imageUrl
                });
            })
            .catch((error) => {
                if(error.response.status === 403) {
                    this.props.history.push('/login')
                }
                console.log(error);
                this.setState({ errorMsg: 'Error in retrieving the data' });
            });
    };

    render() {
        const { classes } = this.props;        
        if (this.state.uiLoading === true) {
            return (
                <div className={classes.root}>
                    {this.state.uiLoading && <CircularProgress size={150} className={classes.uiProgess} />}
                div>
            );
        } else {
            return (
                <div className={classes.root}>
                    <CssBaseline />
                    <AppBar position="fixed" className={classes.appBar}>
                        <Toolbar>
                            <Typography variant="h6" noWrap>
                                TodoApp
                            Typography>
                        Toolbar>
                    AppBar>
                    <Drawer
                        className={classes.drawer}
                        variant="permanent"
                        classes={{
                            paper: classes.drawerPaper
                        }}
                    >
                        <div className={classes.toolbar} />
                        <Divider />
                        <center>
                            <Avatar src={this.state.profilePicture} className={classes.avatar} />
                            <p>
                                {' '}
                                {this.state.firstName} {this.state.lastName}
                            p>
                        center>
                        <Divider />
                        <List>
                            <ListItem button key="Todo" onClick={this.loadTodoPage}>
                                <ListItemIcon>
                                    {' '}
                                    <NotesIcon />{' '}
                                ListItemIcon>
                                <ListItemText primary="Todo" />
                            ListItem>

                            <ListItem button key="Account" onClick={this.loadAccountPage}>
                                <ListItemIcon>
                                    {' '}
                                    <AccountBoxIcon />{' '}
                                ListItemIcon>
                                <ListItemText primary="Account" />
                            ListItem>

                            <ListItem button key="Logout" onClick={this.logoutHandler}>
                                <ListItemIcon>
                                    {' '}
                                    <ExitToAppIcon />{' '}
                                ListItemIcon>
                                <ListItemText primary="Logout" />
                            ListItem>
                        List>
                    Drawer>

                    <div>{this.state.render ? <Account /> : <Todo />}div>
                div>
            );
        }
    }
}

Here in the code, you will see that authMiddleWare(this.props.history); is used. This middleware checks if the authToken is null. If yes then it will push the user back to the login.js. This is added so that our user cannot access the / route without Signup or log in. At the end of this file add the following export:

export default withStyles(styles)(home);

Now are you wondering what this code from home.js does?

{this.state.render ?  : }

It is checking the render state which we are setting on the button click. Let's create the component directory, and under that directory create two files: account.js and todo.js.

Let’s create a directory named util and file named auth.js under that directory. Copy-paste the following code under auth.js :

export const authMiddleWare = (history) => {
    const authToken = localStorage.getItem('AuthToken');
    if(authToken === null){
        history.push('/login')
    }
}

For time being inside the todo.js file we will just write a class which renders the text Hello I am todo. We will be working on our todos in the next section:

import React, { Component } from 'react'

import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';

const styles = ((theme) => ({
    content: {
        flexGrow: 1,
        padding: theme.spacing(3),
    },
    toolbar: theme.mixins.toolbar,
    })
);

class todo extends Component {
    render() {
        const { classes } = this.props;
        return (
            <main className={classes.content}>
            <div className={classes.toolbar} />
            <Typography paragraph>
                Hello I am todo
            Typography>
            main>
        )
    }
}

export default (withStyles(styles)(todo));

Now it's time for the account section. Import the Material UI, clsx, axios and authmiddleWare utility in our account.js.

// account.js

import React, { Component } from 'react';

import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import { Card, CardActions, CardContent, Divider, Button, Grid, TextField } from '@material-ui/core';

import clsx from 'clsx';

import axios from 'axios';
import { authMiddleWare } from '../util/auth';

We will add the following styling to our Account page:

// account.js

const styles = (theme) => ({
    content: {
        flexGrow: 1,
        padding: theme.spacing(3)
    },
    toolbar: theme.mixins.toolbar,
    root: {},
    details: {
        display: 'flex'
    },
    avatar: {
        height: 110,
        width: 100,
        flexShrink: 0,
        flexGrow: 0
    },
    locationText: {
        paddingLeft: '15px'
    },
    buttonProperty: {
        position: 'absolute',
        top: '50%'
    },
    uiProgess: {
        position: 'fixed',
        zIndex: '1000',
        height: '31px',
        width: '31px',
        left: '50%',
        top: '35%'
    },
    progess: {
        position: 'absolute'
    },
    uploadButton: {
        marginLeft: '8px',
        margin: theme.spacing(1)
    },
    customError: {
        color: 'red',
        fontSize: '0.8rem',
        marginTop: 10
    },
    submitButton: {
        marginTop: '10px'
    }
});

We will create a class component named account. For the time being just copy-paste the following code:

// account.js

class account extends Component {
    constructor(props) {
        super(props);

        this.state = {
            firstName: '',
            lastName: '',
            email: '',
            phoneNumber: '',
            username: '',
            country: '',
            profilePicture: '',
            uiLoading: true,
            buttonLoading: false,
            imageError: ''
        };
    }

    componentWillMount = () => {
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        axios
            .get('/user')
            .then((response) => {
                console.log(response.data);
                this.setState({
                    firstName: response.data.userCredentials.firstName,
                    lastName: response.data.userCredentials.lastName,
                    email: response.data.userCredentials.email,
                    phoneNumber: response.data.userCredentials.phoneNumber,
                    country: response.data.userCredentials.country,
                    username: response.data.userCredentials.username,
                    uiLoading: false
                });
            })
            .catch((error) => {
                if (error.response.status === 403) {
                    this.props.history.push('/login');
                }
                console.log(error);
                this.setState({ errorMsg: 'Error in retrieving the data' });
            });
    };

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

    handleImageChange = (event) => {
        this.setState({
            image: event.target.files[0]
        });
    };

    profilePictureHandler = (event) => {
        event.preventDefault();
        this.setState({
            uiLoading: true
        });
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        let form_data = new FormData();
        form_data.append('image', this.state.image);
        form_data.append('content', this.state.content);
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        axios
            .post('/user/image', form_data, {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            })
            .then(() => {
                window.location.reload();
            })
            .catch((error) => {
                if (error.response.status === 403) {
                    this.props.history.push('/login');
                }
                console.log(error);
                this.setState({
                    uiLoading: false,
                    imageError: 'Error in posting the data'
                });
            });
    };

    updateFormValues = (event) => {
        event.preventDefault();
        this.setState({ buttonLoading: true });
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        const formRequest = {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            country: this.state.country
        };
        axios
            .post('/user', formRequest)
            .then(() => {
                this.setState({ buttonLoading: false });
            })
            .catch((error) => {
                if (error.response.status === 403) {
                    this.props.history.push('/login');
                }
                console.log(error);
                this.setState({
                    buttonLoading: false
                });
            });
    };

    render() {
        const { classes, ...rest } = this.props;
        if (this.state.uiLoading === true) {
            return (
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    {this.state.uiLoading && <CircularProgress size={150} className={classes.uiProgess} />}
                main>
            );
        } else {
            return (
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    <Card {...rest} className={clsx(classes.root, classes)}>
                        <CardContent>
                            <div className={classes.details}>
                                <div>
                                    <Typography className={classes.locationText} gutterBottom variant="h4">
                                        {this.state.firstName} {this.state.lastName}
                                    Typography>
                                    <Button
                                        variant="outlined"
                                        color="primary"
                                        type="submit"
                                        size="small"
                                        startIcon={<CloudUploadIcon />}
                                        className={classes.uploadButton}
                                        onClick={this.profilePictureHandler}
                                    >
                                        Upload Photo
                                    Button>
                                    <input type="file" onChange={this.handleImageChange} />

                                    {this.state.imageError ? (
                                        <div className={classes.customError}>
                                            {' '}
                                            Wrong Image Format || Supported Format are PNG and JPG
                                        div>
                                    ) : (
                                        false
                                    )}
                                div>
                            div>
                            <div className={classes.progress} />
                        CardContent>
                        <Divider />
                    Card>

                    <br />
                    <Card {...rest} className={clsx(classes.root, classes)}>
                        <form autoComplete="off" noValidate>
                            <Divider />
                            <CardContent>
                                <Grid container spacing={3}>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="First name"
                                            margin="dense"
                                            name="firstName"
                                            variant="outlined"
                                            value={this.state.firstName}
                                            onChange={this.handleChange}
                                        />
                                    Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="Last name"
                                            margin="dense"
                                            name="lastName"
                                            variant="outlined"
                                            value={this.state.lastName}
                                            onChange={this.handleChange}
                                        />
                                    Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="Email"
                                            margin="dense"
                                            name="email"
                                            variant="outlined"
                                            disabled={true}
                                            value={this.state.email}
                                            onChange={this.handleChange}
                                        />
                                    Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="Phone Number"
                                            margin="dense"
                                            name="phone"
                                            type="number"
                                            variant="outlined"
                                            disabled={true}
                                            value={this.state.phoneNumber}
                                            onChange={this.handleChange}
                                        />
                                    Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="User Name"
                                            margin="dense"
                                            name="userHandle"
                                            disabled={true}
                                            variant="outlined"
                                            value={this.state.username}
                                            onChange={this.handleChange}
                                        />
                                    Grid>
                                    <Grid item md={6} xs={12}>
                                        <TextField
                                            fullWidth
                                            label="Country"
                                            margin="dense"
                                            name="country"
                                            variant="outlined"
                                            value={this.state.country}
                                            onChange={this.handleChange}
                                        />
                                    Grid>
                                Grid>
                            CardContent>
                            <Divider />
                            <CardActions />
                        form>
                    Card>
                    <Button
                        color="primary"
                        variant="contained"
                        type="submit"
                        className={classes.submitButton}
                        onClick={this.updateFormValues}
                        disabled={
                            this.state.buttonLoading ||
                            !this.state.firstName ||
                            !this.state.lastName ||
                            !this.state.country
                        }
                    >
                        Save details
                        {this.state.buttonLoading && <CircularProgress size={30} className={classes.progess} />}
                    Button>
                main>
            );
        }
    }
}

At the end of this file add the following export:

export default withStyles(styles)(account);

In account.js there are lot of components used. First let's see how our application looks. After that I'll explain all the components that are used and why they are used.

Go to the browser, and if your token is expired it will redirect you to the login page. Add your details and log in again. Once you've done that, go to the Account tab and you will find the following UI:

Account Section

There are 3 handlers in the Account Section:

componentWillMount: This is React's inbuilt lifecycle method. We are using it to load the data before the render lifecycle and update our state values.
ProfilePictureUpdate: This is our custom handler that we are using so that when our user clicks on the Upload Photo button then it will send the data to a server and reload the page to show the user's new Profile Picture.
updateFormValues: This is also our custom handler to update the User's details. Here, the user can update their first name, last name, and country. We are not allowing email and username updates because our backend logic depends on those keys.

Other than these 3 handlers it is a form page with styling on top of it. Here is the directory structure up to this point inside the view folder:

+-- public 
+-- src
|   +-- components
|   +-- +-- todo.js
|   +-- +-- account.js
|   +-- pages
|   +-- +-- home.js
|   +-- +-- login.js
|   +-- +-- signup.js
|   +-- util
|   +-- +-- auth.js 
|   +-- README.md
|   +-- package-lock.json
|   +-- package.json
|   +-- .gitignore

With this we have completed our Account Dashboard. Now go have a coffee, take a break and in the next section, we will build the Todo Dashboard.

Section 4: Todo Dashboard

In this section**,** we are going to develop the UI for these features of the Todos Dashboard:

Add a Todo:
Get all todos:
Delete a todo
Edit a todo
Get a todo
Applying Theme

The Todo Dashboard code implemented in this section can be found at this commit.

Go to todos.js under the components directory. Add the following imports to the existing imports:

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CircularProgress from '@material-ui/core/CircularProgress';
import CardContent from '@material-ui/core/CardContent';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';

import axios from 'axios';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { authMiddleWare } from '../util/auth';

We also need to add the following CSS elements in the existing style components:

const styles = (theme) => ({
    .., // Existing CSS elements
    title: {
        marginLeft: theme.spacing(2),
        flex: 1
    },
    submitButton: {
        display: 'block',
        color: 'white',
        textAlign: 'center',
        position: 'absolute',
        top: 14,
        right: 10
    },
    floatingButton: {
        position: 'fixed',
        bottom: 0,
        right: 0
    },
    form: {
        width: '98%',
        marginLeft: 13,
        marginTop: theme.spacing(3)
    },
    toolbar: theme.mixins.toolbar,
    root: {
        minWidth: 470
    },
    bullet: {
        display: 'inline-block',
        margin: '0 2px',
        transform: 'scale(0.8)'
    },
    pos: {
        marginBottom: 12
    },
    uiProgess: {
        position: 'fixed',
        zIndex: '1000',
        height: '31px',
        width: '31px',
        left: '50%',
        top: '35%'
    },
    dialogeStyle: {
        maxWidth: '50%'
    },
    viewRoot: {
        margin: 0,
        padding: theme.spacing(2)
    },
    closeButton: {
        position: 'absolute',
        right: theme.spacing(1),
        top: theme.spacing(1),
        color: theme.palette.grey[500]
    }
});

We will add the transition for the pop up dialogue box:

const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});

Remove the existing todo class and copy-paste the following class:

class todo extends Component {
    constructor(props) {
        super(props);

        this.state = {
            todos: '',
            title: '',
            body: '',
            todoId: '',
            errors: [],
            open: false,
            uiLoading: true,
            buttonType: '',
            viewOpen: false
        };

        this.deleteTodoHandler = this.deleteTodoHandler.bind(this);
        this.handleEditClickOpen = this.handleEditClickOpen.bind(this);
        this.handleViewOpen = this.handleViewOpen.bind(this);
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    };

    componentWillMount = () => {
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        axios
            .get('/todos')
            .then((response) => {
                this.setState({
                    todos: response.data,
                    uiLoading: false
                });
            })
            .catch((err) => {
                console.log(err);
            });
    };

    deleteTodoHandler(data) {
        authMiddleWare(this.props.history);
        const authToken = localStorage.getItem('AuthToken');
        axios.defaults.headers.common = { Authorization: `${authToken}` };
        let todoId = data.todo.todoId;
        axios
            .delete(`todo/${todoId}`)
            .then(() => {
                window.location.reload();
            })
            .catch((err) => {
                console.log(err);
            });
    }

    handleEditClickOpen(data) {
        this.setState({
            title: data.todo.title,
            body: data.todo.body,
            todoId: data.todo.todoId,
            buttonType: 'Edit',
            open: true
        });
    }

    handleViewOpen(data) {
        this.setState({
            title: data.todo.title,
            body: data.todo.body,
            viewOpen: true
        });
    }

    render() {
        const DialogTitle = withStyles(styles)((props) => {
            const { children, classes, onClose, ...other } = props;
            return (
                <MuiDialogTitle disableTypography className={classes.root} {...other}>
                    <Typography variant="h6">{children}Typography>
                    {onClose ? (
                        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
                            <CloseIcon />
                        IconButton>
                    ) : null}
                MuiDialogTitle>
            );
        });

        const DialogContent = withStyles((theme) => ({
            viewRoot: {
                padding: theme.spacing(2)
            }
        }))(MuiDialogContent);

        dayjs.extend(relativeTime);
        const { classes } = this.props;
        const { open, errors, viewOpen } = this.state;

        const handleClickOpen = () => {
            this.setState({
                todoId: '',
                title: '',
                body: '',
                buttonType: '',
                open: true
            });
        };

        const handleSubmit = (event) => {
            authMiddleWare(this.props.history);
            event.preventDefault();
            const userTodo = {
                title: this.state.title,
                body: this.state.body
            };
            let options = {};
            if (this.state.buttonType === 'Edit') {
                options = {
                    url: `/todo/${this.state.todoId}`,
                    method: 'put',
                    data: userTodo
                };
            } else {
                options = {
                    url: '/todo',
                    method: 'post',
                    data: userTodo
                };
            }
            const authToken = localStorage.getItem('AuthToken');
            axios.defaults.headers.common = { Authorization: `${authToken}` };
            axios(options)
                .then(() => {
                    this.setState({ open: false });
                    window.location.reload();
                })
                .catch((error) => {
                    this.setState({ open: true, errors: error.response.data });
                    console.log(error);
                });
        };

        const handleViewClose = () => {
            this.setState({ viewOpen: false });
        };

        const handleClose = (event) => {
            this.setState({ open: false });
        };

        if (this.state.uiLoading === true) {
            return (
                <main className={classes.content}>
                    <div className={classes.toolbar} />
                    {this.state.uiLoading && <CircularProgress size={150} className={classes.uiProgess} />}
                main>
            );
        } else {
            return (
                <main className={classes.content}>
                    <div className={classes.toolbar} />

                    <IconButton
                        className={classes.floatingButton}
                        color="primary"
                        aria-label="Add Todo"
                        onClick={handleClickOpen}
                    >
                        <AddCircleIcon style={{ fontSize: 60 }} />
                    IconButton>
                    <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
                        <AppBar className={classes.appBar}>
                            <Toolbar>
                                <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                                    <CloseIcon />
                                IconButton>
                                <Typography variant="h6" className={classes.title}>
                                    {this.state.buttonType === 'Edit' ? 'Edit Todo' : 'Create a new Todo'}
                                Typography>
                                <Button
                                    autoFocus
                                    color="inherit"
                                    onClick={handleSubmit}
                                    className={classes.submitButton}
                                >
                                    {this.state.buttonType === 'Edit' ? 'Save' : 'Submit'}
                                Button>
                            Toolbar>
                        AppBar>

                        <form className={classes.form} noValidate>
                            <Grid container spacing={2}>
                                <Grid item xs={12}>
                                    <TextField
                                        variant="outlined"
                                        required
                                        fullWidth
                                        id="todoTitle"
                                        label="Todo Title"
                                        name="title"
                                        autoComplete="todoTitle"
                                        helperText={errors.title}
                                        value={this.state.title}
                                        error={errors.title ? true : false}
                                        onChange={this.handleChange}
                                    />
                                Grid>
                                <Grid item xs={12}>
                                    <TextField
                                        variant="outlined"
                                        required
                                        fullWidth
                                        id="todoDetails"
                                        label="Todo Details"
                                        name="body"
                                        autoComplete="todoDetails"
                                        multiline
                                        rows={25}
                                        rowsMax={25}
                                        helperText={errors.body}
                                        error={errors.body ? true : false}
                                        onChange={this.handleChange}
                                        value={this.state.body}
                                    />
                                Grid>
                            Grid>
                        form>
                    Dialog>

                    <Grid container spacing={2}>
                        {this.state.todos.map((todo) => (
                            <Grid item xs={12} sm={6}>
                                <Card className={classes.root} variant="outlined">
                                    <CardContent>
                                        <Typography variant="h5" component="h2">
                                            {todo.title}
                                        Typography>
                                        <Typography className={classes.pos} color="textSecondary">
                                            {dayjs(todo.createdAt).fromNow()}
                                        Typography>
                                        <Typography variant="body2" component="p">
                                            {`${todo.body.substring(0, 65)}`}
                                        Typography>
                                    CardContent>
                                    <CardActions>
                                        <Button size="small" color="primary" onClick={() => this.handleViewOpen({ todo })}>
                                            {' '}
                                            View{' '}
                                        Button>
                                        <Button size="small" color="primary" onClick={() => this.handleEditClickOpen({ todo })}>
                                            Edit
                                        Button>
                                        <Button size="small" color="primary" onClick={() => this.deleteTodoHandler({ todo })}>
                                            Delete
                                        Button>
                                    CardActions>
                                Card>
                            Grid>
                        ))}
                    Grid>

                    <Dialog
                        onClose={handleViewClose}
                        aria-labelledby="customized-dialog-title"
                        open={viewOpen}
                        fullWidth
                        classes={{ paperFullWidth: classes.dialogeStyle }}
                    >
                        <DialogTitle id="customized-dialog-title" onClose={handleViewClose}>
                            {this.state.title}
                        DialogTitle>
                        <DialogContent dividers>
                            <TextField
                                fullWidth
                                id="todoDetails"
                                name="body"
                                multiline
                                readonly
                                rows={1}
                                rowsMax={25}
                                value={this.state.body}
                                InputProps={{
                                    disableUnderline: true
                                }}
                            />
                        DialogContent>
                    Dialog>
                main>
            );
        }
    }
}

At the end of this file add the following export:

export default withStyles(styles)(todo);

First we will understand how our UI works and after that we will understand the code. Go to the browser and you'll get the following UI:

Todo Dashboard

Click on the Add button at the bottom right corner and you’ll get the following screen:

Add Todo

Add the Todo title and details and press the submit button. You’ll get the following screen:

Todo Dashboard

After this click on the view button and you’ll be able to see the full details of the Todo:

View Single Todo

Click on the Edit button and you’ll be able to edit the todo:

Edit Todo

Click the delete button and you’ll be able to delete the Todo. Now as we are aware of how Dashboard works, we will understand the components used in it.

1. Add Todo: For implementing the add todo we will use the Dialogue component of Material UI. This component implements a hook functionality. We are using the classes so we will remove that functionality.

// This sets the state to open and buttonType flag to add:
const handleClickOpen = () => {
      this.setState({
           todoId: '',
           title: '',
           body: '',
           buttonType: '',
           open: true
     });
};

// This sets the state to close:
const handleClose = (event) => {
      this.setState({ open: false });
};

Other than this we will also change the placement of the Add Todo Button.

// Position our button
floatingButton: {
    position: 'fixed',
    bottom: 0,
    right: 0
},

<IconButton className={classes.floatingButton} ... >

Now we will replace the list tag with a form inside this Dialogue. It will help us in adding the new todo.

// Show Edit or Save depending on buttonType state
{this.state.buttonType === 'Edit' ? 'Save' : 'Submit'}

// Our Form to add a todo

    <Grid container spacing={2}>
        <Grid item xs={12}>
        // TextField here
        Grid>
        <Grid item xs={12}>
        // TextField here
        Grid>
    Grid>

The handleSubmit consists of logic to read the buttonType state. If the state is an empty string (“”) then it will post on the Add Todo API. If the state is an Edit then in that scenario it will update the Edit Todo.

2. Get Todos: To display the todos we will use the Grid container and inside it, we place the Grid item . Inside that, we will use a Card component to display the data.

2}>
    {this.state.todos.map((todo) => (
    <Grid item xs={12} sm={6}>
    <Card className={classes.root} variant="outlined">
        <CardContent>
        // Here will show Todo with view, edit and delete button
        CardContent>
    Card>
    Grid>))}

We use the map to display the todo item as the API sends them in a list. We will use the componentWillMount lifecycle to get and set the state before the render is executed. There are 3 buttons ( view, edit, and delete ) so we will need 3 Handlers to handle the operation when the button is clicked. We will learn about these buttons in their respective subsections.

3. Edit Todo: For the edit todo, we are reusing the dialogue pop up code that is used in add todo. To differentiate between the button clicks we are using a buttonType state. For Add Todo the buttonType state is (“”) while for edit todo it is Edit.

handleEditClickOpen(data) {
    this.setState({
        ..,
        buttonType: 'Edit',
        ..
    });
}

In the handleSubmit method we read the buttonType state and then send the request accordingly.

4. Delete Todo: When this button is clicked we send the todo object to our deleteTodoHandler and then it sends the request further to the backend.

5. View Todo: When showing the data we have truncated it so that the user will get a glimpse of what the todo is about. But if a user wants to know more about it then they need to click on the view button.

For this, we will use the Customised dialogue. Inside that, we use DialogTitle and DialogContent. It displays our title and content. In DialougeContent we will use the form to display the content that the user has posted. (This is one solution that I found there are many and you are free to try other.)

// This is used to remove the underline of the Form
InputProps={{
       disableUnderline: true
}}

// This is used so that user cannot edit the data
readonly

6. Applying Theme: This is the last step of our application. We will apply a theme on our application. For this we are using createMuiTheme and ThemeProvider from material UI. Copy-paste the following code in App.js:

import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';

const theme = createMuiTheme({
    palette: {
        primary: {
            light: '#33c9dc',
            main: '#FF5722',
            dark: '#d50000',
            contrastText: '#fff'
        }
    }
});

function App() {
    return (
        <MuiThemeProvider theme={theme}>
        // Router and switch will be here.
        MuiThemeProvider>
    );
}

We missed applying a theme to our button in todo.js in the CardActions . Add the color tag for the view, edit, and delete button.

Go to the browser and you will find that everything is the same except that the app is a different color.

TodoApp after applying theme

And we're done! We have built a TodoApp using ReactJS and Firebase. If you have built it all the way to this point then a very big congratulations to you on this achievement.

Feel free to connect with me on Twitter and Github.

Sharvin Shah - freeCodeCamp.org

How to Build a Custom AI Chat Application with Next.js: Fine-Tune GPT Using Your Data

Table of Contents:

Understanding Fine-Tuning

Prerequisites

Step 1: Dataset Preparation

Step 2: Fine-Tuning Submission

Step 3: Next.js Application Setup

Step 4: Building the Chat Interface

Step 5: API Route Integration

Step 6: Testing Your Application

Conclusion

How to Build a Production Ready eCommerce Website with ReactJS, TailwindCSS, PlanetScale and Stripe

The stack we will use:

Table of Contents

How to Configure PlanetScale, Stripe, NextJS, TailwindCSS, and Prisma.

How to Configure PlanetScale:

How to Configure Stripe:

How to Configure NextJS, TailwindCSS, and Prisma.

Hello

Category:

Product:

How to Implement Mock Data, Category-Products API, and All Category-Single Category UI.

How to Create the Mock Data:

How to Create the Category and Product APIs:

How to Create the All Category and Single Category UIs:

How to Implement Single Product UI and Stripe Checkout.

How to Create the Single Product UI:

How to Set Up Stripe Checkout:

How to Deploy the Website to Production

How to Promote the PlanetScale Branch to Main:

How to Deploy to Vercel:

Thank you for reading!

How to Build a TodoApp using ReactJS, NextJS, and Supabase

Here's what we're going to build

And here's the tech we'll use:

Why use Supabase?

Table of Contents

How to Configure Supabase Tables, Auth, and Storage

What is Row Level Security in Supabase?

How to Create Tables in the Database

How to Implement Sign In Using Supabase

How to Install Chakra UI

How to Install the Supabase Client Library

How to Show All Todos, Add New Todos, and Update and Delete Todos

How to Add a Todo

How to Get All Todos

How to Update a Todo

How to Delete a Todo

How to Update Profile Details and Avatars

How to Deploy the App to Vercel and Configure Supabase Authentication

Thank you for reading!

How to Build a Quiz App using NextJS, Chakra UI, and Firebase

Here's what we're going to build:

And here's the tech we'll use:

Contents

How to Set Up Auth and User Collection

How to configure NextJS and Chakra UI in our quiz app:

How to Configure Firebase Authentication and Firestore:

How to set up the Navbar, Signup, and Sign-out mechanisms:

How to Add a Quiz and Display Multiple Quizzes

How to set up the Add a Quiz mechanism:

How to set up the Display Multiple Quizzes mechanism:

How to Show a Single Quiz, How to Answer a Quiz and How to Validate the Answer

How to set up the Show a Single Quiz and Answer Quiz mechanisms:

How to set up the Validate Answer mechanism:

How to Deploy the App to Vercel and Firebase Authentication Configuration

Next Steps:

The Ultimate Guide to Python: How to Go From Beginner to Pro

Index:

Introduction:

Installation

Windows User:

Mac User:

Linux User:

Python shell:

Commenting:

Print:

Indentation:

Variables: