No Code vs. Code: Which Builds Faster?

In this guide, we'll walk you through building a robust job board application using both the MERN stack (MongoDB, Express.js, React.js, and Node.js) and Xano, a no-code backend. We’ll cover the complete process for both approaches, including database configuration, server setup, API endpoints, business logic, and authentication.

Setting Up the Database:

MERN Stack:

1. Install Mongoose: This library facilitates interaction with MongoDB.
2. Define Job Schema: Create a schema to define the structure of job documents:

• `JobSchema` stores job details such as title, description, salary, and company.

1. Create Job Model: Export this schema as a Mongoose model to use it throughout the project.

Xano:

1. Add a Database Table: Go to the database page and click to add a database table named `jobs`.
2. Spreadsheet View: Use the spreadsheet view to add columns for job properties (title, description, salary, company, etc.).

Configuring the Server:

MERN Stack:

1. Dependencies: Install required packages (`express`, `mongoose`, `cors`, etc.).
2. Server Configuration: Write a `server.js` file to:

• Set up the server with `express()`.
• Configure middleware for parsing JSON and handling CORS.
• Connect to MongoDB.
• Define routes to manage job listings.
• Start the server to listen on a specified port.

Xano:

No setup needed, as Xano configures the server for you!

CRUD API Endpoints:

MERN Stack:

We create RESTful API routes for CRUD operations:

1. Routes for Jobs:

• Get All Jobs: Defines an endpoint to retrieve all jobs from the database.
• Create a New Job: Allows for adding a new job listing to the database.
• Update a Job: Facilitates modifying an existing job listing.
• Delete a Job: Enables removing a job from the database.

Xano:

1. Autogenerate CRUD Endpoints: Check the box for "Create an API Group and Add Basic CRUD endpoints" when creating the jobs table to autogenerate the endpoints.
2. Manual Addition: Alternatively, go to an API group, add an API endpoint, and select from prebuilt CRUD endpoints, linking them to the jobs table.

Custom API Endpoints:

MERN Stack:

We create a custom endpoint to filter jobs by salary range:

1. Get Jobs by Salary Range: Defines an endpoint to retrieve jobs within a specified salary range by handling `minSalary` and `maxSalary` query parameters.

Xano:

1. Create a New GET Endpoint: Name it "jobs_salary_filtered" (or choose another name).
2. Add Variables: Click the "+" in the inputs section to add `min_salary` and `max_salary` integers, making them nullable.
3. Query Rules: Click the edit (pencil) icon on the "query all records" element, add conditionals to filter by salary.
4. Save and Publish: Save the query rules, query all records, and publish the endpoint.

External API Requests:

MERN Stack:

We create an external API request to add company descriptions:

1. Modify the Job POST Method: Update the job creation route to include an external API request.
2. External API Request: Fetch company descriptions based on company names.
3. Store Company Description: Include the fetched description in the job document.

Xano:

1. Modify the POST Jobs Endpoint: Go into the autogenerated endpoint and add an external API request step.
2. Configure API Request:

• URL: Add the corresponding URL, ending with "%s".
• URL Filter: Use "sprintf" to dynamically insert the company name.
• Headers: Add authentication headers with "Authorization: Basic ".

1. Run & Debug: Enter job values for testing and debug to get API response details.
2. Add Record: Move API request above the add record step, assign company description to the job from the response.
3. Save and Publish: Save the add record step, publish and confirm.

Authentication:

MERN Stack:

1. Define User Schema: Create a schema for storing users' information, including email and password.
2. Middleware:

• Token Authentication: Checks the presence of a JWT token in the request headers and verifies its validity.

1. Authentication Routes:

• Signup: Handles user registration by creating a new user document in the database.
• Login: Authenticates users by checking their credentials and issuing a JWT token.

Xano:

1. Create a User Table: Go to the database tab, create a table named "user" with email and password columns.

• Password Encryption: Xano encrypts the password for you.
• Authentication: Enable authentication in the table settings.

1. Prebuilt Authentication Endpoints: Go to the API tab, add signup, login, and auth/me endpoints from Xano's prebuilt options.
2. Done: No further action needed for authentication.

Final Thoughts:

After following these steps, you should have a functional job board application. The MERN stack and Xano provide different yet powerful approaches to full-stack development:

• Database: Defines storage structures.
• Server: Manages server setup and communication.
• API: Facilitates CRUD operations and custom functionality.
• Authentication: Secures sensitive endpoints.

Now, deploy your application and begin iterating based on user feedback for continuous improvement!