DEV Community: Abhinav Anand

Building My First Full-Stack App: Part 3 - Integrating the Database with PostgreSQL & Knex.js

Abhinav Anand — Fri, 13 Jun 2025 08:48:17 +0000

Introduction

As discussed in Part 2, I designed the overall layout of the backend server by creating all the essential endpoints, connecting it to the frontend, and tested it using a mock database.

Now, it's time to transition to a real database. Why is a persistent database essential?

Manual Data Updates: With a mock database, data updates are manual and not persistent across sessions.
Scalability Limitations: In-memory arrays become inefficient and unmanageable with growing datasets.
Inefficient Authentication: Each login attempt requires iterating through the entire dataset, which is highly inefficient for real applications.

What We'll Cover: The Database Layer

In this part, we'll cover how I set up a relational database using PostgreSQL, and connected it to the backend server using Knex.js. We'll also explore why I chose synchronous bcryptjs for password hashing, and the crucial step of securely transferring the Clarifai API call to the backend (a task we deferred in Part 2).

Key Technologies for This Section

Database: PostgreSQL
Query Builder: Knex.js
Database Management: Combination of DBeaver and psql
Password Hashing: bcryptjs

Setting Up Your Database: PostgreSQL

Why PostgreSQL?

I specifically chose a relational database, opting for PostgreSQL due to its widespread popularity, robustness, and the invaluable learning opportunity it offers over non-relational alternatives. PostgreSQL is a mature, reliable, and widely supported database system.

Database Installation and Setup

To install PostgreSQL, I utilized Homebrew (as I'm using a Mac). Here are the steps I took to successfully install and start PostgreSQL:

First, I ran brew update to ensure Homebrew was up-to-date.
Next, I executed brew doctor for system health checks.
Then, I simply ran brew install postgresql.
Finally, brew services start postgresql to start the PostgreSQL service.

After starting PostgreSQL, I created a new database using the command: createdb 'your_database_name'

To connect to the database via the command line, I used: psql 'your_database_name'

Designing the Database Schema

Next, I designed a simple, secure database schema comprising two interconnected tables: users (for general user information) and login (for storing hashed passwords and login credentials, ensuring user privacy).

To simplify visualization and management, I connected the PostgreSQL database to DBeaver, a graphical tool, which greatly helped visualize the database for a first-timer. (Consider adding a screenshot of DBeaver here showing your tables!)

The `users` Table

The users table stores general user information. For this table, I created columns for id, name, email, entries, and joined. The id column serves as the primary key.

To build the users table, I ran this query in DBeaver:

CREATE TABLE users (
    id serial PRIMARY KEY,
    name VARCHAR (100),
    email text UNIQUE NOT NULL,
    entries BIGINT DEFAULT 0,
    joined TIMESTAMP NOT NULL
);

The `login` Table

This login table includes valuable login information. It consists of id, hash (for the hashed password), and email. The id also serves as the primary key, connecting it to the users table (though implicitly in this setup, often via foreign keys in more complex designs).

To build the login table, I ran this query:

CREATE TABLE login (
    id serial PRIMARY KEY,
    hash VARCHAR(100) NOT NULL,
    email text UNIQUE NOT NULL
);

Connecting Backend to Database with Knex.js

Introducing Knex.js: Your SQL Query Builder

Knex.js is a powerful SQL query builder for JavaScript, simplifying database interactions and query construction in Node.js applications without the full abstraction of an ORM. It provides a simple and powerful way to build and execute SQL queries, as well as a helpful set of utilities for working with databases.

I chose Knex.js over raw SQL or a full ORM due to its clear documentation and a more intuitive query building syntax, which I found easier for this project's scope. Ultimately, the choice depends on project needs and personal preference.

Installation and Configuration

Now, it’s time to install Knex.js to establish the connection with our database:

To install Knex.js, I simply ran the command: npm install knex
Since I was using PostgreSQL, I also installed its client library: npm install pg
Then, I imported Knex into my server file: import knex from 'knex'

Next, I configured the database connection:JavaScript

const db = knex({
    client: 'pg',
    connection: {
      host : '127.0.0.1', // localhost
      user : 'postgres', // Add your database username here
      port: 5432, // Standard PostgreSQL port. Ensure this matches your setup.
      password : '', // Add your correct password here
      database : 'smartweb' // Add your database name here
    }
});

(Note:* Ensure your port is correctly set to 5432 unless you've configured a custom port.)*

To test that the connection was established, I used a SELECT query builder from Knex's documentation:

db.select('*').from('users')
  .then(data => console.log(data))
  .catch(err => console.error("Database connection test failed:", err));

I didn’t get any errors, which meant everything was working fine. Now, it was time for Refactoring API Endpoints.

Refactoring API Endpoints for Database Interaction

Implementing Password Hashing with bcryptjs

Password hashing is critical: storing plain text passwords is a severe security vulnerability. I chose bcryptjs for its proven reliability and adherence to modern security standards, ensuring user password privacy. Passwords should only be known to the user, not even the company.

To integrate bcryptjs, I installed it first:

npm install bcryptjs

Then, I imported it into my server.js file: import bcrypt from "bcryptjs";

For this initial implementation, I opted for bcryptjs's synchronous hashing to simplify the learning curve. Future iterations will adopt asynchronous methods for improved performance and non-blocking operations in a production environment.

Now, let's refactor the endpoints. I largely referred to the Knex.js documentation for guidance during this process.

Refactoring the `/register` Endpoint

To make it easier to understand, here's the code, followed by a line-by-line explanation:

app.post('/register', (req, res) => {
    const {name, email, password} = req.body;
    if (!name || !email || !password) {
        return res.status(400).json('Incorrect form submission');
    }
    const salt = bcrypt.genSaltSync(10);
    const hash = bcrypt.hashSync(password, salt);
    db.transaction(trx => {
        trx.insert({
            hash: hash,
            email: email
        })
        .into('login')
        .returning('email')
        .then(loginEmail => {
            return trx('users')
            .returning('*')
            .insert({
                name: name,
                email: loginEmail[0].email,
                joined: new Date()
            })
            .then(user => {
                res.json(user[0]);
            });
        })
        .then(trx.commit)
        .catch(trx.rollback)
        .catch(err => res.status(400).json('Unable to register'));
    });               
});

const {name, email, password} = req.body;: This is a simple destructuring method, used for cleaner code by avoiding req.body.name repeatedly.
if (!name || !email || !password) { return res.status(400).json('Incorrect form submission'); }: This validation ensures all required fields are submitted, preventing incomplete user registrations and improving data integrity.
const salt = bcrypt.genSaltSync(10); const hash = bcrypt.hashSync(password, salt);: This step is for hashing the password using bcryptjs. As mentioned, I used the synchronous method for simplicity in this initial project.
db.transaction(trx => { ... });: I utilized Knex.js transactions to ensure atomic operations when inserting user data into both the login and users tables. This guarantees that either both inserts succeed, or neither does, maintaining data consistency.
- trx.insert({ hash: hash, email: email }).into('login').returning('email'): Inserts the hashed password and email into the login table, returning the email to be used in the next step.
- .then(loginEmail => { return trx('users').returning('*').insert({ ... }) ... });: Takes the returned email from the login table and inserts it into the users table along with other user information, returning the newly created user record.
.then(user => { res.json(user[0]); }): Sends the newly created user object back to the client.
.then(trx.commit).catch(trx.rollback): .then(trx.commit) ensures the transaction is committed if all operations succeed, while .catch(trx.rollback) rolls back all changes if any error occurs within the transaction, maintaining data consistency.
.catch(err => res.status(400).json('Unable to register'));: Catches any errors during the transaction and returns a generic 'Unable to register' message to the client for security reasons, avoiding revealing exact error details.

Refactoring the `/signin` Endpoint

Now, it’s time for refactoring the sign-in endpoint:

app.post('/signin', (req, res) => {
    const {password, email} = req.body;
    if (!email || !password) {
        return res.status(400).json('Please enter email and password');
    }
    db.select('email', 'hash').from('login')
    .where('email', '=', email)
    .then(data => {
        if (!data.length) { // Check if user exists before attempting to access data[0]
            return res.status(400).json('Wrong credentials');
        }
        const isValid = bcrypt.compareSync(password, data[0].hash);
        if (isValid) {
            return db.select('*').from('users')
            .where('email', '=', email)
            .then(user => {
                res.json(user[0]);
            })
            .catch(err => res.status(400).json('Unable to get user'));
        } else {
            res.status(400).json('Wrong credentials');
        }
    })
    .catch(err => res.status(400).json('Unknown user')); 
});

db.select('email', 'hash').from('login').where('email', '=', email): This step fetches the email and hashed password (hash) from the login table for the provided email.
if (!data.length) { return res.status(400).json('Wrong credentials'); }: Crucially, this check ensures that a user with the provided email exists before attempting to compare passwords, preventing errors if data is empty.
const isValid = bcrypt.compareSync(password, data[0].hash);: The retrieved hash is then compared with the provided password using bcryptjs.compareSync().
If isValid is true (password matches), the code fetches the full user profile from the users table and responds with user[0]. Otherwise, it responds with 'Wrong credentials' or 'Unknown user' in case of other errors, again avoiding specific error details.

Refactoring the `/profile/:id` Endpoint

This endpoint is simpler, as it only needs to retrieve a user's profile based on their ID from req.params.

app.get('/profile/:id', (req, res) => { // Corrected endpoint path
    const {id} = req.params;
    db.select('*').from('users')
    .where('id', '=', id)
    .then(user => {
        if (user.length) {
            res.json(user[0]);
        } else {
            res.status(400).json('Not Found');
        }  
    })
    .catch(err => res.status(400).json('Error getting user'));
});

Refactoring the `/image` Endpoint

Similar to /profile/:id, this endpoint updates the image entries count for a user.

app.put('/image', (req, res) => {
    const { id } = req.body;
    db('users').where('id', '=', id)
        .increment('entries', 1)
        .returning('entries')
        .then(entries => {
            res.json(entries[0].entries);
        })
        .catch(err => res.status(400).json('Unable to update entries'));
});

After implementing these changes, I thoroughly tested all endpoints, and everything was working correctly without errors. This was a significant step forward!

Handling Database Errors and Security Considerations

Robust Error Management

For error management, I ensured that no exact error details are exposed to the user. All endpoints return generic error messages (e.g., 'Unable to register', 'Wrong credentials', 'Not Found'), enhancing security and user experience.

Basic Frontend Response Handling

While the backend handles primary security like hashing and API key management, the frontend also plays a role in how it processes responses. After fetching data from the backend:

.then(res => res.json())
.then(user => {
    if (user.id) {
        this.props.loadUser(user);
        this.props.onRouteChange('home');
    } else {
        alert("Invalid credentials");
    }
})

This snippet ensures that if a valid user ID is returned from the backend, the user's data is loaded, and the application navigates to the 'home' route. If no user ID is present, an alert indicates invalid credentials. The loadUser function (defined in App.jsx) updates the application's state with the user's details:

loadUser = (data) => {
    this.setState({user : {
        id: data.id,
        name: data.name,
        email: data.email,
        entries: data.entries,
        joined: data.joined
    }});
};

This state management ensures the frontend accurately reflects the logged-in user's information.

(Important Security Note:* For production applications, storing sensitive user data or tokens directly in localStorage or sessionStorage on the frontend should be done with extreme caution due to XSS vulnerabilities. More secure methods, like httpOnly cookies, are typically preferred for handling authentication tokens.)*

Transferring Clarifai API to Backend

To prevent exposing my Personal Access Token (PAT) key from the frontend console, I transferred the Clarifai API call to the backend. This is a critical security measure.

Here’s the backend code snippet for handling the Clarifai API call:

const handleAPICall = (req, res) => {
    const { input } = req.body;
    // IMPORTANT: These should be loaded from environment variables (.env file)
    // and NOT hardcoded or committed to version control in a real application.
    const PAT = process.env.CLARIFAI_PAT; // Your Personal Access Token
    const USER_ID = process.env.CLARIFAI_USER_ID; // Your Clarifai User ID
    const APP_ID = process.env.CLARIFAI_APP_ID; // Your Clarifai App ID

    const MODEL_ID = 'face-detection';   
    const IMAGE_URL = input;

    // Clarifai API request setup (largely from Clarifai Docs)
    const raw = JSON.stringify({
        "user_app_id": {
            "user_id": USER_ID,
            "app_id": APP_ID
        },
        "inputs": [
            {
                "data": {
                    "image": {
                        "url": IMAGE_URL
                    }
                }
            }
        ]
    });

    const requestOptions = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Authorization': 'Key ' + PAT
        },
        body: raw
    };

    fetch("https://api.clarifai.com/v2/models/" + MODEL_ID + "/outputs", requestOptions)
        .then(response => response.json())
        .then(data => {
            res.json(data);
        })
        .catch(err => {
            res.status(400).json('Unable to work with API');
        });
};

// You'll also need an endpoint to handle this API call, e.g.:
// app.post('/imageurl', (req, res) => { handleAPICall(req, res); });

The core API call structure largely follows Clarifai's documentation, adapted for a Node.js environment. I've created a dedicated endpoint (/imageurl) on the backend to manage this API call securely. The key modification is handling the API response and passing it back to the frontend.

Here's the frontend code snippet after adjusting the Clarifai API call to the backend:

JavaScript

onButtonSubmit = () => {
    this.setState({imageUrl: this.state.input}, () => {
        fetch('http://localhost:3000/imageurl', { // IMPORTANT: Change this to your DEPLOYED backend URL for production!
          method: 'post',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            input: this.state.input
          })
        })
        .then(response => response.json())
        .then(result => {
          if (result) {
            fetch('http://localhost:3000/image', { // IMPORTANT: Change this to your DEPLOYED backend URL for production!
              method: 'put',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({
                id: this.state.user.id
              })
            })
            .then(res => res.json())
            .then(count => {
              this.setState(Object.assign(this.state.user, {entries: count}));
            });
          }
          this.displayFaceBox(this.calculateFaceLocation(result));
        })
        .catch(error => console.log('error', error));
    });
};

The frontend now sends the image URL to its own backend endpoint (/imageurl), which then securely handles the Clarifai API interaction and returns the results. If a successful result is received, a subsequent call updates the user's image entry count.

Conclusion: The Full-Stack Picture Nears Completion

It was incredibly satisfying to see everything working seamlessly after creating the real database and connecting it to the backend server using Knex.js. Knex made building queries and interacting with the backend surprisingly simple. My application now feels like a complete full-stack app, with user data stored perfectly and securely in the database.

Key Learning Points:

Database design principles (including table separation for security).
Working with PostgreSQL for persistent data storage.
Mastering Knex.js for efficient and readable database operations.
Implementing secure password hashing with bcryptjs.
Refactoring API endpoints for robust database interaction.
Understanding the importance of moving sensitive API calls to the backend for security.

What's Next: Deployment

Deployment proved to be a significant challenge. While my prior learning focused on Heroku, I opted for Render.com due to its free tier – a platform with distinct deployment processes. Despite taking a full day, successfully deploying the application was a highly rewarding experience.

I'm thinking of sharing my complete experience with Render.com, a step-by-step guide on how I deployed my app, as it might help someone else facing similar issues.

Okay, lastly, don’t forget to share your thoughts and leave some comments below. And as I also say at the end of my every blog, if you find something advisable, please tell me—I’m always open to advice!

Building My First Full-Stack App: Part 2 - Crafting the Node.js Backend for Face Detection

Abhinav Anand — Fri, 13 Jun 2025 08:06:48 +0000

Setting Up the Node.js and Express.js Server

Initializing the Project

I started by creating a dedicated folder for the server and ran npm init to set up the basic Node.js package.json file. After that, I created the main server file, server.js.

Express.js Fundamentals in Action

To get the server running, I installed Express.js by running npm install express.

My basic server setup in server.js looked like this:

import express from 'express';
const app = express();

// Root route to test if the server is working
app.get('/', (req, res) => {
res.json('working');
});`

`app.listen(3000, () => {
console.log('Server is running on port 3000');
});

I tested this root route with Postman.com to confirm the server was up and running.

A Crucial Middleware Lesson: Parsing Request Bodies

During initial testing, I quickly encountered an error. The server wasn't able to read the incoming request bodies from the frontend. After some investigation, I realized I'd forgotten to add the necessary middleware to parse the response. To fix this, I simply added app.use(express.json()). With this in place, my server could now correctly interpret JSON data sent from the frontend, and everything started working as expected.

Designing API Endpoints for Face Detection

Planning the API Structure

Before diving into implementation, I like to outline the overall structure of my API endpoints. This planning phase simplifies development, even for a smaller number of routes. My planned structure looked something like this:

/*
/signin --> POST = will respond => success/failed
/register --> POST = will respond => user
/profile/:id --> GET = will respond => user
/image --> PUT = will respond => updated user's data
*/

Now, let's create each of these API endpoints step by step.

The /signin Endpoint

To test this endpoint, I started with a simple, temporary fake database containing two users. This allowed me to simulate authentication without setting up a full database yet.

Here's the initial sign-in route I created:

app.post('/signin', (req, res) => {
const { email, password } = req.body; // Destructuring for cleaner code
// For simplicity during testing, hardcoded a single user for authentication.
if (database.user[0].email === email && database.user[0].password === password) {
res.json('success');
} else {
res.status(400).json('Invalid Credentials');
}
});

The /register Endpoint

For the registration route, I simulated adding a new user to our temporary database using the array's push method:

app.post('/register', (req, res) => { const { email, name, password } = req.body; database.users.push({ id: '125', name: name, email: email, password: password, entries: 0, joined: new Date() }); res.json(database.users[database.users.length - 1]); });

The `/profile/:id` Endpoint

While not immediately used by the frontend in this version, I included this route for future expandability, allowing users to view their profiles later.

JavaScript

app.get('/profile/:id', (req, res) => { const { id } = req.params; let found = false; database.users.forEach(user => { if (user.id === id) { found = true; return res.json(user); } }); if (!found) { res.status(404).json('User Not Found'); } });

The `/image` Endpoint

This endpoint is designed to receive a user ID and increment their entries count, similar to the profile route.

JavaScript

app.put('/image', (req, res) => { const { id } = req.body; let found = false; database.users.forEach(user => { if (user.id === id) { found = true; user.entries++; return res.json(user.entries); } }); if (!found) { res.status(404).json('User Not Found'); } });

After implementing each endpoint, I thoroughly tested it using Postman before moving to the next, ensuring functionality.

Crucial for Full-Stack: Understanding and Implementing CORS

All necessary endpoints were created and tested. It was time to connect them to the frontend. However, after connecting the sign-in endpoint and testing it with my frontend, I encountered the infamous CORS (Cross-Origin Resource Sharing) issue.

The browser console showed that the request was blocked due to "no-cors." After doing some research, I understood that CORS ensures security by allowing controlled sharing of resources across different origins (domains) in a web browser. The backend is the proper place to handle this issue because it ensures that security rules are consistently applied and cannot be bypassed by malicious clients.

To solve this, I added the cors middleware to the backend. I installed it using npm install cors, imported it (import cors from 'cors'), and then added it as middleware (app.use(cors())). With this, the sign-in endpoint now works perfectly with the frontend.

Conclusion: The Backend's Power and What's Next

In this part, we successfully built and connected a foundational backend server to our frontend. While currently using a mock database for initial testing, this setup was crucial for establishing the core application flow.

I learned a lot in this phase, including:

The value of outlining basic server endpoints before connecting to a final database.
How to efficiently test API endpoints using Postman.com.
The importance of express.json() middleware for parsing request bodies.
The practical steps to connect backend endpoints to a frontend.
How to identify and effectively handle CORS issues in a full-stack application.
The fundamental concepts of backend server development.

A Note on Clarifai API Integration (Next Steps)

You might have noticed that I haven't moved the Clarifai API integration to the backend in this specific part. My development approach was to first ensure all core components (frontend, backend server, and eventually database) were functional and communicating correctly. In a later refinement stage, or in a subsequent blog post, I'll integrate the Clarifai API directly into this backend for enhanced security and a more robust application architecture.

What's Coming in Part 3

Now that our frontend and backend are communicating, the next logical step is to introduce persistence! In Part 3, we'll dive into the database part. We'll talk about how I created the database and connected it to the backend server using Knex.js.

Please don't forget to share your thoughts and leave comments about this blog. I'm always open to advice, so if you find something that needs to be changed or can be improved, just tell me!

Building My First Full-Stack App: Part 1 - Crafting the React Frontend for Face Detection

Abhinav Anand — Tue, 27 May 2025 10:10:13 +0000

Introduction

This is my first deep dive into building a full-stack web application, and I'm excited to share my learning journey and the technical steps involved. My goal with this project was to solidify my understanding of frontend development with React, connect to an external API, build a robust backend server, and manage a database – culminating in a deployed application.

What is this app?

This is a simple web application where users can paste an image URL, and the app will detect and highlight faces within that image.

Key Technologies Used:

Front-End: Vite + React.js
Back-End: Node.js + Express.js
Database: PostgreSQL (managed with dBeaver)

You can explore the full codebase here:

https://github.com/abhinavan00/face_detection_app

The Frontend (React.js)

Setting Up the Project:

I initiated the React project using npm create vite@latest, selecting JavaScript as the language. This provided a lightweight and fast development environment. After initial setup, I streamlined the project by removing unnecessary boilerplate from App.jsx, App.css, and index.css to align with my specific design requirements.

Core Component Architecture:

Before writing any code, I planned the application's skeletal structure to ensure modularity and maintainability. The design included several functional components:

Logo: Displays the application branding.
Navigation: Handles user authentication links (Sign In, Register).
Entry Count: Shows user-specific data (e.g., images processed).
ImageLinkForm: Contains the input field for image URLs and the submission button.
FaceRecognition: Responsible for displaying the image and overlaying the detected bounding boxes.
Smart Components: App.jsx (the main container), SignIn, and Register pages. The SignIn and Register components were styled efficiently using Tachyons.

Handling User Input and Displaying Results:

For state management, I opted for React Class Components in this project, although I have also practiced with React Hooks. The core state elements were input (to capture the image URL from the form) and imageUrl (to store the URL for image display).

Upon user submission, the input value updates imageUrl. This imageUrl is then passed as a prop to the FaceRecognition component via ImageLinkForm, enabling the image to be displayed.

To detect faces and draw bounding boxes, I utilized Clarifai's face-detection API. The initial API call was performed via JavaScript's Fetch API (RESTful method). I also explored integrating this API using gRPC for a more robust backend solution in a separate practice session.

Overcoming the CORS Challenge (A First-Time Debugging Experience):

This particular challenge significantly deepened my understanding of web security. Initially, my frontend API requests were consistently being rejected. I quickly identified the issue as a CORS (Cross-Origin Resource Sharing) policy violation, a concept I hadn't encountered directly in my coursework.

My local frontend server (running on localhost) was attempting to make a direct request to the Clarifai API, which was blocking it for security reasons. After extensive searching and troubleshooting (including exploring my course's Discord channel and external resources), I understood the need to proxy the request.

My immediate solution for testing was to create a "fake server" (a simple local proxy) that would appear as the origin to Clarifai, bypassing the CORS restriction for development purposes. This temporary solution allowed me to successfully retrieve API results and proceed with development, though I knew a proper backend proxy would be essential for the final application.

Calculating and Displaying Bounding Boxes:
Once I received the data from Clarifai, the next step was to parse the API response to calculate the precise coordinates for the bounding boxes. This involved some careful geometric calculations based on the image dimensions and the API's returned data.

The calculated displayFaceBox object was then passed as a prop to the FaceRecognition component, which dynamically rendered the bounding boxes around the detected faces.

Conclusion

I hope this first part has given you a clear insight into building the frontend of a full-stack application with React. I'd love to hear your thoughts or questions about anything covered here – feel free to leave them in the comments below!"

DEV Community: Abhinav Anand

Building My First Full-Stack App: Part 3 - Integrating the Database with PostgreSQL & Knex.js

Introduction

What We'll Cover: The Database Layer

Key Technologies for This Section

Setting Up Your Database: PostgreSQL

Why PostgreSQL?

Database Installation and Setup

Designing the Database Schema

The users Table

The login Table

Connecting Backend to Database with Knex.js

Introducing Knex.js: Your SQL Query Builder

Installation and Configuration

Refactoring API Endpoints for Database Interaction

Implementing Password Hashing with bcryptjs

Refactoring the /register Endpoint

Refactoring the /signin Endpoint

Refactoring the /profile/:id Endpoint

Refactoring the /image Endpoint

Handling Database Errors and Security Considerations

Robust Error Management

Basic Frontend Response Handling

Transferring Clarifai API to Backend

Conclusion: The Full-Stack Picture Nears Completion

Key Learning Points:

What's Next: Deployment

Building My First Full-Stack App: Part 2 - Crafting the Node.js Backend for Face Detection

Setting Up the Node.js and Express.js Server

Initializing the Project

Express.js Fundamentals in Action

A Crucial Middleware Lesson: Parsing Request Bodies

Designing API Endpoints for Face Detection

Planning the API Structure

The /signin Endpoint

The /register Endpoint

The /profile/:id Endpoint

The /image Endpoint

Crucial for Full-Stack: Understanding and Implementing CORS

Conclusion: The Backend's Power and What's Next

A Note on Clarifai API Integration (Next Steps)

What's Coming in Part 3

Building My First Full-Stack App: Part 1 - Crafting the React Frontend for Face Detection

Introduction

What is this app?

Key Technologies Used:

You can explore the full codebase here:

The Frontend (React.js)

Setting Up the Project:

Core Component Architecture:

Handling User Input and Displaying Results:

Overcoming the CORS Challenge (A First-Time Debugging Experience):

Conclusion

The `users` Table

The `login` Table

Refactoring the `/register` Endpoint

Refactoring the `/signin` Endpoint

Refactoring the `/profile/:id` Endpoint

Refactoring the `/image` Endpoint

The `/profile/:id` Endpoint

The `/image` Endpoint