Building a React Web App with a Local Database

In modern web development, managing data efficiently is a cornerstone of creating robust applications. While external databases like Firebase or MongoDB are popular choices, sometimes a local database is all you need for quick, offline-capable, or lightweight React applications. In this article, we'll explore how to build a React web app using a local database like IndexedDB, localStorage, or libraries like Dexie.js.

Why Use a Local Database?

Local databases are suitable for use cases like:

1. Offline Applications: Data remains accessible without an internet connection.
2. Prototyping: Quickly test features without setting up a backend.
3. Personalized Apps: Store user preferences or session data locally.

Setting Up Your React App

1. Create the React App Start by creating a new React project:

npx create-react-app local-db-app
cd local-db-app
npm start        

2. Install Required Libraries If you plan to use IndexedDB with a library like Dexie.js, install it:

npm install dexie        

Choosing a Local Database Solution

1. Using localStorage

Best for simple key-value pairs.

// Save data to localStorage
localStorage.setItem('username', 'JohnDoe');

// Retrieve data from localStorage
const username = localStorage.getItem('username');
console.log(username);

// Remove data
localStorage.removeItem('username');        

Pros:

• Easy to use.
• No additional libraries needed.

Cons:

• Limited storage (5-10MB).
• Only string data can be stored.

2. Using IndexedDB with Dexie.js

IndexedDB is a low-level API for client-side storage, and Dexie.js simplifies its usage.

Setup with Dexie.js:

import Dexie from 'dexie';

// Create a new database
const db = new Dexie('MyDatabase');
db.version(1).stores({
    items: '++id, name, value' // Define schema
});

// Add data
async function addItem() {
    await db.items.add({ name: 'Item 1', value: 100 });
}

// Fetch data
async function fetchItems() {
    const items = await db.items.toArray();
    console.log(items);
}

addItem();
fetchItems();        

Pros:

• Supports complex data types.
• Large storage capacity.
• Asynchronous and powerful.

Cons:

• Slightly more complex to set up.

Building the App: Example

Here’s a small example app to store and retrieve notes using IndexedDB:

App Structure:

src/
├── components/
 │   ├── NoteForm.js
 │   ├── NoteList.js
├── App.js
└── index.js
        

NoteForm.js

import React, { useState } from 'react';

const NoteForm = ({ addNote }) => {
    const [note, setNote] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (note.trim()) {
            addNote(note);
            setNote('');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={note}
                onChange={(e) => setNote(e.target.value)}
                placeholder="Enter your note"
            />
            <button type="submit">Add Note</button>
        </form>
    );
};

export default NoteForm;
        

NoteList.js

import React from 'react';

const NoteList = ({ notes }) => {
    return (
        <ul>
            {notes.map((note, index) => (
                <li key={index}>{note}</li>
            ))}
        </ul>
    );
};

export default NoteList;        

App.js

import React, { useState, useEffect } from 'react';
import Dexie from 'dexie';
import NoteForm from './components/NoteForm';
import NoteList from './components/NoteList';

const db = new Dexie('NotesDatabase');
db.version(1).stores({
    notes: '++id, content'
});

const App = () => {
    const [notes, setNotes] = useState([]);

    useEffect(() => {
        const fetchNotes = async () => {
            const allNotes = await db.notes.toArray();
            setNotes(allNotes.map((note) => note.content));
        };
        fetchNotes();
    }, []);

    const addNote = async (content) => {
        await db.notes.add({ content });
        setNotes((prevNotes) => [...prevNotes, content]);
    };

    return (
        <div>
            <h1>Notes App</h1>
            <NoteForm addNote={addNote} />
            <NoteList notes={notes} />
        </div>
    );
};

export default App;        

Running the App

1. Start the development server:

npm start        

2. Open the app in your browser, and test adding notes. Notes will persist using IndexedDB.

Conclusion

Building a React app with a local database is a great way to create lightweight, offline-capable applications. While localStorage works for simple needs, IndexedDB (with libraries like Dexie.js) is powerful for more complex requirements. Experiment with these tools and see what fits your use case!

Follow for more articles like this