kmg11/facebook_post_clone

Small React Blog Using Styled Component

Facebook Post Clone

Description

SPA application Clone facebook post function like interacting with posts by liking, commenting, deleting comment, deleting posts and creating posts with front-end technologies only using json server as mock database, design with responsive and dark mode with simple animations.

---

Links

• Github

---

Features

• Interact with posts by [ like, comment, delete ] and single page for every post
• See In Posts [ User [Name, Image], Post [Date, Title, Description, Images]]
• Form for creating posts that contain user ( name, image ), post ( title, description, images )
• A random image containing a distinctive color and the first letter of the first and second name of the user who did not put a picture
• Infinity Scroll
• Loading handler, error handler and 404 page
• Limitation [ Only 4 Images Appear In The Main Page - Only One Comment Appear In Main Page ]
• Custome Hooks For Handle Repeated Parts In The App
• Simple Animation
• Handle Requests With Custome React Hooks
• Styled Components For Hight Level Of Styling
• Reusable Components
• Save unsent data in local storage
• Compatible with all devices, browsers, search engines and screen readers
• High performance

---

Technologies

• React
• Styled Components
• Json

---

How To Run Website On Your Maachine

• You Need To Setup [ nodejs, gulp ] on your machine
• Clone Repo
• On Terminal

  npm install -g json-server
  npm install

• Run json-server

  npm run mock

OR

  json-server --watch .\src\Apis\posts.json --port 8000

• Run On Developing Mode

  npm run start

• Run On Optimize Version

  npm run build
  npm install -g serve [ First Time Only ]
  serve -s build

---

Important Notes

• This App Can't Be Deploy On Github Because It Use Json Server
• If You Want To Add Image In Post All Images Must Be In public/images Folder

---

Why I Create This App . Targets Of This App

• Training On Fetch [ Get - Post - Delete - Patch ]
• Traninig On Styled Component
• Traning On Usable Components
• Improve Files Structure
• Traning On React Router
• Traning On Hooks [ useContext - useReducer - useEffect - useState - useRef ]
• Training On Custome Hooks
• String, Arrays & Numbers Methods
• Images Upload
• Date Object
• Google Lighthouse [ Accessibility, SEO, Best Practices ]
• Infinty Scroll

---

My Links

• My Portfolio
• Linkedin
• Github
• Facebook