{"id":18861227,"url":"https://github.com/chen-abudi/news-explorer-frontend","last_synced_at":"2026-04-06T08:01:30.305Z","repository":{"id":62382350,"uuid":"558795447","full_name":"Chen-Abudi/news-explorer-frontend","owner":"Chen-Abudi","description":"News Explorer Service App 📰🌐🗺️","archived":false,"fork":false,"pushed_at":"2025-09-01T19:37:54.000Z","size":10373,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-01T21:25:32.695Z","etag":null,"topics":["ci-cd","css3","full-stack","git","javascript","jwt","mern-stack-app","react-hooks","react-router-dom","reactjs","responsive-design","restful-api","vercel","vercel-deployment","vercel-serverless","vercel-serverless-functions"],"latest_commit_sha":null,"homepage":"https://news-explorer-frontend-alpha.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chen-Abudi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-10-28T10:09:27.000Z","updated_at":"2025-09-01T19:37:58.000Z","dependencies_parsed_at":"2025-09-01T21:13:26.963Z","dependency_job_id":"0f089a4e-8579-4144-90de-3921a5001605","html_url":"https://github.com/Chen-Abudi/news-explorer-frontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Chen-Abudi/news-explorer-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chen-Abudi%2Fnews-explorer-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chen-Abudi%2Fnews-explorer-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chen-Abudi%2Fnews-explorer-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chen-Abudi%2Fnews-explorer-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chen-Abudi","download_url":"https://codeload.github.com/Chen-Abudi/news-explorer-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chen-Abudi%2Fnews-explorer-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31464102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ci-cd","css3","full-stack","git","javascript","jwt","mern-stack-app","react-hooks","react-router-dom","reactjs","responsive-design","restful-api","vercel","vercel-deployment","vercel-serverless","vercel-serverless-functions"],"created_at":"2024-11-08T04:28:45.016Z","updated_at":"2026-04-06T08:01:30.285Z","avatar_url":"https://github.com/Chen-Abudi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Final Project at Practicum\r\n\r\n# News Explorer Service App 📰🌐🗺️\r\n\r\n## **Developed By Chen Abudi** 👩🏽‍💻\r\n\r\n## 📢 Overview\r\n\r\n- Intro\r\n- Technologies \u0026 Techniques\r\n- Live Project\r\n- Additional Links\r\n- Possible Improvements\r\n- All Project Features\r\n\r\n## 🔎 Intro\r\n\r\nThis 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.\r\n\r\n## 🛠️ Technologies \u0026 Techniques\r\n\r\n- ReactJS\r\n- JavaScript\r\n- CSS3\r\n- React Router Dom\r\n- Responsive Layout\r\n- JWT server Auth\r\n- newsapi.org - provides articles news\r\n- Deployed to _`Vercel`_\r\n- CI/CD\r\n- `Vercel Serverless technology`\r\n- Git/GitHub\r\n\r\n| NPM Packages (Backend)               |                                                                          Aspects of Use |\r\n| :----------------------------------- | --------------------------------------------------------------------------------------: |\r\n| bcryptjs                             |                                                                     Password Encryption |\r\n| body-parser                          | Returns middlewares that handle incoming requests before they reach a target controller |\r\n| celebrate                            |                                Express middleware that wraps the Joi validation library |\r\n| cors (Cross-Origin Resource Sharing) |                                             Secure cross-origin requests to your server |\r\n| dotenv                               |                                          Loads environment variables from a `.env` file |\r\n| express-winston                      |                                                Middleware for request and error logging |\r\n| winston                              |                                      Universal logging library with multiple transports |\r\n| validator                            |                                                        String validators and sanitizers |\r\n| jsonwebtoken                         |                              Securely transfers data within parties using a JSON object |\r\n| express-rate-limit                   |                                        Limit repeated requests to public APIs/endpoints |\r\n| helmet                               |                                                   Secures Express apps via HTTP headers |\r\n\r\n## 📍 API Endpoints :\r\n\r\n| RESTful API Endpoints | HTTP Methods |                  Usage Purpose |\r\n| --------------------- | :----------: | -----------------------------: |\r\n| /signup               |     POST     |              User Registration |\r\n| /signin               |     POST     |                     User Login |\r\n| /users/me             |     GET      |              GETting user data |\r\n| /articles             |     GET      | GETting data from all articles |\r\n| /articles             |     POST     |         Creating a new article |\r\n| /articles/:\\_id       |    DELETE    |    DELETE an article by its id |\r\n\r\n---\r\n\r\n# ✨ Live App\r\n\r\n**_Visit the App_** [\u0026#128073;\u0026#127997; **HERE!**](https://news-explorer-frontend-alpha.vercel.app/)\r\n\r\n---\r\n\r\n# 👩🏽‍💻👨🏽‍💻 How to Get Started\r\n\r\n## Prerequisites:\r\n\r\n\u003e [!IMPORTANT]\r\n\u003e 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.\r\n\r\n\u003e [!TIP]\r\n\u003e Use `nvm` (Node Version Manager) to easily switch between Node.js versions:\r\n\u003e\r\n\u003e ```\r\n\u003e nvm install 22\r\n\u003e nvm use 22\r\n\u003e ```\r\n\r\n### **Clone**\r\n\r\n`$ git clone https://github.com/Chen-Abudi/news-explorer-frontend.git`\r\n\r\n### **Install**\r\n\r\n`$ cd news-explorer-frontend`\r\n\r\n`$ npm i or npm install`\r\n\r\n### **Launch**\r\n\r\n`$ npm run start`\r\n\r\n---\r\n\r\n## 💎 Valuable Links :\r\n\r\n- [Backend API](https://news-explorer-api-mu.vercel.app/)\r\n\r\n- [Backend Repo](https://github.com/Chen-Abudi/news-explorer-api)\r\n\r\n## **Enjoy ! 🌺👋🏽**\r\n\r\n## 📸 Project Features :\r\n\r\n- **_Homepage for users before sign up/sign in_**\r\n\r\n  ![](./src/images/unlogged-homepage.png)\r\n\r\n- **_Homepage for user who's logged in_**\r\n\r\n  ![](./src/images/logged-in-homepage.png)\r\n\r\n- **_Sign up_**\r\n\r\n  ![](./src/images/sign-up-form.png)\r\n\r\n- **_Sign in/Log in_**\r\n\r\n  ![](./src/images/sign-in-form.png)\r\n\r\n- **_Form Validation_**\r\n\r\n  ![](./src/images/form-validation.png)\r\n\r\n- **_Search results for articles_**\r\n\r\n  ![](./src/images/search-results.png)\r\n\r\n- **Articles**\r\n\r\n  - **_Marked icon which means the article got saved to profile_**\r\n\r\n    ![](./src/images/marked-icon-saved-article.png)\r\n\r\n  - **_Remove article from the saved ones_**\r\n\r\n    ![](./src/images/remove-saved-article.png)\r\n\r\n  - **_When users aren't logged in and wants to save an article, they will need to sign in first_**\r\n\r\n    ![](./src/images/sign-in-to-save-article.png)\r\n\r\n- **_When there's no match for searching terms, not found results will be shown_**\r\n\r\n  ![](./src/images/nothing-found-results.png)\r\n\r\n- **_The saved articles page in users account/profile_**\r\n\r\n  ![](./src/images/saved-news-page.png)\r\n\r\n- **_Info about the author section_**\r\n\r\n  ![](./src/images/about-author.png)\r\n\r\n---\r\n\r\n## 🔧 Possible Future Improvements\r\n\r\n- [ ] Create a Forgot Password option in case the users forget theirs.\r\n- [ ] Resets Password\r\n- [ ] Customize news outlet filtration according to user preferences.\r\n- [ ] Customize the sorting of saved articles based on user preferences.\r\n- [ ] Adjust the application for a dark/night mode.\r\n\r\n---\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchen-abudi%2Fnews-explorer-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchen-abudi%2Fnews-explorer-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchen-abudi%2Fnews-explorer-frontend/lists"}