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.
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.
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.
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.
- Clone repository
- Set up the host 'newscape.dev' and point the root to the application's 'public' folder (e.g. using MAMP or similar)
- 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.examplefile and copy paste its contents into a new
.envfile. Modify the following according to your Twitter/NewsApi application settings ONLY in your
npm run watch
php artisan migrate
php artisan db:seed
composer dump-autoloadmay be required before seeding the database
php artisan save:articlesto 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 serveat the end.