Skip to content

Application that allow users to view and search posts and comments provided by the Reddit API

Notifications You must be signed in to change notification settings

SimonaPiz/ProjectRedditClient

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
 
 
 
 
 
 

Repository files navigation

App Reddit Client

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

MultiDevice

Live demo https://reddit-client_simonapiz.surge.sh/.

Screenshots

Preview Homepage

home preview

Preview Subreddit' page

subreddit preview

Table of Contents

General Information

Reddit is a website where people share links to articles, media and other things on the web. I use Reddit's API to provide data to integrate into the application. The application will allow users to view and search posts and comments provided by the API.

Technologies Used

  • react: 18
  • react-redux: 8
  • redux: 4
  • node: 18

Features

  • 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 detailed 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

Wireframes

Draft

pencil draft

Desktop Homepage - low fidelity - with figma

Desktop Homepage - Wireframe - low fidelity

Desktop Post detail page - low fidelity - with figma

Desktop Post detail page - Wireframe - low fidelity

React Component Hierarchy - Homepage

Homepage-gerarchia-componenti-react

Setup

To run this project, install it locally using npm:

$ cd ../[directory]
$ npm install
$ npm start

Acknowledgements

This project comes from the Codecademy's Front-End Engineer course.