RedditAlready

Codecademy Front End Engineer path - Portfolio Project
Explore the docs »

View Site · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Contributing
5. License
6. Contact
7. Acknowledgments

About The Project

Codecademy Project Objectives

• For this project, you will build an application for Reddit using everything you’ve learned, including React and Redux.

• The application will allow users to view and search posts and comments provided by the Reddit API.

• Wireframe your application

• Use a project management tool (GitHub Projects) to plan your work

• Write a README (using Markdown) that documents your project including: wireframes, technologies used, features, future work

• Integrate Reddit API into the application

• Create a responsive application that adapts to any device (desktop to mobile)

• Create a responsive application that can be viewed on any modern browser

• Application accessible at an URL

• The application will allow users to view posts and comments provided by the API as well as other data such as amount of upvotes and comments, the post timestamp and the subreddit name and original poster name of each post

• The main home screen will be a feed of the most recent and relevant posts from all subreddits

• All of the comments for each post will be initially hidden but will appear when the user clicks on the comment icon

• The application will allow users to search for posts and comments provided by the API

• Data can be filtered based on categories and subreddits that are predefined

• A detailed view (modal or new page/route) is shown when the user selects an item

• Utilise animations and transitions when posts are loading

• Users are able to leave an error state

• Users can use the application on any device (desktop to mobile)

• Users can use the application on any modern browser

• Users are delighted with a cohesive design system

• Write unit tests for components using Jest and Enzyme

• Write end-to-end tests for the application

• Get 90+ scores on Lighthouse

• Publish to the web

• Users can access your application at a URL

• OPTIONAL: Make your application a progressive web app

RedditAlready is a Reddit client built as part of Codecademy’s Front End Engineer path. The app allows users to browse, search, and explore Reddit content in a responsive, streamlined interface.

Using the createApi slice from Redux Toolkit significantly reduced the setup complexity, streamlining actions and reducers. However, integrating avatar images for subreddits and post authors proved challenging and occasionally caused rate limits. Fortunately, we resolved this with a more efficient endpoint for author images.

For a calming user experience, I chose a soft blue and white colour scheme and used rounded fonts. To improve text readability, an animated ellipsis appears for longer text, expanding fully on hover.

To handle rate limits gracefully, we implemented friendly and informative error messages. Then to further enhance the user experience I created loading states using animations and transitions that fit seamlessly within the overall design. Together, these details make RedditAlready a functional and enjoyable Reddit browsing tool.

Overall this was an enjoyable project that took around two months to complete while working around other projects and Codecademy modules. Doing this as a group project was a valuable experience. I put out messages on the Codecademy forum, circle community and discord where I had a number of responses. I then set us up a Slack where we could communicate. We implemented an Agile workflow using kanban boards on Slack and GitHub Projects. We discussed pull requests thoroughly, refining each iteration before merging code into the main branch.

Wireframe

As you can see from my initial wireframe, while the design aligns closely with Codecademy’s project brief, we made certain adjustments to work effectively with the Reddit JSON API, which does not allow write operations or require OAuth. For instance, similar to the RedditMinimal example site, our upvote and downvote buttons do not alter the vote count, as the API doesn’t support it. Instead of the up and down arrows to the left of the post, we show the vote score next to a static arrow icon under each post, adjacent to the comment icon and comment count. Due to the complexity of implementing login functionality we decided early in development to scrap the login button. As a planned additional feature that space could be occupied with a window to display what subreddit or search term is active in the View section as featured in the Redducit app by wilaxx.

(back to top)

Built With

• HTML5
• CSS
• JavaScript
• React
• Redux
• Node.js
• Visual Studio Code
• Create React App

(back to top)

Getting Started

These are instructions on setting up the project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Installation

1. Clone the repo

   git clone https://github.com/mattsteen14/RedditAlready.git

2. Install NPM packages

   npm install

3. Run app in development mode in local browser

   npm start

(back to top)

Roadmap

• Version control. Set up on GitHub.
• Plan project.
• Wireframe the application.
• Create files and run it locally.
• Build the components.
• Add Reddit data.
• Testing and dubugging.
• Improve error states.
• Deploy and publish to the web.
• Share on Codecademy forums for feedback.
• Explore alternative APIs for icon images.
• Additional feature: active subreddit or search term display in header.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project.

2. Create your Feature Branch:

   git checkout -b feature/AmazingFeature

3. Commit your Changes:

   git commit -m "Add some AmazingFeature"

4. Push to the Branch:

   git push origin feature/AmazingFeature

5. Open a Pull Request.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Matt Steen-Brookes - @mattsteen14 - mattsteen14@me.com

Portfolio Link: https://mattsteen14.github.io/portfolio/

(back to top)

Acknowledgments

• Mo Ashqar for introducing me to Codecademy in the first place.
• Othneil Drew for the README template.
• Choose an Open Source License
• Richard Ayikwei for centering content for wider screens.

This has been a group project with other Codecademy learners:

• Joy Ometan. Layed the foundations for the css & created the search functionality.
• Jak Rhodes-Smith. Recently added image URL validation for the Post component. Currently spearheading migration to vite with TypeScript integration.
• Adam Halnon.
• Arunesh Kumar. Both participated in early discussions and had valuable insight in the group meeting.

(back to top)