Intro
Over the weekend, I created a small node application that holds some hardcoded data in an array. This data consisted of certain behaviors a beekeeper can commonly find when inspecting their hives.
The Tech stack I used was the following:
Node.js
React.js(Vite)
TailwindCSS
(NPM)CORS or Cross-Origin Resource Sharing was used in this small project so that the Node and the React.js can communicate, and share what needs to be shared.
Purpose of Creating this small web app
This project is part of a bigger plan, of creating a bee inspection application that will enable beekeepers to keep a record of what is happening in an around the hive.
This information can very important for beekeepers, for them to feed and help the bees fight off some pests, and other lurking creatures trying to enter the hive.
How it was made
Backend:
First, I imported two packages that I needed for my web server: express and cors. These allow me to handle incoming requests and enable cross-origin resource sharing.
Next, I created an instance of the Express application and stored it in a variable called app. This will be the base of my server.
I defined a data model called behaviors that represent different behaviors of bees. Each behavior has an id, name, and description.
To ensure that my server can handle requests from different domains, I activate the cors package by using app.use(cors()). This is important for connecting with the front end.
Then, I defined the endpoints that my server will respond to. I create two of them:
The first endpoint,
GET /behaviors, will respond with a JSON representation of thebehaviorsdata model. This means that when someone accesses this endpoint, will receive information about bee behaviors.The second endpoint,
GET /behaviors/:id, was a bit more specific. It will respond with a JSON representation of a particular behavior based on theidparameter provided in the request. Someone can now request information about a specific bee behavior.
To make everything work properly I need to listen to a specific port. In this case, I choose port 3500. Once the server starts running, I logged a message to let myself know that it was live and ready to handle requests.
below is an image of what I implemented:
Frontend
I imported the useState and useEffect hooks from React, as well as the App.css file for styling.
I created a functional component called App. Inside the component, I declared two state variables using the useState hook. One variable called behaviors stored the data about bee behaviors, and the other variable called searchTerm stored the search term entered by the user.
I used the useEffect hook to fetch the bee behaviors data from the backend server. I made an HTTP GET request to http://localhost:3500/behaviors to retrieve the data. Once I received the response, I converted it to JSON format and updated the behaviors state variable with the data. This happened when the component mounted, thanks to the empty dependency array [] which ensured the effect ran only once.
I filtered the bee behaviors based on the searchTerm entered by the user and stored the filtered behaviors in a variable called filteredBehaviors. I checked if each behavior's name included the search term (case-insensitive).
In the return statement, I wrote the JSX code that would be rendered. I structured the code following the Tailwind CSS framework.
I rendered a <div> element with a black background, which contained a yellow-colored <div> for the header section.
Inside the header section, I displayed an <h1> element with the title "Bee Behaviors".
Below the header, I implemented a search bar using an <input> element. I set the input's value to the searchTerm state variable, and I added an onChange event handler to update the searchTerm state variable as the user types in the input field.
After the search bar, I rendered an <ul> element that contained a list of <li> elements. Each <li> element represented a filtered behavior based on the search term. I displayed the behavior's name as an <h2> element and its description as an <p> element.
Finally, I exported the component as the default export so that it could be imported and used in other parts of the application.
Conclusion
I managed to create a small web application over the weekend, focusing on bee behaviors and beekeeping. Using Node.js, React.js (Vite), and TailwindCSS, I developed a functional application that allowed beekeepers to record and monitor the activities within their hives. By leveraging the capabilities of NPM's CORS package, I ensured seamless communication between the Node.js backend and the React.js frontend.
Through importing express and cors packages, defining endpoints, and utilizing the useState and useEffect hooks in React. The backend served JSON representations of bee behaviors, while the frontend implemented search functionality for filtering behaviors based on user input.
This project served as a crucial stepping stone toward my larger goal of creating a bee inspection application. I aim to empower beekeepers with essential insights to protect and nurture their bees, facilitating effective pest control and ensuring the hives' well-being. Overall, I am happy with the outcome of this small web app so far, which showcased a bit of my skills in backend development, frontend design, and the seamless integration of the two.
click link below to check it out: