About the Portfolio Project: Reddit Project category

Hi All,

Here is my attempt at this project:
Live: https://youthful-liskov-271c0d.netlify.app/
Code: https://github.com/RobCzikkel/RedditMini

I still have so many things to complete (like a README for example) but I spent more than a week on this already and I just want to move on the course.
I honestly did not have a clue on how to start this and after checked other people’s code I was even more worried :smiley:

But in the end it was not that bad, it was just overwhelming at first.

Feedbacks are welcome!

Happy coding peeps

1 Like

Thank you so much :slight_smile: It took some time to complete.
Yeah I have to make some final additions to it but I want to finish the PERN project on the course first

Hello all!

I finally feel I am at the point where this project can be considered completed, although there is a lot more I would like to integrate in the future. I also need to work on the tests some more. Let me know any thoughts and if you find any issues!

Mini Reddit

Hello everyone,
I finally completed my version of the reddit project:

Live site:
Reddit minimal

Source code:
https://github.com/mirja-t/Reddit-Client

There are still some issues though:
While the site is running fine as far as I could see on my devices and the speed seems to be ok, the lighthouse check gives me a horrible feedback on the performance.
The main complaint is approximately 400kb of unused JS code. I’m pretty sure that this is not caused by the code I’ve written as I haven’t coded THAT much, so it must be some dependency code I unnecessarily compiled when building the app with Netlify. Since it’s all minified code is compiled in one file, I don’t have a clue where that comes from and google devtools isn’t much of a help.
So if anyone has a tip what I can do differently in the build process or where to look at, I’d be grateful for that.

This project was a booster to my understanding of React and Redux, but I still have some deficits in understanding some concepts that I would love to see additional material on Codecademy:

  • I tried Framer motion which is pretty well documented and for another project I tried react-spring which seems to be more sophisticated, but less well documented, so I’d love to see a course about animations in react using this library on Codecademy
  • While compiling with Netlify the report complained about missing dependencies. I thought I just need to add dependencies for the state changes I want to react to, maybe an extension for the hook lessons would be useful, too? Also including use cases for useCallback.
1 Like

My project:
Netlify live
GitHub
Still working on it :wink:

2 Likes

Hi, I just completed the development of my bug tracker called Traill App. Would love to hear what you guys talk about it.

Here’s the link to the discussion: Feedback: Bug Tracker App

Hi folks,

I just finished the project. I have a visual impairment that can make scrolling social media overwhelming/painful on my eyes. So I wanted to create a minimalistic reddit client that only displays one post at a time, has a toggle to display comments or not, and has soothing grey tones.

I added two “extra” features that I would love some feedback on:

(1) Added audio to videos - Since Reddit sends the actual frames and audio separately for videos, I created a hidden audio component that fetches the audio. The audio component has event listeners ties to events like play and pause in the video component so the audio stays on track. I’m not sure if this is the most ~elegant~ solution, so I’d love feedback. It can be found in src/components/Post/VideoPost.js

(2) Can query next page of Reddit results - Reddit only sends you 25 posts at a time for a given subreddit and I wanted MORE. Fetching the next set of posts required keeping track of some extra data in my subredditSlice to add to the url to make the fetch request to the Reddit API (before/after, count, and limit). And I had to create separate thunks for fetching the first set of posts for a new search for a subreddit and querying the next set of posts.

Live site on Netlify: Reddit Float
Github

Thanks!
Carolyn

3 Likes

Nice work! On nr 2, sounds like you need to handle pagination. Problem is similar to having an api return 25 products at a time and going to different pages in an online store. Except you get 25 posts and would like to show only 1. So on post 1-25, you make on api-call, 26-50 you will need another call and so on. I have used RTK Query lately so will just leave this link here if you decide to try it in the future: Pagination | Redux Toolkit But you should be able to implement pagination with 1 thunk as well if you keep the current approach. But you would want to keep a state of which “Page” you are on. For posts 1-25 this would be Page 1, then page 2 and so on… When page changes you can trigger an api-call.

1 Like

Hello Everyone!!
Here is my Reddit Project.

As a special feature, the Categories are changing depends on the term search, so is provided by the Reddit JSON data.
Also, de posts are classified in documents, pictures, or videos.

https://reddit-jimmy.netlify.app/

this is great. You’ve put in a good looking alternative design for Reddit and and extended the functionality of the app beyond project’s specifications.

1 Like

Your app is really well put together and goes beyond the project specs! feels like a real commercial app.

Oh cool, I didn’t know there was pagination as part of the Redux Toolkit! I might go back and refactor to include a separate slice of state for the pagination, just to clean it up a bit. Thanks for the info!

Just finished my Reddit project! I still am working on the testing as I am having issues with testing components that are using the redux store, but I will update once those are complete. Let me know what you think and how I can improve it. Thank You

This is the link to the live website: https://reddit-frontpage.netlify.app/

Here’s the link to the repository:

6 posts were split to a new topic: Resources can be used to practice and get better to be able to do this project?

Hi everyone!

Hope you’re doing well. Here below, I’m linking my Reddit project on GitHub and the Live App on Netlify. I’ll appreciate feedback to improve through my learning path.

GitHub Link
Live App

Thanks in advance.

Igor

1 Like

I also finally finished the reddit client project.
My repo: GitHub - YannikS14/reddit-client
Live version: Reddit Client

It nearly took me a full month, with some interruptions. I really put in some work into the unit, integration and E2E-tests, because I really wanted to understand and apply this. Therefore, the full test suite is included in the repo, having a 100% test coverage in unit/integration tests.

This was a nice project to get some more practice on Redux and Redux Toolkit. I also tried to focus on accessibility and performance for the Lighthouse test and the code tests, as I said. For the tests, I can only recommend to use React Testing Library instead of Enzyme. Made life so much easier.

Any feedback is appreciated :wink:

3 Likes

Hey,
I like the simple design and the dark mode!
When I use the search field or click on a subreddit in the list, the window remains empty. I use Chrome. It works in Safari though…

1 Like

I just finished up the reddit client using React, Redux, and small amounts of bootstrap. It was a fun project including many of the elements in the career path thus far. Let me know what you think!

reddlite github repo

reddlite live

3 Likes

Hi,
good job, I like that you included the feature to search for all posts of a specific user and an actual search function that looks up reddit for the search term.

I noticed three things:

  • In the detail view for a post, there is some strangely looking padding/border on the right and bottom side.
  • If you click on the users profile or subreddit link in the detail view of a post, it reloads in the background without closing the modal. Because of that, its a bit hard to see, that something changed.
  • Because of the autoplay on all videos, they load pretty slowly for me if there are many videos at the same time.

And you might want to have a look at your Reddit.js util file, there are some API access data for the oauth API. I think you should delete them from the public repo.

Cheers!

Hey,
thanks for your feedback. That’s strange, I’m also using Chrome and for me it’s working fine.
Maybe the problem is, that you have some search term entered in the search box and there is no post in that subreddit, that matches the term?
My search box is more like a filter function than an actual search function :sweat_smile: It just filters the posts of the currently active subreddit for the entered search term and doesn’t look up Reddit for the search term.

I think it might be a good idea to reset the search term when the user selects a new subreddit, because if there is no post in the new subreddit that matches the search term, it just displays nothing.

1 Like