Today

React NativeMobileNews

Thursday, October 28, 2021

Today is a cross-platform cloud-enabled mobile application powered by React Native (Frontend) and Google Firebase (Backend).

The application was built with simplicity in mind and help deliver the latest news.

The app uses an easy to use UI so that only necessary information is displayed. Making it easier for one to find the top headlines, or search for news articles in a quick and efficient manner.

Sign UpLogin
HomeSearch
AccountSaved Articles
More InformationIn-App Browser

Authenthication Methods

  • Email & Password

  • Google Sign In

  • Apple Sign In

  • Facebook Sign In

App Features

  • In-App Browser

  • Dynamic Light & Dark Mode

  • Bookmarks and Read Later

  • Third-Party Auth

How To View The Latest Headlines

  • Start by creating an account.

  • If you used a third party sign in then you will be prompted to enter additional information such as username and an optional bio. This will not be prompted if you created an account using email and password.

  • You will then be navigated to the home page this will contain the latest headlines based on the US. A future update will allow the user to choose a country as well as the news sources to filter by.

How To Bookmark or Save For Later

  • Once you are logged in you will see a list or articles

  • Either on the homepage or on the search page.

  • In order to bookmark an article simply swipe the article item to the right.

  • In order to save for later an article simply swipe the article item to the left.

  • You will be able to see this list in the saved articles page (bookmark icon on bottom tab bar)

Search For An Article

  • Once logged in you head to the seach tab

  • You will then be able to search for particular news articles.

  • If any found a list will be displayed. Click on either the title or image in order to open up the built-in browser.

Account Page

  • This page will show user profile details

  • The main purpose of this page is to show list of settings such as signing out, edit profile, privacy policy, etc.

Settings

  • Go to account page

  • There you will find a list of setting options

  • That will navigate you to the settings page where you will be able to edit your profile information, view privacy policy, reset password, or sign out.

  • More feature will be added to the settings page in a future update.

Setting up the project

  • GUIDE IN PROGRESS

Database

  • Powered By Google Firebase:

    • Authenticaion

    • Firestore Database

You can also:

  • Edit profile

  • Reset password

API

  • Powered by Firebase Database

  • API Fetching is done using React Query and Axios

Today uses Firebase Database as the backend in order to store user bookmarks and user details.

Open Source Projects

Today uses a number of open source projects:

  • [React Native] - React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

  • [React Navigation] - Routing and navigation for React Native apps

  • [React Native Firebase] - React Native Firebase is the officially recommended collection of packages that brings React Native support for all Firebase services on both Android and iOS apps.

  • [React Native Elements] - Cross Platform React Native UI Toolkit

  • [React Hook Form] - Performant, flexible and extensible forms with easy-to-use vali

  • [React Query] - Fetch, cache and update data in your React and React Native applications all without touching any "global state".

  • [Axios] - Promise based HTTP client for the browser and node.js

  • [React Native Snackbar] - Material Design "Snackbar" component for Android and iOS. Supports custom colors, fonts, and languages.

  • [React Native Timeago] - An auto-updating timeago component for React Native using moment.js.

  • And Others...

Todos

  • Add profile pictures

  • Add Theme Toggle

  • Add smoother transitions/animations.

  • Add more features