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:
- Install Mongoose: This library facilitates interaction with MongoDB.
- Define Job Schema: Create a schema to define the structure of job documents:
- `JobSchema` stores job details such as title, description, salary, and company.
- Create Job Model: Export this schema as a Mongoose model to use it throughout the project.
Xano:
- Add a Database Table: Go to the database page and click to add a database table named `jobs`.
- Spreadsheet View: Use the spreadsheet view to add columns for job properties (title, description, salary, company, etc.).
Configuring the Server:
MERN Stack:
- Dependencies: Install required packages (`express`, `mongoose`, `cors`, etc.).
- 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:
- 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:
- 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.
- 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:
- Get Jobs by Salary Range: Defines an endpoint to retrieve jobs within a specified salary range by handling `minSalary` and `maxSalary` query parameters.
Xano:
- Create a New GET Endpoint: Name it "jobs_salary_filtered" (or choose another name).
- Add Variables: Click the "+" in the inputs section to add `min_salary` and `max_salary` integers, making them nullable.
- Query Rules: Click the edit (pencil) icon on the "query all records" element, add conditionals to filter by salary.
- 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:
- Modify the Job POST Method: Update the job creation route to include an external API request.
- External API Request: Fetch company descriptions based on company names.
- Store Company Description: Include the fetched description in the job document.
Xano:
- Modify the POST Jobs Endpoint: Go into the autogenerated endpoint and add an external API request step.
- 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 ".
- Run & Debug: Enter job values for testing and debug to get API response details.
- Add Record: Move API request above the add record step, assign company description to the job from the response.
- Save and Publish: Save the add record step, publish and confirm.
Authentication:
MERN Stack:
- Define User Schema: Create a schema for storing users' information, including email and password.
- Middleware:
- Token Authentication: Checks the presence of a JWT token in the request headers and verifies its validity.
- 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:
- 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.
- Prebuilt Authentication Endpoints: Go to the API tab, add signup, login, and auth/me endpoints from Xano's prebuilt options.
- 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!