UB0T - Bit by Bit - Bit by Bit

• 

  Home Page

• 

  Community Events Forum and Map

• 

  Transportation Forum and Map

• 

  Crime Forum and Map

• 

  Small Busineses Forum and Map

• 

  Login Page

Inspiration

We wanted to create a platform where users can share posts, comment, and interact in a community focused environment. Inspired by existing social forums and local news boards, the goal was to make it easy for people to share ideas, report local events, or discuss topics in a simple and interactive way.

What it does

Bit by Bit allows users to sign up and log in securely, create posts with location tagging and categories, and comment on posts in real time. Users can browse and filter posts by category and engage with a responsive, intuitive React interface. It allows users to interact directly with a map and view areas that have higher levels of congestion or crime related incidents, allowing citizens to plan out their days accordingly. This ultimately leads to a safe, sustainable, inclusive and resilient community where everyone works together.

How we built it

We built the frontend using React, and had API calls through a controller. The backend is powered by Node.js and Express, handling routing, user authentication, and posts. We used SQLite for lightweight local storage. We used Leaflet.js for the interactive map and used another API from the City of Calgary to get the ward distinction in Calgary to make our map clearer.

Challenges we ran into

Integrating SQLite with a dynamic backend while keeping our API routes organized was challenging, and deployment with this backend was a little tough. However, we were ultimately able to get it to work and created an amazing web application that brings the community closer together! We ran into some problems deploying in time to submit but the demo shows how the web app works and the repo has been provided!

Accomplishments that we're proud of

We successfully built a fully functional, interactive forum in a short amount of time. We are also real proud of the way our Leaflet Map is responsive to new forum posts and our amazing home page and design.

What we learned

We learned to consider deployment more when choosing our technologies as our backend may have been simpler to deploy if we had done it using a different technology. We also learned more about integrating APIs into our projects and learned new skills when it comes to working with React. Overall, we all agree that we now have more experience when it comes to problem solving and creating a full stack web application and we really enjoyed the process and are proud of what we created!

What's next for UB0T - Bit by Bit - Bit by Bit

In the future, we want to add more information to user profiles, notifications when something happens in a citizens area, and more interactive features. We also wanted to enhance the user interface with more animations and maps integration. Another feature that would be easily added is picking between cities and being able to comment on posts. Finally, if actually deployed an utilized adding a feature that contacts people who can make changed and help solve problems identified in the community. For example, if there is crime reported frequently in a certain area, contacting the police to have the issue investigated. Overall, this web app is easy to improve and has many opportunities to make cities more inclusive, reliable, safe and sustainable!

Built With

• and-api-endpoints-for-posts-and-comments.-we-use-sqlite-as-a-lightweight-database-to-store-user-accounts
• and-comments.-additional-technologies-include-bcrypt-for-secure-password-hashing
• and-fetch-for-client-server-communication.-for-deployment
• cors-and-body-parser-for-handling-api-requests
• css
• handling-routing
• html
• javascript
• leaflet.js
• posts
• react
• sqlite
• the-frontend-is-hosted-on-netlify-and-the-backend-is-hosted-on-render
• user-authentication
• which-provides-a-responsive-and-dynamic-user-interface.-the-backend-is-powered-by-node.js-and-express