I finally completed my version of the reddit project:
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.
Still working on it
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
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
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.
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.
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.
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:
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.
Thanks in advance.
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
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…
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
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.
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 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.
great job, I love that you were much more creative with the design than me. I really like how you have implemented the mobile version.
Did you include the display of videos in posts? I wasn’t able to see any, but maybe the posts I looked had just didn’t have any videos.
Two things I noticed with room for improvement, but that might be just personal taste :
- I’m missing the date/time, when a post was submitted. You included it for the comments, but I can’t see it for the post itself?
- If I’m not mistaken, the only way to get into the detailed view of a post is by clicking on the comments button? Maybe you could add the links for the detailed view on the post title or content.
The layout and design of the individual comments look great btw.
I like your implementation and the dark mode, I did want to apply that in my app as well but maybe later. Good work!
Hey Yanniks, I really appreciate your feedback. I didn’t include videos and the date in posts because it was a decision when I was making the general layout. About the link in the post’s title, I think it’s a great idea to improve. I’m going to try to update this because this is an objective for me as well, because I want to keep updating and improving my final app.
Thanks in advance!