DEV Community: Sujay Kundu

Vaachak - AI companion for Elderly people with Eyesight issues to read anything

Sujay Kundu — Sun, 18 Oct 2026 17:21:09 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

Built Vaachak - An AI companion app for Elderly people who has blurry visions and eyesight issues for the love of reading

Target Audience :

People who loves reading, but cant read, because of eyesight issues.
People who are elder 60+ years age with eyesight issues, this app helps them read any paper be it Bill, Letter, NewsPaper etc.
People who are suffering from blindeness
People who dont want to read english, and want to understand a article to be read in their own regional language.
People who want to convert a pic to a readable memory.

The Mobile App:

It all starts with a Eye Test to understand user's eyesight scores.

Web App for Admin:

This is a FastAPI based server

Admin panel to test the apis for Sarvam Models, Gemma Models, BackBoard for Memory, and local Ollama serve apis

Using Gemma Model https://ai.google.dev/gemma/docs/core/gemma_on_gemini_api

What does it do ?

Presentation -
https://docs.google.com/presentation/d/11WM5la02aXDbEHukz5thxk6YvKBBeb10_8SE1YJAPOo/edit?usp=sharing

A smart, voice-controlled Android app that helps visually impaired people navigate their surroundings safely. It acts as an intelligent assistant that can "see" objects, warn about obstacles, and guide the user

Offline first -> Web App (built using Nextjs + App router) + Android App (Kotlin + Android Studio) that uses open source gemma models (gemma-26b) locally in case, if the user does not have internet, he can run the web app and the server using Docker locally

🌟 What It Can Do

🧭 Easy Navigation

🎧 3D Sound Feedback: The app plays sounds to let you know exactly where objects are around you (left, right, near, or far).
📍 Object Memory: The app remembers where things are. If you walk past a cup, you can ask "Where is my cup?" and it will tell you.
🔍 Find Mode: Ask the app to "Find a door" or "Find a chair," and it will guide you to it using sound and vibrations.

🧠 Smart Vision

📷 Instant Object Detection: Uses the phone's camera to instantly spot obstacles and things in your path, without needing the internet.
🖼️ Scene Description: Ask "Describe what you see," and the app will tell you exactly what the room looks like.
📖 Read Text (OCR): Point the camera at a sign or book, and it will read the text out loud.
😊 Facial Recognition: Recognizes people you know when they are nearby and tells you their names.

🛡️ Safety First

🎙️ Voice Control: Control everything using just your voice. No need to look at the screen.
🚨 Fall SOS: If the phone detects you have fallen, it automatically sends an emergency SOS message to your contacts.
🔦 Manual & Auto-Flashlight: You can turn the flashlight on and off yourself with a voice command, or let the app do it automatically in the dark so the camera can keep seeing clearly.

🗣️ Voice Commands to Try

🗣️ "Describe what you see"
🗣️ "Find a chair"
🗣️ "Where is my cup?"
🗣️ "Read"
🗣️ "Turn off flashlight"
🗣️ "Switch to spatial" (for 3D sound)
🗣️ "Start eye test" (for visual acuity calibration)

🏗️ How It Works (Diagrams)

1. The Big Picture

graph TD
    A[Camera Feed] --> B(Vision Processor)
    B --> C{Offline AI}
    C -->|Fast Detection| D[3D Sound]
    C -->|Guidance| E[Vibration & Navigation]
    C -->|Remember Objects| F[(Memory Database)]

    A -->|Ask a Question| G{Cloud AI}
    G -->|Detailed Answer| H[Voice Response]

    I[Phone Sensors] --> J[Fall Detection]
    I --> F

2. How 3D Sound Works

graph LR
    A[See an Object] --> B(Get its Location)
    B -->|Left/Right| C(Sound Direction)
    B -->|Size| D(Sound Volume)
    B -->|Up/Down| E(Sound Pitch)
    C --> F((Your Earphones))
    D --> F
    E --> F

3. Remembering Objects

sequenceDiagram
    participant Camera
    participant AI
    participant Compass
    participant Database
    participant User

    Camera->>AI: Sees a 'Cup'
    Compass->>Database: Saves direction (e.g. East)
    AI->>Database: Saves 'Cup' at East
    Note over Camera,User: User turns around
    User->>Camera: "Where is my cup?"
    Camera->>Database: Look for 'Cup'
    Database-->>Camera: It's at East
    Compass-->>Camera: You are facing West
    Camera->>User: "The cup is directly behind you."

4. Emergency Fall Detection

graph TD
    A[Phone Moves Fast] --> B{Did it drop?}
    B -- Yes --> C[Fall Detected!]
    C --> D{Did it hit the ground?}
    D -- Yes --> E[Start Emergency]
    E --> F[Say: 'Fall Detected']
    E --> G[Send SOS Message]
    G --> H((Emergency Contacts))

Demo

Youtube - https://youtu.be/aJADQ3tX5s4

Web App - https://vaachak-ebon.vercel.app/
Backend API - https://vaachakfastapibackend.onrender.com/

🛠️ Technology Used

Part	Tech
Language	Kotlin
UI	Jetpack Compose
Offline AI	TensorFlow Lite, Google ML Kit
Online AI	Vaachak Render API (Gemma, Sarvam, Backboard, Supabase)
Database	Room (SQLite)

Code

sujaykundu777 / Vaachak

An offline-first reading companion for elders with weak eyesight

Vaachak — An Assistive App for the Visually Impaired

As part of Hacktoberfest 2026 x Kraftcrowd Hackathon we are building a Offline first Web App + Android App that uses open source gemma models locally

🌟 What It Can Do

🧭 Easy Navigation

🎧 3D Sound Feedback: The app plays sounds to let you know exactly where objects are around you (left, right, near, or far).
📍 Object Memory: The app remembers where things are. If you walk past a cup, you can ask "Where is my cup?" and it will tell you.
🔍 Find Mode: Ask the app to "Find…

View on GitHub

How I Built It

OpenCode -> For Coding
OpenDesign -> For Design Generation
Ollama API -> For using local Gemma Models locally models

Models used while building this:

Deepseek V3
Qwen 3.8
Gemma 4

MCP Servers Used:

https://devrelay.com
https://github.com/github/github-mcp-server

Why Does Open Innovation Matter?

My Agent Session

My First User

Prize Categories

🏆 Hackathon Tracks & Gemma Integration

As part of Hacktoberfest 2026 x Kraftcrowd Hackathon, Vaachak is built as an offline-first assistive Android application leveraging open-source Gemma & NVIDIA AI models.

Best Use of Gemma Model

G2. Voice-First AI Interaction: Integrate voice-based intelligence that lets visually impaired users interact naturally through speech, evaluate acuity, and receive spoken audio responses.
G3. Multimodal AI Intelligence: Combines real-time camera imagery, optical character recognition (OCR), spatial 3D audio, and spoken voice inputs to understand surroundings and guide users.
G5. Open Innovation with Gemma 4: Powered by NVIDIA AI / Gemma vision & language models for clinical visual acuity scoring and real-time scene understanding.

Best Use of Backboard

Using Backboard for storing the conversations happening

Resources

GymDays - your gym buddy, makes plans for you, so you dont have to

Sujay Kundu — Mon, 12 Oct 2026 04:28:11 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

Hi ! working on it

Demo

Code

How I Built It

Why Does Open Innovation Matter?

My Agent Session

Prize Categories

Alpahaar: Helping my mom in her home-cooked food/snacks business

Sujay Kundu — Mon, 05 Oct 2026 06:13:40 +0000

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

Hacktoberfest Weekend Challenge: Build for a Friend Submission

Website

https://alpahaar-menu-builder.vercel.app/login

Code

https://github.com/sujaykundu777/alpahaar-menu-builder

What I Built

So the idea is we will build a web app for my Mom, to help her generating messages for her food business which she shares the message in her marketing channels like whatsapp groups to promote that days menu to attract customers, should be very simple and will be using AI to generate those messages based on her selection,
So typical scenario is lets say today is 4th October, Saturday, so usually she drops a messages in a foodies whatsapp group, where all the foodie people are there for our society, Usually the message will be dropped on saturday so that by Sunday 11am people will order those food items through messaging us on whatsapp and paying. So usually we make Samosas, Cutlets, Aloo chops and Bread Pakodas on Sunday, but our menu keeps changing every weekend, sometimes we add packaged mixtures,sev and chiwda, or sweets too like bundiya, or balusai , so the menus is not fixed and then deliver them for the orders by 6pm on Sunday Evening to the customers, and the amount she cooks food depends on the order that is received from the customers.
So usually the message is dynamic based on the items and it looks something like this

Message Example 1:

Hello everyone 👋
Tommorow 26th July, we are making hot and crispy samosas and aloo bondas, so if any one wants to order you can preorder today.
Kal 26th July ke liye hum garam garam crispy samosa aur aloo bonda (chops) bana rahe hai , toh kisi ko kal ke liye order karna ho toh aaj hi booking kar lijiye
samosa price

1-14 pcs - Rs 25/pc
14+ pcs (Samosa party offer)
23/pc - Please order before 2 days
aloo bonda price - 25 / pc
Pickup tommorow 6pm onwards at e401, gr lavender apartments. please prepay to confirm your order vy sharing payment screenshot
payment - gpay / upi at 6362307567
Thankyou
Alpahaar foods
Message Example 2:
might have items changed like
samosa price
1-14 pcs - Rs 25/pc
14+ pcs (Samosa party offer)
23/pc - Please order before 2 days
Cutlets - 30/ pc
Mixture - 250 gm - Rs. 84

So the items change but message is similar, since she has audience which understands English and Hindi and she is almost 50 years old, we want to build a flexible easy to use app for her which she uses it for her making this process easier for her business

How I Built It

Open-weight models used: Gemma4:latest, Gemma4:12b models with Ollama

Agent Harnesses - I used OpenCode and Hermes with OpenRouter APIs

For Prototyping and Design - Open Design

Partner Tech used - Elevenlabs and Gemini APIs

Hosting - Vercel for the code deployments

Coding - Ghostty and VSCode

Created a doc here for the process i used - https://docs.google.com/document/d/1FqyaB1qjHrU8u7XgiFSJBh9s459tRccBOfiyLeYPPds/edit?usp=sharing

Why Does Open Innovation Matter?

Its important that we use open innovation, because everyother company is trying to build products that has some restrictions and a advantage for the good features, but to use them it takes lot of money to pay.

With open innovation its easy to make a change for this, it helps in sharing the community with non-restricted and free to use, with free to use mode, where the tech is accessible to all and helps everyone to try the product and if they like it also add features to them, or raise issues in the process. The feedback loop is amazing.

My Agent Session

I used Devrelay for the MCP servers

Prize Categories

Best Gemma usage
Best Elevenlabs Usage

Create a Portfolio/Blog/Website using Devlopr

Sujay Kundu — Sat, 15 May 2021 15:21:41 +0000

Hello everyone ! 🤠

In this article, I would like to share on how you can create a website easily using Devlopr- A Jekyll built for Developers - devlopr-jekyll (built by me !), and you can host it for free using Github Pages or Netlify by using only 5 simple steps. Since devlopr is Open Source. One can easily contribute in improving it too :)

Devlopr Jekyll Theme (Demo) - https://devlopr.netlify.com

Step 1. Fork the repo - click here

Step 2. Use your-github-username.github.io as the new repo ( Replace your-github-username with yours). Remember if you use the name other than your-github-username.github.io , your blog will be built using gh-pages branch.

Step 3. Clone the repo Locally :

Using browser, go to your repo and copy the clone url :

 $ git clone https://github.com/yourusername/yourusername.github.io
 $ cd yourusername.github.io
 $ code .

Step 4. Edit _config.yml file (Configuration Settings)

Updating Config Settings :

This is a sample config settings, replace the values for your Blog (accordingly):

_config.yml


title: My Blog  # Title of the Blog goes here
subtitle: Blog built using devlopr  # Sub-title of the Blog goes here
description: >- # Description goes here 

url: "" # the base hostname & protocol for your site, e.g. https://example.github.io or https://example.com
baseurl: "" # the subpath of your site, e.g. /blog 

urls:     # Navigation Links
    - text: About
      url: /about
    - text: Blog
      url: /blog
    - text: Gallery
      url: /gallery
    - text: Shop
      url: /shop
    - text: Contact
      url : /contact


# Author Details
author_logo: profile.png  # Author Logo
author: John Doe # Author Name
author_bio: Hi, my name is John Doe. # Author Bio
author_email: "mail@johndoe.com"  # Author Email
author_location: India # Author Location
author_website_url: "https://johndoe.com" # Author Website URL
typewrite-text: Hi, Welcome to my Blog # Homepage Type Text 
author_work_experiences: # Experiences  (Companies you have worked with)
            - company_name: Google
              company_logo: google.png
              company_url: https://google.com
              designation: Software Engineer
              description: Worked on various Google Products
              visibility: true
            - company_name: Microsoft
              company_logo: microsoft.png
              company_url: https://microsoft.com
              designation: Azure Developer
              description: Worked on various Azure Cloud Products
              visibility: true
author_education_details: # Education Details Goes here 
              - college_logo: mit.png
                college_name: MIT
                college_url: https://mit.org
                college_degree: CS Engineer
                description: Bachelor of Technology
                visibility: true
author_project_details: # Project Details Goes Here
              - project_thumbnail: gamershub.png
                project_title: Gamers Hub
                project_description: A Platform built for Gamers and Game Devs
                project_url: https://gamershub.in
                visibility: true
              - project_thumbnail: hack4r.PNG
                project_title: Hack4r
                project_description: A Platform built for Hackers and Penetration Testers
                project_url: https://hack4r.com
                visibility: true

# social links
twitter_username: johndoe
github_username:  johndoe 
facebook_username: johndoe
linkedin_username: johndoe
behance_username: johndoe
instagram_username: johndoe
medium_username: johndoe
telegram_username: johndoe
dribbble_username: johndoe
flickr_username: johndoe

#for comments ( we got Disqus and Hyvor Commenting, uncomment the one you want to use )
disqus_shortname: john-doe 
hyvor_talk_website_id: 244 

# wakatime username (for coding activity tracking)
wakatime_username: johndoe

# mailchimp embedded form url (newsletter):
mailchimp_form_url: https://johndoe.us10.list-manage.com/subscribe/post?u=asfsaagd

# formspree (contact form)
formspree_email: johndoe@gmail.com

# syntax highlighter
markdown: kramdown
highlighter: rouge
permalink: pretty

# Choose what to show ( can be true or false)
show_author_work_experiences: true
show_author_education_details: true
show_author_project_details: true

# pagination of posts
paginate: 4
per_page: 4
paginate_path: "/blog/page/:num/"

# minify
# compress_html:
#   clippings: all
#   comments: ["<!-- ", " -->"]
#   endings: all
#   ignore:
#     envs: ['development']

# Archives
# jekyll-archives:
#   enabled:
#     - categories
#   layout: archive
#   permalinks:
#     category: '/category/:name/'

# Shop   (Snipcart settings)
collections: 
 - products

# Gallery
defaults:
  -
    scope:
      path: "gallery"
    values:
      permalink: /:path/:basename:output_ext

# Build settings
plugins:
  - jekyll-paginate
  - jekyll-gist
  - jekyll-seo-tag
  - jekyll-sitemap
  - jekyll-menus


# Exclude from processing.
# The following items will not be processed, by default.
# Any item listed under the `exclude:` key here will be automatically added to
# the internal "default list".
#
# Excluded items can be processed by explicitly listing the directories or
# their entries' file path in the `include:` list.
#
exclude:
  - .sass-cache/
  - .jekyll-cache/
  - gemfiles/
  - Gemfile
  - Gemfile.lock
  - node_modules/
  - vendor/bundle/
  - vendor/cache/
  - vendor/gems/
  - vendor/ruby/

destination: ./build  # setting build as default

Once you have done all the changes, its time to push the changes - commit to Github with config setting changes :

 $ git add .
 $ git commit -m "my new blog using devlopr-jekyll"
 $ git push origin master

Step 5 - Enable Github Pages for Deployment

Visit your Github Repo settings ! Enable master branch as Github Pages Branch :

Your new blog will be ready in few minutes ! You can visit your site using [https://yourusername.github.io].

Guide - Managing Website Locally - Install the development requirements:

Set up local development environment

We need ruby and bundler to build our site locally. After installation check if its working:

For ruby :

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]

For bundler :

$ gem install bundler
$ bundler -v
Bundler version 2.1.4

Add jekyll :

$ bundle add jekyll

This command will add the Jekyll gem to our Gemfile and install it to the ./vendor/bundle/ folder.

You can check the jekyll version

$ bundle exec jekyll -v
jekyll 4.0.0

Step 6. Install the gem dependencies by running the following command

$ bundle update
$ bundle install

Step 7. Serve the site locally by running the following command below:

$ bundle exec jekyll serve --watch

or you can also serve using :

$ jekyll serve

Visit http://localhost:4000 for development server

Creating Blog Posts

Start populating your blog by adding your .md files in _posts. devlopr-jekyll already has a few examples.

YAML Post Example:

---
layout: post
title: "Sample Post"
author: Sujay Kundu
date: '2019-05-21 14:35:23 +0530'
category:
        - jekyll
summary: This is the summary for the sample post
thumbnail: sample.png
---

Hi ! This is sample post.

YAML Page Example:

---
layout: page
title: Sample Page
menus: header
permalink: /sample-page/
---

Hi ! This is sample page.

Editing stylesheet - Customizations

You’ll only work with a single file to edit/add theme style: assets/css/main.scss.

Deploy your Changes

Once happy with your blog changes. Push your changes to master branch and in few minutes your Blog is up and running !

Javascript : Concatenating Arrays

Sujay Kundu — Thu, 13 Feb 2020 16:12:28 +0000

There are 3 methods to concatenate arrays using Javascript :

Method 1: using Spread Operator (...)

Assume you have two arrays of numbers, and you want to join the two arrays :

const array1 = [1,2,3];
const array2 = [3,4,5];

// join the two arrays using spread operater '...'

const resultArray = [...array1, ...array2] 

console.log(resultArray);

//  O/P : [1,2,3,3,4,5]

Don't forget, one can do this too:

const array1 = [1,2,3];
const array2 = [...array1, 4];

console.log(array2);

// O/P : [1,2,3,4]

Now what if we want to concatenate three arrays ?

const array1 = [1,2,3]
const array2 = [4,5,6]
const array3 = [7,8,9]

const resultArray = [...array1, ...array2, ...array3];

console.log(resultArray);

// O/P : [1, 2, 3, 4, 5, 6, 7, 8, 9]

Now what will happen if we try to concatenate two different arrays with different data types ?


let array1 = "letters";
let array2 =  [1, 2, 3, 4];

let resultArray = [...array1, ...array2];

console.log(resultArray );

// O/P: ["l", "e", "t", "t", "e", "r", "s", 1, 2, 3, 4]

But why ? why not ["letters", 1, 2, 3 ,4]. This happens because if we use spread our string, it will split the word in to seperate letters. You can probably use the method 2 for that.

Lets now see on how we can do concat operation using array objects :


const array1 =  [ 
                   {
                     "id": 1,
                     "name": "John",
                    },
                    {
                      "id": 2,
                      "name": "Ron"
                    }
                 ];

const array2  = [ 
                   {
                     "id": 3,
                     "name": "Harry",
                    },
                    {
                      "id": 4,
                      "name": "Hermione"
                    }
                 ]

const resultArray = [...array1, ...array2];

console.log(resultArray);

Method 2: Using Array.prototype.concat()

Let's use the same example, but this time using concat() method. This method does not change the existing arrays, but instead returns a new array.


const array1 = [1,2,3];
const array2 = [3,4,5];

// join the two arrays using concat()

const resultArray = array1.concat(array2);

console.log(resultArray);

// O/P : [1, 2, 3, 3, 4, 5]

But what If we want to concatenate three arrays ?

const array1 = [1,2,3];
const array2 = [4,5,6];
const array3 = [7,8,9];

const resultArray = array1.concat(array2, array3);

console.log(resultArray);

// O/P : [1,2,3,4,5,6,7,8,9]

now let's check for concatenating arrays of two different types:



const array1 = [1,2,3,4];
const array2 = 'letters';

const resultArray = array1.concat(array2);

console.log(resultArray);

// O/P : [1, 2, 3, 4, "letters"]

Method 3: using Array.prototype.push()

when using push, its important to remember that it won't create a new array, and change existing array data. so use this by keeping this in mind.

Using Spread and push()


const array1 = [1,2,3];
const array2 = [4,5,6];

const resultArray = array1.push(...array2);

// when you use push, it returns the LENGTH of the combined array

console.log(resultArray);  // 6

console.log(array1); // [1, 2, 3, 4, 5, 6]

console.log(array2); // [4, 5, 6]

Using forEach and push() :


const array1 = [1,2,3];
const array2 = [4,5,6];

const resultArray = array2.forEach(item => array1.push(item));

console.log(array1); // [1,2,3,4,5,6]

Using for and push() :


const array1 = [1,2,3];
const array2 = [4,5,6];

for(let x=0; x<array2.length; x++) { 
     array1.push(array2[x]);
} 

console.log(array1); // 1,2,3,4,5,6

Zipper Merge ( Merging two sorted arrays )

Let's think of a scenario, where we have two arrays (both sorted) like :

const array1 = [1, 3, 5];
const array2 = [2, 4, 6];

and the output we want is also sorted ! something like :

const resultArray = [1, 2, 3, 4, 5, 6];

This can be solved easily using spread operator :


// function to return zipped array
function zip(array1, array2) {

      // merge the two sorted arrays 
      let result = [...array1, ...array2];  // [1, 3, 5, 2, 4, 6]

      // sort the result array again 
      return result.sort((a,b) => a-b);  // [1, 2, 3, 4, 5, 6]
}


const array1 = [1, 3, 5];
const array2 = [2, 4, 6];

const resultArray = zip(array1, array2);

console.log(resultArray); // [1, 2, 3, 4, 5, 6]

Unique Array from Two Arrays

Now let's think of a scenario, where you have two arrays (with some elements in common ) like:


const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

and the output we want is a new array with unique elements only :


const resultArray = [1, 2, 3, 4, 5, 6];

So what should we do ? We can create a unique array using spread operator and sets like this:


const array1 = [1, 2, 3, 4];
const array2 = [3, 4, 5, 6];

const mergedArray = [...array1, ...array2];

console.log(mergedArray) // [1, 2, 3, 4, 3, 4, 5, 6]

const resultArray = [...new Set(mergedArray)]; 

console.log(resultArray) // [1, 2, 3, 4, 5, 6]

Utilizing the power of Docker while building MERN Apps using mern-docker

Sujay Kundu — Sun, 09 Feb 2020 14:20:28 +0000

In this article we will learn to build a MERN (Mongodb, Express, React, Nodejs) app using Docker and Docker Compose for both development and production build.

The Source Code of the project is open source and any contributions are most welcome - mern-docker. You can just clone or fork the repo to get started in seconds ! 🚀

1. Creating our App (Folder Structure)

Let's create a new directory for our App.

mkdir myapp

We will be separating our server with client, Let's create our server folder:

cd myapp
mkdir server

Now lets switch to building our Server first :

cd server

2. Building Express Server

Let's now create our Node App inside the server directory. I am using VS Code as editor

Let's initialize our app using:

npm init

It will ask some questions about you app, just hit enter to save the defaults, to create a package.json file.

Installing Dependencies

Since we will be using express and mongodb, lets install the required dependencies :

npm i -S express

and our development dependencies :

npm i -D nodemon

Since we will be using Nodemon to watch our changes, lets add a command to run our server using nodemon in our package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js"
  }

Creating our server

Lets now create our Express server

Create a new file server.js :


// server.js
const express = require('express');
const app = express();
const PORT = 8080;

app.get('/', (req, res) => {
    res.send("Hello World ! ");
});

app.listen(PORT, function () {
    console.log(`Server Listening on ${PORT}`);
});

Cool ! We created a server, which will be listening to PORT 8080. Let's run it :

npm run dev // runs the app in nodemon (watch) mode for any changes to reflect

It should run the app :

Server Listening on 8080

So now, if we visit http://localhost:8080 in our browser, it should show

Hello World !

Connecting to Mongodb

Cool ! Let's now create our mongodb database connection :

We need to install mongoose a ODM for mongodb and dotenv to use environment variables,

npm install -S mongoose dotenv

Create a new folder "src" where we will host our rest of our files, Inside it create a database.js

const mongoose = require('mongoose');
const dotenv = require('dotenv');
dotenv.config();

// mongoose options
const options = {
  useNewUrlParser: true,
  useFindAndModify: false,
  useCreateIndex: true,
  useUnifiedTopology: true,
  autoIndex: false,
  poolSize: 10,
  bufferMaxEntries: 0
};

// mongodb environment variables
const {
    MONGO_HOSTNAME,
    MONGO_DB,
    MONGO_PORT
} = process.env;

const dbConnectionURL = {
    'LOCALURL': `mongodb://${MONGO_HOSTNAME}:${MONGO_PORT}/${MONGO_DB}`
};
mongoose.connect(dbConnectionURL.LOCALURL, options);
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'Mongodb Connection Error:' + dbConnectionURL.LOCALURL));
db.once('open', () => {
     // we're connected !
     console.log('Mongodb Connection Successful');
});

We need to create a .env file to store our database varibles (in the server directory)

MONGO_HOSTNAME=localhost
MONGO_DB=myapp_db
MONGO_PORT=27017

Also to use the connection in our express app , call the database connection inside server.js

// Our DB Configuration
require('./src/database');

Now if we run our app, (remember - your local mongodb should be available) :

npm run dev

Your App should be running at PORT 8080 with Mongodb connection at PORT 27017

Creating our Post Model

Before we create our first api endpoint, we need a model for our Blog Posts. Simply say what a blog post will have - title, description, author etc. Let's describe that in our Post Model

Create a new folder models inside src folder and create a new file post.model.js

// Post.model.js
const mongoose = require('mongoose');
const postSchema = new mongoose.Schema({
   title: {
       type: String,
       required: true
   },
   body: {
       type: String
   },
   author: {
       type: String
   }
});

const Post = mongoose.model("Post", postSchema);
module.exports = Post;

Great ! We defined a model for our Post document. Post model has title, body and author all of them are string. Enough for now :)

Creating our Blog API Routes

Let's create our routes : Create a new folder routes inside src folder. Inside it create a file post.router.js

const express = require('express');
const postRouter = express.Router();
const Post = require('../models/post.model'); // post model

/* Get all Posts */
postRouter.get('/', (req, res, next) => {
    Post.find({} , function(err, result){
        if(err){
            res.status(400).send({
                'success': false,
                'error': err.message
            });
        }
        res.status(200).send({
            'success': true,
            'data': result
        });
    });
});

/* Get Single Post */
postRouter.get("/:post_id", (req, res, next) => {
    Post.findById(req.params.post_id, function (err, result) {
        if(err){
             res.status(400).send({
               success: false,
               error: err.message
             });
        }
        res.status(200).send({
            success: true,
            data: result
        });
     });
});


/* Add Single Post */
postRouter.post("/", (req, res, next) => {
  let newPost = {
    title: req.body.title,
    body: req.body.body,
    author: req.body.author
  };
   Post.create(newPost, function(err, result) {
    if(err){
        res.status(400).send({
          success: false,
          error: err.message
        });
    }
      res.status(201).send({
        success: true,
        data: result,
        message: "Post created successfully"
      });
  });
});

/* Edit Single Post */
postRouter.patch("/:post_id", (req, res, next) => {
  let fieldsToUpdate = req.body;
  Post.findByIdAndUpdate(req.params.post_id,{ $set: fieldsToUpdate }, { new: true },  function (err, result) {
      if(err){
          res.status(400).send({
             success: false,
            error: err.message
            });
      }
      res.status(200).send({
        success: true,
        data: result,
        message: "Post updated successfully"
        });
  });
});

/* Delete Single Post */
postRouter.delete("/:post_id", (req, res, next) => {
  Post.findByIdAndDelete(req.params.post_id, function(err, result){
      if(err){
        res.status(400).send({
          success: false,
          error: err.message
        });
      }
    res.status(200).send({
      success: true,
      data: result,
      message: "Post deleted successfully"
    });
  });
});

module.exports = postRouter;

Now let's now use this route in our app. In server.js add the below code :

we need to install body-parser module :

npm install -S body-parser

const bodyParser = require('body-parser');

// Routes
const postRouter = require('./src/routes/post.router');

app.use(
  bodyParser.urlencoded({
    extended: true
  })
);
app.use(bodyParser.json());

app.use('/posts', postRouter);

Great ! All set, let's run our server and check if everything works fine :

npm run dev

Now lets open Postman app to test our API's that we created :

    GET -      /         - Get all posts
    POST -     /         - Create a new Post
    GET -      /:post_id - Get a Single Post using Post Id
    PATCH -    /:post_id - Edit a Single Post using Post Id
    DELETE -   /:post_id - Delete a single Post using Post Id

Great ! All our API's are working fine !

Dockerize Express and Mongodb

Add Dockerfile to the root folder :


#  Dockerfile for Node Express Backend api (development)

FROM node:10.16-alpine

# ARG NODE_ENV=development

# Create App Directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install Dependencies
COPY package*.json ./

RUN npm ci

# Copy app source code
COPY . .

# Exports
EXPOSE 8080

CMD ["npm","start"]

We can simply build our express app with this command

docker build -t node-app .

But.. this will only run our express app, but not together with MongoDb. That’s why we need a docker-compose file. 🐳

Now create another file called docker-compose.yml and paste this:

version: '3.7'

services:
    webapp-server:
      build:
        context: .
        dockerfile: Dockerfile
      image: myapp-server-img
      container_name: myapp-node-express
      volumes:
       - .:/usr/src/app
       - /usr/src/app/node_modules
      ports:
        - "8080:8080"
      depends_on:
        - mongo
      env_file: .env
      environment:
        - MONGO_HOSTNAME=$MONGO_HOSTNAME
        - MONGO_PORT=$MONGO_PORT
        - MONGO_DB=$MONGO_DB
    mongo:
      image: mongo
      container_name: myapp-mongodb
      ports:
        - "27017:27017"

Also we need to change our connection url from localhost to mongo !

Edit your MONGO_HOSTNAME=mongo in .env file

Let's run our App using docker-compose :

Build the images :

docker-compose build

Run the containers :

docker-compose up

Great ! Everything Works :D

3. Building React Client

Let's now build and setup our frontend for our App, Initialize a react-app using npx.

npx create-react-app client

This will create a react-app inside a folder named "client". Let's run the app :

yarn start

This will start a development server at port 3000. You can open browser at http://localhost:3000

Great ! we got our development server up, lets now dockerize our react app

Let's now create our Dockerfile


# Dockerfile for client

# Stage 1: Build react client
FROM node:10.16-alpine

# Working directory be app
WORKDIR /usr/app

COPY package*.json ./

# Install dependencies
RUN yarn install

# copy local files to app folder
COPY . .

EXPOSE 3000

CMD ["yarn","start"]

Let's start building our container using command :

docker build -t myapp-react:v1 .

To verify everything is fine, we run our newly built container using command:

docker run -p 3000:3000 myapp-react:v1

Lets now visit http://localhost:3000 . Great our client is

Okay ! We got our independent containers both for client and server, but they are not currently interacting each other. Let's solve this problem by using docker-compose

4. Connecting Client and Server using Docker Compose

To do this, we need to tell our server about our client !

In our /server/server.js add this :

// will redirect all the non-api routes to react frontend
router.use(function(req, res) {
    res.sendFile(path.join(__dirname, '../client','build','index.html'));
});

And we need to tell our React Client to proxy the API requests at port 8080 (where our server is running):

In our /client/package.json add this :

 "proxy": "http://server:8080"

Cool, let's create a new docker-compose.yml at the root of our project, which will interact with individual Dockerfile's of the client and server and create a network between this containers:

Add this code in docker-compose.dev.yml

version: '3.7'

services:
  server:
    build:
      context: ./server
      dockerfile: Dockerfile
    image: myapp-server
    container_name: myapp-node-server
    command: /usr/src/app/node_modules/.bin/nodemon server.js
    volumes:
      - ./server/:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - "8080:8080"
    depends_on:
      - mongo
    env_file: ./server/.env
    environment:
      - NODE_ENV=development
    networks:
      - app-network
  mongo:
    image: mongo
    volumes:
      - data-volume:/data/db
    ports:
      - "27017:27017"
    networks:
      - app-network
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    image: myapp-client
    container_name: myapp-react-client
    command: yarn start
    volumes:
      - ./client/:/usr/app
      - /usr/app/node_modules
    depends_on:
      - server
    ports:
      - "3000:3000"
    networks:
      - app-network

networks:
    app-network:
        driver: bridge

volumes:
    data-volume:
    node_modules:
    web-root:
      driver: local

What this will do is, it will run all the services parallely, our express backend will run at port 8080, mongodb at 27017 , and react client at port 3000. Let's test it by running the following command in our project root directory :

Now to run docker-compose. We need to create a new file "docker-compose.yml" where we will copy the contents of the docker-compose.dev.yml . It's a good practice to seperate dev and prod docker-compose.

So copy all the content of docker-compose.dev.yml to docker-compose.yml and run :

docker-compose up --build

By this, the docker-compose.yml that we created inside will only be required/used, if you want to work only on the server independent of the client :D

As you can see, if any changes you do either in server or client, will be reflected instantly (best for development)

Awesome ! We created our Blog App :D , lets now check on how to create a production build for our App.

Production Build

For Production, we will be building our client and use it in our server to serve it. Let's create a new Dockerfile.prd (for production) in the project's root directory :

In our server/server.js add the following to tell express that our react client will be served from the build path :

const CLIENT_BUILD_PATH = path.join(__dirname, "../client/build");

// Static files
app.use(express.static(CLIENT_BUILD_PATH));

// Server React Client
app.get("/", function(req, res) {
  res.sendFile(path.join(CLIENT_BUILD_PATH , "index.html"));
});

Great ! Let's now create a production Dockerfile, which will help in copying the build files from the react client and put it in the client folder of our server, which we will use to serve the app.


# Production Build

# Stage 1: Build react client
FROM node:10.16-alpine as client

# Working directory be app
WORKDIR /usr/app/client/

COPY client/package*.json ./

# Install dependencies
RUN yarn install

# copy local files to app folder
COPY client/ ./

RUN yarn build

# Stage 2 : Build Server

FROM node:10.16-alpine

WORKDIR /usr/src/app/
COPY --from=client /usr/app/client/build/ ./client/build/

WORKDIR /usr/src/app/server/
COPY server/package*.json ./
RUN npm install -qy
COPY server/ ./

ENV PORT 8000

EXPOSE 8000

CMD ["npm", "start"]

This will do all the heavy work of building our server and client, using multi-stage builds.

Let's utilize this multi-stage Dockerfile to use it with Docker Compose to run our App (along with mongodb)
:

Add this code in docker-compose.prd.yml :

version: '3.7'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    # env_file: ./server/.env # TODO - uncomment this to auto-load your .env file!
    environment:
      NODE_ENV: production
    depends_on:
      - mongo
    networks:
      - app-network
  mongo:
    image: mongo
    volumes:
      - data-volume:/data/db
    ports:
      - "27017:27017"
    networks:
      - app-network

networks:
    app-network:
        driver: bridge

volumes:
    data-volume:
    node_modules:
    web-root:
      driver: local

Since, we already have a docker-compose.dev.yml and docker-compose.yml already in the root directory. To run production, we need to copy the docker-compose.prd.yml content and replace the docker-compose.yml content.

docker-compose.yml should now have the same content as of docker-compose.prd.yml

Let's test our Production build by running (removing any orphan containers):

docker-compose up --build --remove-orphans

Lets now visit the url : http://localhost:8080

As you can see by the sign in browser navbar, this will be the production react build. Let's now check whether our API's and DB are working properly or not, Since express is serving react, the api's should be working fine:

That's it ! Our App's Production Build is ready for Deployment :D

The Source Code of the project is open source and any contributions are most welcome - mern-docker. You can just clone or fork the repo to get started in seconds ! 🚀

You can checkout and subscribe to my Blog for more interesting tutorials in JS Ecosystem

DEV Community: Sujay Kundu

Vaachak - AI companion for Elderly people with Eyesight issues to read anything

What I Built

🌟 What It Can Do

🧭 Easy Navigation

🧠 Smart Vision

🛡️ Safety First

🗣️ Voice Commands to Try

🏗️ How It Works (Diagrams)

1. The Big Picture

2. How 3D Sound Works

3. Remembering Objects

4. Emergency Fall Detection

Demo

🛠️ Technology Used

Code

sujaykundu777 / Vaachak

An offline-first reading companion for elders with weak eyesight

Vaachak — An Assistive App for the Visually Impaired

PRESENTATION

DEMO VIDEO

DEMO URL

🌟 What It Can Do

🧭 Easy Navigation

How I Built It

Why Does Open Innovation Matter?

My Agent Session

My First User

Prize Categories

🏆 Hackathon Tracks & Gemma Integration

Best Use of Gemma Model

Best Use of Backboard

Resources

GymDays - your gym buddy, makes plans for you, so you dont have to

What I Built

Demo

Code

How I Built It

Why Does Open Innovation Matter?

My Agent Session

Prize Categories

Alpahaar: Helping my mom in her home-cooked food/snacks business

Website

Code

What I Built

How I Built It

Why Does Open Innovation Matter?

My Agent Session

Prize Categories

Create a Portfolio/Blog/Website using Devlopr

Hello everyone ! 🤠

Updating Config Settings :

Set up local development environment

Creating Blog Posts

YAML Post Example:

YAML Page Example:

Editing stylesheet - Customizations

Deploy your Changes

Javascript : Concatenating Arrays

Method 1: using Spread Operator (...)

Method 2: Using Array.prototype.concat()

Method 3: using Array.prototype.push()

Using for and push() :

Zipper Merge ( Merging two sorted arrays )

Unique Array from Two Arrays

Utilizing the power of Docker while building MERN Apps using mern-docker

1. Creating our App (Folder Structure)

2. Building Express Server

3. Building React Client

4. Connecting Client and Server using Docker Compose

Production Build