├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.scss ├── App.test.tsx ├── App.tsx ├── components │ ├── BackToTopButton │ │ ├── BackToTopButton.scss │ │ └── BackToTopButton.tsx │ ├── Comments │ │ ├── Comments.scss │ │ └── Comments.tsx │ ├── CreatePost │ │ ├── CreatePost.scss │ │ └── CreatePost.tsx │ ├── EditComment │ │ ├── EditComment.scss │ │ └── EditComment.tsx │ ├── GridPost │ │ ├── GridPost.scss │ │ └── GridPost.tsx │ ├── HomeSideBar │ │ ├── HomeSideBar.scss │ │ └── HomeSideBar.tsx │ ├── Imprint │ │ ├── Imprint.scss │ │ └── Imprint.tsx │ ├── LoginModal │ │ ├── LoginModal.scss │ │ └── LoginModal.tsx │ ├── PostedComment │ │ ├── PostedComment.scss │ │ └── PostedComment.tsx │ ├── SortBar │ │ ├── SortBar.scss │ │ └── SortBar.tsx │ ├── SubredditHeadline │ │ ├── SubredditHeadline.scss │ │ └── SubredditHeadline.tsx │ └── SubredditSideBar │ │ ├── SubredditSideBar.scss │ │ └── SubredditSideBar.tsx ├── containers │ ├── Grid │ │ ├── Grid.scss │ │ └── Grid.tsx │ ├── Home │ │ ├── Home.scss │ │ └── Home.tsx │ ├── NavBar │ │ ├── NavBar.scss │ │ └── NavBar.tsx │ ├── ProfilePage │ │ ├── ProfilePage.scss │ │ └── ProfilePage.tsx │ ├── SubmitPage │ │ ├── SubmitPage.scss │ │ └── SubmitPage.tsx │ ├── SubredditPage │ │ ├── SubredditPage.scss │ │ └── SubredditPage.tsx │ └── individualPost │ │ ├── individualPost.scss │ │ └── individualPost.tsx ├── custom.d.ts ├── declarations.d.ts ├── index.scss ├── index.tsx ├── logo.svg ├── react-app-env.d.ts ├── reportWebVitals.ts ├── resources │ ├── fonts │ │ ├── bentonsansbook.otf │ │ ├── bentonsansregular.otf │ │ ├── ibmplexsans.ttf │ │ ├── ibmplexsanslight.ttf │ │ ├── ibmplexsansregular.ttf │ │ ├── notosans-bold.ttf │ │ ├── notosans-regular.ttf │ │ └── notosans.ttf │ └── images │ │ ├── Communities │ │ ├── announcements │ │ │ ├── banner.jpg │ │ │ └── icon.PNG │ │ ├── apexlegends │ │ │ ├── 56.png │ │ │ ├── 58.png │ │ │ ├── 59.png │ │ │ ├── 60.png │ │ │ ├── Icon.png │ │ │ └── banner.jpg │ │ ├── astronomy │ │ │ ├── 72.png │ │ │ ├── 73.png │ │ │ ├── 74.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── baking │ │ │ ├── 66.png │ │ │ ├── 67.png │ │ │ ├── 68.png │ │ │ ├── 69.png │ │ │ ├── 70.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── books │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── crypto │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── finance │ │ │ ├── 24.png │ │ │ ├── 25.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── genshinimpact │ │ │ ├── 10.png │ │ │ ├── 11.png │ │ │ ├── 12.png │ │ │ ├── 13.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── leagueoflegends │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── learnprogramming │ │ │ ├── banner.jpg │ │ │ └── icon.PNG │ │ ├── movies │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── nasa │ │ │ ├── 46.png │ │ │ ├── 48.png │ │ │ ├── 50.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── nba │ │ │ ├── 15.PNG │ │ │ ├── 17.PNG │ │ │ ├── 19.PNG │ │ │ ├── Icon.png │ │ │ └── banner.jpg │ │ ├── placeholder.png │ │ ├── programmerHumor │ │ │ ├── 27.png │ │ │ ├── 29.png │ │ │ ├── 30.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── sports │ │ │ ├── 77.png │ │ │ ├── 78.png │ │ │ ├── 80.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── todayilearned │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ └── wallstreetbets │ │ │ ├── 41.png │ │ │ ├── 43.png │ │ │ ├── 45.png │ │ │ ├── banner.jpg │ │ │ └── icon.png │ │ ├── add.PNG │ │ ├── addphoto.png │ │ ├── ads.png │ │ ├── all.PNG │ │ ├── apple.svg │ │ ├── avatar1.PNG │ │ ├── avatar10.PNG │ │ ├── avatar10_head.png │ │ ├── avatar1_head.png │ │ ├── avatar2.PNG │ │ ├── avatar2_head.png │ │ ├── avatar3.PNG │ │ ├── avatar3_head.png │ │ ├── avatar4.PNG │ │ ├── avatar4_head.png │ │ ├── avatar5.PNG │ │ ├── avatar5_head.png │ │ ├── avatar6.PNG │ │ ├── avatar6_head.png │ │ ├── avatar7.PNG │ │ ├── avatar7_head.png │ │ ├── avatar8.PNG │ │ ├── avatar8_head.png │ │ ├── avatar9.PNG │ │ ├── avatar9_head.png │ │ ├── avatartesla.PNG │ │ ├── avatartesla_head.png │ │ ├── awards.png │ │ ├── banner.png │ │ ├── banner2.PNG │ │ ├── bannerTopCommunities.png │ │ ├── bannerTopCommunities2.png │ │ ├── bannerTopCommunities3.png │ │ ├── base_variants │ │ ├── default1.png │ │ ├── default10.png │ │ ├── default11.png │ │ ├── default12.png │ │ ├── default13.png │ │ ├── default14.png │ │ ├── default15.png │ │ ├── default2.png │ │ ├── default3.png │ │ ├── default4.png │ │ ├── default5.png │ │ ├── default6.png │ │ ├── default7.png │ │ ├── default8.png │ │ └── default9.png │ │ ├── bell.PNG │ │ ├── best_notselected.png │ │ ├── best_selected.png │ │ ├── betauser.png │ │ ├── bluesettings.png │ │ ├── bold.png │ │ ├── bulleted.png │ │ ├── cake.png │ │ ├── cakeblack.png │ │ ├── chat.PNG │ │ ├── check.png │ │ ├── checkblack.png │ │ ├── clip.png │ │ ├── close.PNG │ │ ├── coin.png │ │ ├── commenter.png │ │ ├── comments.png │ │ ├── cross.png │ │ ├── cross.svg │ │ ├── dots.png │ │ ├── downvote.png │ │ ├── downvoteHover.png │ │ ├── downvoted.png │ │ ├── dropdown.svg │ │ ├── einstellungen.png │ │ ├── erkunden.png │ │ ├── expand.png │ │ ├── expand.svg │ │ ├── expandblack.png │ │ ├── expandgrey.png │ │ ├── eye.png │ │ ├── favorite.svg │ │ ├── favorited.PNG │ │ ├── fiveyearclub.png │ │ ├── flair.PNG │ │ ├── fouryearclub.png │ │ ├── gold.png │ │ ├── google.svg │ │ ├── heading.png │ │ ├── helpful.png │ │ ├── helpfulgold.png │ │ ├── hexagon.png │ │ ├── hilfecenter.png │ │ ├── home.png │ │ ├── homeavatar.png │ │ ├── homebanner.png │ │ ├── hot_notselected.png │ │ ├── hot_selected.png │ │ ├── img.PNG │ │ ├── infos_grey.png │ │ ├── inline.png │ │ ├── italic.png │ │ ├── karma.PNG │ │ ├── karma_blue.png │ │ ├── kicgzh7qcmy41.jpg │ │ ├── layout.png │ │ ├── link.PNG │ │ ├── live.PNG │ │ ├── loading.gif │ │ ├── loginbackground.png │ │ ├── logout.png │ │ ├── more.PNG │ │ ├── more_white.PNG │ │ ├── moregrey.png │ │ ├── new_notselected.png │ │ ├── new_selected.png │ │ ├── newuser.png │ │ ├── noti_check.png │ │ ├── noti_settings.png │ │ ├── numbered.png │ │ ├── onedayclub.png │ │ ├── pen.svg │ │ ├── pencil.png │ │ ├── people.png │ │ ├── performance.png │ │ ├── photograph.png │ │ ├── platinum.png │ │ ├── plusone.png │ │ ├── plusone.webp │ │ ├── popular.PNG │ │ ├── popularcomment.png │ │ ├── popularpost.png │ │ ├── post.png │ │ ├── poster.png │ │ ├── premium.png │ │ ├── premium2.png │ │ ├── preview1.PNG │ │ ├── preview10.PNG │ │ ├── preview11.PNG │ │ ├── preview2.PNG │ │ ├── preview3.PNG │ │ ├── preview4.PNG │ │ ├── preview5.PNG │ │ ├── preview6.PNG │ │ ├── preview7.PNG │ │ ├── preview8.PNG │ │ ├── preview9.PNG │ │ ├── profile.png │ │ ├── quote.png │ │ ├── recent.png │ │ ├── reddit.svg │ │ ├── redditlogo.png │ │ ├── redditlogo.svg │ │ ├── rediquette.png │ │ ├── registrieren.png │ │ ├── remove.png │ │ ├── report.png │ │ ├── richtlinien.png │ │ ├── rocket.png │ │ ├── save.png │ │ ├── saved.png │ │ ├── search.svg │ │ ├── sevenyearclub.png │ │ ├── share.png │ │ ├── shirt.png │ │ ├── silver.png │ │ ├── sixyearclub.png │ │ ├── spoiler.png │ │ ├── star.svg │ │ ├── stonks.png │ │ ├── stonks.webp │ │ ├── strikethrough.png │ │ ├── superheart.png │ │ ├── superscript.png │ │ ├── talk.png │ │ ├── tbn70x69n2m91.webp │ │ ├── threeyearclub.png │ │ ├── top.png │ │ ├── top_notselected.png │ │ ├── top_selected.png │ │ ├── trinity.png │ │ ├── twoyearclub.png │ │ ├── typeimage.png │ │ ├── typeimage_selected.png │ │ ├── typelink.png │ │ ├── typelink_selected.png │ │ ├── typelist.png │ │ ├── typepoll.png │ │ ├── typetalk.png │ │ ├── typetext.png │ │ ├── typetext_selected.png │ │ ├── unfavorited.PNG │ │ ├── upvote.png │ │ ├── upvoteHover.png │ │ ├── upvoted.png │ │ ├── user.png │ │ ├── user.svg │ │ ├── vibing.png │ │ ├── weitereinfos.png │ │ ├── werbung.png │ │ └── wholesome.png ├── setupTests.ts ├── styles │ └── global │ │ ├── _functions.scss │ │ ├── _mixins.scss │ │ └── _variables.scss ├── types │ ├── types.json │ └── types.ts └── utils │ ├── bestOrder.ts │ ├── hotOrder.ts │ ├── newOrder.ts │ ├── postArray.ts │ ├── subredditArray.ts │ ├── topOrder.ts │ └── userArray.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
5 | Reddit Clone built with React & Typescript 6 |
7 | 8 | ## Short Description 📋 9 | A Reddit Clone built with TypeScript, React and SCSS. Additional to the famous infinite scrolling home page I also implemented subreddits, individual post pages, comments and nested comments, post submission, profile pages and various dropdown menu's, including the search bar and notifications. Users can join and leave subreddits, add/remove them to/from their favorites, can like posts and comments or create some on their own. A detailed feature list can be found at the end of this document. 10 | 11 | ## Demo 🔴 12 | ⚛️ [Live Demo](https://gianlucajahn.github.io/typescript-reddit-clone) available. Click "Live Demo" to open it. 13 | 14 | ## Showcase 🎬 15 | You can see images of the project in user interaction below. The user starts on the home page, signs up with a new account, selects a subreddit and much more. Detailed descriptions can be found right beneath the images. These images only showcase the most elementary user interactions.If you continue, you agree to our User Agreements and Privacy Policy.
66 | 67 | 71 | 72 | 76 | 77 |{loginModalState === "login" ? "New to Reddit?" : "Already a Redditor*ess?"} {loginModalState === "login" ? "SIGN UP" : "LOGIN"}
103 |r/{currentPost.subreddit}
62 |{currentSub?.about}
65 |Created {currentSub?.creationDate}
68 |{currentSub?.members}
73 |{currentSub?.online}
79 |{currentSub?.bySize}
84 |{userName}
106 |Community theme
119 |