Welcome to News Flash! This project gives you access to high quality, cutting edge news from sources worldwide. It is also designed to be intuitive and easy to use, all with a great, responsive UI. To see a live version of this project, please visit this link.
This project uses a host of modern technologies. The core ones are:
-
ECMAScript 6: Also known as ES2015, this is a modern version of JavaScript with next-generation features like arrow functions, generators, enhanced object literals, spread operators and more. See this link for details.
-
Node.js: Node.js is a server-side JavaScript runtime engine built on Chrome's V8 JavaScript engine. It is lightweight, efficient and greatly used in building web apps. Please visit this link for more details.
-
React and ReactDOM: These were developed by Facebook and are used for building web pages that are structured as a collection of components. These components are kept as independent as possible. See this link.
-
The Flux architecture: This is a design architecture for building stable web apps with, among other things, a unidirectional flow of data. See this link for details.
-
Firebase: This project makes use of various components of the Firebase suite, especially Firebase Authentication.
Here are the steps you need to follow to run this project on your computer:
-
Install Node.js version 8 or later: You may visit this link for complete instructions on installing Node.js version 8 (or later) on your computer.
-
Open a terminal/command prompt on your computer and
cd
into your preferred path/location. -
Clone this repo: Enter this command in the terminal:
git clone https://github.com/foladipo/news-flash-cp1.git
- Install dependencies: Do so by running the following command:
npm install
Note: npm
is a component of Node.js that serves as its package manager. So it comes along with installing Node.js. Note that since the project requires Node.js version 8 or later, you also need npm version 6 or later to run this project.
-
Create a Firebase project: This project uses the Firebase JavaScript SDK for user authentication, so you need to create a Firebase project before you can run this project locally. Please visit this link for instructions on creating a Firebase project.
-
Register a Firebase app: After creating a Firebase project, you need to register a Firebase web app in/within that project. Visit this link for instructions on registering such an app.
-
Configure this project with your Firebase keys: This page shows what an object for configuring Firebase looks like. So, follow the instructions under "Get config object for your web app" on this page to get your own Firebase config object. Make a copy of the
env.sample
file in the root of this project, rename that copy to.env
, remove the comments (i.e "#") at the beginning of each line that starts with "#FIREBASE_" and supply the value that that line needs. For example,FIREBASE_API_KEY
should be the apiKey in your Firebase app's config. -
Obtain an API key for News API: The news articles displayed by this app are retrieved from News API. Please head over to their website, obtain an API key and enter it into your
.env
as the value forNEWS_API_KEY
. -
(Optional) Specify a port for the app: You can tell this app to run on your desired port by entering that port number in
.env
. If you don't do so, this app will run on port5000
. -
Run the project: In the terminal/command prompt, enter the following command:
npm start
-
Open a web browser of your choice and visit
http://localhost:5000
(orhttp://localhost:PORT
). Voila! It's alive! -
Note that this app uses hot reload: So, after starting the app, you can make changes to the source code and they will be automatically compiled and reloaded into your browser page! Sweet, init?
This project has some limitations. The most notable ones are:
- You cannot share multiple articles at once. So, if you see a couple of news articles that you would love to share to your followers on Twitter, you have to do that one article at a time.
- You can only read ten (10) articles at a time i.e pagination is not possible. This limitation comes from our central news source, NewsAPI.
Do you want to contribute to this project? We would love for you to do so! The steps involved are:
- fork this repo.
- create a branch using this format.
- make the changes you want and commit them with concise, descriptive commit messages.
- submit a pull request that follows the format described here.
That's all and thanks a lot for helping out!
- What if I want to use another port?
That's easy. Edit your existing .env
file (or create a new one) and add the following line to it:
PORT=<YOUR_DESIRED_PORT>
where <YOUR_DESIRED_PORT> is the port you want to use. So if you want to use port 8080
you should write:
PORT=8080
This project is authored by Folusho Oladipo and is licensed for your use, modification and distribution under the MIT license. Feel free to hack, extend and share it!