NeighborhoodAid is an interactive platform designed to empower communities by enabling users to report local issues like potholes, vandalism, and streetlight outages.
This pull request merges the release/v2.0 branch into the main branch, showcasing the comprehensive development and expansion of the NeighborhoodAid platform. As the lead full-stack developer, I took on the responsibility of integrating multiple APIs and implementing new features using a range of technologies to create a robust and interactive application. The project was initially a group effort; however, as circumstances changed, I continued the development independently while ensuring to maintain a collaborative and inclusive environment.
Key Changes and Enhancements
Frontend Overhaul: Designed and implemented all frontend components using React, TypeScript, and Tailwind CSS, resulting in a responsive and engaging user interface. The landing page has been fully completed as part of this ongoing effort.
API Integrations:
OpenWeather API: Integrated to provide real-time weather updates based on user location for contextually relevant reporting.
OpenWeather Geolocation API: Utilized for retrieving weather data based on precise coordinates, enhancing the accuracy of user location services.
OpenStreetMap and Nominatim APIs: Utilized for interactive map functionalities and precise geolocation services, enabling dynamic issue reporting and visualization.
Nominatim for Geocoding and Reverse Geocoding: Implemented for converting location names to coordinates and vice versa, ensuring accurate and user-friendly map interactions.
React Leaflet: Used as a React wrapper for Leaflet, enabling responsive and interactive map components within the platform.
Browser Geolocation API: Integrated to fetch user-specific location data, enhancing the contextual accuracy of reports and features.
Axios: Utilized for handling API requests efficiently across the platform.
Upcoming API Integration (v2.0):
Spotify API: Planned integration to allow users to link and share music playlists within the community feed, further enhancing user engagement and interaction.
Backend Development:
Built using Node.js and Express.js, the backend manages user authentication, community engagement, and real-time reporting.
Implemented secure login mechanisms with JWT and bcrypt, ensuring user data privacy and session security.
Database Management:
Structured database schema using Sequelize, with comprehensive migrations and seed files for realistic testing and development.
Managed relationships between models (e.g., Users, Issues, Comments) to ensure data integrity and consistency.
Deployment and Configuration:
Configured the server-side application with essential middleware (e.g., CORS) and set up production configurations for client-side routing using Node.js.
Concepts Implemented
1. Frontend Development with React, Tailwind CSS, and Vite
Structured and managed a component-based architecture efficiently using React and TypeScript.
Utilized Tailwind CSS for responsive and mobile-friendly designs, maintaining a unified visual identity.
Developed reusable components like Modals, Forms, and Navigation bars to optimize development speed and maintain code reusability.
Used Vite for fast, efficient frontend development and bundling.
2. Backend Development with Node.js, Express.js, and Sequelize
Implemented a RESTful API using Express.js, managing routes for user authentication, feed management, reporting, and weather data retrieval.
Utilized Sequelize for database modeling, migrations, and associations, ensuring data integrity and relationship consistency across models.
Configured middlewares like CORS and logger to secure and monitor API requests, improving server reliability and performance.
3. Authentication and Security Techniques
Implemented secure authentication mechanisms using bcrypt for password hashing and JWT for session management, ensuring data security and user privacy.
Integrated social login options (e.g., Facebook and Google) to enhance user experience and streamline the registration process.
4. API Integration and State Management
Integrated multiple APIs: OpenWeather, OpenWeather Geolocation, OpenStreetMap, Nominatim, and Browser Geolocation for comprehensive data management.
Developed an interactive map component using React Leaflet, managing dynamic markers and state for a user-friendly experience.
Created a robust API workflow with fallback mechanisms to ensure accurate and up-to-date location and weather information.
5. Full-Stack Development and Deployment
Connected the frontend and backend using RESTful principles for smooth communication between components.
Configured the backend server for production deployment and ensured compatibility with client-side routing for the React application.
Managed environment variables securely using dotenv for API keys, database credentials, and other sensitive information.
6. Database Management and Migrations
Developed database models and migrations using Sequelize CLI, focusing on data integrity and relationships between entities (e.g., users, reports, comments).
Created seed files for testing and development, enabling realistic simulation of data.
7. Responsive and Accessible Design
Ensured that all components, from forms to interactive maps, were responsive across devices using Tailwind CSS.
Prioritized accessibility with semantic HTML elements and keyboard navigation support.
8. Collaboration and Version Control
Utilized Git and GitHub for collaborative development, managing feature branches, pull requests, and resolving merge conflicts.
Ensured code quality through peer reviews and implemented testing strategies for both frontend and backend components.
Attribution
Early Stages (v1.0)
The foundational setup was initiated with some contributions from Justin Kao, which included:
Adding the PostGIS extension for geometry support in the database schema (server/db/schema.sql).
Initial setup of basic database models (server/models/issue.js and server/models/user.js) and seeding scripts (server/seeds).
Preliminary work on authentication service components.
Full Development and Ongoing Expansion (v2.0)
The v2.0 release, fully led and executed by Mirasol Davila, includes:
Comprehensive full-stack development, integrating multiple APIs like OpenWeather, OpenWeather Geolocation, OpenStreetMap, Nominatim, React Leaflet, and Axios to enhance platform functionality.
Design and implementation of all frontend components using modern tools and frameworks.
Backend API development and optimization using Node.js and JavaScript for seamless CRUD operations, secure authentication, and user interactions.
Continuous testing and platform expansion, including the planned integration of the Spotify API to enhance user experience.
Notes
This release marks a significant update and establishes the foundation for ongoing feature development. All components are continuously tested to ensure stability, performance, and scalability.
Note: While collaboration was encouraged, the team experienced some changes in availability. This led to a transition where I continued development independently, ensuring all contributions were acknowledged and incorporated to the best of my ability.
Overview
This pull request merges the
release/v2.0branch into themainbranch, showcasing the comprehensive development and expansion of the NeighborhoodAid platform. As the lead full-stack developer, I took on the responsibility of integrating multiple APIs and implementing new features using a range of technologies to create a robust and interactive application. The project was initially a group effort; however, as circumstances changed, I continued the development independently while ensuring to maintain a collaborative and inclusive environment.Key Changes and Enhancements
Concepts Implemented
1. Frontend Development with React, Tailwind CSS, and Vite
2. Backend Development with Node.js, Express.js, and Sequelize
3. Authentication and Security Techniques
4. API Integration and State Management
5. Full-Stack Development and Deployment
6. Database Management and Migrations
7. Responsive and Accessible Design
8. Collaboration and Version Control
Attribution
Early Stages (v1.0)
The foundational setup was initiated with some contributions from Justin Kao, which included:
server/db/schema.sql).server/models/issue.jsandserver/models/user.js) and seeding scripts (server/seeds).Full Development and Ongoing Expansion (v2.0)
The v2.0 release, fully led and executed by Mirasol Davila, includes:
Notes
This release marks a significant update and establishes the foundation for ongoing feature development. All components are continuously tested to ensure stability, performance, and scalability.