Simple Social Media app with Home and Auth pages created using React library and {JSON} Placeholder API.
- Simple Social Media app displays posts' data and comments provided from the API.
- Technical assignment requested by Digitinary for the application of Frontend Developer position.
ReactJs Code Challenge Details:
Create a new react application using material UI.
Create a Login page and manage the use session without using 3rd party library. Users Endpoint => https://jsonplaceholder.typicode.com/users
Create user posts page where to support: https://jsonplaceholder.typicode.com/posts
- Retrieve all posts, the design should be as a card which contains the post contents, each post should have all comments under it with the same card.
- Add post, an action at the top of the page, this should on a dialog to add a new post and immediately show it the posts page.
- Delete post, should display a confirmation dialog only to confirm the deletion, the action should be on the post card itself.
- Modify post, should open the same post dialog, the action should be on the post card itself.
Note: for more details about the APIs specs, please check https://jsonplaceholder.typicode.com
-
React Library | A JavaScript library for building user interfaces.
-
React Hooks | State Hook, Effect Hook, and Refs Hook.
-
React Router Dom Library | BrowserRouter, Router, Route, Routes, Navigate, and Outlet
-
Fetch API | To make requests to {JSON} Placeholder in order to fetch data.
-
Material-UI Components | AppBar, Box, Button, Card, CardActions, CardContent, CardHeader, Collapse, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Drawer, Grid, IconButton, Link, List, ListItem, ListItemButton, ListItemText, Tab, Tabs, TextField, Toolbar, and Typography
-
Material-UI Icons | DeleteOutlineOutlinedIcon, EditOutlinedIcon, ExpandMoreIcon, and MenuIcon
- User can not access the posts page before login or signup.
- User can login with his email "One of the existing in the API" in order to explore the posts.
- User can signup with his email "Not existing in the API" in order to explore the posts.
- User can explore all posts with their comments.
- User can create a new post and see it directly.
- User can modify only his posts.
- User can delete only his posts.
$ git clone git@github.com:yahiaqous/Simple-Social-Media.git
$ cd Simple-Social-Media
Simple-Social-Media git:(main)$ npm i
Simple-Social-Media git:(main)$ npm start
- Add pagination to the posts or request data based on user scrolling.
- Add interactive styling and modern colors to the posts page.
- Design and develop the Footer component.
- Add "Return to Top" button.
- Create loading component until fetching data.
- Create API errors handler.
- Translate the API data to English.
- Create Dark mode button.
- This project was inspired and requested by Digitinary.
- This Auth Page Example inspired me with the page layout and design.
- This Stack Overflow Answer helped me how to navigate to the page end.
- This W3School Tutorial helped me how to manage the user session and cookies using Document object without 3rd parties.
- This Tip for fixing the React Single Page Application deployed on Netlify.
Created by Yahia Qous - feel free to contact me!