Skip to content

Latest commit

 

History

History
78 lines (65 loc) · 4.67 KB

README.md

File metadata and controls

78 lines (65 loc) · 4.67 KB
Raw

⚛️ React Reddit Clone

Reddit Clone built with React & Typescript

Short Description 📋

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.

Demo 🔴

⚛️ Live Demo available. Click "Live Demo" to open it.

Showcase 🎬

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.

The clone's home page, posts are sorted by "Hot". The user is using the sign up modal to create an account. The user is viewing the r/genshinimpact subreddit page. The user is creating a new post in the r/genshinimpact subreddit, including a picture. The user is viewing the r/movies subreddit page. The user just created their first post in r/movies. The user is viewing their profile page. The user views a post in the r/astronomy subreddit and writes a comment. The user is viewing the r/crypto subreddit page. The user is replying to a comment under a post in r/crypto. The user is viewing the r/wallstreetbets subreddit page, opening two dropdown menu's.

Performance ⏱

I let Google Lighthouse 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.

Google Lighthouse Performance Results

Features ✨

  • Pixel perfect UI/UX
  • Subreddit join, leave and favoriting
  • Upvoting, downvoting and saving posts
  • Adding custom posts, including either text or images
  • Upvoting and downvoting comments
  • Writing comments and nested comments
  • Editing your own comments and nested comments after submission
  • Profile Pages with different sections
  • a working karma system
  • Following, adding and reporting other users
  • Switchable color themes for subreddits
  • Various dropdown menu's
  • Search functionality

Technologies Used 💻

  • TypeScript
  • React
  • React Router Dom
  • SCSS
  • Git

What I learned 📚

  • Working with a strongly typed language like TypeScript and learning to type to minimize bugs/errors
  • Organizing a bigger codebase descriptively and maintaining efficiency of the end product
  • Manipulating objects in state and working with optional parameters and props in TypeScript

Motivation

My 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.

Credits

🟠 Reddit.com: Since this is a clone built for educational purposes only, all rights and credits go to Reddit Inc.

All 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.