Reddit TTRPG

Application Detail

The Reddit TTRPG is an app that will allow you to create a single place for your TTRPG needs. You can filter subreddits by game, type, and role.

Wireframes

Technologies Used

Project Management

  • Jira
  • Confluence

Wireframing

  • Adobe XD

Code Management

  • Visual Studio Code
  • GitHub

Code Development

  • HTML
  • CSS
  • JavaScript
  • React
  • Redux

Code Testing

  • Jest
  • Enzyme
  • Selenium

Features

  • Choose a pre-made digest or create your own.
  • Change the appearance of the app by selecting a class.
    • Light and Dark mode options available.

Future Work

  • Add support for Polls posts
  • Profiling to save custom digests

Documentation

Project Requirements

Summary

This project is part of Codecademy's Full-Stack and Front-End Engineer career paths. The project is meant to give practice React, Redux, Jest, Enzyme, and Selenium, along with expanding upon other previous topics.

Project Instructions

For this project, you will build an application for Reddit using everything you’ve learned, including React and Redux. Reddit is a website where people share links to articles, media and other things on the web. The Reddit API provides data which you will integrate into your application. The application will allow users to view and search posts and comments provided by the API.

Project Objectives:

  • Build the application using React and Redux
  • Version control your application with Git and host the repository on GitHub
  • Use a project management tool (GitHub Projects, Trello, etc.) to plan your work
  • Write a README (using Markdown) that documents your project including:
    • Wireframes
    • Technologies used
    • Features
    • Future work
  • Write unit tests for your components using Jest and Enzyme
  • Write end-to-end tests for your application
  • Users can use the application on any device (desktop to mobile)
  • Users can use the application on any modern browser
  • Users can access your application at a URL
  • Users see an initial view of the data when first visiting the app
  • Users can search the data using terms
  • Users can filter the data based on categories that are predefined
  • Users are shown a detail view (modal or new page/route) when they select an item
  • Users are delighted with a cohesive design system
  • Users are delighted with animations and transitions
  • Users are able to leave an error state
  • Get 90+ scores on Lighthouse
    • We understand you cannot control how media assets like videos and images are sent to the client. It is okay to have a score below 90 for Performance if they are related to the media from Reddit.
  • OPTIONAL: Get a custom domain name and use it for your application
  • OPTIONAL: Set up a CI/CD workflow to automatically deploy your application when the master branch in the repository changes
  • OPTIONAL: Make your application a progressive web app

Prerequisites:

  • HTML
  • CSS
  • JavaScript
  • React
  • Redux
  • Jest, Enzyme, and Selenium
  • Git and GitHub
  • Command line and file navigation
  • Wireframing