paulmorales7 / trendr Goto Github PK

View Code? Open in Web Editor NEW

2.0 1.0 1.0 34.32 MB

Trending topics aggregator, full stack application.

JavaScript 90.41% HTML 5.75% CSS 3.84%

trendr's Introduction

trendr

📷Live
📜Description
💻Technology
👥Contributors
📱 Contact

Live 📷

Check out the deployed Trendr app here!

Description 📃

You tired of Reddit regurgitating the same old gifs? You interested in Twitter, but the tweets are always monotone & lacking focus? Allow us to usher in the era of Trendr, an all-in-one dashboard that pulls the most relevant data on seven distinct categories based on Google Trends data, and gives you all the information and social buzz in one place. No longer will you fumble around looking for the right app to fill the void, Trendr is here to comfort you. If you haven't already, give the hyperlink above a visit, and connect with the collaborators below.

Technology 💻

Preparation & Execution: Figma (wireframing), GitHub Projects (management), Slack & Zoom (coordination).
Frontend: React.js, Material-UI Bootstrap.
Backend: Node.js, Express, MongoDB; Google Trends API, Twitter API.
File Management & Hosting: Github, Heroku.
Authentication: Google OAuth (firebase).

Contributors 🌌

Get to know our engineers & keep up with their latest updates via GitHub:

Desmond Aldridge - Backend Engineer Savant, Google Authentication, Database Init

Paul Morales - Rendering Frontend Data (Article, Favorites), Database Setup

Bradley Guidry - Google Trends / Twitter API Engineer, Concept, Wireframe, Logo

Cooper Ahearn - React.js Engineer, Heroku Host, Frontend Design, GitHub Overseer

Contact 📧

Connect with & contact the engineers directly via LinkedIn:

📀 Desmond - DesmondAldridge 📀
💿 Paul - paulmorales7 💿
📀 Bradley - bradley-guidry 📀
💿 Cooper - LCAhearn 💿

trendr's People

Contributors

Stargazers

Watchers

Forkers

94cooper94

trendr's Issues

Colorize Components w Gradient [future edit]

TwitterStream,TrendrArticle,andHistory should all colorize according to the category selected matching its gradient.

login page

JSON web token

Articles opening in new browser tab

target=_blank

FRONTEND - REACT (BASE)

Setup... use create-react-app (or start from scratch)

Animate Star Icon [future]

onHover event handler

Trend Result (Reusable) Component

Title Result Name,
Twitter Feed,
Google Trends News Article (clickable URL),

History Data

Mongo Db.
Figure out how to grab realTimeTrend and import to history and display last five searches in history box

DataBase (Search History), Routing

For Search History and Login sessions. Routing optional.

Enhance overall aesthetic [future]

Colorize components according to their button gradient
Add a shadow bar beneath the buttons to create segmentation.
Hide the components that hold the twitter, article, and history data.

Axios.js in </>src folder

///////////////////////////////////

import axios from 'axios';

const instance = axios.create({
baseURL: 'http://localhost:3001'
//Maybe: 'mongodb://localhost/trendr'
})

export default instance

//////////////////////////////////////
Each component with an axios CRUD method will need to import axios like the below code:
/////////////////////////////////////

import axios from '../axios';

Twitter Authentication

Need people to log in to authenticate Twitter

** NEED TWITTER CREDENTIALS IN .ENV **

Debug Tweet Generation [future]

Twitter (state) display
Eliminate the "&#39" or whatever
Better method of pulling twitter data rather than article title

History Data / DB

Setup the Mongo DB on Atlas, just need to wire in the data

Star Icon [future]

onHover event

BACKEND - ROUTING

Utils - API.js

Use axios (npm), set up CRUD methods and endpoints

Logout Button Created

Anchored top right
Obvious logout button

Get IMG to pull to "TrendrBody.js"

Accomplshed by Paul

README

Someone needs to create a badass README that includes: a table of contents, descriptions of what our app is and why someone would want to use it, a link to our deployed app, an image/gif or two, and a contributors/contact sections.

React Components

Get a dashboard template working after initializing the react-app and get everything up and running.

Authentification Bells & Whistles

Utils, store.js, and specific imports on certain components on the front end to correspond to our web token, authentification, and other back end considerations.