- Intro
- Technologies & Techniques
- Live Project
- Additional Links
- Possible Improvements
- All Project Features
This is the Frontend of a News Explorer Service App, where users can search for news articles worldwide and save them to their own accounts. The app developed with React.
- ReactJS
- JavaScript
- CSS3
- React Router Dom
- Responsive Layout
- JWT server Auth
- newsapi.org - provides articles news
- Deployed to
Vercel - CI/CD
Vercel Serverless technology- Git/GitHub
| NPM Packages (Backend) | Aspects of Use |
|---|---|
| bcryptjs | Password Encryption |
| body-parser | Returns middlewares that handle incoming requests before they reach a target controller |
| celebrate | Express middleware that wraps the Joi validation library |
| cors (Cross-Origin Resource Sharing) | Secure cross-origin requests to your server |
| dotenv | Loads environment variables from a .env file |
| express-winston | Middleware for request and error logging |
| winston | Universal logging library with multiple transports |
| validator | String validators and sanitizers |
| jsonwebtoken | Securely transfers data within parties using a JSON object |
| express-rate-limit | Limit repeated requests to public APIs/endpoints |
| helmet | Secures Express apps via HTTP headers |
| RESTful API Endpoints | HTTP Methods | Usage Purpose |
|---|---|---|
| /signup | POST | User Registration |
| /signin | POST | User Login |
| /users/me | GET | GETting user data |
| /articles | GET | GETting data from all articles |
| /articles | POST | Creating a new article |
| /articles/:_id | DELETE | DELETE an article by its id |
Visit the App 👉🏽 HERE!
Important
This project requires Node.js v22.x and npm v9.x or higher. Please ensure you have the correct versions installed before running or building the app.
Tip
Use nvm (Node Version Manager) to easily switch between Node.js versions:
nvm install 22
nvm use 22
$ git clone https://github.com/Chen-Abudi/news-explorer-frontend.git
$ cd news-explorer-frontend
$ npm i or npm install
$ npm run start
-
Homepage for users before sign up/sign in
-
Homepage for user who's logged in
-
Sign up
-
Sign in/Log in
-
Form Validation
-
Search results for articles
-
Articles
-
Marked icon which means the article got saved to profile
-
Remove article from the saved ones
-
When users aren't logged in and wants to save an article, they will need to sign in first
-
-
When there's no match for searching terms, not found results will be shown
-
The saved articles page in users account/profile
-
Info about the author section
- Create a Forgot Password option in case the users forget theirs.
- Resets Password
- Customize news outlet filtration according to user preferences.
- Customize the sorting of saved articles based on user preferences.
- Adjust the application for a dark/night mode.