React My Blog App

Overview

👨‍💻 In this project I mastered React skills. I used mainly REACT and Material UI, Bootstrap, React Router, Redux, Formik/Yup, Firebase. You can see visual demo of the website below. The objective is to build out this real-like webpage and make it looking as professional as possible..

---

✨ Demo

---

📍You can see the live site from here!

## Project Skeleton 

- MyBlog App (folder)
|
|----readme.md         
SOLUTION
├── public
│     └── index.html
├── src
│    ├── router
│    │       ├── AppRouter.js
│    │       └── PrivateRouter.js
│    ├── components
│    │       ├── BlogCard.js
│    │       ├── BlogForm.js
│    │       └── Navbar.js
│    │       └── UpdateBlog.js
│    │       └── CommentsPagination.js
│    ├── features
│    │       ├── AuthSlice.js
│    │       └── BlogSlice.js
│    ├── helpers
│    │       ├── firebase.js
│    │       └── toastNotify.js
│    ├── pages
│    │       ├── Dashboard.js
│    │       ├── Details.js
│    │       ├── Login.js
│    │       ├── NewBlog.js
│    │       ├── Profile.js
│    │       ├── Register.js
│    │       └── UpdateMyBlog.js
│    ├── assets
│    │       └── [images]
│    ├── app
│    │    └── store.jsx
│    ├── App.js
│    ├── index.js
│    └── index.css
├── .env
├── package.json
└── yarn.lock
```

Purpose of Project;

👨‍💻 The main aim of this project is to improve my REACT/Styled Component/JS/git commands (push, pull, commit, add etc.) skills and responsive design abilities.

Objective

🎯

The project covers;

• HTML / Semantic elements

• Material UI - React Toastify - Bootstrap

• REACT / Components , Props , Hooks , Router, Redux etc.

• Formik - Yup

• Firebase Realtime Database

• Firebase Authentication

At the end of the project, i will be able to;

• improve coding skills within HTML & CSS & JS & REACT.js

• use git commands (push, pull, commit, add etc.) and Github as Version Control System.

---

Used in this project

👉 HTML tags, Comments, CSS styling, REACT.js etc.

---

How to Use the Project

First download a code editor
Second open the files : My Docs
You should open vscode terminal and write "yarn or npm install" to make the project alive
You can use this tutorial : VS Code tutorial

Author

👤 Yasin Sutoglu

• Twitter: @YsnStgl
• Github: @yasinsutoglu