DEV Community: Malik Idrees

Syncing Data in Near Real-Time: Integrate DynamoDB and OpenSearch

Malik Idrees — Sat, 16 Nov 2024 07:43:26 +0000

Syncing Data in Near Real-Time: Integrate DynamoDB and OpenSearch

Synchronizing data between DynamoDB and OpenSearch can yield incredible performance for fast searches and complex queries on structured, nested data. In this article, we’ll cover an architecture that facilitates near real-time data synchronization from DynamoDB to OpenSearch using a single-table design. We’ll explore how this setup enhances search functionality, optimizes costs, and supports complex, nested data updates.

This architecture is built on AWS DynamoDB, using its single-table design for efficient data storage, with OpenSearch integration to handle fast, scalable searches across complex data structures.

Why Use Single Table Design and OpenSearch Together?

DynamoDB and OpenSearch serve distinct purposes. While DynamoDB provides cost-efficient, fast storage and retrieval of data, OpenSearch is optimized for search operations. By using a single-table design in DynamoDB, we organize related entities under a single partition, improving efficiency and scalability. This design also simplifies the syncing process, as DynamoDB and OpenSearch are synchronized based on DynamoDB Streams.

The primary use cases for this integration include:

Near Real-Time Syncing: Reflecting changes from DynamoDB to OpenSearch with minimal latency.
Efficient Handling of Array and Nested Structures: Structuring data in OpenSearch to accommodate nested and array-based data stored in DynamoDB, without unnecessary overwrites.
Optimized Search Performance: Using OpenSearch for fast searches on complex, nested, and array-based data with minimal impact on DynamoDB performance.

System Design Overview: Key Components

Our system design leverages several AWS services to ensure data is consistently and accurately synchronized. Below, we outline each component’s role, along with key aspects of the single-table DynamoDB design and how data is transformed for OpenSearch compatibility.

Data Model (Single Table) Overview

In a single-table design, related entities share a common partition, with each row differentiated by sort keys. Here’s an example setup for a logistics management system:

This table allows for efficient querying by PK, retrieving all related entities, such as order details and items, under a single partition.

Architecture Flow

Here’s a high-level view of how the system processes data updates:

DynamoDB Streams: Captures changes to DynamoDB records and triggers an AWS Lambda function.
Lambda Event Processor:
The Lambda function processes each stream event through the BaseEntityProcessor class, which maps DynamoDB’s single-table structure to OpenSearch’s flat document structure.
This transformation ensures each Order or Shipment is stored as a single document in OpenSearch, accommodating array-based fields such as items under a unified document.
OpenSearch Service:
OpenSearch stores order items, shipments, and customers in a flat document structure for faster query performance, enabling complex queries on nested data, such as orderItems.

The diagram below illustrates the flow of data from DynamoDB to OpenSearch via AWS Lambda:

Detailed Component Breakdown

DynamoDB Stream and Lambda Event Processing **DynamoDB Streams notify the system whenever there’s a data change (insert, update, or delete). The Lambda function processes each event individually, with the **BaseEntityProcessor mapping DynamoDB records to OpenSearch fields:

Array Transformation: In DynamoDB, arrays like items are stored as separate rows. In OpenSearch, they are transformed into a single document structure where all items fall under orderItems.
Data Syncing: When an item is added or removed from items in DynamoDB, the entire array is updated in OpenSearch, ensuring it reflects the latest state.

OpenSearch Bulk and Partial Updates

To efficiently sync large data sets, we use OpenSearch’s bulk API for batch updates. Here’s how the OpenSearch service processes updates:

Flat Document Structure: Each Order **document in OpenSearch contains a complete array of **orderItems. When any item in DynamoDB’s items row is modified, OpenSearch is updated to reflect the full set of items under orderItems.
Handling Nested Updates: Information like shipment is stored within specific sections (e.g., shipmentInfo in OpenSearch). Updates to these nested fields are applied directly to their respective sections, preserving document structure and avoiding overwrites of unrelated data.

Implementation and Code Structure

This project’s file structure is organized for efficient management of different entities, event processing, and OpenSearch operations. Here’s an outline of the key directories and files:

📦stream
 ┣ 📂handlers
 ┃ ┣ 📜StreamBatchHandler.ts
 ┣ 📂processors
 ┃ ┣ 📂entity-processors
 ┃ ┃ ┣ 📜OrderEntityProcessor.ts
 ┃ ┃ ┗ 📜UserEntityProcessor.ts
 ┃ ┣ 📂order-processors
 ┃ ┃ ┗ 📜ShipmentProcessor.ts
 ┃ ┣ BaseEntityProcessor.ts
 ┃ ┣ BatchProcessor.ts
 ┃ ┣ EntityProcessorFactory.ts
 ┃ ┣ EventProcessor.ts
 ┣ 📂services
 ┃ ┣ 📜OpenSearchBulkService.ts
 ┣ 📂utils
 ┃ ┗ 📜Logger.ts
 ┣ 📜README.md
 ┣ 📜event.json
 ┣ 📜index.ts

Each directory plays a specific role:

handlers: Contains Lambda functions to process DynamoDB streams.
processors: Contains BaseEntityProcessor, defining generic methods, abstract functions, and shared variables for various entities. Key processors in entity-processors extend BaseEntityProcessor:
OrderEntityProcessor.ts processes core order details, including nested attributes and array-based structures like items.
UserEntityProcessor.ts handles user-related data processing.

The order-processors subfolder provides specialized processors, such as ShipmentProcessor.ts, that handle shipment details, which are called by OrderEntityProcessor for deeper, order-specific transformations for OpenSearch.

Optimizing DynamoDB and OpenSearch Sync for Real-World Applications

Some optimization tips to keep in mind when implementing this system in production:

Use Cached Index Checks: Caching index checks improves system efficiency, as checking for an index only happens once per entity, reducing load on OpenSearch.
Consider Retry Mechanisms: Implement retry logic in OpenSearch operations to handle intermittent network failures or throttling.
Optimized Partial Updates: With targeted updates on nested structures like orderItems by unique IDs, the system avoids full overwrites in OpenSearch. This method keeps updates focused and minimizes data transfer, making syncing more efficient.

Conclusion

This architecture demonstrates how integrating DynamoDB (single-table design) with OpenSearch enables scalable, near real-time data synchronization. Using a single-table structure in DynamoDB optimizes data organization and retrieval, minimizing duplicated data while centralizing related entities within a single partition. OpenSearch’s document model complements this by supporting flexible, fast searches on large, complex datasets.

With a reliable syncing mechanism, this system handles nested and array-based data, ensuring that all changes in DynamoDB are immediately accessible for search and analytics via OpenSearch. This solution is broadly applicable across e-commerce, logistics, and other high-demand industries.
GitHub - idrsdev/dynamo-opensearch-sync

Agile Board: A Trello-like API in NestJS with Unit and e2e Testing

Malik Idrees — Wed, 06 Sep 2023 19:53:04 +0000

🚀 Agile Board: Simplify Project Management with Ease!

Introducing Agile Board, a Trello-like API powered by Node.js and NestJS. 🌟

Streamline your project management, enhance team collaboration, and effortlessly track tasks with our user-friendly API. Here's what you can do:

🔹 Create Custom Workspaces and Boards: Tailor your workspaces and boards to match your project needs. Flexibility at its finest.

🔹 Effortless Task Management: Add, update, and track tasks across multiple boards and workspaces.

🔹 Seamless Collaboration: Collaborate seamlessly with team members by adding comments to tasks. Keep everyone in the loop.

🔹 Robust Security: Implemented password hashing and precise permission control at the backend to ensure your information remains safe.

Your insights and suggestions are welcomed!

🧬 Postgres and TypeOrm: For streamlined database interactions.

🧬 Testing: Unit and end-to-end testing for one of the modules showcases the power of testing.

🧬 Global Database Setup and Teardown: Effortlessly manage your database for E2E testing—customizable to your exact needs.

🧬 Dynamic Config Module: Seamlessly switch between configurations for normal operations and testing.

Explore Agile Board now on GitHub, and don't hesitate to share your valuable feedback.
Note: Documentation preview is available, but you'll need to set it up using the provided .env.example for usage.

You can view the API documentation here

idrsdev.github.io

idrsdev / agile-board

Bring all your tasks, teams, and tools together in one centralized platform! Open to contributions⭐ Raise a PR⚡! You can view API Docs Here

A progressive Node.js framework for building efficient and scalable server-side applications.

Description

Nest framework TypeScript starter repository.

Installation

$ yarn install

Running the app

# development
$ yarn run start

# watch mode
$ yarn run start:dev

# production mode
$ yarn run start:prod

Test

# unit tests
$ yarn run test

# e2e tests
$ yarn run test:e2e

# test coverage
$ yarn run test:cov

Support

Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please read more here.

Stay in touch

Author - Kamil Myśliwiec
Website - https://nestjs.com
Twitter - @nestframework

License

Nest is MIT licensed.

View on GitHub

Building a Memory Sharing API with Node.js, MongoDB, and Docker

Malik Idrees — Sat, 14 Jan 2023 21:31:31 +0000

Introduction

The Memory App is a web application that enables users to create and share memories with others. The app is built using JavaScript language, MongoDB for the database, and follows the MVC (Model-View-Controller) architecture. In this blog post, we will discuss the project structure of the Memory App, and explain how to install and run the app via Docker.

Project Structure

The Memory App has a well-organized project structure that includes several important files and directories. The following is a brief description of each directory:

The app.js file serves as the entry point for the application.
The config directory contains the db.js file, which sets up the database connection.
The controllers directory includes files that handle the logic for different routes, such as commentController.js and memoryController.js.
The middleware directory includes files that handle authentication and error handling, such as authMiddleware.js and errorMiddleware.js.
The models directory includes files that define the schema for different data types, such as memoryModel.js and userModel.js.
The routes directory includes files that define the various API endpoints for the app, such as memoryRoutes.js and userRoutes.js.
The services directory includes files that handle the business logic for different features, such as memoryServices.js and userServices.js.
The utils directory includes files that handle utility functions, such as uploadImage.js and sendMail.js.
The validators directory includes files that handle input validation, such as memoryValidator.js and userValidator.js.

Docker Installation

Docker is a containerization platform that enables developers to package their applications and dependencies together in a portable container. This allows for consistent and reproducible environments across different development, testing, and production environments. The Memory App can be easily installed and run using Docker.

Before installing the Memory App, make sure that Docker is installed on your system. You can download the Docker Desktop for Windows or Mac, or install the Docker Engine for Linux.

Once Docker is installed, navigate to the root directory of the Memory App in your terminal. The app is configured to be run using Docker Compose, which is a tool for defining and running multi-container Docker applications. The app's Docker Compose configuration is defined in the file docker-compose.yml.

To start the app, run the command docker-compose up in the terminal. This command will start the app's containers and make the app available at http://localhost:5000/api/memory.

To stop the app and remove the containers, run the command docker-compose down.

To run the app in production mode, use the command docker-compose -f docker-compose.yml -f docker-compose.prod.yml up. This will make the app available at http://localhost/api/memory.

You can pass an additional flag -d to the command to keep the containers running in the background.

It is also possible to override the default settings of the compose file using a separate override file by running the command docker-compose -f docker-compose.yml -f docker-compose.override.yml up. docker-compose up automatically applies this if we name the file docker-compose.override.yml.

In production mode, the environment variables need to be set in the production environment. We could create a separate .env file for production and provide it inside the docker-compose.prod file. We could also containerize a MongoDB database.

idrsdev / memoryapp

API for a social media application where user can post, share, view, comment and like memories.

Installation

Locally

Install Dependencies

$ npm install

$ cp .env.example .env

set these environment variables

Run

npm run dev (:5000)

Docker

$ docker compose up
Available at http://localhost:5000/api/memory

To stop and remove containers
$ docker compose down

To run in production mode
$ docker compose -f docker-compose.yml -f docker-compose.prod.yml up
Available at http://localhost/api/memory

You can pass an additional flag -d to keep it running in background

API Docs

BaseURL : http://localhost:5000/api

Open Endpoints

Open endpoints require no Authentication.

Login POST /user/login/

Endpoints that require Authentication

Closed endpoints require a valid Token to be included in the header of the request. A Token can be acquired from the Login view above.

Memory related

Endpoints for viewing and manipulating the Memories.

Create Memory:…

View on GitHub

Dockerizing a React App

Malik Idrees — Sat, 16 Jul 2022 14:02:00 +0000

Let's do it

We are going to create a MERN Stack boilerplate using docker which can serve as a base to create other apps as well.

A quick note: react is ready to go in production. but backend (nodejs) could be improved further. So you could also focus only on react!

Feel free to comment if you have optimitized nodejs API's using pm2 etc.

Now let's create our project.

project
└───backend
          - index.js
          - .env
└───frontend

First we are going to create our backend and frontend and then we will move on to dockerize them.

Lets setup our backend first.

$ cd backend
$ npm init
If you want to skip these questions
$ npm init -y

It createspackage.json. The package.json file holds some basic information about your application as well as metadata about your app. Add inside package.json add:(enables ES 6 modules, u can use import syntax)

"type": "module",

Let's install express server.
$ npm i express
$ npm i dotenv

Replace .env with below:

NODE_ENV = development
PORT = 5000

Replace index.js with below code

import express from 'express'
import dotenv from 'dotenv'

dotenv.config()

const app = express()

app.get('/', (req, res) => {
    res.send('API is running')
})

const PORT = process.env.PORT || 5000

app.listen(PORT, () =>
    console.log(`
Server running in ${process.env.NODE_ENV} mode on ${PORT} Port`)
)

Test if our app is running
$ node backend/index.js It should be available at http://localhost:5000/

Lets do frontend now.

Make sure you are inside frontend folder. Let's creates a react app. But hot reloading does not work well with react-scripts @5.0.0 (At the time of writing)
$ cd frontend
$ npx create-react-app ./
So for now you could use this.
$ cd root
$ npx create-react-app ./client --scripts-version 4.0.3
$ cd client
$ npm run start our app should be available at https://localhost:3000/

Now we are going to dockerize our app.

Docker file `Server`

$ cd backend
Create a .dockerignore file.

node_modules
Dockerfile
.gitignore
.git

Create a Dockerfile without any extension.

FROM node:16.14.0-slim

#create app directory inside docker
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install

#Bundle source code
COPY . .
EXPOSE 5000

CMD ["npm","run","dev"]

let's build our docker image `Server`

$ docker build -t backend .
To run our container
$ docker run -p port 4000:5000 backend
To run with hot reloading use this command and remove container at the end.
$ docker run --rm -it -p 5000:5000 -v ${PWD}:/usr/src/app --name app-backend backend
available at https://localhost:4000/

Docker file `frontend`

$ cd frontend
Create a .dockerignore file.

node_modules
Dockerfile
.gitignore
.git

Create Dockerfilewithout any extension

FROM node:16.14.0-slim
# Working directory
WORKDIR /user/src/frontend
# Install dependencies
COPY package*.json ./
RUN npm install
# Copy local files to frontend folder
COPY . .
EXPOSE 3000

CMD ["npm","start"]

Create Dockerfile.prod file for production builds

FROM node:16.14.0-slim AS build-stage
ENV NODE_ENV production
# Add a work directory
WORKDIR /user/src/frontend
# ENV PATH /app/node_modules/.bin:$PATH
# Cache and Install dependencies
COPY package*.json ./
# COPY yarn.lock .
RUN npm install --production
# Copy app files
COPY . .
# Build the app

RUN npm run build

FROM nginx:1.21.6-alpine
ENV NODE_ENV production
# Copy built assets from builder
COPY --from=build-stage /user/src/frontend/build /usr/share/nginx/html
# Add your nginx.conf
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
# Expose port
EXPOSE 80
# Start nginx
CMD ["nginx", "-g", "daemon off;"]

Docker Compose

Instead of typing those long command through terminal. Compose files allow us to manage container easily.

Create docker-compose.yml file
$ cd root

version: '3'
services:
  frontend:
    container_name: react-dev
    build:
      context: ./frontend
    ports:
      - 3000:3000
    env_file: ./frontend/.env
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./frontend:/user/src/frontend
      - /user/src/frontend/node_modules

Create docker-compose.prod.yml file for production builds(React only)
$ cd root

version: '3'
services:
  frontend:
    container_name: react-prod
    image: react-prod
    build:
      context: ./frontend
      dockerfile: Dockerfile.prod
    ports:
      - 1337:80
    env_file: ./frontend/.env

Some useful Docker commands

Show all containers in running state.
$ docker ps or newer version $ docker container ls
To show all running and exited container
$ docker ps -a or $ docker container --all
Run a container bash session.
$ docker exec -it <container name> bash
Run a image bash session.
$ docker run -it <image name> bash
$ docker run -it backend bash then$ node -v prints node version.
To pull base images before using them e.g.
$ docker pull <image name>
$ docker pull node:16.14.0-slim
Run your image (backend) as a container(app-backend).
$ docker run -p 2000:5000 --name app-backend backend
To start existing container.
$ docker container start <container name>
To stop an existing container.
$ docker stop <container name>
To remove a container.
$ docker rm <container name>
To stop all container
$ docker stop $(docker ps -a -q)
To remove all container
$ docker rm $(docker ps -a -q)

idrsdev / mern-template-docker

MERN Stack template

We are going to create a MERN Stack boilerplate which can be extended for other use cases. Run it locally or on Docker.

project
└───backend
└───frontend
└───.env

Lets setup our backend first.

$ cd backend
$ npm init
If you want to skip these questions
$ npm init -y

It creates package.json. The package.json file holds some basic information about your application as well as metadata about your app. Add inside package.json add:

"type": "module",

Let's install express server $ npm i express
$ npm i dotenv

Replace .env with below:

NODE_ENV = development
PORT = 5000

Replace index.js with below code

import express from 'express'
import dotenv from 'dotenv'
dotenv.config()

const app = express()

app.get('/', (req, res) => {
    res.send('API is running')
}

…

View on GitHub

ps: somehow the changes in react part is missing from repo. Create a pull request!

LinkedIn: LinkedIn
GitHub: Link ⭐
Fiverr: imidrees ✨
Thanks for reading!

Responsive sidebar using React and Tailwind with dark mode and react-router

Malik Idrees — Sun, 15 May 2022 00:19:00 +0000

I was searching for a simple layout with responsive sidebar and support for dark mode built with react and tailwind. And I decided to create one myself.

Supports light and dark mode
Responsive Side Bar
Mobile Menu
Live Website

No third party libraries used!

Feel free to contribute and extend it in any suitable way :)

idrsdev / react-sidebar-tailwind-darkmode

Responsive sidebar built with React and Tailwind. Support for dark mode, react-router and Mobile Menu. Feel free to contribute⭐

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can't go back!

If you…

View on GitHub

Connect with me :)
LinkedIn ✨

A Simple chat app using Socket.io with NodeJS and ReactJS

Malik Idrees — Sun, 12 Dec 2021 21:16:52 +0000

I have used:

NodeJS with Express for server side logic
ReactJS to build a simple client app
Socket.io for real-time connection between both sides

Live Preview
Connect from two different tabs or two different PC's to test it out

You can use it to understand how sockets work in react with a bit of touch from Material UI(An unoptimized overkill).

I am a full stack developer and i created this small app to understand working of sockets. Here is another resource to learn about socket by JavaScript Mastery.
Source code
Stay Tuned for more coming soon!

What's next?

A detailed article about creating API's using Node.js and MongoDb along with In-memory testing and optional GitHub actions to test and deploy to Heroku whenever I have free time.

GitHub: Link ⭐
Thanks for reading!

Client Side React Application using GitHub GraphQL API - RepoFinder

Malik Idrees — Mon, 18 Oct 2021 00:12:04 +0000

hello everyone!

Ever thought to display GitHub projects dynamically in Your portfolio ?

Today, we will interact with GitHub GraphQL API using react.
Provide a username and get related information. Simple right? let's see!

Here's How the Final App Looks like: RIP Picture Qualtiy!

Motivation

I recently created My Portfolio website with plain HTML , CSS, JavaScript Which also have a GitHub Action To compress these files!. But I wanted to fetch my GitHub info and my projects dynamically so that's how I created a small App which does exactly that!

Tech Used

React
GraphQL
Apollo Client
Semantic UI React

Features

Fetch User details
Fetch Top Repositories of the user

Components

Easy to reuse and small ones!
Navbar - Title and A logo
RepoCard - Displays repo Image and details
UserCard - User Card with Image and details
RepoCardList - Lists All Repositories

idrsdev / Repo-Finder

Written for Dev.to Article. It shows how to Get your repos and render them anywhere like your portfolio. You could get Any user repositories by providing username Leave a star⭐

Env Variables

Create a .env file in then root and add the following

REACT_APP_GITHUB_ACCESS_TOKEN = "YOUR_GITHUB_ACCESS_TOKEN"

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

…

View on GitHub

Defining Queries:

I have defined two queries: GET_USER_INFO, GET_USER_REPOS

const GET_USER_INFO = gql`
//Insert User Query
`
const GET_USER_REPOS= gql`query{} `

Here's how GET_USER_INFO looks like

const GET_USER_INFO = gql`
   query GET_USER_INFO($login: String!) {
      user(login: $login) {
         id
         avatarUrl
         name
         login
         bio
         followers(first: 6) {
            totalCount
         }
         following(first: 6) {
            totalCount
         }
         location
      }
   }
`

Fetch data using useQuery:

   //Important ! You must use a variable named login  
   //#Required By Schema I guess!
   const { loading, error, data } = useQuery(GET_USER_INFO, {
      variables: { login },
   })

Time ?

I worked on and off for around 3/4 days! I wanted to start off with REST API but I wanted to try something different
For day 1: I experiment with GitHub GraphQL API, created a react app
For day 2: Started with frontend and Created a working app
For day 3: Code refactor and breakdown into small components
For day 4: here I am for past few hours
Don't Worry Just Go through getting started guides! There is nothing fancy or complex!

For starters here's how you would get the repos, try it here:
GitHub GraphQL API PlayGround

query{
  search(type: REPOSITORY, query: "react", last: 50) {
    repos: edges {
      repo: node {
        ... on Repository {
          name
          url
        }
      }
    }
  }
}

Possible Features / Modifications

You could simply use fetch/Axios instead of using Apollo client. Which I myself may do in future!

For Non-Personal use, First get user token by GitHub-Login!
Then experiment with features like Starring your favorite repository.
GitHub GraphQL API documentation is simple & great.

Here's how to perform queries using Axios

let query=`{
        query{
            rateLimit{
                remaining
            }
        }
    }`
    axios.post(`https://api.github.com/graphql`,{
        query:query
    },{
        headers:{
            'Authorization':`bearer ${token}`
        }
    })

If you like the post. Give It A Thumbs Up! 💙

DEV Community: Malik Idrees

Syncing Data in Near Real-Time: Integrate DynamoDB and OpenSearch

Syncing Data in Near Real-Time: Integrate DynamoDB and OpenSearch

Agile Board: A Trello-like API in NestJS with Unit and e2e Testing

idrsdev / agile-board

Bring all your tasks, teams, and tools together in one centralized platform! Open to contributions⭐ Raise a PR⚡! You can view API Docs Here

Description

Installation

Running the app

Test

Support

Stay in touch

License

Building a Memory Sharing API with Node.js, MongoDB, and Docker

Introduction

Project Structure

Docker Installation

idrsdev / memoryapp

API for a social media application where user can post, share, view, comment and like memories.

Table of Contents

Installation

Locally

Install Dependencies

Run

Docker

API Docs

Open Endpoints

Endpoints that require Authentication

Memory related

Dockerizing a React App

Let's do it

Lets setup our backend first.

Lets do frontend now.

Docker file Server

let's build our docker image Server

Docker file frontend

Docker Compose

Some useful Docker commands

idrsdev / mern-template-docker

MERN Stack template

Lets setup our backend first.

Responsive sidebar using React and Tailwind with dark mode and react-router

idrsdev / react-sidebar-tailwind-darkmode

Responsive sidebar built with React and Tailwind. Support for dark mode, react-router and Mobile Menu. Feel free to contribute⭐

Getting Started with Create React App

Available Scripts

npm start

npm test

npm run build

npm run eject

A Simple chat app using Socket.io with NodeJS and ReactJS

I have used:

What's next?

Client Side React Application using GitHub GraphQL API - RepoFinder

hello everyone!

Motivation

Tech Used

Features

Components

idrsdev / Repo-Finder

Written for Dev.to Article. It shows how to Get your repos and render them anywhere like your portfolio. You could get Any user repositories by providing username Leave a star⭐

Env Variables

Getting Started with Create React App

Available Scripts

npm start

npm test

npm run build

npm run eject

Defining Queries:

Fetch data using useQuery:

Time ?

Possible Features / Modifications

Docker file `Server`

let's build our docker image `Server`

Docker file `frontend`

`npm start`

`npm test`

`npm run build`

`npm run eject`

`npm start`

`npm test`

`npm run build`

`npm run eject`