MiyanoX / middit

Middit - A Reddit React Web Application

Middit - A Reddit React Web Application

Project Overview

This is a web application built with React that allows users broswer reddit contents in each subreddit and read the comments below. The Reddit JSON API is used to fetch data and deployed with Netlify: https://middit.netlify.app/

Website Design

Homepage Design

Comment Design

Function

• MiDDiT is title of this web application, where you can click for a refresh of web page
• Top center also have a Korone image (My favorite Vtuber:https://www.youtube.com/channel/UChAnqc_AY5_I3Px5dig3X1Q)
• The top left button is Menu Button, which can toggle the display state of menu bar in the right.
• The top right button is Search Button, which can toggle the display state of search bar in the top center.
• Left Red Bar is the subreddit selector for users.
• Body section have several cards for contents from reddit.
• Comment Button will show comments in this topic.
• Hide Button will delete current card.
• Left Bottom Button will take user to the top off page

Tech Stack

• HTML
• CSS
• JavaScript
• React
• Redux
• Git and GitHub
• Command line and file navigation
• Wireframing with Figma

Getting Started

To get started with the project, you will need to have the following tools and software installed on your machine:

• Git
• Node.js and npm
• react, redux, react-redux and @reduxjs/toolkit
• A code editor, such as Visual Studio Code

File Structure

public
   |-- index.html
src
   |-- App.css
   |-- App.js
   |-- App.test.js
   |-- components
   |   |-- card
   |   |   |-- ...
   |   |-- cardContent
   |   |   |-- ...
   |   |-- cardFunction
   |   |   |-- ...
   |   |-- cards
   |   |   |-- ...
   |   |-- comment
   |   |   |-- ...
   |   |-- footer
   |   |   |-- ...
   |   |-- goTop
   |   |   |-- ...
   |   |-- header
   |   |   |-- ...
   |   |-- menu
   |   |   |-- ...
   |   |-- searchBar
   |   |   |-- ...
   |   |-- vote
   |   |   |-- ...
   |-- img
   |   |-- ...
   |-- index.css
   |-- index.js
   |-- util
   |   |-- ...

Contributing

If you would like to contribute to the project, please fork the repository and submit a pull request with your changes.

License

This project is licensed under the MIT License. See the LICENSE file for more information.