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.
- 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
- React
- Styled Components
- Json
- 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 mockOR
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- 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
- 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