Simple Social Media

Simple Social Media app with Home and Auth pages created using React library and {JSON} Placeholder API.

Website Live Link

Table of Contents

• Simple Social Media
  • Table of Contents
  • General Information
    • Task Description Provided By Digitinary
  • Technologies Used
  • Features
  • Demo Video
  • Setup
  • Features to be Added
  • Acknowledgements
  • Contact

General Information

• 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.

Task Description Provided By Digitinary

ReactJs Code Challenge Details:

1. Create a new react application using material UI.

2. Create a Login page and manage the use session without using 3rd party library. Users Endpoint => https://jsonplaceholder.typicode.com/users

3. 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

Technologies Used

• 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

• React Toastify Library | ToastContainer and toast

Features

• 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.

Demo Video

Full Demo Video

Setup

$ git clone [email protected]:yahiaqous/Simple-Social-Media.git
$ cd Simple-Social-Media
Simple-Social-Media git:(main)$ npm i
Simple-Social-Media git:(main)$ npm start

Features to be Added

• 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.

Acknowledgements

• 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.

Contact

Created by Yahia Qous - feel free to contact me!