project_description:
The CommunityTalks app is an open community feedback and forum app. CommunityTalks is a one stop app for Evanston community members to find information, stay informed, and give their feedback on Evanston departments, committees, issues, and other areas of interest. The app’s homepage has a few committees page links to learn more about each committee as well as a side nav for committee navigation and a top nav for page navigation. The app has three prominent pages: home page, community forum, and the profile.
Explore the github repo »
View Website · · Request Feature
Table of Contents
Here's a blank template to get started. To avoid retyping too much info, do a search and replace with your text editor for the following: github_username, repo_name, twitter_handle, linkedin_username, email_client, email, project_title, project_description, project_license
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
This is an example of how to list things you need to use the software and how to install them.
- npm
npm install npm@latest -g
For frontend (client folder)
- npm
npm install firebase npm install --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/react-fontawesome npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/free-regular-svg-icons npm install --save @fortawesome/free-brand-svg-icons npm install react-select npm install react-bootstrap bootstrap npm i bootstrap@5.3.6 npm install
For backend (server folder)
- npm
npm install express cors axios
- Clone the repo
git clone https://github.com/394-s25/community-talks/tree/main
- Install NPM packages in both the root, client, and server folders
npm install
- Change git remote url to avoid accidental pushes to base project
git remote set-url origin github_username/repo_name git remote -v # confirm the changes - Set up firebase congig in the client/src location. (See 'How to setup Firebase' below for more details)
To Run the app locally
- navigate to the client folder and run the following commands
cd client
npm run build
npm run start- *To deploy the app to the webpage run the following command in the root of the client folder:
firebase deploy
- To run the app concurrently with the server on a local machine, navigate to the root of the project, and then run: npm start
Home page:
- We setting some pages to make sure it has detail information from gov webpage.
- The first 2 kinds of communities are our designed pages and manually add data.
- Since the government's website cannot be downloaded through scripts, we directly connect to the remaining content using external links. We found a way to bypass it by creating a server API, but we only pulled the calendar information. It should be possible to use the server to get the desired information off of the specific committee sites
CalEventsBanner:
- The banner which shows the events of the week, pulled from the cityofevanston/calendar page. The runServer variable is default set to false, when it is set to true on the next page reload it will call the backend server and update the database information.
- To update the information, do the following steps:
- Navigate to the root of the project and run the following commands:
cd ..
npm install concurrently- Navigate to server folder and run the following commands:
npm init -y npm install express cors node index.js
- Navigate back to the root of the project and run the following commands:
cd .. npm start - In the terminal, the link to the local host site should appear. Open it and it will run the CalEventsBanner, which is on the homepage
- Note: If there are changes to the backend (server/index.js) then you will need to run node index.js in the server folder, before running npm run build in the client folder
The app is run under the firebase project 'community-talks' with the email communitytalksapp@gmail.com (the email is sent separately for security)
To run firebase in the app, create a file called firebase.js and put it in the client/src folder. It should contain the firebase configuration file (this information is also found in firebase project overview or realtime database). This file was sent alongside the delivered materials.
The app uses information from the database to populate the home page and the committee issue pages. After pulling the code, will need to add the data with the necessary app information (this data is in the provided JSON file in the delivered documents):
- Login to firebase
- Navigate to Realtime Database
- In the Data tab, click on the three dots located on the right of the middle console (the console will be blank, but have the default weblink at the header)
- From that dropdown menu, click 'Import JSON' and upload the JSON file under Data(JSON)
- Then, go to “/function” and push every buttons.
- All testing dataset will add to your firebase database
The app uses icons from Font Awesome at this Fontawesome kit: https://kit.fontawesome.com/9b807e0756.js
The app also uses cheerio and axios in the server for fetching and parsing HTML data (from the cityofevanston page). All in compliance to the cityofevanstons web scraping policies.
In order of easy to fix to difficult
- The search bar is buggy and wont allow searching, but when it works should allow searching by tag and title
- The top navigation bar appears blank unless a bootStrap color class like navbar-light is applied. Links are clickable but text may be invisible without it.
- The server works through local hosting API, the fetching from that API will only run when manually called for in client/src/components/CalEventsBanner.jsx which is controlled by the runServer variable to fetch from the respective serverPath.
-
- To get it to work from non-local host nor a third party API, you can initialize firebase HTTP functions, but it requires a paid plan (the blaze plan) to run. Those functions will only run when manually called for in client/src/components/CalEventsBanner.jsx . which is controlled by the runServer variable to fetch from the respective serverPath
- The interests on the profile are not connected to anything to give it updates, but all preferences are saved to the database
Project Link: https://github.com/394-s25/community-talks/tree/main
App Link: https://evanstoncommunitytalks.web.app/home