Dev Circle Web App

It's a social media app made with React.js + Redux + Styled Components and integrating it with Firebase. This project was made with the help of Rafeh Qazi (Clever Programmer)

🤷🏼‍♂️ About This Project

(Click on the image below for live demo)

This is a social media application made in a very limited time frame as a school project. It is capable to work exactly like Linkedin but except it only posts and retrieve your shared images or videos. Limited time frame . But in order to understand a little about React.js, Redux and Styled Components - I made this project as to teach myself about these technologies. Why you should always take an easy or an intermediate project to learn new technologies?

Here's why:

• Your time should be focused on creating something amazing. A project focused to solve a problem and helps others or just a creative application.
• You shouldn't be iterating over the notes over and over again just to pass an exam from your school.
• You will gain an immense knowledge just by applying your knowledge into something rather than keeping it in your brain until newer technologies arrive.

This project was taught by the Clever Programmer's Team on YouTube. The way he creates his project repos (they are incomplete) so that the actual learning takes by implementing rather than copying is truly remarkable. 😊

⚡ TechStack Used

This section lists all the technologies that I used to built this project.

• React.js
• Redux
• Styled Components
• ReactPlayer
• Firebase

🚀 Getting Started

Prerequisites

1. Clone the repo

   $ git clone https://github.com/yuvrajverma01/Dev-Circle-React-App.git

2. Install NPM packages

   $ npx create-react-app my-app

3. Change the directory

   $ cd my-app

4. Install Redux

   $ npm install redux

5. Install React Redux

   $ npm install react-redux

6. Install Redux Thunk

   $ npm install redux-thunk

7. Install Styled Components

   $ npm install styled-components

8. Install React Router Dom

   $ npm install react-router-dom

9. Install React Dom

   $ npm install react-dom

10. Install React Scripts

$ npm install react-scripts

11. Install React Player

$ npm install react-player

12. Install Firebase

$ npm install firebase

13. Install Firebase

$ npm install firebase-tools

📁 File Structure

The file structure of the current project is structured as shown below:

my-app
    ├── public
    |       ├── images ── 45 svg icons
    |       ├── favicon.png
    |       ├── index.html
    |       ├── manifest.JSON
    |       └── robots.txt
    |
    ├── src
    |    ├── actions
    |    |       ├── actionType.js
    |    |       └── index.js
    |    |
    |    ├── components
    |    |       ├── Header.js
    |    |       ├── Home.js
    |    |       ├── Leftside.js
    |    |       ├── Login.js
    |    |       ├── Main.js
    |    |       ├── PostModal.js
    |    |       └── Rightside.js
    |    |
    |    ├── reducers
    |    |       ├── articleReducer.js
    |    |       ├── index.js
    |    |       └── userReducer.js
    |    |
    |    └── store
    |           └── store.js
    |
    ├── App.js
    ├── App.css
    ├── firebase.js
    ├── index.js
    └── index.css

❤ About Me

Made with ❤ by Yuvraj Verma.