Skip to content

News Explorer project, a news fetch app. My final graduation work at Yandex Practicum bootcamp. Made with React, Node, Express, MongoDB.

Notifications You must be signed in to change notification settings

cat-street/news-explorer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

59 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

News Explorer

Yandex Practicum final graduation project

News Explorer Preview

News Explorer is a single page application to search global news by search keywords using News API. The application also includes registration/authorization functionality with the ability for users to bookmark news cards. This app is a final graduation project at 'Web Developer' program at Yandex Practicum coding school. Includes frontend and backend (MERN stack).


Technology used

Frontend

  • HTML/CSS
  • React (+ react-dom, react-router)
  • JavaScript (ES6)
  • I18next (multiple language support)

Backend

  • Node.js/Express.js
  • MongoDB
  • Node/Express libraries

Additional info

  • Semantic and accessible HTML, modern CSS (Flexbox, Grid, transitions).
  • Fully responsive layout, optimized for screen resolution from 320px by width.
  • JavaScript ES6 (async/await, fetch API).
  • React frontend:
    • Functional components.
    • Context, Ref, Redirect, Route, Switch functions.
    • useState, useEffect, useContext, useRef, useCallback, useHistory hooks.
    • Authorization, frontend validation, protected 'bookmarks' route (unreachable for unregistered users).
    • Global context used for storing user data.
    • Fetching and processing data from News API.
    • Saving data to local API.
    • Utilizing LocalStorage to save search data between sessions.
    • I18next framework used for English/Russian localization.
  • Node/Express backend:
    • REST API, saving/fetching data, user registration/authorization.
    • Data stored in local MongoDB (schema, CRUD) using Mongoose.
    • Multiple stages of data validation (validator, joi/celebrate).
    • Password data is encrypted using bcryptjs.
    • Server cookie with secure JWT token used for authentication.
    • Access & error logging using winston.
    • Authentication-protected routes.
    • Centralized middleware for errors handling with correct status and message responses.
    • Secure headers by helmet
    • Request rate limit middleware
  • Code style by ESLint in airbnb-base config.
  • Naming & components structure by BEM.

About

News Explorer project, a news fetch app. My final graduation work at Yandex Practicum bootcamp. Made with React, Node, Express, MongoDB.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published