About the Portfolio Project: Reddit Project category

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:

1 Like

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

2 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?