+ {!items && !errorMessage &&
+ );
+}
diff --git a/react-app/src/components/Footer/Footer.scss b/react-app/src/components/Footer/Footer.scss
new file mode 100644
index 000000000..a00f67538
--- /dev/null
+++ b/react-app/src/components/Footer/Footer.scss
@@ -0,0 +1,23 @@
+@use "../../styles/media" as *;
+@use "../../styles/theme_variables" as *;
+
+#footer {
+ position: relative;
+ padding: 10px;
+ height: 60px;
+ letter-spacing: 0.7px;
+ text-align: center;
+
+ a {
+ font-weight: bold;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ @media #{$mobile-only} {
+ display: none;
+ }
+}
diff --git a/react-app/src/components/Footer/Footer.tsx b/react-app/src/components/Footer/Footer.tsx
new file mode 100644
index 000000000..1c2e5cdbd
--- /dev/null
+++ b/react-app/src/components/Footer/Footer.tsx
@@ -0,0 +1,14 @@
+import './Footer.scss';
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/react-app/src/components/Header/Header.scss b/react-app/src/components/Header/Header.scss
new file mode 100644
index 000000000..6d9dde074
--- /dev/null
+++ b/react-app/src/components/Header/Header.scss
@@ -0,0 +1,149 @@
+@use "../../styles/media" as *;
+@use "../../styles/theme_variables" as *;
+
+#header {
+ color: #fff;
+ padding: 6px 0;
+ line-height: 18px;
+ vertical-align: middle;
+ position: relative;
+ z-index: 1;
+ width: 100%;
+
+ @media #{$mobile-only} {
+ height: 50px;
+ position: fixed;
+ top: 0;
+ }
+
+ a {
+ display: inline;
+ }
+}
+
+.home-link {
+ width: 50px;
+ height: 66px;
+}
+
+.logo-inner {
+ width: 32px;
+ position: absolute;
+ left: 17px;
+ top: 18px;
+ z-index: -1;
+ height: 32px;
+ border-radius: 50%;
+
+ @media #{$mobile-only} {
+ left: 16px;
+ top: 12px;
+ }
+}
+
+.logo {
+ width: 50px;
+ padding: 3px 8px 0;
+
+ @media #{$mobile-only} {
+ width: 45px;
+ padding: 0 0 0 10px;
+ }
+}
+
+h1 {
+ font-weight: normal;
+ display: inline-block;
+ vertical-align:middle;
+ margin: 0;
+ font-size: 16px;
+
+ a {
+ color: #fff;
+ text-decoration: none;
+ }
+}
+
+.name {
+ margin-right: 30px;
+ margin-bottom: 2px;
+
+ @media #{$mobile-only} {
+ display: none;
+ }
+}
+
+.header-text {
+ position: absolute;
+ width: inherit;
+ height: 20px;
+ left: 10px;
+ top: 27px;
+ z-index: -1;
+
+ @media #{$mobile-only} {
+ top: 22px;
+ }
+}
+
+.left {
+ position: absolute;
+ left: 60px;
+ font-size: 16px;
+
+ @media #{$mobile-only} {
+ width: 100%;
+ left: 0;
+ }
+}
+
+.header-nav {
+ display: inline-block;
+ margin-left: 20px;
+
+ @media #{$mobile-only} {
+ margin-left: 60px;
+ }
+
+ a {
+ color: hsla(0,0%,100%,.9);
+ text-decoration: none;
+ margin: 0 5px;
+ letter-spacing: 1.8px;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+
+ .active {
+ color: #fff;
+ }
+}
+
+.info {
+ position: absolute;
+ top: 0;
+ right: 20px;
+ height: 100%;
+
+ @media #{$mobile-only} {
+ right: 10px;
+ }
+
+ img {
+ opacity: 0.8;
+ width: 25px;
+ margin-top: 21.5px;
+ display: block;
+
+ &:hover {
+ opacity: 1;
+ cursor: pointer;
+ }
+
+ @media #{$mobile-only} {
+ margin-top: 15px;
+ }
+ }
+}
diff --git a/react-app/src/components/Header/Header.tsx b/react-app/src/components/Header/Header.tsx
new file mode 100644
index 000000000..e2135bbd9
--- /dev/null
+++ b/react-app/src/components/Header/Header.tsx
@@ -0,0 +1,51 @@
+import { NavLink } from 'react-router-dom';
+import { useSettings } from '../../services/useSettings';
+import Settings from '../Settings/Settings';
+import './Header.scss';
+
+export default function Header() {
+ const { settings, toggleSettings } = useSettings();
+
+ const scrollTop = () => window.scrollTo(0, 0);
+
+ return (
+
+ {feedType === 'jobs' && (
+
+ )}
+ + These are jobs at startups that were funded by Y Combinator. You can also + get a job at a YC startup through{' '} + Triplebyte. +
+ )} +-
+ {items.map((item) => (
+
-
+
- +
+ ))}
+
+ {listStart !== 1 && (
+
+ ‹ Prev
+
+ )}
+ {items.length === 30 && (
+
+ More ›
+
+ )}
+
+
+
+
+ 
+
+
+ {settings.showSettings &&
+
+
+
+
+
+ new
+ {' '}
+ |{' '}
+
+ show
+ {' '}
+ |{' '}
+
+ ask
+ {' '}
+ |{' '}
+
+ jobs
+
+
+
+
+ 
+
+
+
+ {hasUrl ? (
+
+ );
+}
diff --git a/react-app/src/components/ItemDetails/ItemDetails.scss b/react-app/src/components/ItemDetails/ItemDetails.scss
new file mode 100644
index 000000000..34f891920
--- /dev/null
+++ b/react-app/src/components/ItemDetails/ItemDetails.scss
@@ -0,0 +1,151 @@
+@use "../../styles/media" as *;
+@use "../../styles/theme_variables" as *;
+
+.main-content {
+ position: relative;
+ width: 100%;
+ min-height: 100vh;
+ -webkit-transition: opacity .2s ease;
+ transition: opacity .2s ease;
+ box-sizing: border-box;
+ padding: 8px 0;
+ z-index: 0;
+}
+
+.item {
+ box-sizing: border-box;
+ padding: 10px 40px 0 40px;
+ z-index: 0;
+}
+
+@media #{$tablet-only} {
+ .item {
+ padding: 10px 20px 0 40px;
+ }
+}
+
+@media #{$mobile-only} {
+ .item {
+ box-sizing: border-box;
+ padding: 110px 15px 0 15px;
+ }
+}
+
+.head-margin {
+ margin-bottom: 15px;
+}
+
+p {
+ margin: 2px 0;
+}
+
+.subject {
+ word-wrap: break-word;
+ margin-top: 20px;
+}
+
+a {
+ cursor: pointer;
+ text-decoration: none;
+}
+
+@media #{$mobile-only} {
+ .laptop {
+ display: none;
+ }
+}
+
+@media #{$laptop-only} {
+ .mobile {
+ display: none;
+ }
+}
+
+.title {
+ font-size: 16px;
+ font-family: Verdana, Geneva, sans-serif;
+}
+
+.title-block {
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin: 0 75px;
+}
+
+@media #{$mobile-only} {
+ .title {
+ font-size: 15px;
+ }
+ .back-button {
+ position: absolute;
+ top: 52%;
+ width: 0.6rem;
+ height: 0.6rem;
+ background: transparent;
+ box-shadow: 0 0 0 lightgray;
+ transition: all 200ms ease;
+ left: 4%;
+ transform: translate3d(0, -50%, 0) rotate(-135deg);
+ }
+}
+
+.subtext {
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 0.5px;
+}
+
+.domain {
+ letter-spacing: 0.5px;
+}
+
+.subtext a {
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+.item-details {
+ padding: 10px;
+}
+
+.item-header {
+ padding-bottom: 10px;
+}
+
+@media #{$mobile-only} {
+ .item-header {
+ padding: 10px 0 10px 0;
+ position: fixed;
+ width: 100%;
+ left: 0;
+ top: 62px;
+ }
+}
+
+.pollResults {
+ margin-bottom: 1em;
+}
+
+.pollContent {
+ * {
+ padding-bottom: 0;
+ margin-bottom: -1em;
+ margin-top: 1em;
+ }
+ .pollBar {
+ height: 10px;
+ margin-bottom: 1em;
+ }
+}
+
+ul {
+ list-style-type: none;
+ padding: 10px 0;
+}
+
+li {
+ display: list-item;
+}
diff --git a/react-app/src/components/ItemDetails/ItemDetails.tsx b/react-app/src/components/ItemDetails/ItemDetails.tsx
new file mode 100644
index 000000000..73eb607a3
--- /dev/null
+++ b/react-app/src/components/ItemDetails/ItemDetails.tsx
@@ -0,0 +1,143 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { fetchItemContent } from '../../services/hackerNewsApi';
+import { useSettings } from '../../services/useSettings';
+import { commentLabel } from '../../utils/commentLabel';
+import Loader from '../Loader/Loader';
+import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import Comment from '../Comment/Comment';
+import type { Story } from '../../types';
+import './ItemDetails.scss';
+
+interface ItemDetailsProps {
+ itemId: number;
+}
+
+export default function ItemDetails({ itemId }: ItemDetailsProps) {
+ const navigate = useNavigate();
+ const { settings } = useSettings();
+ const [item, setItem] = useState+ + {item.title} + + {item.domain && ({item.domain})} +
+ ) : ( ++ + {item.title} + +
+ )} +
+ {item.type !== 'job' && (
+
+
+
+ {item.user}
+
+ {item.points} ★
+
+ )}
+
+ {item.time_ago}{' '}
+ {item.type !== 'job' && (
+
+ {' '}
+ • {commentLabel(item.comments_count)}
+
+ )}
+
+
+ {item.type !== 'job' && (
+
+ {item.points} points by{' '}
+ {item.user}
+
+ )}
+
+ {item.time_ago}
+ {item.type !== 'job' && (
+
+ {' '}
+ | {commentLabel(item.comments_count)}
+
+ )}
+
+
+
+ {!item && !errorMessage && (null);
+ const [errorMessage, setErrorMessage] = useState('');
+
+ useEffect(() => {
+ let cancelled = false;
+ fetchUser(userId)
+ .then((data) => { if (!cancelled) setUser(data); })
+ .catch(() => { if (!cancelled) setErrorMessage(`Could not load user ${userId}.`); });
+ return () => { cancelled = true; };
+ }, [userId]);
+
+ const goBack = () => navigate(-1);
+
+ return (
+ <>
+ {!user && !errorMessage &&
+ ,
+)
diff --git a/react-app/src/services/SettingsContext.tsx b/react-app/src/services/SettingsContext.tsx
new file mode 100644
index 000000000..c51ecbbcd
--- /dev/null
+++ b/react-app/src/services/SettingsContext.tsx
@@ -0,0 +1,78 @@
+import { useState, useEffect, useCallback, type ReactNode } from 'react';
+import type { Settings } from '../types';
+import { SettingsContext } from './settingsContextDef';
+
+function getInitialSettings(): Settings {
+ return {
+ showSettings: false,
+ openLinkInNewTab: localStorage.getItem('openLinkInNewTab')
+ ? JSON.parse(localStorage.getItem('openLinkInNewTab')!)
+ : false,
+ theme: 'default',
+ titleFontSize: localStorage.getItem('titleFontSize') ?? '16',
+ listSpacing: localStorage.getItem('listSpacing') ?? '0',
+ };
+}
+
+function getInitialTheme(): string {
+ const saved = localStorage.getItem('theme');
+ if (saved) return saved;
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'night' : 'default';
+}
+
+export function SettingsProvider({ children }: { children: ReactNode }) {
+ const [settings, setSettings] = useState(() => {
+ const s = getInitialSettings();
+ s.theme = getInitialTheme();
+ return s;
+ });
+ const [userSetTheme, setUserSetTheme] = useState(() => localStorage.getItem('theme') !== null);
+
+ const handleColorSchemeChange = useCallback((e: MediaQueryListEvent) => {
+ if (userSetTheme) return;
+ const theme = e.matches ? 'night' : 'default';
+ setSettings(prev => ({ ...prev, theme }));
+ }, [userSetTheme]);
+
+ useEffect(() => {
+ const mql = window.matchMedia('(prefers-color-scheme: dark)');
+ mql.addEventListener('change', handleColorSchemeChange);
+ return () => mql.removeEventListener('change', handleColorSchemeChange);
+ }, [handleColorSchemeChange]);
+
+ const toggleSettings = useCallback(() => {
+ setSettings(prev => ({ ...prev, showSettings: !prev.showSettings }));
+ }, []);
+
+ const toggleOpenLinksInNewTab = useCallback(() => {
+ setSettings(prev => {
+ const next = !prev.openLinkInNewTab;
+ localStorage.setItem('openLinkInNewTab', JSON.stringify(next));
+ return { ...prev, openLinkInNewTab: next };
+ });
+ }, []);
+
+ const setTheme = useCallback((theme: string) => {
+ setSettings(prev => ({ ...prev, theme }));
+ localStorage.setItem('theme', theme);
+ setUserSetTheme(true);
+ }, []);
+
+ const setFont = useCallback((fontSize: string) => {
+ setSettings(prev => ({ ...prev, titleFontSize: fontSize }));
+ localStorage.setItem('titleFontSize', fontSize);
+ }, []);
+
+ const setSpacing = useCallback((listSpace: string) => {
+ setSettings(prev => ({ ...prev, listSpacing: listSpace }));
+ localStorage.setItem('listSpacing', listSpace);
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/react-app/src/services/hackerNewsApi.ts b/react-app/src/services/hackerNewsApi.ts
new file mode 100644
index 000000000..12652b786
--- /dev/null
+++ b/react-app/src/services/hackerNewsApi.ts
@@ -0,0 +1,41 @@
+import type { Story, User, PollResult } from '../types';
+
+const BASE_URL = 'https://node-hnapi.herokuapp.com';
+
+async function fetchJson(url: string): Promise {
+ const res = await fetch(url);
+ if (!res.ok) {
+ throw new Error(`HTTP error: ${res.status}`);
+ }
+ return res.json();
+}
+
+export async function fetchFeed(feedType: string, page: number): Promise {
+ return fetchJson(`${BASE_URL}/${feedType}?page=${page}`);
+}
+
+export async function fetchItemContent(id: number): Promise {
+ const story = await fetchJson(`${BASE_URL}/item/${id}`);
+ if (story.type === 'poll' && story.poll) {
+ const numberOfPollOptions = story.poll.length;
+ story.poll_votes_count = 0;
+ const pollPromises = [];
+ for (let i = 1; i <= numberOfPollOptions; i++) {
+ pollPromises.push(fetchPollContent(story.id + i));
+ }
+ const pollResults = await Promise.all(pollPromises);
+ pollResults.forEach((result, idx) => {
+ story.poll[idx] = result;
+ story.poll_votes_count += result.points;
+ });
+ }
+ return story;
+}
+
+export async function fetchPollContent(id: number): Promise {
+ return fetchJson(`${BASE_URL}/item/${id}`);
+}
+
+export async function fetchUser(id: string): Promise {
+ return fetchJson(`${BASE_URL}/user/${id}`);
+}
diff --git a/react-app/src/services/settingsContextDef.ts b/react-app/src/services/settingsContextDef.ts
new file mode 100644
index 000000000..7f8249758
--- /dev/null
+++ b/react-app/src/services/settingsContextDef.ts
@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { Settings } from '../types';
+
+export interface SettingsContextValue {
+ settings: Settings;
+ toggleSettings: () => void;
+ toggleOpenLinksInNewTab: () => void;
+ setTheme: (theme: string) => void;
+ setFont: (fontSize: string) => void;
+ setSpacing: (listSpace: string) => void;
+}
+
+export const SettingsContext = createContext(null);
diff --git a/react-app/src/services/useSettings.ts b/react-app/src/services/useSettings.ts
new file mode 100644
index 000000000..d0be7a7a2
--- /dev/null
+++ b/react-app/src/services/useSettings.ts
@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { SettingsContext } from './settingsContextDef';
+import type { SettingsContextValue } from './settingsContextDef';
+
+export function useSettings(): SettingsContextValue {
+ const ctx = useContext(SettingsContext);
+ if (!ctx) throw new Error('useSettings must be used within SettingsProvider');
+ return ctx;
+}
diff --git a/react-app/src/styles/_media.scss b/react-app/src/styles/_media.scss
new file mode 100644
index 000000000..b04b71a92
--- /dev/null
+++ b/react-app/src/styles/_media.scss
@@ -0,0 +1,3 @@
+$mobile-only: "only screen and (max-width : 768px)";
+$laptop-only: "only screen and (min-width : 769px)";
+$tablet-only: "only screen and (max-width : 1024px)";
diff --git a/react-app/src/styles/_theme_variables.scss b/react-app/src/styles/_theme_variables.scss
new file mode 100644
index 000000000..2ee86cc51
--- /dev/null
+++ b/react-app/src/styles/_theme_variables.scss
@@ -0,0 +1,30 @@
+$skull-size: 200px;
+
+// Day theme colors
+$theme-day-body-background-color: #fff;
+$theme-day-wrapper-background-color: #f5f5f5;
+$theme-day-wrapper-mobile-background-color: #fff;
+$theme-day-text-color: #000;
+$theme-day-subtext-color: #696969;
+$theme-day-secondary-color: #b92b27;
+$theme-day-header-background-color: $theme-day-secondary-color;
+$theme-day-logo-inner: #fff;
+$theme-day-border: 2px solid #b92b27;
+
+// Night theme colors
+$theme-night-body-background-color: #37474F;
+$theme-night-wrapper-background-color: #263238;
+$theme-night-wrapper-mobile-background-color: $theme-night-wrapper-background-color;
+$theme-night-text-color: rgba(255, 255, 255, 0.7);
+$theme-night-subtext-color: #999;
+$theme-night-secondary-color: #00c0ff;
+$theme-night-header-background-color: #263238;
+$theme-night-logo-inner: $theme-night-header-background-color;
+$theme-night-border: 2px solid #00c0ff;
+
+// Black theme colors
+$theme-amoledblack-body-background-color: #000;
+$theme-amoledblack-text-color: rgba(255, 255, 255, 0.75);
+$theme-amoledblack-subtext-color: rgba(255, 255, 255, 0.5);
+$theme-amoledblack-secondary-color: rgba(255, 255, 255, 0.6);
+$theme-amoledblack-border: 2px solid rgba(255, 255, 255, 0.6);
diff --git a/react-app/src/styles/_themes.scss b/react-app/src/styles/_themes.scss
new file mode 100644
index 000000000..b8c2406f5
--- /dev/null
+++ b/react-app/src/styles/_themes.scss
@@ -0,0 +1,234 @@
+@use "sass:color";
+@use "media" as *;
+@use "theme_variables" as *;
+
+@mixin theme(
+ $name,
+ $body-background-color,
+ $wrapper-background-color,
+ $wrapper-mobile-background-color,
+ $wrapper-color,
+ $item-a-color,
+ $item-a-visited-color,
+ $header-background-color,
+ $subtext-color,
+ $secondary-link-color,
+ $logo-inner-color,
+ $border
+) {
+ .#{$name} {
+ .body-cover {
+ background: $body-background-color;
+
+ @media #{$mobile-only} {
+ background: $wrapper-mobile-background-color;
+ }
+ }
+
+ .wrapper {
+ background: $wrapper-background-color;
+ color: $wrapper-color;
+
+ @media #{$mobile-only} {
+ background: $wrapper-mobile-background-color;
+ }
+
+ a {
+ color: $item-a-color;
+
+ &:visited {
+ color: $item-a-visited-color;
+ }
+ }
+
+ #header {
+ background: $header-background-color;
+ border-bottom: $border;
+ }
+
+ .logo-inner {
+ background: $logo-inner-color;
+ }
+
+ .nav {
+ a {
+ color: $secondary-link-color;
+
+ @media #{$mobile-only} {
+ color: $secondary-link-color;
+ }
+ }
+ }
+
+ #footer {
+ border-top: $border;
+
+ a {
+ color: $secondary-link-color;
+ }
+ }
+
+ .subtext, .subtext-palm, .subtext-laptop, .domain, .meta, .deleted-meta{
+ color: $subtext-color;
+
+ a {
+ color: $secondary-link-color;
+ }
+ }
+
+ .popup {
+ background: $header-background-color;
+ }
+
+ .item-header {
+ border-bottom: $border;
+
+ @media #{$mobile-only} {
+ background: $wrapper-mobile-background-color;
+ }
+ }
+
+ .pollContent {
+ .pollBar {
+ background: $secondary-link-color;
+ }
+ }
+
+ .loader {
+ color: $secondary-link-color;
+ background: $secondary-link-color;
+
+ &:before, &:after {
+ background: $secondary-link-color;
+ }
+ }
+
+ .job-header {
+ @media #{$mobile-only} {
+ border-bottom: $border;
+ }
+ }
+
+ .back-button {
+ @media #{$mobile-only} {
+ border-top: .3rem solid $secondary-link-color;
+ border-right: .3rem solid $secondary-link-color;
+ }
+ }
+
+ .error-section {
+ .skull {
+ .head {
+ background-color: $secondary-link-color;
+
+ &:before, &:after {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+ }
+
+ .crack {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+
+ &:before {
+ border-top: calc($skull-size / 8) solid $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ border-top: calc($skull-size / 8) solid $wrapper-mobile-background-color;
+ }
+ }
+ }
+ }
+
+ .mouth {
+ background-color: $secondary-link-color;
+
+ &:before {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+ }
+ }
+
+ .teeth {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+
+ &:before, &:after {
+ background-color: $wrapper-background-color;
+
+ @media #{$mobile-only} {
+ background-color: $wrapper-mobile-background-color;
+ }
+ }
+ }
+ }
+ }
+
+ .main-details {
+ .name {
+ color: $secondary-link-color;
+ }
+ .right {
+ color: $secondary-link-color;
+ }
+ }
+ }
+ }
+}
+
+@include theme(
+ default,
+ $theme-day-body-background-color,
+ $theme-day-wrapper-background-color,
+ $theme-day-wrapper-mobile-background-color,
+ $theme-day-text-color,
+ $theme-day-text-color,
+ $theme-day-subtext-color,
+ $theme-day-header-background-color,
+ $theme-day-subtext-color,
+ $theme-day-secondary-color,
+ $theme-day-logo-inner,
+ $theme-day-border
+);
+
+@include theme(
+ night,
+ $theme-night-body-background-color,
+ $theme-night-wrapper-background-color,
+ $theme-night-wrapper-mobile-background-color,
+ $theme-night-text-color,
+ $theme-night-text-color,
+ $theme-night-subtext-color,
+ $theme-night-header-background-color,
+ $theme-night-subtext-color,
+ $theme-night-secondary-color,
+ $theme-night-logo-inner,
+ $theme-night-border
+);
+
+@include theme(
+ amoledblack,
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-text-color,
+ $theme-amoledblack-text-color,
+ color.adjust($theme-amoledblack-text-color, $lightness: -33%),
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-subtext-color,
+ $theme-amoledblack-secondary-color,
+ $theme-amoledblack-body-background-color,
+ $theme-amoledblack-border
+);
diff --git a/react-app/src/styles/globals.scss b/react-app/src/styles/globals.scss
new file mode 100644
index 000000000..6e9fd40de
--- /dev/null
+++ b/react-app/src/styles/globals.scss
@@ -0,0 +1,16 @@
+@use "themes";
+
+html {
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ margin: 0;
+ height: 100%;
+ width: 100%;
+}
+
+pre {
+ white-space: pre-wrap;
+}
diff --git a/react-app/src/types/index.ts b/react-app/src/types/index.ts
new file mode 100644
index 000000000..e0c2c4cd4
--- /dev/null
+++ b/react-app/src/types/index.ts
@@ -0,0 +1,53 @@
+export type FeedType = 'poll' | 'story' | 'job';
+
+export interface Comment {
+ id: number;
+ level: number;
+ user: string;
+ time: number;
+ time_ago: string;
+ content: string;
+ deleted: boolean;
+ comments: Comment[];
+}
+
+export interface PollResult {
+ points: number;
+ content: string;
+}
+
+export interface Story {
+ id: number;
+ title: string;
+ points: number;
+ user: string;
+ time: number;
+ time_ago: string;
+ type: FeedType;
+ url: string;
+ domain: string;
+ comments: Comment[];
+ comments_count: number;
+ content: string;
+ poll: PollResult[];
+ poll_votes_count: number;
+ deleted: boolean;
+ dead: boolean;
+}
+
+export interface User {
+ id: string;
+ crated_time: number;
+ created: string;
+ karma: number;
+ avg: number;
+ about: string;
+}
+
+export interface Settings {
+ showSettings: boolean;
+ openLinkInNewTab: boolean;
+ theme: string;
+ titleFontSize: string;
+ listSpacing: string;
+}
diff --git a/react-app/src/utils/commentLabel.ts b/react-app/src/utils/commentLabel.ts
new file mode 100644
index 000000000..cb07a9cb3
--- /dev/null
+++ b/react-app/src/utils/commentLabel.ts
@@ -0,0 +1,6 @@
+export function commentLabel(count: number): string {
+ if (count > 0) {
+ return count === 1 ? '1 comment' : `${count} comments`;
+ }
+ return 'discuss';
+}
diff --git a/react-app/tsconfig.app.json b/react-app/tsconfig.app.json
new file mode 100644
index 000000000..7f42e5f7c
--- /dev/null
+++ b/react-app/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM"],
+ "module": "esnext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/react-app/tsconfig.json b/react-app/tsconfig.json
new file mode 100644
index 000000000..1ffef600d
--- /dev/null
+++ b/react-app/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/react-app/tsconfig.node.json b/react-app/tsconfig.node.json
new file mode 100644
index 000000000..d3c52ea64
--- /dev/null
+++ b/react-app/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023"],
+ "module": "esnext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/react-app/vite.config.ts b/react-app/vite.config.ts
new file mode 100644
index 000000000..8b0f57b91
--- /dev/null
+++ b/react-app/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})
+
+ );
+}
diff --git a/react-app/src/components/Loader/Loader.scss b/react-app/src/components/Loader/Loader.scss
new file mode 100644
index 000000000..16bf98ecd
--- /dev/null
+++ b/react-app/src/components/Loader/Loader.scss
@@ -0,0 +1,109 @@
+@use "../../styles/media" as *;
+@use "../../styles/theme_variables" as *;
+
+.loader {
+ -webkit-animation: load1 1s infinite ease-in-out;
+ animation: load1 1s infinite ease-in-out;
+ width: 1em;
+ height: 4em;
+ &:before, &:after {
+ -webkit-animation: load1 1s infinite ease-in-out;
+ animation: load1 1s infinite ease-in-out;
+ width: 1em;
+ height: 4em;
+ }
+ &:before, &:after {
+ position: absolute;
+ top: 0;
+ content: '';
+ }
+ &:before {
+ left: -1.5em;
+ -webkit-animation-delay: -0.32s;
+ animation-delay: -0.32s;
+ }
+}
+
+.loading-section {
+ height: 70px;
+ margin: 40px 0 40px 40px;
+
+ @media #{$mobile-only} {
+ display: block;
+ position: relative;
+ margin: 45vh 0;
+ }
+}
+
+.loader {
+ text-indent: -9999em;
+ margin: 20px 20px;
+ position: relative;
+ font-size: 11px;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-animation-delay: -0.16s;
+ animation-delay: -0.16s;
+ &:after {
+ left: 1.5em;
+ }
+
+ @media #{$mobile-only} {
+ margin: 20px auto;
+ }
+}
+
+@-webkit-keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 2em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 3em;
+ }
+}
+
+@keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 2em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 3em;
+ }
+}
+
+@media #{$mobile-only} {
+ @-webkit-keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 4em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 5em;
+ }
+ }
+
+ @keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 3em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 4em;
+ }
+ }
+}
diff --git a/react-app/src/components/Loader/Loader.tsx b/react-app/src/components/Loader/Loader.tsx
new file mode 100644
index 000000000..05ca5a18d
--- /dev/null
+++ b/react-app/src/components/Loader/Loader.tsx
@@ -0,0 +1,9 @@
+import './Loader.scss';
+
+export default function Loader() {
+ return (
+
+
+ + + {hasUrl ? ( + + {item.title} + + ) : ( + + {item.title} + + )} +
+ 0 || item.type === 'job' ? ' item-header' : ''
+ }${item.content ? ' head-margin' : ''}`}
+ >
+ {hasUrl ? (
+
+ {item.type === 'poll' && item.poll && (
+ + + {item.title} + + {item.domain && ({item.domain})} +
+ ) : ( ++ + {item.title} + +
+ )} +
+ {item.type !== 'job' && (
+
+ {item.points} points by{' '}
+ {item.user}
+
+ )}
+
+ {item.time_ago}
+ {item.type !== 'job' && (
+
+ {' '}
+ |{' '}
+
+ {commentLabel(item.comments_count)}
+
+
+ )}
+
+
+
+ {item.poll.map((pollResult, idx) => (
+
+ )}
+
+
+
+ )}
+ {item.content && (
+
+ )}
+ {pollResult.points} points
+ 0
+ ? (pollResult.points / item.poll_votes_count) * 100
+ : 0
+ }%`,
+ }}
+ />
+
+ ))}
+ -
+ {item.comments &&
+ item.comments.map((comment) => (
+
-
+
+
+ ))}
+
+
+ );
+}
diff --git a/react-app/src/components/Settings/Settings.scss b/react-app/src/components/Settings/Settings.scss
new file mode 100644
index 000000000..56f491574
--- /dev/null
+++ b/react-app/src/components/Settings/Settings.scss
@@ -0,0 +1,74 @@
+@use "../../styles/media" as *;
+@use "../../styles/theme_variables" as *;
+
+.overlay {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.7);
+ opacity: 1;
+ z-index: 1;
+}
+
+.popup {
+ margin: 70px auto;
+ padding: 30px;
+ border-radius: 5px;
+ width: 30%;
+ position: relative;
+ h1 {
+ margin-top: 0;
+ margin-bottom: 0px;
+ color: #fff;
+ text-align: center;
+ letter-spacing: 1px;
+ }
+ h2 {
+ padding-top: 10px;
+ }
+ hr {
+ width: 40%;
+ margin-bottom: 20px;
+ }
+ .close {
+ position: absolute;
+ top: 12px;
+ right: 20px;
+ font-size: 30px;
+ font-weight: bold;
+ text-decoration: none;
+ color: rgba(255,255,255,0.8);
+ &:hover {
+ color: #fff;
+ cursor: pointer;
+ }
+ }
+ .content {
+ max-height: 30%;
+ color: #fff;
+ letter-spacing: 1px;
+ overflow: auto;
+ }
+ input[type=number] {
+ display: block;
+ width: 80%;
+ height: 20px;
+ margin-bottom: 15px;
+ border-radius: 5px;
+ padding: 2px;
+ }
+}
+
+.control-section {
+ margin-bottom: 15px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid white;
+}
+
+@media screen and (max-width: 700px) {
+ .box, .popup {
+ width: 70%;
+ }
+}
diff --git a/react-app/src/components/Settings/Settings.tsx b/react-app/src/components/Settings/Settings.tsx
new file mode 100644
index 000000000..752b76cc9
--- /dev/null
+++ b/react-app/src/components/Settings/Settings.tsx
@@ -0,0 +1,99 @@
+import { useSettings } from '../../services/useSettings';
+import './Settings.scss';
+
+export default function Settings() {
+ const { settings, toggleOpenLinksInNewTab, setTheme, setFont, setSpacing } = useSettings();
+
+ const closeSettings = useSettings().toggleSettings;
+
+ return (
+ Loading...
+
+
+ );
+}
diff --git a/react-app/src/components/User/User.scss b/react-app/src/components/User/User.scss
new file mode 100644
index 000000000..b40bc15cc
--- /dev/null
+++ b/react-app/src/components/User/User.scss
@@ -0,0 +1,89 @@
+@use "../../styles/media" as *;
+@use "../../styles/theme_variables" as *;
+
+.profile pre {
+ white-space: pre-wrap;
+}
+
+.profile {
+ padding: 30px;
+}
+
+@media #{$mobile-only} {
+ .profile {
+ padding: 110px 15px 0 15px;
+ }
+ .title-block {
+ font-size: 15px;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin: 0 75px;
+ }
+ .back-button {
+ position: absolute;
+ top: 52%;
+ width: 0.6rem;
+ height: 0.6rem;
+ background: transparent;
+ box-shadow: 0 0 0 lightgray;
+ transition: all 200ms ease;
+ left: 4%;
+ transform: translate3d(0, -50%, 0) rotate(-135deg);
+ }
+ .item-header {
+ padding-bottom: 10px;
+ background-color: #fff;
+ padding: 10px 0 10px 0;
+ position: fixed;
+ width: 100%;
+ left: 0;
+ top: 62px;
+ height: 20px;
+ }
+}
+
+@media #{$laptop-only} {
+ .mobile {
+ display: none;
+ }
+}
+
+.main-details {
+ .name {
+ font-weight: bold;
+ font-size: 32px;
+ letter-spacing: 2px;
+ }
+ .age {
+ font-weight: bold;
+ color: #696969;
+ padding-bottom: 0;
+ }
+ .right {
+ float: right;
+ font-weight: bold;
+ font-size: 32px;
+ letter-spacing: 2px;
+ }
+}
+
+@media #{$mobile-only} {
+ .main-details {
+ margin-top: 20px;
+ .name {
+ font-size: 18px;
+ }
+ }
+}
+
+@media #{$mobile-only} {
+ .main-details .right {
+ font-size: 18px;
+ }
+}
+
+.other-details {
+ word-wrap: break-word;
+}
diff --git a/react-app/src/components/User/User.tsx b/react-app/src/components/User/User.tsx
new file mode 100644
index 000000000..fcd0474b3
--- /dev/null
+++ b/react-app/src/components/User/User.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { fetchUser } from '../../services/hackerNewsApi';
+import Loader from '../Loader/Loader';
+import ErrorMessage from '../ErrorMessage/ErrorMessage';
+import type { User as UserType } from '../../types';
+import './User.scss';
+
+interface UserProfileProps {
+ userId: string;
+}
+
+export default function UserProfile({ userId }: UserProfileProps) {
+ const navigate = useNavigate();
+ const [user, setUser] = useState
+
+ + × + +
+ Settings
++ + × + +
+
+
+
+ Links
+ {' '} + Open links in a new tab +
+
+
+
+ Select a theme
+
+
+
+
+
+
+
+
+
+
+
+ Change Font
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/react-app/src/main.tsx b/react-app/src/main.tsx
new file mode 100644
index 000000000..4aff0256e
--- /dev/null
+++ b/react-app/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ + + Profile: {user.id} +
+
+ {user.id}
+ {user.karma} ★
+
+ {user.about && (
+ Created {user.created}
+
+
+
+ )}
+