DEV Community: Jane49-cloud

Building LifeFast: A Solo Founder's Deep Dive into Fasting App Architecture

Jane49-cloud — Wed, 03 Jun 2026 19:30:29 +0000

There's a specific kind of frustration that comes from using a health app that feels like it was built by engineers who've never actually used it.

The timer shows a number. The number counts down. You earn a badge. That's it.

No context about what's happening inside your body. No sense of progression. No genuine reason to keep going beyond the guilt of breaking a streak. Just a countdown and a badge that means nothing by noon.

That frustration is what made me build LifeFast — a fasting tracker that treats users like intelligent adults who deserve to understand their own biology.

This is the story of how I built it. The technical decisions, the real challenges, the things I got completely wrong, and what I'd do differently. If you're building a health app, a mobile product, or just a solo-founder side project trying to become something real — I hope this saves you some time.

The Stack (And Why I Made These Choices)

Let me get the boring part out of the way first, because the choices here shaped everything downstream.

Frontend: React Native via Expo
Backend: Node.js + Express + TypeScript
Database: PostgreSQL
State management: Redux Toolkit + RTK Query
Build: EAS Build (Expo Application Services)
Email: Resend
Payments: Google Play Billing
Push notifications: Expo Push + custom job queue

I picked React Native over Flutter primarily because I'm a JavaScript developer at heart and the ecosystem felt more familiar. Expo specifically was the right call for a solo founder — the managed workflow gets you from idea to TestFlight equivalent without spending a week configuring native build chains. The EAS Build system in particular is genuinely excellent.

PostgreSQL was a non-negotiable. I've seen enough "just use Firestore" projects hit a wall the moment they needed anything resembling a JOIN, and for a health app with users, fasts, weights, water intake, community posts, and notification jobs all needing to relate to each other — a relational database was the only sane choice.

RTK Query for data fetching was one of the better decisions I made early. The automatic caching, invalidation, and optimistic updates it provides out of the box took a huge amount of complexity off the table on the client side. Pairing it with AsyncStorage for persistence meant the app works properly offline without any heroic effort.

The Hardest Part: Modelling Time

Fasting is fundamentally about time. But time in software is famously treacherous — especially when your users are in 40+ different timezones.

The core data model for a fast looks simple:

CREATE TABLE fasts (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID NOT NULL REFERENCES users(id),
  status VARCHAR(20) NOT NULL DEFAULT 'SCHEDULED',
  timezone VARCHAR(100) NOT NULL,
  start_at TIMESTAMPTZ NOT NULL,
  end_at TIMESTAMPTZ NOT NULL,
  actual_start_at TIMESTAMPTZ,
  actual_end_at TIMESTAMPTZ,
  duration_target_mins INT NOT NULL,
  duration_actual_mins INT,
  ...
);

The trap I nearly fell into: storing times as local timestamps without timezone. I'd seen this mistake in other codebases and nearly made it myself anyway. TIMESTAMPTZ stores everything as UTC internally and lets PostgreSQL handle timezone conversion correctly. Combined with storing the user's timezone string ("Africa/Nairobi", "America/New_York", etc.) — this meant every query, every calculation, every scheduled notification fired at the right local time.

The server runs a cron job every 60 seconds:

setInterval(async () => {
  if (cronRunning) return;
  cronRunning = true;
  try {
    await autoStartDueFasts();
    await processDue();
  } catch (e: any) {
    console.error("[cron] tick error:", e?.message ?? e);
  } finally {
    cronRunning = false;
  }
}, 60_000);

autoStartDueFasts() transitions SCHEDULED fasts to ACTIVE when their start_at passes. processDue() fires push notifications from a job queue. The guard (if (cronRunning) return) prevents overlap on slow ticks — simple, and it works.

The Feature That Changed Everything: Metabolic Stages

This is where LifeFast became a different kind of fasting app.

Most fasting timers show you a percentage. 43%. 68%. 100%. These numbers don't mean anything experientially. What actually happens to your body during a fast follows a predictable, fascinating sequence — and if you show users that instead of just a countdown, everything changes.

I defined fasting stages based on published metabolic research:

Stage	Hours	What's Happening
Fed State	0–3h	Digesting, insulin elevated
Early Fast	3–8h	Glycogen depleting, fat burning begins
Fasting State	8–12h	Insulin low, fat oxidation accelerating
Fat Burning	12–18h	Liver glycogen depleted, ketone production starting
Ketosis	18–24h	Ketones measurable, metabolic switch active
Autophagy	24h+	Cellular self-cleaning in full swing

Each stage has a name, a description, a colour, and a start/end threshold. On the client, I compute which stage the user is in at render time based on elapsed hours:

function getFastingStage(elapsedHours: number): FastingStage {
  const stages = [
    { label: "Fed State", color: "#94a3b8", minHours: 0, maxHours: 3 },
    { label: "Early Fast", color: "#38bdf8", minHours: 3, maxHours: 8 },
    { label: "Fat Burning", color: "#fb923c", minHours: 8, maxHours: 18 },
    { label: "Ketosis", color: "#a78bfa", minHours: 18, maxHours: 24 },
    { label: "Autophagy", color: "#34d399", minHours: 24, maxHours: Infinity },
  ];
  return stages.findLast((s) => elapsedHours >= s.minHours) ?? stages[0];
}

Inside the app's circular timer, the active stage label shows in its colour — a glowing cyan or violet or green dot next to the stage name. Users started messaging me: "I just hit Ketosis for the first time!" — not because I told them to care, but because seeing it named and coloured in real time made it real.

That's the difference between showing someone a number and showing them a story about their own biology.

Building the Community Layer

About two months in, I realised I was building a productivity tool when I should have been building a social one. Fasting is hard in isolation. It's dramatically easier when you're doing it alongside people who understand the challenge.

So I built a full community layer: groups, posts, comments, nested replies, likes, and a moderation system.

The schema is relatively conventional, but a few decisions were non-obvious.

Soft deletes for moderation. When a user reports a post and an admin hides it, the content isn't deleted — it's flagged:

ALTER TABLE community_posts
  ADD COLUMN is_hidden BOOLEAN NOT NULL DEFAULT FALSE,
  ADD COLUMN hidden_reason TEXT,
  ADD COLUMN hidden_by UUID REFERENCES users(id),
  ADD COLUMN hidden_at TIMESTAMPTZ;

This means we can review decisions, reverse them, and maintain an audit trail. Hard deletes felt wrong for a moderation workflow.

Pinned posts per group. The query for listing posts handles pinning cleanly:

ORDER BY p.is_pinned DESC, p.created_at DESC

Two-token sort. Pin always wins; recency breaks ties. Simple and fast.

The notification fan-out problem. When a post in a popular group gets a comment, who gets notified? The author only. When a comment gets a reply, the parent comment's author gets notified. I built a lightweight notification_jobs table and a worker that processes it:

CREATE TABLE notification_jobs (
  id UUID PRIMARY KEY,
  user_id UUID NOT NULL REFERENCES users(id),
  kind VARCHAR(50) NOT NULL,
  scheduled_for TIMESTAMPTZ NOT NULL,
  payload JSONB,
  status VARCHAR(20) DEFAULT 'pending',
  attempts INT DEFAULT 0
);

The worker polls every 60 seconds, picks up pending jobs past their scheduled_for time, calls Expo's push notification API, and marks them as sent or failed. Dead simple, fully auditable, no external queue infrastructure needed at this scale.

The Billing Nightmare

I'm going to be honest: Google Play Billing is the worst API I have ever worked with professionally.

The documentation is spread across three different Google sites that contradict each other. The test environment behaves differently from production in ways that are not documented. The error codes are numerical and the mapping table is buried six pages deep in a section titled "Deprecated APIs".

Here's what eventually worked:

Use the google-play-billing library on the React Native side for purchase flow
On the backend, verify every purchase token against the Google Play Developer API before granting entitlements
Store the raw purchase_token and product_id — you'll need both for future verification and refund handling
Handle ITEM_ALREADY_OWNED (error code 7) gracefully — it means the user purchased on another account or device and is more common than you'd think

The verification endpoint on my backend:

router.post("/billing/google/verify", authenticate, async (req, res) => {
  const { purchaseToken, productId, packageName } = req.body;

  const verified = await verifyGooglePurchase(packageName, productId, purchaseToken);
  if (!verified) return res.status(400).json({ success: false, error: "Invalid purchase" });

  const entitlement = getEntitlementForProduct(productId);
  await billingRepo.recordPurchase({ userId: req.user.id, purchaseToken, productId, entitlement });
  await usersRepo.grantEntitlement(req.user.id, entitlement);

  res.json({ success: true, entitlement });
});

The lesson: never grant entitlements on the client side. Always verify on the server. This is not optional.

Shipping: EAS Build and Deployment

The CI/CD pipeline runs on GitHub Actions:

Push to main triggers the workflow
TypeScript compiles, then the Express app is bundled
SSH into the production DigitalOcean Droplet
Pull latest, rebuild Docker container, swap with zero-downtime restart

For the mobile app, EAS Build handles the actual Android build:

eas build --platform android --profile production

Then submit to Google Play via:

eas submit --platform android

EAS Submit directly uploads the AAB to the Play Store internal track. For a solo founder, this is a genuinely transformative improvement over the old "manually drag an AAB file into the Play Console" workflow.

One lesson I'd pass on: set up your production and staging environments early. I shipped several breaking changes to all users before I separated the two, and the user experience was awful. A staging environment you actually test on is not optional — it's the difference between professionalism and chaos.

What I Got Wrong

Email broadcast timing. I sent an announcement to my users about a new release. I wrote the batch-sending code to fire 50 emails in parallel. I had about 250 users at the time. The email API rate limits at 5 requests per second. You can do the math. Half my users got error responses instead of emails, and the 300ms sequential delay I needed was sitting there in the documentation the whole time.

Over-engineering notifications early. I spent a week building a sophisticated notification scheduling system before I had 50 users. The simpler version — a cron job and a jobs table — does the same job. I could have built it in a day and shipped the features users actually needed instead.

Not adding the progress percentage cap sooner. The fasting percentage can technically exceed 100% if someone continues fasting past their target window. For a while, my timer showed "127%" in a progress circle — which is both mathematically accurate and completely absurd. A one-line fix:

const percentage = Math.min(100, Math.max(0, Math.round(progressRatio * 100)));

Users notice things like this. They form impressions of quality from small details. Fix the small things before they become the big things.

The Product Is Alive

LifeFast is available now on Android.

👉 Download on Google Play
👉 Website: lifefast.online

It's free. It tracks your fasting window in real time, shows you your metabolic stage as you progress, logs your water intake, tracks your weight over time, lets you log progress photos, and connects you with a community of other fasters doing the same work.

I built this without a team, without investors, and without a roadmap handed to me by a product manager. Just a problem I cared about, a stack I understood, and enough stubbornness to keep shipping.

If you're building something similar — a health app, a behaviour-change product, anything where timing and user psychology overlap — feel free to reach out. I'd genuinely enjoy the conversation.

Technical Post-Mortem: Debugging AdMob Impression Leaks in an Expo/Firebase Mobile App

Jane49-cloud — Wed, 20 May 2026 16:26:04 +0000

As a mobile developer, shipping an app to production is only half the battle. The real complications begin when analyzing live telemetry and monetization data.

I recently launched a personal intermittent fasting tracker built on React Native (Expo) and Firebase called LifeFast. The app uses an ad-supported model to offset background hosting and real-time community feed sync costs.

After reviewing my first week of live AdMob metrics, I noticed a major bottleneck in the rendering lifecycle: a severe disconnect between Ad Requests and Actual Impressions.

The Data Log
Total Requests: 1.11K (Strong API connectivity)

Match Rate: 70.03% (AdMob is successfully returning inventory)

Impressions: 345 (The bottleneck)

Out of ~770 successfully returned ad units, less than half are registering as viewed by users.

Breakdown by Ad Unit Lifecycle

Interstitials (eCPM: €1.50 | 44 Impressions) The eCPM here is the highest, but the volume is low.

The Root Cause: The layout logic was attempting to load and display the interstitial simultaneously during screen state transitions. If the user navigates faster than the network request completes, the ad is dropped, resulting in a matched request but zero impressions.

The Fix: Migrating to a pre-loading architecture using ad.load() immediately upon component mount, caching the unit globally, and only executing ad.show() during natural UX breakpoints.

App Open Ads (eCPM: €1.46 | 139 Impressions) The Root Cause: The current trigger relies heavily on a cold app start. If a user backgrounds the app to check a message and resumes their fast tracking, the lifecycle event isn't consistently capturing the background-to-foreground transition.

The Fix: Listening directly to React Native's AppState changes to ensure the ad logic evaluates state changes from background -> active.

Banner Ads (eCPM: €0.21 | 162 Impressions) The Root Cause: Standard fixed-size banners are occasionally clipping outside the viewport on varying Android aspect ratios, firing the request script but failing the viewability requirements.

The Fix: Deprecating fixed widths in favor of Adaptive Banners that dynamically calculate the screen width container before requesting the asset.

Marketing an Independent Project on a $0 Budget
The other engineering challenge is organic discovery. Traditional social platforms have highly aggressive automated spam filters that auto-flag direct Play Store links, making standard community outreach unviable.

To bypass this without a marketing budget, I am currently implementing a code-driven viral loop using react-native-share to let users natively export progress milestones to their personal networks, shifting the acquisition logic directly into the application codebase.

For context on the layout implementation or to see how the live UI handles these ad placements, the application is live on the Google Play Store under LifeFast.

If anyone has optimized the match-to-impression ratio inside an Expo ecosystem, I'd be interested in comparing lifecycle architectures in the comments.

fasting app

Jane49-cloud — Mon, 30 Mar 2026 20:10:57 +0000

I built this app to track fasting + hydration, would love your feedback 🙏
https://play.google.com/store/apps/details?id=com.jane.ndirangu.lifefast

Unlock Your Developer Potential: A Guide to the Best Chrome Extensions

Jane49-cloud — Tue, 05 Sep 2023 18:28:12 +0000

Are you a developer looking to streamline your workflow and enhance your productivity? In today's fast-paced digital world, having the right tools at your fingertips can make all the difference. Fortunately, the Google Chrome browser offers a vast ecosystem of extensions designed to empower developers and simplify their daily tasks. Whether you're a seasoned coder or just starting your journey in the world of web development, this blog is your gateway to discovering some of the best Chrome extensions that can supercharge your efficiency, debug with ease, and elevate your web development game. Join us on this exploration of essential browser extensions that can help you write cleaner code, debug more effectively, and stay on the cutting edge of web development trends. Your coding adventure begins here!

1. Web Developer

The "Web Developer" extension is an invaluable tool for every web developer. With its comprehensive set of features, it transforms your Chrome browser into a powerful web development environment. From inspecting elements, analyzing CSS styles, and debugging JavaScript to testing various screen sizes and checking for broken links, this extension does it all. Its user-friendly interface and quick access toolbar make it effortless to toggle various functionalities on and off, allowing you to focus precisely on what you need. Whether you're fine-tuning the responsiveness of your website, optimizing its performance, or troubleshooting issues, the "Web Developer" extension simplifies the process and helps you craft exceptional web experiences with ease. It's a must-have for any developer striving for pixel-perfect, flawless web development. download here

2. React Developer Tools

The "React Developer Tools" extension is an essential companion for web developers working with the React.js library. This extension provides a deep dive into the inner workings of your React applications, allowing you to inspect and manipulate the component hierarchy with precision. With the "React Developer Tools," you can easily track down state changes, props, and component lifecycles, helping you debug and optimize your React applications effectively. It empowers you to visualize the component tree, view the current state and props of each component, and even time-travel through component updates to understand how your UI evolves over time. Whether you're a seasoned React developer or just getting started, this extension is an indispensable asset for building, debugging, and fine-tuning React applications, ensuring you create responsive and performant user interfaces with confidence.download

3.Redux DevTools

The "Redux DevTools" extension is an indispensable tool for developers working with Redux, a popular state management library for JavaScript applications. This extension significantly simplifies the debugging and analysis of Redux-powered applications. With "Redux DevTools," you gain the ability to inspect the entire Redux store, track state changes, and even time-travel through actions, allowing you to understand how your application's state evolves.

This extension offers a clear and intuitive interface that visualizes your application's state, actions, and their effects, making it easier to identify and resolve issues. Additionally, you can adjust the state, dispatch custom actions, and replay actions to see their impact on your application in real-time. Whether you're building a small-scale application or a complex web app, "Redux DevTools" is an indispensable companion that streamlines the development and debugging process, helping you create robust and maintainable Redux-based applications with confidence.
download

4.Wappalyzer - Technology profiler

Wappalyzer is a powerful technology profiler and web browser extension that provides invaluable insights into the technologies used by websites. It allows web developers, designers, and digital marketers to quickly identify the underlying technologies that power a website. Whether you're curious about a site's content management system (CMS), e-commerce platform, web server, or even the specific JavaScript libraries it utilizes, Wappalyzer delivers this information with ease.

This extension simplifies the process of competitive analysis, enabling you to stay up-to-date with the latest trends in web technology and gain a competitive edge. It's a valuable resource for web professionals looking to better understand the digital landscape and make informed decisions about technology choices, optimizations, and strategies. With Wappalyzer, you can uncover the technological secrets behind your favorite websites and gain inspiration for your own projects, making it an indispensable tool for anyone involved in web development or digital marketing. download

How it works

Go to any website
Click the icon for a list of identified technologies
Click on a technology or category for more insights

5. ColorZilla

I used to see nice colors on other websites but could not quite get it right until I "met" ColorZilla 😂.
ColorZilla is a versatile browser extension commonly used by web designers and developers. This tool simplifies the process of identifying, copying, and analyzing colors on websites. With ColorZilla installed, users can easily pick colors from web pages, create color palettes, and even generate CSS code for the selected colors.

One of the standout features of ColorZilla is its "Eyedropper" tool, which allows you to precisely select any color on a web page and instantly obtain its hexadecimal or RGB value. This is particularly useful for matching colors or ensuring consistency in design projects. ColorZilla also offers a color history feature, making it easy to revisit previously selected colors.

Additionally, ColorZilla provides a gradient generator, CSS gradient editor, and other color manipulation tools, making it a valuable asset for web professionals working on everything from user interfaces to graphic design. Whether you're a seasoned designer or a beginner, ColorZilla simplifies the process of working with colors in web development and design, saving time and improving accuracy in your projects.download

7.JSON Viewer

JSON Viewer is a handy tool used by developers and anyone working with JSON (JavaScript Object Notation) data. JSON is a widely used data format for representing structured information, and JSON Viewer makes it much easier to read and understand JSON data, especially when dealing with complex or nested structures.

This browser extension or online tool takes JSON data, which can sometimes be challenging to interpret in its raw format, and presents it in a more human-readable and organized manner. It typically offers features such as syntax highlighting, collapsible and expandable nodes for nested objects and arrays, and proper indentation, making it much easier to navigate and comprehend JSON files.

JSON Viewer is particularly useful for web developers, data analysts, and anyone who needs to work with JSON data for APIs, configuration files, or data interchange. It helps ensure that JSON data is correctly formatted, making it an indispensable tool for debugging, troubleshooting, and gaining insights from JSON datasets. Whether you're examining a response from an API call or reviewing configuration files, JSON Viewer simplifies the process and enhances your productivity when working with JSON data. download

8.CSS Peeper

CSS Peeper is a browser extension designed for web designers and front-end developers. It provides a set of powerful tools to inspect, analyze, and extract CSS information from web pages. Here are some key features and benefits of CSS Peeper:

Style Inspection: CSS Peeper allows you to inspect the styles applied to specific elements on a webpage. You can hover over an element and see its CSS properties, values, and even the CSS selectors responsible for styling it.

Color Palette Extraction: One of its standout features is the ability to extract the color palette used on a webpage. This is incredibly useful for designers who want to identify and replicate the color scheme of a site.

CSS Measurement Tool: You can measure the dimensions (width, height, margins, padding, etc.) of any element on a page, helping with precise layout and spacing adjustments.

Layer Extraction: CSS Peeper lets you extract design assets like images and icons directly from a webpage. This can be handy for collecting resources for inspiration or your own projects.

SASS/LESS Support: If the webpage uses a preprocessor like SASS or LESS for its stylesheets, CSS Peeper can also show you the preprocessed CSS, making it easier to understand and work with.

Export Styles: You can export the CSS styles of a selected element or the entire webpage, saving you time when referencing or adapting styles for your projects.

Accessibility Checker: CSS Peeper includes an accessibility checker that helps you identify potential accessibility issues on a webpage, allowing you to make your designs more inclusive.

Cross-Browser Compatibility: It's available as a browser extension for multiple browsers, making it versatile for various development environments.

CSS Peeper simplifies the process of reverse engineering website designs, conducting competitive analysis, or gaining inspiration from other websites. It's a valuable tool for designers and developers who want to understand and replicate the styling and layout of web pages efficiently.
download

other extensions worth checking out include:

9. GitHub Extension

The GitHub extension enhances your experience on GitHub by providing features like code navigation, pull request reviews, and more. It integrates seamlessly with your GitHub workflow, making it easier to collaborate and manage your repositories.

10. Octotree

Octotree is a GitHub code tree extension that adds a code tree sidebar to GitHub repositories. This makes it easier to navigate and explore large codebases, especially when dealing with complex projects.
Download Here

11. LiveReload

LiveReload is a tool that automatically refreshes web pages as you make changes to your local code. It's ideal for front-end developers who want to see real-time updates without manually refreshing the browser.
Download Here

12. Vue.js Devtools

If you work with Vue.js, the Vue.js Devtools extension allows you to inspect Vue components, view their data, and debug Vue applications. It's an essential tool for Vue.js developers.
Download Here

13. AngularJS Batarang

For those working with AngularJS, the AngularJS Batarang extension provides tools for debugging and profiling AngularJS applications, helping you optimize your code and troubleshoot issues.

14. Postman

While primarily a standalone application, Postman also has a Chrome extension. It's incredibly useful for testing APIs and creating HTTP requests, making it a must-have for API developers.
Download Here

15. Web Developer Checklist

The Web Developer Checklist extension helps you follow best practices in web development by providing a checklist for web projects. It ensures that you don't miss any important steps during development and optimization.
Download Here

16. User-Agent Switcher

User-Agent Switcher allows you to quickly switch your user agent to test how your website or web application behaves on different devices and browsers. It's useful for cross-browser and cross-platform testing.
Download Here

These extensions cover a range of development needs, from version control and collaboration on GitHub to debugging and testing web applications. Depending on your specific development stack and tasks, you may find some of these extensions particularly helpful.

JAVASCRIPT NECESSITIES(things you need to emphasis on):

Jane49-cloud — Thu, 22 Dec 2022 12:26:20 +0000

1.Variables: Variables are used to store and manipulate data in JavaScript. You can create a variable using the var, let, or const keyword.

let x = 5;
console.log(x); // Output: 5

2.Data types: JavaScript has several data types, including numbers, strings, booleans, and objects.

let num = 5; // number
let str = 'Hello'; // string
let bool = true; // boolean
let obj = {key: 'value'}; // object

3.Arrays: Arrays are used to store lists of data in JavaScript. You can access and modify the elements of an array using their index.

let arr = [1, 2, 3, 4, 5];
console.log(arr[2]); // Output: 3
arr[2] = 10;
console.log(arr); // Output: [1, 2, 10, 4, 5]

4.Loops: Loops allow you to repeat a block of code multiple times. There are several types of loops in JavaScript, including for loops and while loops.

for (let i = 0; i < 5; i++) {
  console.log(i); // Output: 0 1 2 3 4
}

let j = 0;
while (j < 5) {
  console.log(j); // Output: 0 1 2 3 4
  j++;
}

5.Functions: Functions are blocks of code that can be called by their name. They can also accept arguments and return a value.

function add(x, y) {
  return x + y;
}

console.log(add(2, 3)); // Output: 5

6.Objects: Objects are collections of key-value pairs in JavaScript. You can access and modify the values of an object using its keys.

let obj = {
  key1: 'value1',
  key2: 'value2'
};

console.log(obj.key1); // Output: 'value1'
obj.key1 = 'new value';
console.log(obj.key1); // Output: 'new value'

7.Destructuring: Destructuring is a feature of JavaScript that allows you to extract values from arrays and objects into variables.

let arr = [1, 2, 3];
let [x, y, z] = arr;
console.log(x); // Output: 1
console.log(y); // Output: 2
console.log(z); // Output: 3

let obj = {key1: 'value1', key2: 'value2'};
let {key1, key2} = obj;
console.log(key1); // Output: 'value1'
console.log(key2); // Output: 'value2'

8.Spread operator: The spread operator allows you to spread the elements of an array or object into a new array or object.

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]

let obj1 = {key1:

9 Map method: The map method is a higher-order function that allows you to transform the elements of an array. It returns a new array with the transformed elements.

let arr = [1, 2, 3];
let newArr = arr.map(x => x * 2);
console.log(newArr); // Output: [2, 4, 6]

10.Set method: The Set object is a collection of unique values. You can use the add method to add values to a Set, and the has method to check if a value is in a Set.

let set = new Set();
set.add(1);
set.add(2);
set.add(3);

console.log(set.has(1)); // Output: true
console.log(set.has(4)); // Output: false

Where to impliment Password Encryption in node.js

Jane49-cloud — Mon, 14 Nov 2022 09:03:51 +0000

Security is one of the most essential features of any application.
We mainly impliment this through hashing password. Today I will focus on implimenting this in a MERN app.
The basic structure of a neat node application has the following basic folders and files

connection(database)

models (defines properties of models.)

conrollers (handlers of Crud operations)

routes(defines paths || Url mapping)

Encryption in controllers

Assuming you are already connected to the database and have created a users model, install bcrypt
npm i bcryptjs

# backend/controllers/users.js

const User = require('../models/user') //path to your user model
const bcrypt = require("bcryptjs")

const registerUser = async(req,res)=>{
const {name, email, password} = req.body

//first check if the user exists
 const userExists = await User.findOne({ email });
    if (userExists) {
      response.status(400);
      console.log("Email address already exists")
    }

  //Encrpt password before you save
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(password, salt);
}

//create user 

try {
const user = await User.create({
        name,
        password: hashedPassword,
        email
    });
  res.json(user);
    console.log(user, "User created successfully...")

} catch (error) {
    console.log(error, `User not created...`)
};

module.exports = {
  registerUser,
};

import the registerUser controller and route your user register path and test your application. I used postman to register a user and got the following json response:

{
    "name": "Luke Graham",
    "email": "graham@gmail.com",
    "password": "$2a$10$rQrhLmwoEGaCMq9qR9cLaOvVBtA/FvoSSmt1tGj0gq7tFyscDS5jK",
    "photo": "https://i.ibb.co/4pDNDk1/avatar.png",
    "phone": "+245",
    "bio": "bio should be at most 250 characters",
    "_id": "6371eb2668c624ddb1bd72d9",
    "createdAt": "2022-11-14T07:15:50.078Z",
    "updatedAt": "2022-11-14T07:15:50.078Z",
    "__v": 0
}

The password was hashed successfully.
Do not give a maxLength to the password in the model because the hashed password gives a long string. Validate in the frontend.
The above method is valid. However, there are moreother controllers that require password.

*registerUser
loginUser
updatePassword
forgotPassword
*
for each of the above handlers you need to configure encryption.
Therefore it is easier to perfom the encription in the model file.
Use a schema.pre() function that changes the password before saving.
This is how it is implimented:

#backend/models/users.js

const mongoose = require("mongoose");
const bcrypt = require("bcryptjs");

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: {
    type: String,
    required: true,
    unique: true,
    trim: true,
    match: [
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      "Please enter a valid email address",
    ],
  },
  password: {
    type: String,
    required: true,
    minLength: [6, "password must be at least 6 characters"],
  },
  photo: { type: String, required: true ,
    default: "https://i.ibb.co/4pDNDk1/avatar.png"}, // person avatar
    phone:{type:String, default: "+245"},
    bio:{
        type:String, 
        maxLength:[250, "bio must be at most 250 characters"],
        default: "bio should be at most 250 characters"
    }
},
{
    timestamps:true
}

);

//Encrypt password before saving to database

userSchema.pre("save", async function(next){
  if(!this.isModified("password")){
      return next()
  }
  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(this.password, salt);//this.passord (points to the password in this file)
  this.password = hashedPassword
next()
})


module.exports = mongoose.model("User", userSchema);

Just a few adjustments in the model and password is pashed before the schema is saved.
There are a few changes in the controller file

#backend/controller/user

const User = require('../models/user') //path to your user model

const registerUser = async(req,res)=>{
const {name, email, password} = req.body

//first check if the user exists
 const userExists = await User.findOne({ email });
    if (userExists) {
      response.status(400);
      console.log("Email address already exists")
    }
 //create user 
try {
const user = await User.create({
        name,
        password,
        email
    });
  res.json(user);
    console.log(user, "User created successfully...")

} catch (error) {
    console.log(error, `User not created...`)
};
module.exports = {
  registerUser,
};

route your application and test. My response:

{
    "name": "Mercy",
    "email": "mercy@gmail.com",
    "password": "$2a$10$iqzkaO1wTco.3z1KK8Ij9u9sy2DtLViRwL5lvgeHDcQ31wPfCo9jK",
    "photo": "https://i.ibb.co/4pDNDk1/avatar.png",
    "phone": "+245",
    "bio": "bio should be at most 250 characters",
    "_id": "6371fe23225d25b4e3e8220c",
    "createdAt": "2022-11-14T08:36:51.311Z",
    "updatedAt": "2022-11-14T08:36:51.311Z",
    "__v": 0
}

The password was successfully hashed. Hoping this helps understund encryption better and how to use it better.

Was this article helpful?
Need clarification?
Leave a comment

Some of the things you need to learn before getting started on Node

Jane49-cloud — Fri, 27 May 2022 03:30:58 +0000

Some of the things you need to learn before getting started on Node
There has been a lot of support and love shown out here when it comes to Node. It's quite powerful and very fast. It has a growing community and contribution. There especially node-module that has so many packages offered for free .Let's not forget how easy it is especially to developers with Es6 skills. React and Node are basically JavaScript. if you know this nuggets then you should have no trouble learning and working with them.
I will attach videos related to each nugget.
map () method
Probably the most used array method and very useful. Helps especially when it comes to destructuring.
to understand the method fully go to:
https://www.youtube.com/watch?v=80KX6aD9R7M&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ
Interested in all nuggets?
https://www.youtube.com/watchv=80KX6aD9R7M&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ
The above link has all nuggets you need to know and are quite easy and well explained.
Was this helpful?