/hacker-news-ui

Hacker News UI Web App

Primary LanguageJavaScript

Hacker News UI Web App - made on 📀Remix📀 😎

This is a solution for test challenge from BR Group for applicants on "Middle Frontend React"
Start: 2023/03/07
Finish: 2023/03/10

To run locally:

  • download or fork=>pull

  • npm install

  • npm run dev

The challenge requirements

Main Page

[+] Display last 100 news sorted by date
[+] Each news item contains:
⁃ title
⁃ score
⁃ nickname
⁃ publication date
[+] On click on the item - move to news item details page
[+] Refresh news list each minute automatically
[+] Refresh by click on the refresh button

News Item Details Page

[+] Contains: ⁃ link to the news item source
⁃ title
⁃ date
⁃ author
⁃ comments counter
⁃ comments tree
[+] Root comments download with the page, nested ones - on root comment click
[+] The page should contain a button to refresh comments list
[+] The page should contain a button to move back to list of news feed

Links

Built with

  • Semantic HTML5 markup.
  • Tailwind CSS.
  • Mobile-first workflow.
  • Typescript - programming language.
  • Remix - is a full stack React based web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.

What I've learned

  • How to use with Remix + Typescript template
  • How to deal with Hacker News API to get the web app done
  • How to use Tailwind CSS 🌬️
  • How to build tricky comments section 💬

Continued development

I still find it tricky to use environment variables when deploying apps on different servises.
I'm going to finish another couple of FE challenges to polish my skills in layout and development.

Author

Acknowledgments

I'm thankful to BR Group for such usefull test challenge