References

Code Stack + Additional Information

This website was built using a modern full-stack approach that combines both strong technical foundations and thoughtful design. At its core, we used Next.js and React to structure the application, allowing us to break the entire site into reusable components and build everything in a modular, scalable way. By using Next.js specifically, we were able to take advantage of powerful features like server-side rendering, file-based routing, and optimized performance, which made the site load faster and handle more complex interactions smoothly.

For styling and UI design, we used Tailwind CSS alongside DaisyUI and shadcn/ui. Tailwind allowed us to directly control spacing, layout, colors, and responsiveness at a very granular level, while DaisyUI and shadcn provided higher-level components like cards, buttons, and layouts. In addition, icons were used from free shadcn icon libraries. This combination gave us both speed and flexibility, and we could quickly build clean interfaces while still customizing everything to match our vision instead of being locked into rigid templates. No pre-built templates were used and all design and content was created entirely by our team from scratch.

On the backend side, we used Next.js API routes to handle server-side logic such as processing form submissions, handling requests, and connecting different parts of the application. For our database and backend services, we used Supabase, which is built on PostgreSQL. Supabase allowed us to manage structured data, handle authentication, and even support real-time updates without needing to set up our own backend infrastructure. This made it much easier to store and retrieve resource data efficiently while keeping everything secure and organized.

One of the key interactive features of our site is the map, which we built using Leaflet. Leaflet is a lightweight but powerful mapping library that allowed us to render maps directly in the browser and place dynamic, categorized markers based on our data. This made the experience much more visual and intuitive, helping users explore resources based on location rather than just scrolling through lists.

To present data in a more engaging and understandable way, we used the Recharts library. With components like PieChart, BarChart, XAxis, YAxis, Tooltip, Legend, and ResponsiveContainer, we were able to create responsive and interactive visualizations that clearly communicate statistics and trends. This added another layer of depth to the project by turning raw data into something users can actually interpret quickly.

Throughout the entire development process, we used Git and GitHub for version control and collaboration. This allowed our team to work on different features at the same time, track every change, resolve merge conflicts, and continuously improve the project in a structured way. It also gave us a clear history of how the project evolved over time.

Overall, this project is not just about the technologies we used, but how we combined them to solve real problems. Every tool in our stack played a role in making the site more interactive, scalable, and user-friendly, and the final result reflects both the technical depth and the collaborative effort that went into building it.