Public Safety

Throughout the development process, I encountered a few challenges:

1. Challenge: This was my first time using MongoDB and Mongoose. Understanding schemas, connecting the database, handling async operations, and managing environment variables was initially confusing, especially when moving from local development to deployment.
   Solution: I reviewed Mongoose documentation, learned how to structure a schema, and followed best practices for async error handling. I also learned how to keep sensitive credentials safe using environment variables instead of hardcoding them. Deployment required whitelisting server IPs in MongoDB Atlas and setting up the correct connection string for production.
2. Challenge: During development, I originally used port 5000 for my backend, not realizing that macOS uses that port for system services. This caused random connection failures (403 status), and the server wouldn’t start.
   Solution: I changed the development port to 3000, which solved the conflict and helped me understand that certain ports are reserved or have higher chances of conflict on different operating systems.
3. Challenge: Hosting both the frontend and backend was still a bit new to me since this was my second full-stack project. Hence, I ran into some issues with missing Node modules, incorrect build commands, and environment variables not being detected on Render. The backend would build successfully but fail at runtime because modules weren’t installed and the database wasn't connecting.
   Solution: I learned how hosting platforms work behind the scenes, specifically how they install dependencies and run build/start commands. Adding npm install to the Render build step and correctly setting my environment variables fixed the issues. I also switched to using a shared access in MongoDB so that any IP address could connect without being whitelisted.
4. Challenge: Coming from basic JavaScript, thinking in terms of components, props, and reusable UI patterns was a bit new to me. I also had to learn how to handle form state and success/error messages.
   Solution: I broke the UI into small reusable React components (forms, cards, sections) and used useState to manage input and submission states. This helped me understand component architecture and code organization.
5. Challenge: I started using Flowbite but later decided to remove it to have more control over the design.
   Solution: I rebuilt buttons, cards, inputs, and layouts using pure Tailwind CSS. This helped me gain confidence in styling and improved the quality and consistency of the final UI.