About the Portfolio Project: Reddit Project category

The Reddit Project

Welcome to the subcategory for the Reddit Project. This portfolio project can be found in the following courses or paths:

  • Front-End Engineer Path
  • Full Stack Engineer Path

How to Get Feedback on your Project

Congratulations on finishing your portfolio project! Now you’ll want to follow these steps to get feedback on it.

  1. Post a link to your git repository :slight_smile:
  2. Give us a few sentences about your experience. Was this fun? Difficult? How long did it take?
  3. Check back in—if someone has replied to your post, come see what they have to say.

How to Give Feedback on Another Learner’s Project

Reviewing someone else’s code isn’t just a nice thing to do; it’s also a great opportunity to sharpen your skills by viewing a different perspective.

  1. Refer to the article in your Career Path on How to Review Someone Else’s Code
  2. Click through topics in this subcategory to view other submissions of this project.
  3. Reply to a thread with feedback, encouragement, or letting them know if they did something in a way you hadn’t thought of before!
1 Like

Hello everyone :wave:

I am just now starting on the new Reddit Clone Project in the Front-End Engineering Path, and I have a couple of questions that I think many people will also have.

  1. Will there be a video project walkthrough?
  2. Will there be a task section that gives you direction on the next part to build?.

I understand that the point of these projects is to depend less on Codecademy’s instructions and solutions and rely more on your own knowledge, but sometimes the problem isn’t how to do something its what to do next. And having a guide pushing you in the right direction is very helpful.

Also having an experienced dev walk-through and explain why they built the project in a certain way gives us newbies great insight!!

I love all the new projects the Codecademy team has made. Keep up the great work.

7 Likes

Project seems like a nice challenge but I have a question about following the Reddit API access rules:
Reddit API

Here are some quotes from Reddit Documentation:

  • Web app: Runs as part of a web service on a server you control. Can keep a secret.
  • Installed app: Runs on devices you don’t control, such as the user’s mobile phone. Cannot keep a secret, and therefore, does not receive one.
  • Script app: Runs on hardware you control, such as your own laptop or server. Can keep a secret. Only has access to your account.

Web app

The app runs as the backend of a web server, on a server that only YOU have access to. Select this if:

  • You’re going to run a webservice that requires or takes advantage of access to user accounts. For example, http://ifttt.com allows any redditor to access their webservice and set-up tasks such as automatically putting all the user’s posts in their Evernote account.
  • You can keep your client secret secure and safe.
  • Your service is available over http or https . (It is preferred that your service be accessible over https to properly protect the authorization code)

Note : Only apps created as “installed” type apps may use the implicit flow. “web” and “script” type apps are considered “confidential” (i.e., they have secrets). Since you cannot safely send a secret via the implicit flow, we have elected to disallow implicit access to apps with secrets.


Looking at these access rules and considering that this is a front-end project to be hosted online, what is the correct way to access the Reddit API?

Hey @mike7127143742,
The API you are referencing is the official Reddit API. You are correct in saying that you will need a backend to use it. Since this project is frontend-focused, we will be using the unofficial JSON API that doesn’t need a backend. You can make requests for read-only Reddit data directly from the browser.

3 Likes

Just completed the Reddit Project. It took a little over a week as it was my first time using Material UI and Redux (outside of a tutorial). I also used React Router and TestCafe (for the E2E testing) in addition to the required tools. The tests were a bit challenging to write as the tools I used (Redux Toolkit for example) differed a little from most examples of Jest/Enzyme. I left it with a pretty basic test suite in order to move on in the path. Limiting content was also a little bit of a challenge and I ended up hard-coding some popular categories and abandoning a global search feature in order to control this a little better. Appreciate any feedback.

Rambler for Reddit

Rambler for Reddit repo

1 Like

I spent about 5-6 days on this already! But I feel like it really helped put together React, React router, React hooks and state management, and Redux as well. The only thing I haven’t added to it is tests, I’ll do that when I get to chapter 26, I have to focus some time on learning testing.

Here it is live so far: Netlify
Here is the code: Github

Still probably going to polish this some more at the end of the course, add some transitions to the hover effects, maybe find a way to get the upvotes/downvotes buttons to send an upvote or downvote to reddit(if possible with the JSON api).

3 Likes

Looks good. I implemented a local search as well, only in the active subreddit. The project seemed very challenging in the beginning, but ended up not being quite as hard as I thought. Some things I tried for hours with no results, then in 5 mins managed to implement them!

Hard coding the subreddits is probably a good idea for curation purposes, instead I ended up with a bunch of gaming subreddits haha

1 Like

Like it. TestCafe worked well for end-to-end tests so keep that option in mind although my implementation was pretty basic. Not a big thing, but keep in mind that the “back-button” won’t work if using React Router to change key but it will work if set up to change route and reading the route with useParams.

Ey guys, just finished ( in a way ) my implementation of the Reddit Challange, it was fun to make, I probably over complicated this but it is what it is. As I said at the beginning it is finished in the way that it is in a stable version, still needs to be added unit tests to all components plus integration and e2e plus a few more improvements and features.

For building the project I tried to document the steps I took in making it, so I used github projects along with github issues and releases.

Live demo: Reddit Client
Source code: Github
MVP board: Github projects
Latest release: v0.30.0-beta1

Note: Anyone that sees any bugs can open a new issue. If you wanna contribute to it and implement some of the issues that are opened or add new features, have a go at it and open a pull request

Note: There are some performance issues ( scores betweeen 65 to 90+ depending on the device I’ running the test) with the fact that there are a lot of images and videso and gifs coming from reddit that are unoptimized. I tried to add extra logic for getting all the media I could from their public API which added extra media being requeste. Might look into a windowing solution in the future to solve the performance issues

3 Likes

Looks great. It seems like the videos from Reddit do not have sound included in the files. I also ran into this issue and noticed the same on your videos. I am curious if anyone knows how Reddit delivers their sound for the videos?

1 Like

Hey @mike7127143742 , thanks for the feedback. I believe I intentionally set all videos to be muted so I can autoplay them. But even so, most of the “videos” that come from reddit json api, are in .gifv format coming from imgur, I added some extra logic for some to be converted to .mp4 but it’s not perfect and it does not cover all edge cases, but it’s good enough for this purpose. The videos that come from youtube, which I embedded, do have sound

Now the the way .gifv works is that is just a normal gif but in a video format which means they have no sound. You can read more about it here

Hope it helps you

2 Likes

Thanks @kerosz for the explanation about some of the video formats on Reddit. I was only attempting to fetch video for posts where is_video was true and link was stored under fallback_url. It appears like those mp4:s are actually stored without audio for some reason and if there is a quick fix to get audio back-in that would be good but appears to be a little more complex. Here is one Reddit link discussing the issue:

Reddit discussion on separation of video/sound in some files

Hey guys,

please find attached my REDDIT project files:

Live demo: http://reddit.pnew.digital/
GitHub: GitHub - pwagnerde/reddit-mondrian-app: The Reddit Mondrian App connects to the Reddit API to provide hot posts for design, data & technology topics.

I really enjoyed building the application and learning to use REACT, REDUX, GitHub & Netfly.

So far, I was working for around 1 full week (~30 working hours) on the project.

I am looking forward to getting my first feedback on this project - BETTER TOGETHER.

Thanks,

Philipp

1 Like

Great work and very nice design! For feedback, maybe implementing the detail view of comments but I realize you have that on the to-do list on github…

1 Like

I guess its the second time I have the chance to see your work, I have to say that I love your designs and the app works fine :ok_hand:

Hi everyone!!

Please check my proyect deployed on Netlify here: Reddit app

and if you want to see the code here: Reddit app on GitHub

It has a lot of things that don’t have any functionality now, but, are meant to have it in some time. To see it working type something in the “relevant posts” textarea and press search.

I would appreciate any type of comment. :wink:

Wow its awesome, you really went far with it…

1 Like

Reddit Micro

Code: Github

I struggled with this one, honestly. It felt like I was being thrown in the deep end! I spent about a week on it, watched a lot of YouTube videos, and cobbled it together in the end. It isn’t perfect, but it works!

3 Likes

Hi Coders,

I just finished the reddit client app project (test suite not yet done, still ongoing). It took me a week to finish the web app without implementing the test suite. But overall, it was fun and quite challenging for me. I need to do more research on the testing as I am a bit confused and unclear how to implement it the right way. Will update the test suite on the github once I’m done. Meanwhile, here’s my reddit client app:

Website: https://reddit-client-app.vercel.app/
Code: GitHub - amirfakhrullah/reddit-client-app: A front-end web app displaying reddit contents using react and redux

I’m open for feedbacks or comments. Thanks!

1 Like

Very clean layout. Great work!