Demo video: https://youtu.be/rBc-QGZwgxE
Technical Details (for employers)
*** Contact berk[[dot]]ozkan[[at]]ug[[dot]]bilkent[[dot]]edu[[dot]]tr for demo with working api keys ***
Welcome to TopraTek! This project aims to provide a comprehensive mapping solution tailored specifically for farmers. With this application, farmers can easily outline their land, label it, categorize locations, and record additional data such as current crop and crop planting history. Whether you're a small-scale farmer or managing large agricultural operations, this tool is designed to streamline your mapping and data recording processes.
@@ This won't work since I removed API and DB Keys @@
To get started with TopraTek, follow these steps:
cd TopraTek (or TopraTekv3)
cd src
npm install
npm run start
Implemented:
Utilization of UML for Project Design and Planning: I used Unified Modeling Language (UML) to plan and design this project. This involved creating diagrams to visualize the project's structure, how they relate to each other, and what they do. Using UML helped me organize the project in a clear and structured way, showing my ability to plan software projects thoughtfully.
Embracing Vanilla JavaScript: I deliberately chose to use vanilla JavaScript and Node JS for this project. Instead of relying on frameworks or libraries, I wanted to understand how JavaScript and frontend-backend interactions work from the ground up. This hands-on approach allowed me to dive into core concepts, learning their details and best practices thoroughly. By doing so, I'm better equipped to handle various challenges in web development and beyond.
** Personal anecdote ** When developing this project I ran into a performance problem. I wanted to update features, such as the sidebar and map live when a user added a location, however, since PUG is a serverside template engine each change required a complete reload of the page. Then, I discovered HTMX, which helped me make some parts dynamic without reloading the page–greatly increasing performance. However, some feature updates required a more tailored approach (or I didn't know htmx well enough), so this led me to do routing and updating manually with vanilla JS fetch and awaits on the frontend. And so, I was able to benefit from the superior performance of server-side rendering while keeping the site dynamic.
In summary, this project reflects my commitment to learning and mastering software development techniques. It demonstrates my ability to plan projects systematically.
I didn't add (due to time constraints):