This is the second time I've made this app, because I realized that the previous one was a little bit slow (especially when loading the large number of comments), and the information (stories or news) density on mobile devices view was too low - you could see only two stories on the display shown at the same time, and you needed to scroll or slide a lot to get to the last story.
So, because of the aforementioned reasons, I've decided to refactor my previous code - make the app run faster and add another view (theme), which is similar to the original classic Hacker News view, with more information density.
I'm still using the official Hacker news API to get the data (stories, comments, replies...) for the app.
The technologies that I'm using are: React JS, React Router for managing the app routing, Redux for partial state managment, and vanilla CSS for styling the app.
I decided to add a new UI view (or theme) because it wasn't so user friendly, as I thought it would be, on mobile view with the original Modern theme. So I added the new UI theme (classic) which is very similar (but a bit more colorful) to the original minimalistic Hacker News UI, which is very dense in information. It was a lot of work with CSS for adding this theme, because I literaly had to go backwards and rewrite a lot of lines from complex to more simple UI.
As I wanted to implement Dark theme to both views (Ui's) the function that I wrote for class naming (themedClass) helped me a lot not to lose orientation when writing class names. I added a few more skeleton (or placeholder) components so that the app had a smoother transition while changing the routes. The vanilla CSS is used throughout the whole app.
Hello people, author here. Some while ago I made an Hacker News clone reader app and I've posted it here.
The feedback from the HN community was that it was mostly ok, but the issues were that it was a little bit slower and it lacked information density (because the UI was different, more 'modern' than the original).
So I've decided to refactor my code, and I managed to speed up the loading times quite a bit, and redesigned it by adding a close to the original (but somewhat more colorful) UI, and did some corrections on the app's initial (modern) look. The dark theme is available on both modern and classic views.
It is made with React JS (as it was before), but now I've used Redux (instead of React's built-in Context) to do the partial state managment, as it gave the app a significant performance boost.
Because it is client side rendered, the Javascript is needed to run the app.
Hi everyone,
I've made this Hacker news clone just recently using their official Firebase Api.
It's completely client-side rendered using React JS, with no additional libraries or add-ons (used useContext hook for partial state management), except that I used React Router for app routing.
As for the styling goes, I've used vanilla CSS and tried to keep the UI as simple as I could, and to stay away from looking too flashy, with little or no animations at all. I added the dark mode for easy night time reading.
Hi everyone,
I've made this Hacker news clone just recently using their official Firebase Api.
It's completely client-side rendered using React JS, with no additional libraries or add-ons (used useContext hook for partial state management), except that I used React Router for app routing.
As for the styling goes, I've used vanilla CSS and tried to keep the UI as simple as I could, and to stay away from looking too flashy and too modern, with little or no animations at all.
I added the dark mode for easy night time reading.
This is the second time I've made this app, because I realized that the previous one was a little bit slow (especially when loading the large number of comments), and the information (stories or news) density on mobile devices view was too low - you could see only two stories on the display shown at the same time, and you needed to scroll or slide a lot to get to the last story.
So, because of the aforementioned reasons, I've decided to refactor my previous code - make the app run faster and add another view (theme), which is similar to the original classic Hacker News view, with more information density.
I'm still using the official Hacker news API to get the data (stories, comments, replies...) for the app.
The technologies that I'm using are: React JS, React Router for managing the app routing, Redux for partial state managment, and vanilla CSS for styling the app.
I decided to add a new UI view (or theme) because it wasn't so user friendly, as I thought it would be, on mobile view with the original Modern theme. So I added the new UI theme (classic) which is very similar (but a bit more colorful) to the original minimalistic Hacker News UI, which is very dense in information. It was a lot of work with CSS for adding this theme, because I literaly had to go backwards and rewrite a lot of lines from complex to more simple UI.
As I wanted to implement Dark theme to both views (Ui's) the function that I wrote for class naming (themedClass) helped me a lot not to lose orientation when writing class names. I added a few more skeleton (or placeholder) components so that the app had a smoother transition while changing the routes. The vanilla CSS is used throughout the whole app.
What do you people think about it?