Demo Application

Explore a fully functional React application in which we integrated the Reddit API.

We'll cover the following

Now that we've understood the Reddit API, we can use it in an actual application.

Application workflow

When we run the application, the first page we see is the homepage. The homepage has two main components:

  • Navbar: This component contains a search bar, multiple buttons, and a dropdown component for selecting subreddits. The "Popular" button reveals all of the most popular posts on Reddit. The "All" button is used to display different posts from Reddit. There is a dropdown named "Subreddit" that displays all of the user's subreddits and allows the user to pick any specific subreddit from those selections. Additionally, there is a search box where users may search the website for post titles.

  • Cards: This component renders a title, text, and post images. Furthermore, it includes "UpVote" and "DownVote" buttons for conducting a vote on a post and a comments button used to read and add comments to the post.

Note: We are not using any particular endpoint for the search process. We are simply using the query passed in the search bar to compare the titles of the post.

Click "Run" to run the application. 

import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useState } from 'react';
import Navbar from './Component/Navbar';
import Home from './Component/Home';
import Popular from './Component/Popular';
import All from './Component/All';
import Subreddit from './Component/Subreddit';

function App() {
  const [value, setValue] = useState('');
  const Filter = async (data) => {
    setValue(data);
  };
 const headerParameters = {
    UserAgent: "testscript by u/{{USERNAME}}",
    authorization: "Bearer {{ACCESS_TOKEN}}",
    accept: "application/json",
  };
  const snooWrapAuth = {
    client_id: "{{CLIENT_ID}}",
    client_secret: "{{CLIENT_SECRET}}",
    refresh_token: "{{REFRESH_TOKEN}}",
    username: "{{USERNAME}}",
    user_agent: "testscript by u/{{USERNAME}}",
  };

  return (
    <>
      <Navbar Filtervalue={Filter} FilterParam={value} snooWrapAuth={snooWrapAuth}/>
      <BrowserRouter>
        <Routes>
          <Route
            path="/"
            element={
              <Home
                query={value}
                headerParameters={headerParameters}
                snooWrapAuth={snooWrapAuth}
              />
            }
          />
          <Route
            path="Navbar:subredditId"
            element={<Navbar/>}
          />
          <Route
            path="Popular"
            element={
              <Popular
                query={value}
                headerParameters={headerParameters}
                snooWrapAuth={snooWrapAuth}
              />
            }
          />
          <Route
            path="All"
            element={
              <All
                query={value}
                headerParameters={headerParameters}
                snooWrapAuth={snooWrapAuth}
              />
            }
          />
          <Route
            path=":subredditId"
            element={
              <Subreddit
                query={value}
                headerParameters={headerParameters}
                snooWrapAuth={snooWrapAuth}
              />
            }
          />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;
Running the demo application

Code explanation

Let's take a look at the code to see how we've integrated the APIs into the application. We'll begin by looking at the application's backend server.

The backend-server folder contains an index file.

  • The index is a "Node" server file that acts as a proxy server to avoid CORS issues and assists us in receiving responses from various Reddit API endpoints. The responses are passed to the front-end application once they've been received.

The Frontend/src/Components folder contains the different components used in our frontend React application. Let's discuss them one by one.

  • The Home component is used as the default page of the application, which displays new posts to the user.

  • The Popular component is used to display all the best posts to the user.

  • The All component is used to retrieve all the hot posts for the user by using the /hot endpoint.

  • The Subreddit component is used to display the subreddits, which can be selected from the Subreddit dropdown option on the navbar.

  • The Navbar component is used to manage the navbar used on the top of the webpage page.

Note: The Frontend/src/Hooks folder contains the useFetch custom hook, which is used to fetch the data from the API endpoint.