DEV Community: Nitesh Kumar

Building a Local AI Development Stack with LiteLLM + AWS Bedrock + Open WebUI

Nitesh Kumar — Mon, 16 Mar 2026 06:49:32 +0000

How I replaced multiple AI SaaS subscriptions with one simple self‑hosted gateway.

Why I Built This

Over the past few months I kept experimenting with different AI tools.

Chat apps. Coding assistants. Agent platforms. Most of them were impressive — but almost all of them required separate subscriptions.

After a while it became obvious that many of these tools are simply thin layers on top of the same foundation models.

So instead of paying for multiple platforms, I decided to build a single local AI stack that:

Uses AWS Bedrock for model access
Uses LiteLLM as a unified gateway
Uses Open WebUI as a chat interface
Connects to VS Code agents for coding
Runs locally using Docker

The result ended up being cleaner than expected.

Architecture

The full flow looks like this:

Open WebUI / VS Code Agents
            │
            ▼
        LiteLLM Gateway
            │
            ▼
        AWS Bedrock
 (Claude, DeepSeek, Qwen, etc)

The key idea is LiteLLM acting as a gateway.

LiteLLM exposes an OpenAI‑compatible API, which means almost every AI tool can connect to it without needing Bedrock‑specific integrations.

That single layer simplifies the entire ecosystem.

Step 1 — Project Structure

I started with a simple project directory.

AI/
 └── litellm/
     ├── config.yaml
     ├── docker-compose.yml
     └── .env

LiteLLM runs alongside Redis and Postgres.

These are used for:

caching
usage tracking
gateway state

Step 2 — Docker Compose Setup

litellm/docker-compose.yml

services:

  postgres:
    image: postgres:16
    container_name: litellm-postgres
    restart: unless-stopped
    environment:
      POSTGRES_USER: litellm
      POSTGRES_PASSWORD: litellm
      POSTGRES_DB: litellm
    volumes:
      - postgres_data:/var/lib/postgresql/data
    ports:
      - "55432:5432"

  redis:
    image: redis:7
    container_name: litellm-redis
    restart: unless-stopped
    ports:
      - "56379:6379"

  litellm:
    image: ghcr.io/berriai/litellm:main-latest
    container_name: litellm
    restart: unless-stopped
    ports:
      - "4010:4000"
    volumes:
      - ./config.yaml:/app/config.yaml
    env_file:
      - .env
    environment:
      DATABASE_URL: postgres://litellm:litellm@postgres:5432/litellm
      REDIS_HOST: redis
      REDIS_PORT: 6379
    depends_on:
      - postgres
      - redis
    command: --config /app/config.yaml

volumes:
  postgres_data:

Step 3 — LiteLLM Configuration

config.yaml

general_settings:
  stream_response: true
  master_key: sk-admin

The master_key acts as the admin API key for the gateway.

Step 4 — Start LiteLLM

From inside the litellm directory:

docker compose up -d

Once everything starts, the LiteLLM dashboard is available at:

http://localhost:4010

Step 5 — Add AWS Bedrock Credentials

Inside the LiteLLM dashboard navigate to:

Models + Endpoints → LLM Credentials

Then click:

Add Credential

Select provider:

Amazon Bedrock

Fill the required fields:

AWS Access Key ID
AWS Secret Access Key
AWS Region

Example region:

us-east-1

Once saved, LiteLLM can start communicating with Bedrock.

Step 6 — Register Bedrock Models

Next I added the models I wanted LiteLLM to expose.

Navigate to:

Models + Endpoints → Add Model

Provider:

Amazon Bedrock

Example model:

us.deepseek.r1-v1:0

Mapping configuration:

Public Model Name: us.deepseek.r1-v1:0
LiteLLM Model Name: us.deepseek.r1-v1:0

Select your credential and click:

Test Connect

If everything is configured correctly you should see:

Connection successful

Then click:

Add Model

I repeated this for multiple Bedrock models.

Step 7 — Create an API Key

LiteLLM allows generating API keys for client applications.

Navigate to:

Virtual Keys

Create a key such as:

sk-dev

This key will be used by tools like Open WebUI or VS Code agents.

Step 8 — Run Open WebUI

To get a ChatGPT‑style interface I used Open WebUI.

Run it with Docker:

docker run -d \
-p 3000:8080 \
--name openwebui \
ghcr.io/open-webui/open-webui:main

Open the interface:

http://localhost:3000

Create an account on first launch.

Step 9 — Connect Open WebUI to LiteLLM

Inside Open WebUI go to:

Settings → Connections → OpenAI API

Configure:

Base URL

http://localhost:4010

API Key

sk-dev

After saving, Open WebUI automatically loads all models registered in LiteLLM.

Final Result

At this point the stack looks like this:

Open WebUI
     ↓
LiteLLM Gateway
     ↓
AWS Bedrock Models

From a single interface I can now:

switch between models
test prompts
track token usage
monitor costs

Using It with Coding Agents

Because LiteLLM exposes an OpenAI compatible API, it integrates directly with developer tools.

For example in VS Code tools like:

Continue.dev
OpenCode

Configuration simply requires:

Base URL: http://localhost:4010
API Key: sk-dev

This lets the same Bedrock models power coding workflows.

Why This Setup Works Well

A few reasons I ended up liking this architecture:

No vendor lock‑in
Pay only for inference
One API for multiple models
Works with most AI tooling
Fully self‑hosted gateway

LiteLLM effectively becomes the central router for every AI tool I use.

Closing Thoughts

The AI tooling ecosystem moves extremely fast. Most products are simply wrappers around the same models.

Building a small modular stack turned out to be more flexible than relying on several separate platforms.

Now I have:

a local chat interface
coding agents inside my editor
access to Bedrock models
a single gateway controlling everything

All running locally with Docker while using AWS only for inference.

If you're experimenting with AI development, agents, or multi‑model workflows, this setup is a solid foundation.

If you build something similar or improve this stack, I'd love to see how others are approaching it.

Deploy Static Sites to AWS S3 Using GitHub Actions (Next.js, React, Vue, Astro)

Nitesh Kumar — Tue, 22 Jul 2025 15:17:14 +0000

Have you ever wondered how to automatically build and deploy your static site projects without relying on platforms like Vercel or Netlify? If so, you're in the right place.

Introduction

In this article, we'll walk through how to set up GitHub Actions to build and deploy your static website directly to AWS S3, giving you full control over your CI/CD pipeline — no third-party hosting required.

You might be wondering — what exactly is CI/CD?

CI/CD stands for Continuous Integration and Continuous Deployment. It’s a development practice that automates the process of building, testing, and deploying your code every time you push changes to your repository.

Instead of manually uploading files to a server every time you make updates, CI/CD pipelines handle that for you. This means fewer interruptions, fewer mistakes, and more time to focus on building, not deploying.

Prerequisites

Before we get started, make sure you have the following:

AWS Account: You will need an AWS account to create an S3 bucket and host your site.
GitHub Account: Required to access GitHub Actions.
Project: A git initialized project to deploy. This guide is framework-agnostic, so you can use any Node.js-based project that generates a static site (e.g., React.js with CRA or Vite, Next.js with next export)

Example Project Setup

In this guide, I am taking a Vite-React project as an example

npm create vite@latest react-auto-deploy -- --template react-ts

Understanding GitHub Actions

What is a Workflow?

A workflow in GitHub Actions is an automated process that runs one or more jobs. It's defined in a .yml (YAML) file inside the .github/workflows/ directory of your repository.

Each workflow can be triggered by specific GitHub events such as:

Pushes to a branch (e.g., pushing code to main)
Pull requests (e.g., opening a PR to review changes)
Manual triggers (e.g., running it with a button click using workflow_dispatch)
Scheduled triggers (e.g., every day at midnight using cron)
Releases, issue comments, or other custom events

Example workflow file structure:

react-auto-deploy/
├── .github/
│   └── workflows/
│       └── deploy.yml   ← your workflow definition

A workflow file defines what should happen and when, such as:

Install dependencies
Build your site
Run tests
Deploy to AWS S3 or other platforms

Step-by-Step Guide

Create an S3 bucket.
- Go to the AWS S3 Console
- Click "Create bucket”
- Enter a unique bucket name (e.g., my-static-site)
- Choose a region
- Uncheck "Block all public access" under permissions
- Confirm the warning checkbox
- Click "Create bucket"
Enable Static Website Hosting
- Go to the "Properties" tab
- Scroll to "Static website hosting”
- Click "Edit”
- Enable "Static website hosting”
- set index document: index.html
- Click "Save changes”

Make Files Public

Go to the "Permissions" tab
Scroll to "Bucket policy"
Click "Edit", and paste the following policy (replace your-bucket-name):

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

Replace your-bucket-name with your unique bucket name. This step makes your bucket publicly accessible.

Go to GitHub and create your repository
Create a .github/workflows/deploy.yaml file at the root of your project (locally or on GitHub)
Paste the following config (I will explain the config below)

name: Build and Upload So Sure Dashboard

on:
  push:
    branches:
      - main

jobs:
  deploy-stagging:
    runs-on: ubuntu-latest

    steps:
            # step 1
      - name: Checkout repository
        uses: actions/checkout@v3

        # step 2
      - name: Use Node.js 20.x
        uses: actions/setup-node@v3
        with:
          node-version: 20

         # step 3
      - name: Install dependencies
        run: npm install

        #step 4
      - name: Create .env file
        run: |
          cat <<EOF > ./.env
          ${{ secrets.ENV }}
          EOF

        #step 5
      - name: Build project
        run: npm run build

        #step 6
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

        #step 7
      - name: Upload dist to S3
        run: |
          aws s3 sync dist/ s3://${{ secrets.AWS_S3_BUCKET }}/ --delete

The first section sets the name and trigger for the workflow. Whenever code is pushed to the main branch, the workflow will automatically run the defined jobs.

In the jobs section, the first three steps clone the repository to the GitHub Actions container (running Ubuntu-latest), install Node.js, and download all the node_modules required to build the project.

You can skip the - name: Create .env file step if you don't have any environment variables. This step takes the repository secret ENV and creates a .env file at the root of the project.

In the next step, the project is built. It's important to set up the correct scripts in package.json to make your project run properly.

The next step configures the AWS client to use your account via the AWS CLI.

Finally, step 7 uploads the output folder to your S3 bucket.

Before you commit and push the workflow file, set up the repository secrets on GitHub.
Navigate to your repository on GitHub and click the Settings tab.
In the Security section, navigate to Secrets and Variables > Actions.
Here, set up all the secrets used in the above workflow file.
Be careful and set up the same variables as used in the YAML file

AWS_ACCESS_KEY_ID , AWS_REGION , AWS_S3_BUCKET , AWS_SECRET_ACCESS_KEY , ENV

AWS_S3_BUCKET is your s3 bucket name
AWS_REGION is your s3 bucket region
AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY can be generated from the AWS console IAM role.
ENV all your .env file variables needed at build time. Copy all the contents of the .env file and paste it here as the value

Now that you've set up your GitHub repository with the necessary secrets and workflow file, it's time to commit your changes and see the automation in action. The next time you push to the main branch, GitHub Actions will automatically build your project and deploy it to AWS S3.

Testing Your Deployment

After pushing your code, you can monitor the workflow execution by going to the "Actions" tab in your GitHub repository. You should see your workflow running, and once completed successfully, your website will be live on your S3 bucket's URL.

Access Your Site

Go back to the "Properties" tab
Under "Static website hosting", copy the "Bucket website endpoint" (e.g., http://your-bucket-name.s3-website-us-east-1.amazonaws.com)
Open it in your browser — your site should be live!

Common Issues and Troubleshooting

When implementing this deployment pipeline, you might encounter a few common issues. Here are some troubleshooting tips to help you resolve them quickly:

Permission Errors: Ensure your IAM user has the necessary permissions for S3 operations (s3:PutObject, s3:GetObject, s3:DeleteObject).
Build Failures: Check your workflow logs carefully. Most build failures are due to missing dependencies or environment variables.
Cache Issues: If your updates aren't showing up, you might need to configure cache invalidation for your S3 bucket, especially if you're using CloudFront.

Conclusion

And that’s it! You’ve just set up automatic deployment for your static site using GitHub Actions and AWS S3. No more manual uploads — push your code and let GitHub do the rest. It saves time, reduces errors, and keeps your workflow smooth.

Geeks For Geeks - Problem of the Day | POTD | 18 Aug

Nitesh Kumar — Fri, 18 Aug 2023 05:14:20 +0000

Leaders in an array

Given an array A of positive integers. Your task is to find the leaders in the array. An element of array is leader if it is greater than or equal to all the elements to its right side. The rightmost element is always a leader.
Example 1:

Input: n = 6 A[] = {16,17,4,3,5,2}
Output: 17 5 2 Explanation: The first leader is 17 as it is greater than all the elements to its right. Similarly, the next
leader is 5. The right most element is always a leader so it is also
included.

Example 2:

Input: n = 5 A[] = {1,2,3,4,0}
Output: 4 0

Explanation: 0 is the rightmost element and 4 is the only element which is greater than all the elements to its right.

Your Task:

You don't need to read input or print anything. The task is to complete the function leader() which takes array A and n as input parameters and returns an array of leaders in order of their appearance.

Expected Time Complexity: O(n)

Expected Auxiliary Space: O(n)

Constraints:

1 <= n <= 107

0 <= Ai <= 107
Link to the Question

Solution

Approach:

The idea is last element is always going to be the Leader(as there is no element on it's right) and if we can find an element greator than it on left than it's also leader.In this way we get the leader's in reverse;

Algorithm:

intialize a vector/array with the last elemtent of the array
maintain a variable of last Leader
traverse the array in reverse and if an element greator than the last leader is encountered update last leader and push it to the resulting vector/array
Doing so we get the leader array in reverse so simply reverse the array and return it.

Time Complexity: time to traverse + time to reverse = O(N) + O(N/2) = O(N);

Space Complexity: O(N) as all element can be leader in worst case of array being sorted in reverse order.

c++ code:

 vector<int> leaders(int a[], int n){
        // Code here
        vector<int> res = {a[n-1]};

        int crL = a[n-1];

        for(int i = n-2;i>=0;i--){
            if(crL<=a[i]){
                crL = a[i];
                res.push_back(crL);
            }

        }

       reverse(res.begin(),res.end());
        return res;

    }

Create a Todo List App with React-Native and Styled components

Nitesh Kumar — Thu, 03 Aug 2023 10:09:03 +0000

A todo list is a simple but useful app that helps you keep track of your tasks and goals. It allows you to add, edit, delete, and mark items as done. In this article, we will learn how to create a todo list app with React Native, a popular framework for building cross-platform mobile apps using JavaScript and React.

React Native is a framework that lets you use React, a library for building user interfaces, to create native apps for iOS and Android. React Native uses native components instead of web components, which means you can access the features and performance of the native platform. React Native also supports hot reloading and live reloading, which means you can see the changes in your app instantly without rebuilding it.

To create a todo list app with React Native, we will follow these steps:

Set up the development environment and install the dependencies.
Create the main App component that will render the todo list and the input field.
Create a custom Task component that will display each todo item and handle the editing and deleting actions.
Use the useState hook to manage the state of the app, such as the list of tasks and the current input value.
Use the useEffect hook to save and load the tasks from the local storage using AsyncStorage.
Add some styling and icons to make the app look nicer.

Let's see how to implement each step in detail.

Step 1: Set up the development environment and install the dependencies

To start building our app, we need to set up our development environment and install some dependencies. We will use Expo, a tool that simplifies the process of developing and testing React Native apps. Expo provides a set of tools and services that let you run your app on your device or simulator without installing any native dependencies.

To install Expo, we need to have Node.js and npm installed on our system. You can download them from here. Then, we can run the following command in our terminal:

npm install --global expo-cli

This will install the Expo command line interface (CLI) globally on our system.

Next, we need to create a new project using Expo. We can do this by running:

expo init TodoList

This will create a new folder called TodoList with some boilerplate code and configuration files. We can choose a template for our project from the options that Expo provides. For this tutorial, we will use the blank template, which gives us a minimal setup.

Then, we need to navigate to our project folder and start the development server by running:

cd TodoList

expo start

This will open a web page with a QR code and some options to run our app. We can scan the QR code with our device using the Expo Go app, which we can download from here for iOS or here for Android. Alternatively, we can use an emulator or simulator on our computer by clicking on the Run on iOS simulator or Run on Android device/emulator buttons.

Before we start coding, we need to install some additional dependencies for our app. We will use styled-components, a library that lets us write CSS in JavaScript, to style our components. We will also use react-native-vector-icons, a library that provides us with icons for our app. To install these dependencies, we need to run:

npm install styled-components react-native-vector-icons

We also need to link the react-native-vector-icons library to our project by running:

expo install @expo/vector-icons

This will ensure that the icons are available for our app.

Step 2: Create the main App component that will render the todo list and the input field

Now that we have set up our project and installed our dependencies, we can start coding our app. We will use Visual Studio Code as our code editor, but you can use any editor of your choice.

We will start by creating the main App component that will render the todo list and the input field. To do this, we need to open the App.js file in our project folder and replace its content with the following code:


// Import React and useState hook

import React, { useState, useEffect } from "react";

import { StatusBar } from "react-native";
// Import styled-components

import styled from "styled-components/native";

// Import Task component

import Task from "./src/Task";

import AsyncStorage from "@react-native-async-storage/async-storage";
// Create a container component using styled-components

const Container = styled.View`
  flex: 1;

  background-color: #e8eaed;
`;

// Create an input component using styled-components

const Input = styled.TextInput`
  padding: 15px;

  padding-left: 55px;

  border-color: #c0c0c0;

  border-width: 1px;

  border-radius: 60px;

  width: 90%;

  margin: 20px;
`;

// Create an icon component using styled-components

const Icon = styled.Image`
  width: 30px;

  height: 30px;

  position: absolute;

  top: 35px;

  left: 30px;
`;

// Create a list component using styled-components

const List = styled.ScrollView`
  margin: 20px;
`;

// Create the main App component

export default function App() {
  // Define the state for the input value

  const [input, setInput] = useState("");

  // Define the state for the list of tasks

  const [tasks, setTasks] = useState([]);

  // Define a function to handle the input change

  const handleChange = (value) => {
    setInput(value);
  };

  // Define a function to handle the submit action

  const handleSubmit = () => {
    // Check if the input is not empty

    if (input.length > 0) {
      // Create a new task object

      const newTask = {
        id: Math.random().toString(),

        title: input,

        done: false,
      };

      // Update the list of tasks

      setTasks([newTask, ...tasks]);

      // Reset the input value

      setInput("");
    }
  };

  useEffect(() => {
    // Save tasks to local storage

    AsyncStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  useEffect(() => {
    // Load tasks from local storage

    AsyncStorage.getItem("tasks").then((value) => {
      // Check if value is not null

      if (value) {
        // Parse value into an array and update tasks state variable

        setTasks(JSON.parse(value));
      }
    });
  }, []);

  return (
    // Render the container component

    <Container>
      <StatusBar
        animated={true}
        backgroundColor="#c0c0c0"
        barStyle={"dark-content"}
        showHideTransition={"fade"}
      />
      <Input
        value={input}
        onChangeText={handleChange}
        placeholder="Enter a task"
        onSubmitEditing={handleSubmit}
      />
      <Icon source={require("./assets/favicon.png")} />
      <List>
        {tasks.map((task) => (
          <Task key={task.id} task={task} />
        ))}
      </List>
    </Container>
  );
}

Let's break down what this code does:

First, we import React and the useState hook from "react". The useState hook allows us to manage the state of our component, which is the data that changes over time. We will use it to store the input value and the list of tasks.
Next, we import styled from "styled-components/native". This allows us to create custom components using CSS syntax. We will use it to style our container, input, icon, and list components.
Then, we import Task from "./components/Task". This is a custom component that we will create later to display each todo item. We will pass it the task object as a prop.
After that, we create a container component using styled.View. This is a basic component that renders a view that can contain other components. We give it a flex: 1 property, which means it will take up all the available space in its parent. We also give it a background-color: #e8eaed property, which sets its background color to a light gray.
Next, we create an input component using styled.TextInput. This is a component that renders an input field that can accept user input. We give it some padding, border, border-radius, width, and margin properties to make it look nice. We also give it a padding-left: 55px property, which creates some space for the icon component that we will add later.
Then, we create an icon component using styled.Image. This is a component that renders an image from a source file. We give it some width, height, position, top, and left properties to position it on top of the input component. We will use this icon as a button to add new tasks.
Next, we create a list component using styled.ScrollView. This is a component that renders a scrollable view that can contain other components. We give it some margin to create some space around it.
After that, we create the main App component and export it as default. This is the root component of our app that will render all the other components.
Inside the App component, we define two state variables using the useState hook: input and tasks. The input variable holds the current value of the input field, and the tasks variable holds an array of task objects. Each task object has an id, a title, and a done property. The id is a unique identifier for each task, the title is the text of the task, and the done is a boolean value that indicates whether the task is completed or not. We also define two setter functions for each state variable: setInput and setTasks. These functions allow us to update the state variables with new values.
Next, we define two functions to handle the input change and submit actions: handleChange and handleSubmit. The handleChange function takes a value as an argument and updates the input state variable with that value. The handleSubmit function checks if the input value is not empty and creates a new task object with that value as its title. It also generates a random id for the new task and sets its done property to false. Then, it updates the tasks state variable by

Step 3: Create a custom Task component that will display each todo item and handle the editing and deleting actions

In this step, we will create a custom Task component that will render each todo item in our list. We will also add some functionality to edit, delete, and mark the tasks as done. To do this, we need to create a new file called Task.js in the components folder and add the following code:


// Import React and useState hook

import React, { useState } from "react";

// Import styled-components

import styled from "styled-components/native";

// Import icons from react-native-vector-icons

import { AntDesign, Feather } from "@expo/vector-icons";

// Create a container component using styled-components

const Container = styled.View`
  flex-direction: row;

  align-items: center;

  background-color: #fff;

  padding: 15px;

  margin-bottom: 20px;

  border-radius: 10px;
`;

// Create a text component using styled-components

const Text = styled.Text`
  font-size: 18px;

  margin-left: 15px;

  flex: 1;
`;

// Create an input component using styled-components

const Input = styled.TextInput`
  font-size: 18px;

  margin-left: 15px;

  flex: 1;
`;

// Create an icon container component using styled-components

const IconContainer = styled.TouchableOpacity`
  width: 30px;

  height: 30px;

  align-items: center;

  justify-content: center;
`;

// Create the Task component and export it as default

export default function Task({ task }) {
  // Define the state for the editing mode

  const [editing, setEditing] = useState(false);

  // Define the state for the edited title

  const [title, setTitle] = useState(task.title);

  // Define a function to handle the edit action

  const handleEdit = () => {
    // Toggle the editing mode

    setEditing(!editing);

    // Update the title with the edited value

    setTitle(title);

    // TODO: Save the edited task to the local storage
  };

  // Define a function to handle the input change

  const handleChange = (value) => {
    // Update the title state variable with the input value

    setTitle(value);
  };

  // Define a function to handle the delete action

  const handleDelete = () => {
    // TODO: Delete the task from the local storage and update the tasks state variable in the App component

    alert("Delete " + task.title);
  };

  // Define a function to handle the done action

  const handleDone = () => {
    // TODO: Toggle the done property of the task in the local storage and update the tasks state variable in the App component

    alert("Done " + task.title);
  };

  return (
    // Render the container component and pass the task id as a key prop

    <Container key={task.id}>
      <IconContainer onPress={handleDone}>
        <AntDesign
          name={task.done ? "checkcircle" : "checkcircleo"}
          size={24}
          color="#55BCF6"
        />
      </IconContainer>
      {editing ? (
        <Input value={title} onChangeText={handleChange} />
      ) : (
        <Text
          style={{ textDecorationLine: task.done ? "line-through" : "none" }}
        >
          {title}
        </Text>
      )}

      <IconContainer onPress={handleEdit}>
        <Feather name={editing ? "check" : "edit"} size={24} color="#55BCF6" />
      </IconContainer>

      <IconContainer onPress={handleDelete}>
        <AntDesign name="delete" size={24} color="#55BCF6" />
      </IconContainer>
    </Container>
  );
}

Let's break down what this code does:

First, we import React and the useState hook from "react". The useState hook allows us to manage the state of our component. We will use it to store the editing mode and the edited title of each task.
Next, we import styled from "styled-components/native". This allows us to create custom components using CSS syntax. We will use it to style our container, text, input, and icon container components.
Then, we import AntDesign and Feather from "@expo/vector-icons". These are two sets of icons that we can use in our app. We will use them to render the check, edit, and delete icons for each task.
After that, we create a container component using styled.View. This is a basic component that renders a view that can contain other components. We give it a flex-direction: row property, which means it will arrange its children horizontally. We also give it an align-items: center property, which means it will align its children vertically in the center. We also give it some background-color, padding, margin-bottom, and border-radius properties to make it look nice.
Next, we create a text component using styled.Text. This is a component that renders some text. We give it a font-size: 18px property, which sets its font size to 18 pixels. We also give it a margin-left: 15px property, which creates some space on the left. We also give it a flex: 1 property, which means it will take up all the remaining space in its parent.
Then, we create an input component using styled.TextInput. This is a component that renders an input field that can accept user input. We give it the same properties as the text component, except for the margin-left property.
Next, we create an icon container component using styled.TouchableOpacity. This is a component that renders a view that can respond to touch events. We give it some width, height, align-items, and justify-content properties to position it as a square with an icon in the center.
After that, we create the Task component and export it as default. This is the custom component that we will use to display each todo item in our list. We pass it the task object as a prop from the App component.
Inside the Task component, we define two state variables using the useState hook: editing and title. The editing variable holds a boolean value that indicates whether the task is in editing mode or not. The title variable holds the current value of the task title. We also define two setter functions for each state variable: setEditing and setTitle. These functions allow us to update the state variables with new values.
Next, we define four functions to handle the edit, delete, done, and input change actions: handleEdit, handleDelete, handleDone, and handleChange. The handleEdit function toggles the editing mode and updates the title with the edited value. The handleDelete function deletes the task from the local storage and updates the tasks state variable in the App component. The handleDone function toggles the done property of the task in the local storage and updates the tasks state variable in the App component. The handleChange function updates the title state variable with the input value.
Finally, we return some JSX code that renders the container component with some icon container components and either a text or an input component depending on the editing mode.

That's how we create a custom Task component that will display each todo item and handle the editing and deleting actions.

Step 4: Use the useState hook to manage the state of the app, such as the list of tasks and the current input value

In this step, we will learn how to use the useState hook to manage the state of our app. The state is the data that changes over time in our app, such as the list of tasks and the current input value. The useState hook is a function that lets us create and update state variables in our functional components.

To use the useState hook, we need to import it from "react" at the top of our file:


import React, { useState } from "react";

Then, we need to call it inside our component and pass it an initial value for our state variable. The useState hook returns an array with two elements: the state variable and a setter function. We can use array destructuring to assign them to some names, like this:


const [state, setState] = useState(initialValue);

The state variable holds the current value of our state, and the setState function allows us to update it with a new value. We can use any name we want for these variables, as long as they are meaningful and consistent.

For example, in our App component, we have two state variables: input and tasks. The input variable holds the current value of the input field, and the tasks variable holds an array of task objects. We initialize them with an empty string and an empty array, respectively:


const [input, setInput] = useState("");

const [tasks, setTasks] = useState([]);

We can use these state variables in our component to render the input field and the list of tasks. For example, we can pass the input value as a prop to the Input component:


<Input value={input} />

We can also map over the tasks array and render a Task component for each item:


{tasks.map((task) => (

<Task key={task.id} task={task} />

))}

To update our state variables, we need to call the setter functions with a new value. For example, in our handleChange function, we update the input state variable with the value that we get from the onChangeText prop of the Input component:


const handleChange = (value) => {

setInput(value);

};

Similarly, in our handleSubmit function, we update the tasks state variable by creating a new task object with the input value as its title and adding it to the beginning of the tasks array:


const handleSubmit = () => {

if (input.length > 0) {

const newTask = {

id: Math.random().toString(),

title: input,

done: false,

};

setTasks([newTask, ...tasks]);

setInput("");

}

};

We can also pass these setter functions as props to other components that need to update our state. For example, we can pass the setTasks function as a prop to the Task component, so that it can delete or mark a task as done:


<Task key={task.id} task={task} setTasks={setTasks} />

That's how we use the useState hook to manage the state of our app. The useState hook allows us to create and update state variables in our functional components without using classes or lifecycle methods. It also ensures that our components re-render when our state changes.

Step 5: Use the useEffect hook to save and load the tasks from the local storage using AsyncStorage

In this step, we will learn how to use the useEffect hook to save and load the tasks from the local storage using AsyncStorage. The useEffect hook is a function that lets us perform side effects in our functional components, such as fetching data, updating the document title, or saving data to the local storage. AsyncStorage is a module that provides us with a simple and asynchronous API to store and retrieve data from the local storage of our device.

To use the useEffect hook, we need to import it from "react" at the top of our file:


import React, { useState, useEffect } from "react";

Then, we need to call it inside our component and pass it a callback function and an optional dependency array. The callback function is where we write our side effect code, and the dependency array is where we specify the variables that our side effect depends on. The useEffect hook will run the callback function after every render of our component, unless we provide a dependency array. If we provide a dependency array, the useEffect hook will only run the callback function when one of the variables in the array changes.

For example, in our App component, we want to save the tasks state variable to the local storage whenever it changes. To do this, we need to use the useEffect hook with a callback function that calls AsyncStorage.setItem with a key and a value. The key is a string that identifies our data, and the value is a string that represents our data. We can use JSON.stringify to convert our tasks array into a string. We also need to pass [tasks] as the dependency array, so that the useEffect hook only runs when tasks changes:


useEffect(() => {

// Save tasks to local storage

AsyncStorage.setItem("tasks", JSON.stringify(tasks));

}, [tasks]);

Similarly, we want to load the tasks state variable from the local storage when our component mounts for the first time. To do this, we need to use another useEffect hook with a callback function that calls AsyncStorage.getItem with a key. The key is the same string that we used to save our data. The AsyncStorage.getItem method returns a promise that resolves with a value or null if no data is found. We can use JSON.parse to convert the value into an array and update our tasks state variable with it. We also need to pass an empty array as the dependency array, so that the useEffect hook only runs once:


useEffect(() => {

// Load tasks from local storage

AsyncStorage.getItem("tasks").then((value) => {

// Check if value is not null

if (value) {

// Parse value into an array and update tasks state variable

setTasks(JSON.parse(value));

}

});

}, []);

To use AsyncStorage, we need to import it from "@react-native-async-storage/async-storage" at the top of our file:


import AsyncStorage from "@react-native-async-storage/async-storage";

We also need to install it as a dependency by running:

npm install @react-native-async-storage/async-storage

That's how we use the useEffect hook to save and load the tasks from the local storage using AsyncStorage. The useEffect hook allows us to perform side effects in our functional components without using classes or lifecycle methods. It also ensures that our side effects are consistent with our state and props. AsyncStorage allows us to store and retrieve data from the local storage of our device in an asynchronous way.

Step 6: Add some styling and icons to make the app look nicer

In this step, we will learn how to add some styling and icons to make our app look nicer. We will use styled-components, a library that lets us write CSS in JavaScript, to style our components. We will also use react-native-vector-icons, a library that provides us with icons for our app.

To use styled-components, we need to install it as a dependency by running:

npm install styled-components

Then, we need to import it from "styled-components/native" at the top of our file:


import styled from "styled-components/native";

To use react-native-vector-icons, we need to install it as a dependency by running:

npm install react-native-vector-icons

Then, we need to link it to our project by running:

expo install @expo/vector-icons

Then, we need to import the icons that we want to use from "@expo/vector-icons" at the top of our file:


import { AntDesign, Feather } from "@expo/vector-icons";

We can use styled-components to create custom components using CSS syntax. For example, we can create a container component using styled.View:


const Container = styled.View`

flex: 1;

background-color: #e8eaed;

`;

We can also use styled-components to style existing components, such as TextInput or Image. For example, we can create an input component using styled.TextInput:


const Input = styled.TextInput`

padding: 15px;

padding-left: 55px;

border-color: #c0c0c0;

border-width: 1px;

border-radius: 60px;

width: 250px;

margin: 20px;

`;

We can use react-native-vector-icons to render icons from different sets, such as AntDesign or Feather. For example, we can render an icon from AntDesign using the AntDesign component:


<AntDesign name="checkcircle" size={24} color="#55BCF6" />

We can also use props such as name, size, and color to customize the icon.

Let's see how we can use these libraries to style our app.

Styling the App component

In the App component, we will style the container, input, icon, and list components.

The container component is a basic component that renders a view that can contain other components. We will give it a flex: 1 property, which means it will take up all the available space in its parent. We will also give it a background-color: #e8eaed property, which sets its background color to a light gray.

The input component is a component that renders an input field that can accept user input. We will give it some padding, border, border-radius, width, and margin properties to make it look nice. We will also give it a padding-left: 55px property, which creates some space for the icon component that we will add later.

The icon component is a component that renders an image from a source file. We will give it some width, height, position, top, and left properties to position it on top of the input component. We will use this icon as a button to add new tasks.

The list component is a component that renders a scrollable view that can contain other components. We will give it some margin to create some space around it.

Here is the code for the App component with styling:


// Import React and useState hook

import React, { useState } from "react";



// Import styled-components

import styled from "styled-components/native";



// Import Task component

import Task from "./components/Task";



// Create a container component using styled-components

const Container = styled.View`

flex: 1;

background-color: #e8eaed;

`;



// Create an input component using styled-components

const Input = styled.TextInput`

padding: 15px;

padding-left: 55px;

border-color: #c0c0c0;

border-width: 1px;

border-radius: 60px;

width: 250px;

margin: 20px;

`;



// Create an icon component using styled-components

const Icon = styled.Image`

width: 30px;

height: 30px;

position: absolute;

top: 35px;

left: 30px;

`;



// Create a list component using styled-components

const List = styled.ScrollView`

margin: 20px;

`;



// Create the main App component

export default function App() {

// Define the state for the input value

const [input, setInput] = useState("");



// Define the state for the list of tasks

const [tasks, setTasks] = useState([]);



// Define a function to handle the input change

const handleChange = (value) => {

setInput(value);

};



// Define a function to handle the submit action

const handleSubmit = () => {

// Check if the input is not empty

if (input.length > 0) {

// Create a new task object

const newTask = {

id: Math.random().toString(),

title: input,

done: false,

};



// Update the list of tasks

setTasks([newTask, ...tasks]);



// Reset the input value

setInput("");

}

};



return (

// Render the container component

<Container>

// Render the input component and pass the input value and change handler as props

<Input

value={input}

onChangeText={handleChange}

placeholder="Enter a task"

onSubmitEditing={handleSubmit}

/>

// Render the icon component and pass the source as a prop

<Icon source={require("./assets/add.png")} />

// Render the list component

<List>

// Map over the tasks array and render a Task component for each item

{tasks.map((task) => (

<Task key={task.id} task={task} />

))}

</List>

</Container>

);

}

Styling the Task component

In the Task component, we will style the container, text, input, and icon container components. We will also use icons from react-native-vector-icons to render the check, edit, and delete icons for each task.

The container component is a basic component that renders a view that can contain other components. We will give it a flex-direction: row property, which means it will arrange its children horizontally. We will also give it an align-items: center property, which means it will align its children vertically in the center. We will also give it some background-color, padding, margin-bottom, and border-radius properties to make it look nice.

The text component is a component that renders some text. We will give it a font-size: 18px property, which sets its font size to 18 pixels. We will also give it a margin-left: 15px property, which creates some space on the left. We will also give it a flex: 1 property, which means it will take up all the remaining space in its parent.

The input component is a component that renders an input field that can accept user input. We will give it the same properties as the text component, except for the margin-left property.

The icon container component is a component that renders a view that can respond to touch events. We will give it some width, height, align-items, and justify-content properties to position it as a square with an icon in the center.

We will use icons from AntDesign and Feather to render the check, edit, and delete icons for each task. We will use props such as name, size, and color to customize the icons.

Here is the code for the Task component with styling and icons:


// Import React and useState hook

import React, { useState } from "react";



// Import styled-components

import styled from "styled-components/native";



// Import icons from react-native-vector-icons

import { AntDesign, Feather } from "@expo/vector-icons";



// Create a container component using styled-components

const Container = styled.View`

flex-direction: row;

align-items: center;

background-color: #fff;

padding: 15px;

margin-bottom: 20px;

border-radius: 10px;

`;



// Create a text component using styled-components

const Text = styled.Text`

font-size: 18px;

margin-left: 15px;

flex: 1;

`;



// Create an input component using styled-components

const Input = styled.TextInput`

font-size: 18px;

margin-left: 15px;

flex: 1;

`;



// Create an icon container component using styled-components

const IconContainer = styled.TouchableOpacity`

width: 30px;

height: 30px;

align-items: center;

justify-content: center;

`;



// Create the Task component and export it as default

export default function Task({ task }) {

// Define the state for the editing mode

const [editing, setEditing] = useState(false);



// Define the state for the edited title

const [title, setTitle] = useState(task.title);



// Define a function to handle the edit action

const handleEdit = () => {

// Toggle the editing mode

setEditing(!editing);

// Update the title with the edited value

setTitle(title);

// TODO: Save the edited task to the local storage

};



// Define a function to handle the input change

const handleChange = (value) => {

// Update the title state variable

The project structure for the todo list app using React Native is as follows:

The root folder of the project is called TodoList, which contains some configuration files and folders generated by Expo, such as app.json, package.json, node_modules, etc.
The src folder contains the source code of our app, which consists of two files: App.js and Task.js. App.js is the main file that renders the app component, which contains the input field and the list of tasks. Task.js is the file that defines the task component, which displays each todo item and handles the editing and deleting actions.
The assets folder contains the image files that we use in our app, such as add.png, which is the icon for adding new tasks.
The components folder contains the custom components that we create using styled-components, such as Container, Input, Icon, List, Text, and IconContainer. These components are used to style our app and make it look nicer.

Here is a diagram that shows the project structure:


TodoList
├── assets
│ └── favicon.png
├── src
│ └── Task.js
├── App.js
├── app.json
├── package.json
└── node_modules

I hope this helps you understand the project structure of our app. If you have any questions or feedback, please let me know in the comments below.

You're very welcome! I'm glad you enjoyed reading my articles and learned something new. I appreciate your feedback and support. Thank you for being a loyal reader of my blog. 😊

If you want to read more of my articles, you can follow me. You can also follow me on Twitter and Instagram to get the latest updates on my work. I hope to see you again soon! 🙌

Firebase Express React Nodejs (FERN stack) Chating Application | (PWA) Full Stack application (tutorial part 1)

Nitesh Kumar — Sun, 23 Jan 2022 14:50:43 +0000

What is FERN Stack?

FERN Stack is a Collection of Technology used to build an application it contain Firebase, ExpressJs, ReactJs and Nodejs. In this application we are going to use firebase as database and for authentication servise . ExpressJs for backend server and ReactJs for Frontend.
We will also use Heroku for hosting our WEB APP.

About our Project

.
we are going to build a Chat application with end-to-end encryption. This application can be installed on android devise like native app that's the power of PWA. Here is the demo of what we are going to build.

So this is the app we are going to build this app exactly look like as show in the above images. for the complete sourse code check the github repositry . you can also check my github account for more such projects.

What's in this part (Part 1)?

In this Part we will setup our environment for FERN Stack, and create file structure of our app. we will also build our homepage. you can download all the images/icon and resourse from the github repo.

Download NodeJs.

First of all we need nodjs installed on our pc. you can download it from https://nodejs.org/en/download/ download LTS version

If you go any error in installation please leave a comment i will reach you as soon as possible.
Project Setup.

Create a directory and open a terminal inside the directory .
run the following command to create your react app.

npx create-react-app message-frontend --template cra-template-pwa

Here message-frontend is the name of application you can choose any name of your choise.

open the current directory in the code editor i am going to use VS-Code .
Note:- open the directory containig folder message-forntend and not the message-frontend folder itself.

This will look something like this

Now open Terminal and run command

npm init -y

this will initialize a nodejs prject outside our app the idea is to setup backend in the parent folder of our react frontend now your project look's something like this

add this two lines in the script tag of package.json of root folder

Create a file named index.js in root of the project.
Create a file name .env for writing environment variables

Now let's install some packages using yarn but before that we need to install yarn using npm. yarn and npm are both the package manager for nodejs but yarn is more optimized so we are going to use yarn you can use npm all the command used with yarn can also be used with npm.

use command's

npm install -g yarn
yarn add express express-session firebase-admin dotenv
now your file structure looks like this

if you got package-lock.json file then delete it . this can happen if you used npm command but if you are planning to use npm then don't delete it.

your package.json file is updated after the command you run check these linese are added inside dependencies .

add following code inside your index.js file

const dotenv = require("dotenv");
const express = require("express");
const session = require("express-session");
const app = express();
dotenv.config()
const port = process.env.PORT || 8081;
app.use(express.json());
app.use(
    session({
        secret: process.env.serverSession_secret, //Read's value from .env file 
        resave: false,
        saveUninitialized: true,
        cookie: { expires: new Date(253402300000000) }
    })
);

app.listen(port, () => {
    console.log(`App listening on http://localhost:${port} !`);
});

1.First line import's dotenv the packages help us to read value from .env file used to set environment variables

next two liens import express and express-session package used to make server and handel server session respectively.
Then we initialize our express app in the next line.
then we have configured dotenv in the next line
After that we have added port number which reads from .env file if none is given it use 8081 as default port to run the server
Then we have added middle-ware's express.json() and session().
express.json() parse the request body to json format and session middle ware used to handle session .

Add this line in your .env file here the environment variables are set in the form of key-value pair
like thie key=value .

serverSession_secret=my_secret_key_genereted_using_some_Hash_function

here serverSession_secret is the key and my_secret_key_genereted_using_some_Hash_function
is teh value here the value is suppose to be secrete so you can choose any secret value and don't push this .env file to the git repositry you can move the file ./message-frontend/.gitignore to the root of the
Before moving

After Moving

and add the .env file to .gitignore file like this:

by doing this git will ignore .env file .

Note:- Read full Article here