Forem: Suryansh Singh

The Mockly Chronicles: A Maintainer's Hacktoberfest Tale

Suryansh Singh — Tue, 29 Oct 2024 13:29:50 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Maintainer Experience

Hey fellow developers! 👋

Hacktoberfest is here, and rather than telling you another "how I built this" story, let me share the real, chaotic, and somehow successful journey of Mockly. Grab your favorite debug-time beverage – you'll need it!

In the Beginning: There Was Frustration 😤

Picture this: It's 11 PM, you've just finished coding the next big thing, and now you need to create mockups for the documentation or your personal portfolio. Your options?

Figma: The professional powerhouse that makes you feel like you need a UI/UX degree just to move a rectangle
Canva: Where every other element is locked behind a premium paywall, and your design screams "I used a template!"
MS Paint: The old reliable that's been sitting there since Windows 95, waiting patiently for its moment to shine (And yes, we've all used the spray paint tool to create "textured backgrounds")

That's how Mockly was born – not with a grand vision, but with a simple "I'm too tired for this" moment.

The MVP: Minimum Viable Panic 😅

The first version of Mockly was like that first pancake you make – functional but questionable. Just a simple browser-based tool to wrap screenshots in device frames. The code looked like it was written by a caffeinated raccoon, but hey – it worked!

// Actual comment from the first commit:
// TODO: Fix this before anyone sees it
// Narrator: Everyone saw it.

Going Open Source: The Plot Twist 🎭

Making Mockly open source was like inviting strangers to read your diary – terrifying but liberating. The response? Overwhelming. Turns out other developers also wanted a simple way to make their screenshots look fancy. Who knew?

Current Superpowers ✨

Today, Mockly has evolved into something actually useful (shocking, I know):

Instant Mockups: Upload, tweak, done. Like instant noodles, but for design.
Multi-device Preview: Because your app should look good everywhere, even on your cousin's ancient iPad.
Zoom & Place: Pixel-perfect positioning without needing perfect eyesight.
Text & Style: Make it pop without making it look like a '90s GeoCities site.
No Login Required: Because remembering another password might be the last straw.
No Watermarks: Your designs, your glory.
Free Forever: Like oxygen, but for mockups.

The Real Heroes: Our Contributors 🦸‍♂️🦸‍♀️

Every successful project has its heroes. Ours just happen to be fueled by coffee and memes:

kvtemadden: Turned our canvas from "it works sometimes" to "it actually works!". Fixed all major performance issues. Contributed to MVP of Video Editor.
0xkafkaa: Added download options (including one for your grandma's Windows XP)
Laikokwui: Made text customization that doesn't make designers cry
rahulchaudhary2244: Because one size definitely doesn't fit all, created custom screen sizes
kirito05: Added custom backgrounds option that don't look like they're from Windows 98

The Chronicles of Chaos: Real Developer Stories 🎢

The "Works on My Machine" Saga

We've seen code that looked like it was written during an earthquake. Variables named 'temp1', 'temp2', and the infamous 'finalFinalREALLYfinal'. Our code review comments evolved from "Please consider refactoring" to "WHO HURT YOU?"

The Ghost Stories 👻

Dev: "I'll finish it this weekend!"
Narrator: They did not finish it that weekend.
*or any weekend thereafter*

The Utils File That Never Was 📁

Some say our longest component file is still being scrolled to this day. Creating a utils file somehow became harder than explaining why Internet Explorer was actually useful.

How We Survived (Barely) 🛟

The Code Review Bingo
- "Unnecessary console.log" ✓
- "Function longer than a CV" ✓
- "Variable names that tell a story (a horror story)" ✓
The Ghost Busters Protocol
- Two weeks of silence = "friendly" reminder
- One month of silence = Your issue is now free real estate
The Great Utils Revolution
- Started giving out "Most Refactored Code" awards
- Created a support group for those afraid of creating new files

The Road Ahead 🛣️

We're not done yet! Coming soon(ish):

AI-Powered Background Removal: Because manually removing backgrounds is so 2023
Template Library: For when creativity goes on vacation
Collaboration Features: Make mockups with friends (yes, developers have friends!)
Advanced Animation: Make your mockups move like they're in a developer's version of Disney

Why Mockly? Because Life's Too Short for Bad Mockups 🎨

We built Mockly because:

Design tools shouldn't need a 200-page manual
Your time is better spent coding than fighting with Photoshop
Sometimes, simple is better (looking at you, enterprise software)
Mockups shouldn't cost more than your coffee budget

Join Our Circus 🎪

As we celebrate Hacktoberfest, we're looking for more brave souls to join our adventure. Whether you're:

A code warrior ready for battle
A first-time contributor (we promise we don't bite)
Someone who just wants to fix that one annoying bug
A developer who thinks our jokes need improvement

We have a place for you! Check out our GitHub repo for open issues.

Just check out the website

The End (For Now) 🌅

What started as a weekend project has turned into a tool used by thousands of developers. The best part? The amazing community we've built – every PR, every issue, every "it works on my machine" comment has made Mockly better.

Remember: Creating mockups shouldn't feel like debugging production on a Friday evening. With Mockly, it's actually... fun!

Happy coding, and may your mockups be ever pixel-perfect! 🚀

P.S.: If you found a bug while reading this, it's not a bug – it's an undocumented feature. But feel free to fix it anyway! 😉

Suryansh Singh (Author of this cool project)

suryanshsingh2001 / mockly

Mockly is an open-source tool that allows developers to create professional-looking screenshots and mockups with ease. It's designed for fast, stress-free mockups for developers who'd rather code than design.

Mockly 🎨

Mockly is an open-source tool that allows developers to create professional-looking screenshots and mockups with ease. With Mockly, you can pick, place, and zoom—done. It's designed for fast, stress-free mockups for developers who'd rather code than design.

✨ Features

Instant Mockups: Upload, tweak, done. It's like magic, but without the wand.
Multi-device Preview: Instantly see how your designs look on any screen size—because nobody has time for resizing
- Example: Select "Screen Size" dropdown menu to automatically generate views for mobile, tablet, and desktop versions.
Zoom & Place: Precisely position your screenshot, and zoom in or out like a pro—minus the struggle
- Example: Drag your cursor to specify the position and use the zoom slider in the "Design" tab as needed.
Text & Style: Add text, pick your style, and make it pop. Because plain screenshots are so last year
- Example: Enter…

View on GitHub

Redis on Windows & Rate Limiting: A Practical Guide

Suryansh Singh — Thu, 10 Oct 2024 14:24:09 +0000

Ever tried running Redis on Windows only to find out there's no official support? Don't worry! After battling with this myself (and bringing down a production server once or twice 😅), I've found three reliable ways to get Redis running on Windows, plus a neat implementation for rate limiting.

Getting Redis on Windows

1. The Docker Way (Recommended for Teams)

docker pull redis
docker run --name redis-test -p 6379:6379 -d redis

Pro: Works exactly like production
Con: Docker Desktop can be resource-heavy

2. WSL Method (Great for Personal Projects)

wsl --install  # In PowerShell as admin
# Install Ubuntu from Microsoft Store, then:
sudo apt update
sudo apt install redis-server
sudo service redis-server start

Pro: Lightweight
Con: WSL networking can be tricky

3. Windows Build (Simplest Setup)

Download MSI from tporadowski/redis
Install and start service:

redis-cli

Pro: Runs as a Windows service
Con: Not officially supported

Why Redis for Rate Limiting?

I recently needed rate limiting for a Firebase project. While Firebase is great, it's not ideal for rate limiting because:

Writing counters to Firestore/RTDB is slow and expensive
Built-in limits are basic and inflexible

Redis, however, is perfect because:

Sub-millisecond responses
Atomic operations
Auto-expiring keys
Ridiculously cheap to run

The Simple Rate Limiting Code

Here's a clean Express middleware that just works:

const Redis = require('ioredis');
const redis = new Redis();

async function rateLimit(req, res, next) {
  const key = `limit:${req.ip}`;
  const limit = 100; // requests per window
  const window = 3600; // 1 hour in seconds

  try {
    const hits = await redis.incr(key);

    if (hits === 1) {
      await redis.expire(key, window);
    }

    if (hits > limit) {
      return res.status(429).json({
        message: "Slow down there, speed racer!"
      });
    }

    next();
  } catch (err) {
    console.error('Redis error:', err);
    next(); // Fail open
  }
}

Real Numbers That Matter

Switching from Firebase to Redis for rate limiting:

Rate limit check: ~100ms → ~1ms
Monthly costs: Dropped ~$30
Code complexity: Cut in half

When to Use This Setup

✅ Perfect for:

API rate limiting
Session management
Quick counters/flags
When you need speed

❌ Skip it if:

Very low traffic (< 100 requests/minute)
Using API Gateway with built-in rate limiting
Internal APIs only

Quick Troubleshooting

90% of Redis connection issues are because:

Redis isn't running (check services)
Wrong port/host (default: localhost:6379)
WSL/Docker networking issues (check IP addresses)

Wrap Up

Redis might not officially support Windows, but with these methods, you're covered. For rate limiting specifically, it's like using a racing car instead of a regular car - sure, both will get you there, but one is purpose-built for speed!

Happy coding! 🚀

P.S. - Always remember to start Redis before spending hours debugging connection issues. Trust me on this one. 😉

Introducing Mockly: The Fastest Way to Create Stunning Screenshots

Suryansh Singh — Sat, 07 Sep 2024 06:55:13 +0000

About the Project

Mockly is a developer-friendly tool designed to make creating screenshots and mockups incredibly easy. Whether you need a quick visual for your project or a polished mockup for presentations, Mockly lets you do it all without the complexity of design tools like Figma or Canva.

The goal? To give developers a simple, fast, and powerful way to create professional-looking screenshots without needing to dive into design-heavy workflows.

Inspiration

As a developer, I’ve often found myself frustrated with how much effort it takes to produce something as simple as a screenshot or mockup. Why spend 30 minutes in a design tool for something that should take 5?

That’s why I built Mockly—a lightweight, no-frills tool for developers who would rather focus on code than design. This is my first attempt at building something like this, and I’d love to iterate on it and make it even better with community input.

Features

1. Instant Mockups

Upload an image, customize it, and you're done in minutes. Mockly keeps it simple while still offering flexibility.

2. Advanced Design Controls

Customize your screenshots with intuitive design tools like:

Zoom & Place: Easily position your screenshot and zoom in or out to highlight the details you want.
Border Radius: Add rounded corners for a sleek, modern look.
Shadows & Transparency: Play with shadow effects and transparency to give your designs depth and style.
Backgrounds: Choose from solid colors, gradient backgrounds, or upload custom images to set the perfect scene for your screenshot.

3. Text Customization

Add and style text with ease using:

Font Size & Color: Pick your font, adjust the size, and choose colors that match your brand or style.
Text Placement: Move your text around and align it perfectly with your mockup.

4. Multi-Device Preview

Instantly see how your designs will look across different screen sizes, including:

Mobile
Tablet
Desktop

5. Export

Once your design is ready, export it in high resolution, ready to be shared, used in presentations, or sent out for feedback.

Tech Stack

Mockly is built with modern tools to keep things fast and smooth:

Next.js: The backbone of the app, handling server-side rendering and performance optimizations.
HTML Canvas: At the core of the design features, HTML Canvas powers the manipulation of images, text, and other visual elements.
Shadcn: For styling components and giving Mockly a polished, cohesive look.

What’s Next?

This is just the first step! I’m planning to make Mockly open-source soon, so anyone can contribute and help make it even better. Whether it's adding more customization options, improving the user interface, or introducing new features, I’d love to collaborate with the developer community.

Your feedback is invaluable—if you've got ideas for how to make Mockly better, drop a comment or reach out. Let’s make this tool the go-to for quick, no-hassle mockups.

Try it Out

Want to give it a try? Head over to the https://mockly.vercel.app/ and test it out on desktop for the best experience.

Thanks for reading, and I can’t wait to hear what you think! 🙌

Making SOLID Simple: A JavaScript Guide to Clean Code Principles

Suryansh Singh — Sun, 25 Aug 2024 15:26:06 +0000

When I first started diving into the world of software development, I often found myself overwhelmed by all the buzzwords and concepts flying around. One of the concepts that seemed particularly daunting was SOLID principles. It felt like something only "serious" developers needed to worry about. But as I grew more comfortable with coding, I realized that these principles are less about being fancy and more about writing code that doesn’t make you want to pull your hair out after a few months.

So, here’s my take on SOLID principles in JavaScript—a no-nonsense, practical guide that I wish I had when I started.

1. Single Responsibility Principle (SRP): One Job, Done Well

What is it?

The Single Responsibility Principle states that a class should have only one reason to change, meaning it should have only one job or responsibility.

Real-Life Analogy

Think of a barista at your favorite coffee shop. Their job is to make coffee. If they suddenly have to start fixing the espresso machine, serving pastries, and taking out the trash, things are going to get chaotic. Just like how the barista should focus on making coffee, your class should focus on doing one thing well.

Example in JavaScript:

Imagine you have a User class that handles user authentication, data validation, and database storage. It’s doing too much! By splitting these responsibilities into separate classes, you make your code easier to manage and maintain.

class UserAuthenticator {
  login(user) {
    // handle login
  }
}

class UserDataValidator {
  validate(user) {
    // validate user data
  }
}

class UserDatabase {
  save(user) {
    // save user to the database
  }
}

2. Open/Closed Principle (OCP): Extend, Don’t Modify

What is it?

The Open/Closed Principle states that software entities should be open for extension but closed for modification. In other words, you should be able to add new functionality without changing existing code.

Real-Life Analogy:

Imagine your favorite gaming console. You can add new games, controllers, and accessories, but you don’t have to open it up and rewire it to do so. Similarly, you should be able to add new features to your code without changing its core structure.

Example in JavaScript:

Let’s say you have a Shape class with a method to calculate the area. If you need to add a new shape, like a triangle, you shouldn’t have to modify the existing class. Instead, extend it.

class Shape {
  area() {
    throw "Area method not implemented";
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius * this.radius;
  }
}

3. Liskov Substitution Principle (LSP): Keep It Substitutable

What is it?

The Liskov Substitution Principle states that objects of a superclass should be replaceable with objects of a subclass without affecting the correctness of the program.

Real-Life Analogy:

Imagine renting a car. Whether you get a sedan or an SUV, you expect it to have the basic functionalities of a car: it should drive, steer, and stop. If your rental car required a completely different set of controls, you’d be in trouble! Similarly, subclasses should behave in a way that doesn’t break the expectations set by their parent class.

Example in JavaScript:

If you have a Bird class and a Penguin class that extends it, the Penguin should still behave like a Bird even if it can’t fly. It should still walk, eat, and maybe even swim.

class Bird {
  move() {
    console.log("Flies in the sky");
  }
}

class Penguin extends Bird {
  move() {
    console.log("Swims in the water");
  }
}

const myBird = new Bird();
const myPenguin = new Penguin();

myBird.move(); // Flies in the sky
myPenguin.move(); // Swims in the water

4. Interface Segregation Principle (ISP): Tailor-Made Interfaces

What is it?

The Interface Segregation Principle suggests that clients should not be forced to implement interfaces they don’t use. Instead of having one large interface, you should create smaller, more specific ones.

Real-Life Analogy:

Imagine a restaurant where the chef also has to be the waiter, bartender, and dishwasher. It’s overwhelming and inefficient! Instead, each role should have its specific tasks. Similarly, your interfaces should be specialized and focused.

Example in JavaScript:

If you have a Worker interface that includes methods like buildHouse, paintHouse, and designHouse, a worker who only paints houses shouldn’t have to implement all the other methods. Break it down into smaller interfaces.

class Builder {
  build() {
    console.log("Building house...");
  }
}

class Painter {
  paint() {
    console.log("Painting house...");
  }
}

class Designer {
  design() {
    console.log("Designing house...");
  }
}

5. Dependency Inversion Principle (DIP): Rely on Abstractions

What is it?

The Dependency Inversion Principle states that high-level modules should not depend on low-level modules. Both should depend on abstractions.

Real-Life Analogy:

Think about how you plug your phone charger into a wall socket. You don’t need to know the details of the electrical wiring inside the walls—all you need is the interface (the socket) to power your device. Similarly, your code should depend on abstractions (interfaces), not concrete implementations.

Example in JavaScript:

If you have a LightBulb class that directly controls a Switch class, you’re creating a tight coupling. Instead, both should depend on an interface like PowerSource.

class LightBulb {
  turnOn(powerSource) {
    powerSource.provideElectricity();
    console.log("Light is on");
  }
}

class Switch {
  constructor(powerSource) {
    this.powerSource = powerSource;
  }

  operate() {
    this.powerSource.togglePower();
  }
}

class PowerSource {
  provideElectricity() {
    console.log("Providing electricity");
  }

  togglePower() {
    console.log("Toggling power");
  }
}

Conclusion

Mastering the SOLID principles is like learning to cook with a set of proven recipes. Once you understand them, you can whip up code that’s not just functional but elegant and easy to maintain. So next time you find yourself in a coding conundrum, remember: there’s a principle for that!

Happy coding! 🚀

Software Design Patterns: The Secret Sauce Behind Every Great App

Suryansh Singh — Sat, 24 Aug 2024 10:02:41 +0000

Imagine building a LEGO set without a manual. Sure, you might end up with something that vaguely resembles a spaceship, but more likely, you’ll end up with a pile of colorful chaos. In the world of coding, design patterns are like that LEGO manual—they give you a proven blueprint to solve common problems, making your code cleaner, more efficient, and easier to maintain.

But don’t worry, this isn’t a dry lecture on coding principles. Think of it as a fun little guide to some of the most common design patterns in JavaScript, complete with real-life analogies that make these concepts easy to digest.

1. The Singleton Pattern: The One and Only

What is it?

The Singleton pattern ensures that a class has only one instance and provides a global point of access to it. It’s like having a single remote control for your TV. You don’t need multiple remotes to control the volume, change the channel, or turn it off—you just need that one remote.

Real-Life Use Case:

In JavaScript, this pattern is commonly used for managing global application state. For instance, if you have a shopping cart on an e-commerce website, you want all the components that interact with the cart (like adding items, removing items, or checking out) to refer to the same instance of the cart. A Singleton ensures that all these actions affect the same cart, not different copies of it.

class ShoppingCart {
  constructor() {
    if (!ShoppingCart.instance) {
      this.items = [];
      ShoppingCart.instance = this;
    }
    return ShoppingCart.instance;
  }

  addItem(item) {
    this.items.push(item);
  }

  getItems() {
    return this.items;
  }
}

const cart1 = new ShoppingCart();
const cart2 = new ShoppingCart();

cart1.addItem('Laptop');
console.log(cart2.getItems()); // ['Laptop']

2. The Observer Pattern: The Gossip Network

What is it?

The Observer pattern is all about keeping objects in sync. When one object changes, the others need to know about it. It’s like a group chat where everyone is constantly updated on what’s happening. If someone changes the plan for the weekend, everyone in the group gets the memo.

Real-Life Use Case:

In JavaScript, this pattern is often used in event handling systems. Let’s say you’re building a social media app. When someone likes a post, you want to update the like count, notify the post’s author, and maybe trigger an animation. The Observer pattern allows these different components to stay updated without being directly connected.

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log(`Observer received: ${data}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify('New post liked!'); 
// Output: Observer received: New post liked!
// Output: Observer received: New post liked!

3. The Factory Pattern: The Cookie Cutter

What is it?

The Factory pattern is all about creating objects without specifying the exact class of object that will be created. Imagine a cookie cutter. You don’t know exactly what shape the dough will take until you press the cutter down, but you know you’ll get a cookie.

Real-Life Use Case:

This pattern is particularly useful when you have a collection of objects that share a common interface or structure but have different underlying implementations. For example, in a game, you might have different types of enemies (zombies, vampires, werewolves), but they all share common properties like health, speed, and attack power. A Factory can help you create these enemies without worrying about the specific type.

class Enemy {
  constructor(type) {
    this.type = type;
    this.health = 100;
  }

  attack() {
    console.log(`${this.type} attacks with ${this.attackPower}`);
  }
}

class EnemyFactory {
  createEnemy(type) {
    let enemy;

    if (type === 'zombie') {
      enemy = new Enemy('Zombie');
      enemy.attackPower = 10;
    } else if (type === 'vampire') {
      enemy = new Enemy('Vampire');
      enemy.attackPower = 20;
    } else if (type === 'werewolf') {
      enemy = new Enemy('Werewolf');
      enemy.attackPower = 30;
    }

    return enemy;
  }
}

const factory = new EnemyFactory();

const zombie = factory.createEnemy('zombie');
zombie.attack(); // Zombie attacks with 10

const vampire = factory.createEnemy('vampire');
vampire.attack(); // Vampire attacks with 20

4. The Module Pattern: The Organized Workspace

What is it?

The Module pattern is like having a well-organized workspace where everything has its place. It helps you keep different parts of your code organized and encapsulated, preventing the global namespace from becoming a cluttered mess.

Real-Life Use Case:

This pattern is especially useful in JavaScript for creating public and private variables and functions. For example, when you’re building a library or plugin, you might want to expose certain methods to the outside world while keeping others hidden. The Module pattern allows you to do just that.

const Calculator = (function() {
  let result = 0;

  function add(x) {
    result += x;
    return result;
  }

  function subtract(x) {
    result -= x;
    return result;
  }

  function multiply(x) {
    result *= x;
    return result;
  }

  function divide(x) {
    if (x !== 0) {
      result /= x;
      return result;
    } else {
      console.error('Cannot divide by zero');
    }
  }

  return {
    add,
    subtract,
    multiply,
    divide,
    getResult: () => result,
  };
})();

console.log(Calculator.add(10)); // 10
console.log(Calculator.subtract(2)); // 8
console.log(Calculator.multiply(3)); // 24
console.log(Calculator.divide(4)); // 6

5. The Adapter Pattern: The Plug Converter

What is it?

The Adapter pattern allows incompatible interfaces to work together. Think of it like a plug adapter you use when traveling abroad. Your laptop charger’s plug might not fit into the wall socket in another country, but with the right adapter, it works perfectly.

Real-Life Use Case:

In JavaScript, you might use the Adapter pattern when you’re integrating with third-party libraries or APIs that don’t exactly match the structure of your application. The Adapter can transform the interface of a class into another interface that clients expect, making the integration seamless.

class OldApi {
  constructor() {
    this.data = 'Old API data';
  }

  getData() {
    return this.data;
  }
}

class NewApi {
  fetchData() {
    return 'New API data';
  }
}

class ApiAdapter {
  constructor(oldApi) {
    this.oldApi = oldApi;
  }

  fetchData() {
    return this.oldApi.getData();
  }
}

const oldApi = new OldApi();
const adapter = new ApiAdapter(oldApi);

console.log(adapter.fetchData()); // 'Old API data'

6. The Composite Pattern: The Russian Nesting Dolls

What is it?

The Composite pattern allows you to treat individual objects and compositions of objects uniformly. It’s like Russian nesting dolls where each doll is part of a larger structure, but you can interact with them both as individual dolls and as a nested set.

Real-Life Use Case:

This pattern is often used in scenarios where you need to manage a hierarchy of objects. For example, consider a file system where files and folders are represented as objects. A folder can contain multiple files or even other folders, and you want to treat both files and folders similarly when it comes to operations like moving, copying, or deleting.

class File {
  constructor(name) {
    this.name = name;
  }

  display() {
    console.log(this.name);
  }
}

class Folder {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  add(child) {
    this.children.push(child);
  }

  display() {
    console.log(this.name);
    this.children.forEach(child => child.display());
  }
}

const file1 = new File('file1.txt');
const file2 = new File('file2.txt');
const folder = new Folder('MyFolder');
folder.add(file1);
folder.add(file2);

folder.display();
// Output:
// MyFolder
// file1.txt
// file2.txt

Conclusion

These are just a few of the many design patterns that can make your JavaScript code more robust, maintainable, and, let’s face it, fun to write. Whether you’re building the next big app or just trying to organize your code a bit better, these patterns can be your secret weapon. So next time you’re stuck, remember: there’s probably a pattern for that!

And hey, even if your code doesn’t end up looking like a LEGO spaceship, at least it won’t be a pile of colorful chaos.

Happy coding! 🚀

[Demystifying Firebase (Part-3)] How to setup Cloud Firestore for React Native App

Suryansh Singh — Thu, 11 Apr 2024 14:47:31 +0000

Prequisites

[Demystifying Firebase (Part-1)] How to setup Firebase in React Native CLI App.

Suryansh Singh ・ Apr 5

#reactnative #firebase #javascript #beginners

[Demystifying Firebase (Part-2)] How to setup Firebase authentication in your react native app.

Suryansh Singh ・ Apr 6

#firebase #reactnative #beginners #javascript

Basic Understanding of No-SQL Databases

Introduction

Looking for a database solution that keeps your app running smoothly, even offline? Enter Firestore, the cloud-based storage system that effortlessly syncs data across devices and offers real-time updates. In Part 3 of our series, we'll explore Firestore setup and learn how to leverage its power in our React Native projects.

Cloud Firestore Setup

Start by installing the Firestore package in your project:

npm install @react-native-firebase/firestore

Navigate to your Firebase console and create a new database. Choose your server location and set your security rules according to your requirements. Once configured, your Firestore backend is ready to use.

Voila! We are ready to use our backend, Click on Create Collection

Lets name it posts

Create a dummy document ID for now, or create your own document.

You will see your posts collection along with dummy document.

Setting Up Our Utility functions

To simplify Firestore operations, let's set up utility functions in a firestore.js file. These functions will handle CRUD operations and make data management a breeze.


import firestore from '@react-native-firebase/firestore';

const rootCollection = firestore();

export const getAllDocuments = async (collectionName) => {
    try {
        const collectionRef = rootCollection.collection(collectionName);



        const querySnapshot = await collectionRef.get();
        const collectionData = querySnapshot.docs.map(doc => ({
            id: doc.id,
            ...doc.data(),
        }));

        return collectionData;
    } catch (error) {
        console.error(`Error fetching ${collectionName} data:`, error);
        throw error;
    }
};

export const createDocument = async (collectionName, documentData) => {
    try {
        const documentRef = rootCollection.collection(collectionName).doc();
        const serverTimestamp = firestore.FieldValue.serverTimestamp();

        const dataWithTimestamps = {
            ...documentData,
            createdAt: serverTimestamp,
            modifiedAt: serverTimestamp,
        };

        await documentRef.set(dataWithTimestamps);
        return documentRef;
    } catch (error) {
        console.error('Error creating document:', error);
        throw error;
    }
};

export const readDocumentData = async (collectionName, documentId) => {
    try {
        const documentSnapshot = await rootCollection.collection(collectionName).doc(documentId).get();

        if (documentSnapshot.exists) {
            return documentSnapshot.data();
        } else {
            return null;
        }
    } catch (error) {
        console.error('Error reading document data:', error);
        throw error;
    }
};

export const updateDocument = async (collectionName, documentId, updatedDocumentData) => {
    try {
        const serverTimestamp = firestore.FieldValue.serverTimestamp();

        const dataWithTimestamps = {
            ...updatedDocumentData,
            modifiedAt: serverTimestamp,
        };

        return rootCollection.collection(collectionName).doc(documentId).update(dataWithTimestamps);
    } catch (error) {
        console.error('Error updating document:', error);
        throw error;
    }
};

export const deleteDocument = async (collectionName, documentId) => {
    try {
        return rootCollection.collection(collectionName).doc(documentId).delete();
    } catch (error) {
        console.error('Error deleting document:', error);
        throw error;
    }
};

Simple Posts Screen

Now, let's put Firestore to work by creating a simple posts screen with complete CRUD operations. From fetching posts to adding, editing, and deleting them, you'll learn how to harness Firestore's flexibility and scalability.

import {View, Text, Button, FlatList} from 'react-native';
import React, {useEffect} from 'react';
import {
  getAllDocuments,
  createDocument,
  updateDocument,
  deleteDocument,
} from '../Firebase/firestore';
import { get } from 'react-native/Libraries/TurboModule/TurboModuleRegistry';

const PostsScreen = ({navigation}) => {

    // State to store all posts
  const [posts, setPosts] = React.useState([]);


  // Fetch all posts from Firestore
  const getAllPosts = async () => {
    try {
      const fetchedPosts = await getAllDocuments('posts');
      console.log(fetchedPosts);

      setPosts(fetchedPosts || []);
    } catch (error) {
      console.error('Error fetching posts:', error);
    }

  };

  // Add a new post to Firestore
  const addPost = async () => {

    try {
      await createDocument('posts', {
        title: 'New Post',
        content: 'This is a new post',
      });
      getAllPosts();
    } catch (error) {
      console.error('Error adding post:', error);
    }
  };

    // Delete a post from Firestore
  const deletePost = async postId => {
    try {
      await deleteDocument('posts', postId);
      getAllPosts();
    } catch (error) {
      console.error('Error deleting post:', error);
    }
  };

    // Update a post in Firestore
  const updatePost = async postId => {
    console.log('Updating post:', postId);
    try {
      await updateDocument('posts', postId, {
        title: 'Updated Post',
        content: 'This post has been updated',
      });
      const updatedPosts = posts.map(post => {
        if (post.id === postId) {
          return {
            id: postId,
            title: 'Updated Post',
            content: 'This post has been updated',
          };
        }
        return post;
      });
      getAllPosts();
    } catch (error) {
      console.error('Error updating post:', error);
    }
  };


  // Fetch all posts from Firestore when the component mounts
  useEffect(() => {
    getAllPosts();
  }, []);

  return (
    <View style={{flex: 1, alignItems: 'center'}}>
      <Button title="Add Post" onPress={addPost} />
      <Text
        style={{
          color: 'black',
          margin: 10,
          padding: 10,
          fontSize: 20,
          fontWeight: 'bold',
        }}>
        Posts
      </Text>

      <FlatList
        data={posts}
        ListEmptyComponent={() => (
          <View style={{justifyContent: 'center', alignItems: 'center'}}>
            <Text style={{color: 'black', fontSize: 18}}>No Posts Found</Text>
          </View>
        )}
        renderItem={({item}) => (
          <View
            style={{
              margin: 10,
              padding: 10,
              borderColor: 'black',
              borderWidth: 1,
              flexDirection: 'column',
            }}>
            <Text style={{color: "black", fontSize: 16, marginBottom:5}}>{item.title}</Text>
            <Text style={{color: "gray", fontSize: 12, marginBottom:10}}>{item.content}</Text>

            <Button
              title="Edit Post"
              onPress={() => updatePost(item.id)}
              color={'purple'}
            />

            <Button
              title="Delete Post"
              onPress={() => deletePost(item.id)}
              color={'red'}
            />
          </View>
        )}
        keyExtractor={(item, index) => (item.id || index).toString()}
      />
    </View>
  );
};

export default PostsScreen;

End Result

If you found value in this article, I'd love to hear your thoughts in the comments section! Your feedback fuels my motivation to create more content. If you're interested in learning more about Firestore or have specific topics you'd like me to cover, don't hesitate to let me know. Your input helps shape future articles and ensures they're tailored to your interests and needs. Thank you for reading!

Source : React Native Firebase

[Demystifying Firebase (Part-2)] How to setup Firebase authentication in your react native app.

Suryansh Singh — Sat, 06 Apr 2024 15:47:26 +0000

Prerequisites

[Demystifying Firebase (Part-1)] How to setup Firebase in React Native CLI App.

Suryansh Singh ・ Apr 5

#reactnative #firebase #javascript #beginners

Introduction

In my previous post, we covered how to set up Firebase in your React Native CLI App.
Firebase Auth offers several authentication providers, including email/password, phone number authentication, Google sign-in, etc. For this series, we'll be using React Native Firebase for our project.

To keep things simple, we'll implement Anonymous Authentication in our app. Let's dive in!

Firebase Console

Activate Anonymous Authentication or your preferred authentication provider from your firebase console.

Installing the package

First, let's install the React Native Firebase Auth package along with the core app package:

npm install @react-native-firebase/app @react-native-firebase/auth

Setting up Auth Functions

It's good practice to create utility functions for auth functions to use them everywhere.
Create a folder called Firebase in your root directory and create a new file auth.js.

Let's start with some basic functions we need.

Here's the code for Firebase/auth.js:

import Auth from '@react-native-firebase/auth';

// Get the auth settings
export const getAuthSettings = () => {
    const authSettings =  Auth().settings;
    return authSettings;
}

// Get the current signed in user
export const getCurrentUser = () => {
    const currentUser = Auth().currentUser;
    return currentUser || null;
}


// Sign in anonymously function
export const signInAnonymously = async () => {
    try {
        await Auth().signInAnonymously();

    } catch (error) {
        console.error(error);
    }
}

// Sign out function
export const signOut = async () => {
    try {
        await Auth().signOut();
    } catch (error) {
        console.error(error);
    }
}

Separate Screens Based Authentication

I'm using React Navigation, with separate navigators for logged-in users (MainStackNavigator) and those who are not (AuthStackNavigator), but you may use the same navigation and keep screens separate instead.

const MainStackNavigator = () => {
    return (
        <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
    );
    }

const AuthStackNavigator = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Login" component={LoginScreen} />
        </Stack.Navigator>
    );
}

Handling Authentication State

Let's open our App.tsx We set states for a user and initializing and a function for auth state changed:

const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  //Handles user state changes
  const onAuthStateChanged = (user: any) => {
    setUser(user);
    if (initializing) setInitializing(false);
  }

Then, we'll use a useEffect hook to subscribe to authStateChanged event handler to track authentication state changes:

useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);

Finally, we can separate our login screens from home screens based on the user's state like this:

 return (
    <NavigationContainer>
      {user ? <MainStackNavigator /> : <AuthStackNavigator />}
    </NavigationContainer>
  );

This ensures that users are directed to the appropriate screens based on their authentication status.

Here is complete code for App.tsx

import {useEffect, useState} from 'react';

import {NavigationContainer} from '@react-navigation/native';
import MainStackNavigator from './routes/MainStackNavigator';
import AuthStackNavigator from './routes/AuthStackNavigator';
import auth from '@react-native-firebase/auth';

const App = () => {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  //Handles user state changes
  const onAuthStateChanged = (user: any) => {
    setUser(user);
    if (initializing) setInitializing(false);
  };

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);

  if (initializing) return null;

  return (
    <NavigationContainer>
      {user ? <MainStackNavigator /> : <AuthStackNavigator />}
    </NavigationContainer>
  );
};

export default App;

Login Screen

In my LoginScreen.jsx, I'll use signInAnonymously function to sign in into HomeScreen.jsx. Here's the basic code for Login Screen:

import {View, Text, Button} from 'react-native';
import {signInAnonymously} from '../Firebase/auth';

const LoginScreen = ({navigation}) => {
  const handleLogin = async () => {
    await signInAnonymously();
    console.log('User Logged In');
  };

  return (
    <View style={{flex:1, alignItems: "center", margin: 10}}>
      <Text style={{fontSize: 20, color: "black", marginBottom: 20}}>Login Screen</Text>
      <Button title="Click To Login" onPress={handleLogin} />
    </View>
  );
};

export default LoginScreen;

On logging in, we'll be directly taken to our Home Screen. If you try to press back when logged in, you won't be able to go back to the login screens.

Here the basic code for HomeScreen.jsx:

import {View, Text, Button} from 'react-native';
import React from 'react';
import {signOut} from '../Firebase/auth';

const HomeScreen = ({navigation}) => {
  const handleLogout = async () => {
    await signOut();
    console.log('User Logged Out');
  };
  return (
    <View style={{flex: 1, alignItems: 'center'}}>
      <Text
        style={{
          color: 'black',
          margin: 10,
          padding: 10,
          fontSize: 20,
          fontWeight: 'bold',
        }}>
        Demystify Firebase
      </Text>

      <View style={{margin: 10, padding: 10, flexDirection: 'row', columnGap: 10}}>
        <Button
          title="Go to Profile"
          onPress={() => navigation.navigate('Profile')}
          color={'#f194ff'}
        />

        <Button title="Logout" onPress={handleLogout} />
      </View>
    </View>
  );
};

export default HomeScreen;

That wraps up our implementation of a simple authentication flow into our app using Firebase Auth.

If you're eager to explore more authentication-related topics, drop a comment below!
Your feedback helps shape the content you want to see. Let's dive deeper into authentication together!

Source: React Native Firebase

[Demystifying Firebase (Part-1)] How to setup Firebase in React Native CLI App.

Suryansh Singh — Fri, 05 Apr 2024 17:31:19 +0000

Introduction

Hey there, fellow developers! 🚀

Welcome to the start of our Firebase journey within React Native CLI apps! Firebase isn't just a tool; it's akin to wielding a magic wand that effortlessly transforms your app into a powerhouse of functionality.

In this series, we're embarking on a quest to unravel the mysteries of Firebase integration, starting from the ground up. So, buckle up and prepare to supercharge your React Native projects with Firebase's incredible capabilities. Ready to dive in? Let's do this!

We'll be utilizing React Native Firebase for this.

Setup React Native App

First things first, let's set up your React Native app. If you encounter any hurdles along the way, refer to the React Native app setup guide here

React Navigation Setup (Optional)

Following the app setup, configure the React Navigation Library or any other navigation solution of your preference. In case you hit a snag, feel free to check out my previous post for guidance.

How to setup rnuilib(wix) for a React Native CLI Project.

Suryansh Singh ・ Apr 3

#reactnative #mobile #frontend #rnuilib

Creating our firebase project

Head over to the Firebase console and log in to your Google account.
Upon signing in, create a new project. I'll name mine demystify-firebase.

Select your preferred options for Google Analytics or stick with the default settings.
Click on create Project.
Once the project is created, select it from the console.
You will be greeted with this dashboard

Creating Our App

Click on "Add an app," and for now, let's proceed with Android. You may need to repeat these steps for iOS.

Fill in the required details. The app name can be found in android/app/build.gradle under the namespace.

Note: If you need to phone number auth or google signin, get your debugskeys.

cd android && ./gradlew signingReport

Download this file and place it in your android/app/directory For reference:

Follow the prompts until completion. No need to follow additional these steps just click "Next."
In your /android/build.gradle, add the following:

buildscript {
  dependencies {
    // ... other dependencies
    // NOTE: if you are on react-native 0.71 or below, you must not update
    //       the google-services plugin past version 4.3.15 as it requires gradle >= 7.3.0
    classpath 'com.google.gms:google-services:4.4.1'
    // Add me --- /\
  }
}

In your /android/app/build.gradle, add:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

We are all set here, just rebuild your gradle and start your react native project.
To rebuilt gradle, go to android folder, and run

./gradlew clean

Restart your app.

If you've made it this far, congratulations! You've successfully set up Firebase with your app.

In the next part, we'll delve into adding Firebase authentication to our app.

Encountered any issues along the way? Drop a comment below, and I'll be glad to assist.

Source: React Native Firebase

How to setup rnuilib(wix) for a React Native CLI Project.

Suryansh Singh — Wed, 03 Apr 2024 15:18:12 +0000

Introduction

Welcome aboard! In this guide, we're going to embark on a journey to set up the RNUILIB library with your React Native CLI app. RNUILIB, short for React Native UI Library, offers a plethora of components and themes designed to craft stunning, responsive apps. Excited? Let's get started!

Prerequisites

Before you begin, make sure you have the following installed on your machine:

Node
npm
React Native CLI
Android Studio or Xcode (for iOS development)

Side Note

If you're itching to get started pronto, you can expedite the process by checking out the below repository. It'll have you up and running in a snap!

suryanshsingh2001 / react-native-rnuilib-wix-starter

This template repostory is a quick starter project for rnuilib with react-native CLI App along with React Navigation.

React Native RNUILib Starter

This repository provides a quick starter project for React Native using RNUILib (React Native UI Library) with React Native CLI, along with React Navigation integration. It's perfect for jumpstarting your React Native development with a solid foundation.

🚀 Features

React Native CLI setup
React Navigation pre-configured
RNUILib (React Native UI Library) integration
React Native Vector Icons setup
Ready-to-use project structure

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v14 or later)
npm or Yarn
React Native CLI
Xcode (for iOS development)
Android Studio (for Android development)

🛠️ Installation

Clone the repository:

git clone https://github.com/yourusername/react-native-rnuilib-starter.git
cd react-native-rnuilib-starter

Install dependencies:
```
npm install
# or
yarn install
```
Install iOS pods (if developing for iOS):
```
cd ios && pod install && cd ..
```

🚀 Running the App

For Android:

npx react-native run-android

For iOS:

npx react-native run-ios

📁 Project Structure

react-native-rnuilib-starter/
├── src/
│   ├── components/

…

View on GitHub

Create a New React Native App

Let's kick things off by creating a new React Native app named MyApp. Execute the following command:

npx react-native init MyApp

Once the project is built, navigate to the project directory:

cd MyApp

React Navigation Library Installation (Optional)

If you want to use React Navigation library in your project, you can install it by running the following command:

npm install @react-navigation/native react-native-screens react-native-safe-area-context react-native-gesture-handler

This will install the required dependencies for React Navigation library.
Also, you can install the stack navigator by running the following command:

npm install @react-navigation/stack

Note: Make sure to import react-native-gesture-handler in your project's entry file (For eg: App.tsx or index.js) as shown below:

import 'react-native-gesture-handler';

RNUILIB Installation

To install the RNUILIB library, run the following command:

npm install react-native-ui-lib

Make sure to install the peer dependencies by running the following command:

npm i react-native-reanimated react-native-gesture-handler

Note: Make sure to setup react-native-reanimated in babel.config.js file as shown below:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

Dive in Code

Firstly, start by building your app by running the following command:

npx react-native run-android

npx react-native run-ios

Once your app is up and running, you can start tweaking the App.tsx file located in your project directory.

import React from 'react';
import {Colors, Text, View} from 'react-native-ui-lib';


const App = () => {
  return (
    <View flex center backgroundColor={Colors.$backgroundDarkActive}>
      <Text text30 white>
        Hello RNUILIB with React Native
      </Text>
    </View>
  );
};

export default App;

Behold, the Final Output!

You may look into the RNUILIB documentation for more information on how to use the library.

Source: RNUILIB Docs

Join the MyLibrary Revolution: Unleash Your Creativity through Contribution

Suryansh Singh — Fri, 13 Oct 2023 04:52:44 +0000

Hey there, tech enthusiasts, design aficionados, and eager learners! 🌟 Get ready to embark on a thrilling adventure as I unveil the remarkable journey behind MyLibrary, the cutting-edge project that's all set to transform the way you engage with the world of books. Brace yourselves for a riveting tale of collaborative innovation and the unwavering pursuit of knowledge! 💡

From Challenge to Creation: A Tech Adventure Like No Other

The captivating story of MyLibrary originated from a challenging hiring task that dared me to push the boundaries of my coding prowess and creativity. It became more than just a project; it became a beacon of inspiration, fostering an inclusive environment for both seasoned tech maestros and enthusiastic newcomers to unite, collaborate, and weave magic through code. 📚

Bridging Technology and Literature: A Seamless Fusion

At the heart of MyLibrary lies the seamless fusion of cutting-edge technologies and the timeless charm of literature. With the mighty Google Book API at its core, complemented by the robust security of Auth0 and the dynamic prowess of React.js and Tailwind CSS, MyLibrary offers an immersive, user-friendly interface that invites book enthusiasts to explore, discover, and revel in the joy of reading. 🚀

Embark on the MyLibrary Adventure: Where Creativity Knows No Bounds

Join me on this exhilarating journey, where MyLibrary beckons you to unravel a rich tapestry of stories and knowledge that await your discovery. Dive into the mesmerizing world of MyLibrary at MyLibrary, where you, whether a seasoned coding wizard, a visionary design virtuoso, or a budding talent hungry for knowledge, have a unique opportunity to contribute, learn, and be a part of this thriving community. Let's unite to create an extraordinary digital haven that redefines the very essence of book exploration! 📖

Every step you take with MyLibrary promises new adventures, discoveries, and untapped opportunities. So, gear up and get ready to immerse yourself in an extraordinary journey that's about to redefine the way you experience the magic of books! ✨

Let's set sail and make MyLibrary a digital sanctuary of boundless knowledge and unparalleled creativity! 🌊

Explore the MyLibrary project on GitHub and experience it live at MyLibrary. This project is proudly participating in Hacktoberfest 2023, and we welcome your contributions to make this a journey of collaborative excellence! 🎉