Leaflet

• 

  Desktop View

• 

  Mobile View

• 

  Leaflet

• 

  Search pannel

• 

  Plant type-1

• 

  Plant type-2

• 

  Plant type-3

• 

  Ideas sharing tab

• 

  Ideas Leader Board

Inspiration 🌿

The inspiration behind Leaflet stems from the stock and finance dashboards. While numerous applications exist to provide financial information, there is a noticeable scarcity of platforms offering comprehensive insights into plant life. Motivated by this observation, we embarked on the journey to pioneer a creative solution in the domain of botanical information.

What it does 🌱

Leaflet is an innovative web application that unlocks the wonders of the botanical world. Explore a vast database of plants, uncover their hidden potential, and enhance your botanical knowledge.

But that's not all! Leaflet goes beyond information; it offers an interactive experience that encourages active participation.

How we built it 🔧

Frontend-

Technologies Used: React and Tailwind CSS for frontend development. Material UI for icon integration. D3.js for creating compelling bar graphs and line charts to represent data sets. CSS3 used for adding animation aspects to the application's user interface.

Backend-

MERN Stack: Backend built using MongoDB, Express, and Node.js. RESTAPI: Multiple APIs integrated into the backend to fetch data in JSON format.

API Testing-

Tools Used: The REST APIs were thoroughly tested using tools like Postman and ThunderClient to ensure they work correctly and handle data properly.

Database-

MongoDB Atlas: Chosen as the database for the application, providing seamless data access and sharing. MongoDB stores and manages the data for the application.

Challenges we ran into 🚧

API Integration: Integrating multiple APIs was technically challenging, ensuring accurate and consistent data retrieval.

API Testing: Rigorous Postman testing ensured API functionality and refined data for client-side use.

Responsive Design: Creating visually appealing, responsive designs involved extensive brainstorming and iterations.

Impactful Idea: Developing an impactful idea for community education was a challenging and time-consuming process.

Accomplishments that we're proud of 🏆

We take immense pride in the exceptional outcome of Leaflet, achieved through rigorous redesign and recreation processes. Our unwavering commitment to delivering an educational experience for the community has driven us throughout the development journey.

What we learned 📚

Embracing cutting-edge technologies like D3.js and Tailwind CSS has provided us with invaluable learning experiences. We have gained proficiency in distinguishing the nuances of API testing across different software platforms. Developing a full-stack application, where each component relies on others, has honed our skills in seamless integration and system interdependence. Additionally, we recognize the importance of creating purposeful applications that bring meaningful value to users, setting them apart from random, insignificant solutions.

What's next for Leaflet 🚀

We have exciting plans to make Leaflet fully live by hosting the APIs and backend. Our future enhancements include implementing a camera lens feature for plant species search through photos. Additionally, we aim to promote interactivity by introducing a discussion panel, enabling users to seek and provide solutions to plant-related queries. These updates will further enrich the user experience and foster a collaborative community within Leaflet.

We would like to express our sincere gratitude 🙏 to PyraHacks△ for granting this amazing opportunity! 🚀 Thank you for this wonderful journey.

Built With

• d3.js
• express.js
• mongodb
• node.js
• react
• tailwind