{"id":16212818,"url":"https://github.com/gianlucajahn/typescript-reddit-clone","last_synced_at":"2025-03-19T09:31:02.821Z","repository":{"id":59925351,"uuid":"527260653","full_name":"gianlucajahn/typescript-reddit-clone","owner":"gianlucajahn","description":"A feature-rich reddit clone built with Typescript, React and SCSS/SASS. Features subreddits, posts, nested comments, profiles, post creation, achievements and much more.","archived":false,"fork":false,"pushed_at":"2022-11-23T16:54:22.000Z","size":48230,"stargazers_count":45,"open_issues_count":3,"forks_count":15,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-10T15:56:25.852Z","etag":null,"topics":["react","reddit-clone","sass","typescript","typescript-react"],"latest_commit_sha":null,"homepage":"https://gianlucajahn.github.io/typescript-reddit-clone","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gianlucajahn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-21T16:20:50.000Z","updated_at":"2025-02-20T21:54:10.000Z","dependencies_parsed_at":"2022-09-25T08:02:54.434Z","dependency_job_id":null,"html_url":"https://github.com/gianlucajahn/typescript-reddit-clone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianlucajahn%2Ftypescript-reddit-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianlucajahn%2Ftypescript-reddit-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianlucajahn%2Ftypescript-reddit-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gianlucajahn%2Ftypescript-reddit-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gianlucajahn","download_url":"https://codeload.github.com/gianlucajahn/typescript-reddit-clone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243982141,"owners_count":20378605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","reddit-clone","sass","typescript","typescript-react"],"created_at":"2024-10-10T10:53:41.746Z","updated_at":"2025-03-19T09:30:57.809Z","avatar_url":"https://github.com/gianlucajahn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e⚛️ React Reddit Clone\u003c/h1\u003e\n\n![](/src/resources/images/banner.png)\n\u003cp align=\"center\"\u003e\n  Reddit Clone built with React \u0026 Typescript\n\u003c/p\u003e\n\n## Short Description 📋\nA 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.\n\n## Demo 🔴\n⚛️ [Live Demo](https://gianlucajahn.github.io/typescript-reddit-clone) available. Click \"Live Demo\" to open it.\n\n## Showcase 🎬\nYou 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. \u003cbr /\u003e \u003cbr /\u003e\n\n![](/src/resources/images/preview1.PNG)\n\u003csup\u003eThe clone's home page, posts are sorted by \"Hot\".\u003c/sup\u003e\n![](/src/resources/images/preview2.PNG)\n\u003csup\u003eThe user is using the sign up modal to create an account.\u003c/sup\u003e\n![](/src/resources/images/preview3.PNG)\n\u003csup\u003eThe user is viewing the r/genshinimpact subreddit page.\u003c/sup\u003e\n![](/src/resources/images/preview4.PNG)\n\u003csup\u003eThe user is creating a new post in the r/genshinimpact subreddit, including a picture.\u003c/sup\u003e\n![](/src/resources/images/preview5.PNG)\n\u003csup\u003eThe user is viewing the r/movies subreddit page.\u003c/sup\u003e\n![](/src/resources/images/preview6.PNG)\n\u003csup\u003eThe user just created their first post in r/movies.\u003c/sup\u003e\n![](/src/resources/images/preview7.PNG)\n\u003csup\u003eThe user is viewing their profile page.\u003c/sup\u003e\n![](/src/resources/images/preview8.PNG)\n\u003csup\u003eThe user views a post in the r/astronomy subreddit and writes a comment.\u003c/sup\u003e\n![](/src/resources/images/preview9.PNG)\n\u003csup\u003eThe user is viewing the r/crypto subreddit page.\u003c/sup\u003e\n![](/src/resources/images/preview10.PNG)\n\u003csup\u003eThe user is replying to a comment under a post in r/crypto.\u003c/sup\u003e\n![](/src/resources/images/preview11.PNG)\n\u003csup\u003eThe user is viewing the r/wallstreetbets subreddit page, opening two dropdown menu's.\u003c/sup\u003e\n\n## Performance ⏱\nI let [Google Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=de) run over my application to check for it's **performance, accessibility, use of best practices and SEO optimization**. You can view the results right below this paragraph.\n\n![Google Lighthouse Performance Results](/src/resources/images/performance.png)\n\n## Features ✨\n- Pixel perfect UI/UX\n- Subreddit join, leave and favoriting\n- Upvoting, downvoting and saving posts\n- Adding custom posts, including either text or images\n- Upvoting and downvoting comments\n- Writing comments and nested comments\n- Editing your own comments and nested comments after submission\n- Profile Pages with different sections\n- a working karma system\n- Following, adding and reporting other users\n- Switchable color themes for subreddits\n- Various dropdown menu's\n- Search functionality\n\n## Technologies Used 💻\n- TypeScript\n- React\n- React Router Dom\n- SCSS\n- Git\n\n## What I learned 📚\n- Working with a strongly typed language like TypeScript and learning to type to minimize bugs/errors\n- Organizing a bigger codebase descriptively and maintaining efficiency of the end product\n- Manipulating objects in state and working with optional parameters and props in TypeScript\n\n## Motivation\nMy motivations in building this project was moving on with what I learned about JavaScript and React, jumping into a newer technology - TypeScript, in this case - and working on a big codebase on my own. This project currently consists of just a bit more than 24,000 lines of code, so while still not being a corporate size project, I learned how to structure sizeable codebases effectively. My next endeavour will be working with backends, possibly utilizing Next.js in the process.\n\n## Credits\n🟠 [Reddit.com](https://www.reddit.com/): Since this is a clone built for educational purposes only, all rights and credits go to Reddit Inc.\n\nAll rights to all concepts, designs, services and ideas in this web app belong to Reddit/Reddit Inc. This is just a clone built with TypeScript for educational purposes to learn the underlying programming language. I am not in any way connected to Reddit and neither is this web app. Neither me nor this web app are affiliated with Reddit. If you are an owner of the copyrighted material, please let me know if you have any issues with this and I'll take the page down immediately.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgianlucajahn%2Ftypescript-reddit-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgianlucajahn%2Ftypescript-reddit-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgianlucajahn%2Ftypescript-reddit-clone/lists"}