Introduction
2020 has been a very hard year for all of us, we have all faced unique challenges and hardships. From COVID-19, to civil unrest, and plenty of injustice, people all over the world are fighting for a better future. In these unprecedented times, when we are more disconnected and isolated than ever, it is important to be informed of protests and other social movements around the world.
Somo is an intuitive map that displays where social movements are trending around the world. Our goal is to show the public where the support for these movements is coming from and raise further awareness for their cause.
Tech Stack and Tools
- React
- Node.js / Express
- Ant Design
- APIs: Twitter, OpenCage, GetDayTrends
Features
Somo is a full stack React application with a Node.js and Express backend. Client side code is written in React and the backend API is written using Express.
Description
Somo provides a detailed description of all major social movements around the world
Map
Our map provides a great view of where in the world a particular social movement is happening
Twitter Feed
The Twitter Sidebar provides the top tweets of the social movement to keep you updated on the latest news
Challenges
In terms of challenges, we had trouble setting up for front-end development but as a team we collaborated and were able to solve a number of issues, one of which had to do with dependencies. APIs are an amazing way for developers to get access to features for an application. However, a challenge we faced was working with unfamiliar API’s and dealing with free account limitations from Twitter, OpenCage and React-Map. By familiarizing ourselves with the documentation and understanding the API limitations, we were quickly able to overcome this challenge.
Development mode
In the development mode, we will have 2 servers running. The front end code will be served by the webpack dev server which helps with hot and live reloading. The server side Express code will be served by a node server using nodemon which helps in automatically restarting the server whenever server side code changes.
Quick Start
# Clone the repository
git clone https://github.com/ashtan19/SoMo.git
# Go inside the directory
cd SoMo
# Install dependencies
npm install
# Start development server
npm run dev
Folder Structure
All the source code will be inside src directory. Inside src, there is client and server directory. All the frontend code (react, css, js and any other assets) will be in client directory. Backend Node.js/Express code will be in the server directory.
Future Developments
- Implement interactive markers on the map to display number of tweets & country
- Zoom function where the user can look at smaller countries in more detail
- Filter inappropriate and irrelevant tweets
- Auto generate trending hashtags and filter based on relevance
- Have links to learn more or donate to support causes
Log in or sign up for Devpost to join the conversation.