Email: test@gmail.com
Password: testpassword
To The Point is an AI-powered app that summarizes news articles from a provided URL, removing unnecessary details to enhance readability and comprehension. It allows users to quickly grasp the main points of an article without the need to read it in full. The app includes user authentication, enabling users to securely store their article summaries on their history page for easy access and review of previous summaries.
Firebase creation
Firebase authentication (login, signup, logout, verify user to show page content)
Login and Main View
Sample model (to be modified)
API call to the OpenAI to get the summary of an article
History page which shows previous summaries\
API calls
Data persistence with sample data
Mofify Main page to add History view to the side
TTPModel.js - Model with user data (email, password, uid) needed for the authentication. It also saves the data about the summaries such as the URL and the summaryID, and related methods for summarisation.
LoginView - login/signup form that blocks page content
homePageView - where users input a url to a news article to be summarised
NavigationBarView - profile, history and home buttons (visible after login)
historyView - shows the recently summarised articles
profileLogOutView - shows information about the currently logged in user and has the logout button
summaryView - displays the summary generated by the API using the 3rd party markdown renderer from remarkJS
historySummaryView - renders the history and summary views together
LoginPresenter - manages Firebase login and signup
MainPagePresenter - will set the URL and manage the summary generation (to be added)
NavigationBarPresenter
profileLogOutPresenter - manages logout
historyPresenter
historySummaryPresenter
summaryPresenter
connectToFirebase - for now only manages Firebase onAuthStateChange
Manages persistence
router
conditional rendering depending on whether there is a currentUserId (active user session)
We have implemented the remarkjs react-markdown component, which renders the markdown we receive from the API into a user friendly format. This is seen on the history page and when a summary is generated.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify