Building the Frontend with React

Component-Based Architecture

• UI is broken into reusable components
• Each component manages its own logic and view

Example:

function Header() {
  return <h1>Welcome to My App</h1>;
}

State and Props

• Props → pass data between components
• State → dynamic data inside a component

const [count, setCount] = useState(0);

Handling User Interaction

<button onClick={() => setCount(count + 1)}>+</button>

Fetching Data from Backend

useEffect(() => {
  fetch("/api/users")
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

Frontend Responsibilities

• Rendering UI
• Collecting user input
• Sending requests to backend
• Displaying API responses
• Managing authentication state

NoSQL databases are designed to store data in a flexible, non-relational format, unlike traditional SQL databases that use tables and fixed schemas.

Characteristics of NoSQL Databases

• Schema-less or flexible schema
• High scalability
• Distributed architecture
• Optimized for large datasets

MongoDB is a document-oriented NoSQL database that stores data in JSON-like documents (BSON).

Why MongoDB is popular:

• Easy to use with JavaScript
• Flexible schema
• High performance
• Cloud-ready
• Ideal for modern web apps

A database is a container for collections.

Example:

ecommerce_db

A collection is a group of related documents (similar to a table in SQL).

Example:

users
orders
products

A document is a single record stored as a JSON object.

Example:

{
  "_id": "123",
  "name": "Alice",
  "email": "alice@example.com",
  "age": 25
}

Key Features

• Fields can vary between documents
• Nested structures allowed
• Each document has a unique _id

{
  "name": "Order1",
  "items": [
    { "product": "Laptop", "price": 800 }
  ]
}

CRUD = Create, Read, Update, Delete

Insert One

db.users.insertOne({ name: "John", age: 30 })

Insert Many

db.users.insertMany([
  { name: "Alice" },
  { name: "Bob" }
])

Find All

db.users.find()

Find with Condition

db.users.find({ age: { $gt: 25 } })

Update One

db.users.updateOne(
  { name: "John" },
  { $set: { age: 31 } }
)

Update Many

db.users.updateMany(
  { age: { $lt: 18 } },
  { $set: { status: "minor" } }
)

Delete One

db.users.deleteOne({ name: "John" })

Delete Many

db.users.deleteMany({ age: { $lt: 18 } })

Indexes improve query performance by allowing fast data lookup.

Create Index

db.users.createIndex({ email: 1 })

Types of Indexes

• Single field
• Compound
• Text index
• Unique index

MongoDB supports powerful query operators:

Example:

db.users.find({ age: { $gte: 18, $lte: 30 } })

Used for data processing and analysis.

Aggregation Pipeline Stages

• $match – filter documents
• $group – group data
• $sort – sort results
• $project – reshape output

Example:

db.orders.aggregate([
  { $match: { status: "completed" } },
  { $group: { _id: "$userId", total: { $sum: "$amount" } } }
])

MongoDB Atlas is a fully managed cloud database service for MongoDB.

Key benefits:

• No server maintenance
• Automatic backups
• Built-in security
• Global availability
• Scales easily

1. Create an Atlas Account

• Visit: https://www.mongodb.com/atlas
• Create a free cluster

2. Create a Cluster

• Choose cloud provider (AWS/GCP/Azure)
• Select region
• Use free tier for learning

3. Configure Security

• Create database user
• Whitelist IP address
• Enable authentication

4. Get Connection String

mongodb+srv://username:password@cluster.mongodb.net/dbname

5. Connect from Node.js

import mongoose from "mongoose";

mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log("MongoDB connected"))
  .catch(err => console.error(err));

• Performance monitoring
• Data Explorer
• Automated scaling
• Backup and restore
• Alerts and logs

React UI → Express API → MongoDB → Express → React

Example:

• React form submits data
• Express receives request
• MongoDB stores document
• Response sent back to React
• UI updates

• Validate data before inserting
• Use indexes for frequent queries
• Never expose MongoDB credentials in frontend
• Use environment variables
• Secure Atlas access properly

• React handles frontend UI and user interaction
• MongoDB stores flexible, scalable data
• CRUD operations manage data lifecycle
• Indexing and aggregation optimize performance
• MongoDB Atlas enables cloud-based deployment
• Together they form the foundation of modern full-stack applications