A location-based civic engagement platform designed to consult with people within specific geographic boundaries. It empowers residents to make a meaningful impact on the communities where they live, work, and play. Users can connect with their neighborhoods online through proof of residency, participate in discussions, and contribute to local decisions. Our team added a gamification layer to enhance user engagement and reduce churn.
Check out the live project here.
![]() |
![]() |
---|---|
Login Page | Profile Page |
![]() |
![]() |
Dashboard Page | Discussion Post & Comments Page |
![]() |
![]() |
Places Page | Achievements Page |
- Towa Quimbayo GitHub LinkedIn
- Juan Escalada GitHub LinkedIn
- Abhishek Chouhan GitHub LinkedIn
- Noufil Saqib GitHub LinkedIn
- React.js
v18.3.1
- CSS3
- React Confetti Explosion
v2.1.2
- React Helmet
v6.1.0
- React Modal
v3.16.1
- React Redux
v9.1.2
- React Select
v5.8.0
- Redux
v5.0.1
- Redux-Thunk
v3.1.0
- Mapbox
v1.0.0-beta.21
- Python
- Django
v5.0.6
- Django Cors-Headers
v4.3.1
- Django REST-Framework
v3.15.1
- PyJWT
v2.8.0
- SQLAlchemy
v2.0.28
- PostgreSQL
- Vercel
Installation
- Install the latest npm package version.
npm install npm@latest -g
- Clone the repository to your local machine.
git clone https://github.com/towaquimbayo/PlaceSpeak.git
- Installing required dependencies requires Node, npm, and Python.
Change the directory to Frontend and install dependencies:
cd frontend
npm install
Change the directory to Backend and install python modules:
cd backend
pip install -r requirements.txt
Environment Variables Setup
For the project to run correctly, environment variables are required for both the frontend and backend directories. Rename the .env.example
to .env
.
Sign up for a free Mapbox account and create an access token by following the documentation at https://docs.mapbox.com/help/getting-started/access-tokens/.
Sign up for a free Vercel account and create a new Postgres database and fill in your database credentials by following the documentation at https://vercel.com/docs/storage/vercel-postgres/quickstart.
Run The App
In order to run the application, you would need the client (frontend) and server (backend) running concurrently in different terminal sessions.
Change the directory to the client (frontend
) and execute npm start
to run locally in development mode or production mode. For production, make sure to build the app to the build
folder by executing npm run build
as this would correctly bundle React in production mode and optimize the build for the best performance.
cd frontend
npm start
Change the directory to the server (backend
) and execute python manage.py runserver
to run locally in development mode. For production, make sure to configure your Vercel and hosting configuration details in the Config
folder and Vercel.json
.
cd backend
python manage.py migrate // if necessary
python manage.py runserver
Ensuring secure access and comprehensive management of user accounts to protect user data and provide seamless user experiences.
- Secure Authentication: Simple email and password-based authentication provides secure access to the platform, protecting user data and ensuring privacy.
- Login/Signup: A straightforward process for users to create new accounts or login to existing ones, facilitating easy access to the platform.
- Account Management: Users can view and edit their personal information, including name, email, password, phone number, and social media accounts, enabling them to keep their profiles up to date.
Incentivizing user engagement and participation through a comprehensive gamification system that rewards users for their activities.
- Badge Releases and Achievement Unlocks: Users earn badges for various activities, such as verifying profiles, participating in polls, and engaging in community interactions. This system encourages users to be more active and involved.
- New Neighbour Badge: Awarded after making their first post or comment.
- Trusted User Badge: Awarded after verifying their phone, address(es), and email address.
- New Voice Badge: Awarded after participating in their first poll or creating a new poll.
- Insightful Badge: Awarded after making a comment with over 80% approval rating and a minimum of over 5 upvotes.
- Welcoming Whisperer Badge: Awarded after inviting a user who successfully completes their first activity.
- Legacy Citizen Badge: Awarded after using the platform regularly for a year.
- Badge Management: Robust backend logic to manage badge releases for activities such as verification, polls, and user interactions, ensuring a smooth and efficient gamification process.
- Points-Rewarding System: Users accumulate quest points for engaging with the platform, enhancing long-term engagement by providing immediate rewards and goals.
- Achievements Display: An intuitive interface allows users to view their earned badges, achievements, quest points, and number of active days on the platform, fostering a sense of accomplishment and ongoing participation through immediate visual feedback.
- Provisional Schema: Implemented new Badges and User Badges tables to support gamification features, ensuring seamless integration and future scalability. This backend enhancement is crucial for maintaining a robust and scalable system.
Managing and validating user-defined geographic boundaries to ensure accurate and relevant community engagement.
- Add, Remove, and Edit Places: Users can manage their places, which is crucial for defining neighbourhood boundaries and ensuring accurate participation in local discussions.
- Primary Place: Users can designate a primary place that affects the threads and discussions visible to them, ensuring they are engaged with relevant local content.
- Address Validation and Autofill: Using Mapbox API tools, addresses are automatically validated and converted into geo coordinates. Users receive suggestions while typing their address, ensuring accurate and validated fields without manual checks. This feature is critical for ensuring that consultations include all valid users in an area.
Facilitating community engagement through interactive discussion features that allow users to connect and share their views.
- Dashboard System: Users can view a thread of discussion posts around their neighborhood, upvote, downvote, and create new posts or comments. This interactive system encourages community participation and dialogue.
- Mini User Profile: Users can hover over the user profile icons to view other users' information, such as their unlocked badges and social media accounts (Facebook, Twitter, LinkedIn), fostering a sense of community and connection.