News Explorer

3 min read

News Explorer

Outline

introduction

This a full stack project that was built during my bootcamp with Practicum by Yandex.
This project took about 3 weeks to finishing both front-end part and the back-end, for the front-end it uses React and BEM, to style components accordingly. This app combines two different API's' one that is the newsApi, and the other one is my own api.
For my own API, I am using NodeJS and hosting with AWS, I am using express to handle routes as well as other middleware for the app's logic, such as routing and validation.

functionalities

  • It allows the user to sign-up, and sign-m for this it use my own API
  • Back-end Validation to have unique values for username and for password to have the minimum characters
  • Front-end Validation for when the user sign in, it must submit the correct value and allow the user to protected routes
  • It allows the user to search for news, if no keyword is found or entered the button will be disabled
  • It allows the user to save the news to read later, if it is duplicate it will not be saved
  • It allows the user to go protected route like a personal dashboard where the news are saved
  • User can delete the news from the dashboard

challenges

  • Not having worked with TypeScript in the past, it made it difficult to understand some concepts that I wanted to apply in the code.
  • Not being a designer, I have always struggled with finding the right colors and the layout components
  • Using Contenful creating the queries was a bit difficult to do, but was able to do, it does need refactoring to make it better using the DRY method.
  • Adding features such as leaving comments and likes will be difficult as I would need a way to store the data

improvements that could be made and are in the process

  • Better codebase, I think the readability of the code is messy as of now, due to standards I had to follow.
  • Logic needs to improved and separated to follow up to date standards
  • Better UI design, as of now the design is too plain
  • Backend-end code could be improved by using a different database such as PSQL and using typeORM
  • Front-end could be done with TypeScript and probably NextJS or Gatsby

technologies

  • Backend
    • NodeJs
    • Express
    • Celebrate
    • Helmet
    • Validator
    • Mongoose
    • Express-rate-limit
    • Winston
    • JasonWebToken
    • Bcrypt
  • Frontend
    • React
    • React-Router-Dom
    • -react-hook-form (to be added)

previews

previewOne
previewTwo
previewThree

Running the app

  • Clone the app
  • cd into the correct folder
  • install Dependencies
cd front-end or cd back-end
npm install 
yarn add
  • Create .env file and add your information from News API
NEWS_API_KEY=myapikey

demo

icons for portfolio

Let's Talk

Let's Chat
© 2021 | Enyel Sequeira