Newscape fuses Twitter & News APIs to give users a personalised dashboard of their favourite news sources alongside their Twitter feed.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
bootstrap
config
database Merge branch 'master' of https://github.com/nats12/Newscape Jan 17, 2018
public Reset twitter api keys & update callback URL in twitter settings whit… Sep 12, 2018
resources increase space between title and strapline Jan 15, 2018
routes
storage
tests
.DS_Store
.babelrc Create .babelrc file & install webpack presets in order to use arrow … Jun 28, 2017
.env.example Env.example settings Jun 24, 2017
.gitattributes
.gitignore laravel base May 20, 2017
Procfile
README.md Reset twitter api keys & update callback URL in twitter settings whit… Sep 12, 2018
artisan
composer.json
composer.lock
package-lock.json Add checkbox appearance fix for iPhones Aug 13, 2017
package.json fix article sorting and date formatting function with moment js. fix … Jan 15, 2018
phpunit.xml
server.php
webpack.mix.js
yarn.lock

README.md

Newscape

Background

Newscape is a collaboration between Natalie McLaren and Jason Lai. As we had both been learning ReactJS and Laravel in the months leading up to this project, we decided that we wanted to work together on a project combining both technologies.

About Newscape

Newscape fuses the Twitter API for Laravel with News Api to give users a personalised dashboard with their favourite news sources alongside their Twitter feed. Users can save their preferences and share their favourite news articles on Twitter.

Development

Planning

At the start of this project the group met to compile a list of features that we wanted the website to have and what would be necessary to achieve MVP.

Once we identified the key features of our application, we had to decide on the technology stack required to achieve this. Although it may have made more sense to use Vue.js (as this comes pre-packaged with Laravel), we really wanted to use this project as an opportunity to develop our knowledge of ReactJS.

Tech Stack

We also conducted a discovery process to identify any limitations or blockers of the News Api we were planning to use. Once we had done this we were able to start planning the Entity Relationship Diagram for the backend database models.

Design & Wireframing

We briefed our designer Nick Garratt on the website requirements and he mocked up some wireframes using Adobe Photoshop.

Installation

  • Clone repository
  • Set up the host 'newscape.dev' and point the root to the application's 'public' folder (e.g. using MAMP or similar)
  • Run composer install
  • Run npm install
  • Generate application key with php artisan key:gen
  • Go to https://apps.twitter.com and create the application
    • Make sure you also generate an access token via the 'Keys and Access Tokens' tab
  • Go to https://newsapi.org/ and register to get an API key.
  • Create the database in your local environment
  • Copy the .env.example file and copy paste its contents into a new .env file. Modify the following according to your Twitter/NewsApi application settings ONLY in your .env file:
    • TWITTER_CONSUMER_KEY=

    • TWITTER_CONSUMER_SECRET=

    • TWITTER_ACCESS_TOKEN=

    • TWITTER_ACCESS_TOKEN_SECRET=

    • NEWSAPI_KEY=

    • NEWSAPI_URL=

  • Run npm run watch
  • Run php artisan migrate
  • Run php artisan db:seed
  • composer dump-autoload may be required before seeding the database
  • Run php artisan save:articles to fetch articles from the News API and save into your database
Installation for development use without MAMP
  • Follow the steps above except the second point, and instead run php artisan serve at the end.