+
+
+
+# Preview Video :
+
+
+https://github.com/hemant933/ReactCreations/assets/104961126/6196feca-23c3-4c7d-b870-e1d49f4e00ea
+
+
+# Quick links :
+
+1. [Usage](#usage)
+2. [Todo](#todo)
+3. [Contribute](#contribute)
+4. [Image Copyright Claims](#image-copyright-claims)
+
+# Usage :
+
+1. Fork the repo and then clone it or download it.
+
+2. First install all dependencies:
+
+ ```bash
+ #change directory to client
+ cd client
+
+ # with npm
+ npm install
+
+ # or with yarn
+ yarn
+ ```
+
+3. Create a `config/config.j` file and insert the following code it will contains all code variables. Replace values with yours !!!
+
+ ```javascript
+ DB_NAME=
+
+ );
+
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/Instagram-Clone/client/src/components/VerticalTabs.js b/Instagram-Clone/client/src/components/VerticalTabs.js
new file mode 100644
index 000000000..de03aa33a
--- /dev/null
+++ b/Instagram-Clone/client/src/components/VerticalTabs.js
@@ -0,0 +1,200 @@
+/**
+ *
+ * @author Anass Ferrak aka " TheLordA "
+ findUser(e.target.value)}
+ />
+
+
+
+ -
+ {search.user
+ ? search.user.map((item) => {
+ return (
+
+
+ {value === index && (
+
+ {children}
+
+ )}
+
+ );
+};
+
+TabPanel.propTypes = {
+ children: PropTypes.node,
+ index: PropTypes.any.isRequired,
+ value: PropTypes.any.isRequired,
+};
+
+const a11yProps = (index) => {
+ return {
+ id: `vertical-tab-${index}`,
+ "aria-controls": `vertical-tabpanel-${index}`,
+ };
+};
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.paper,
+ display: "flex",
+ height: "100%",
+ },
+ tabs: {
+ borderRight: `1px solid ${theme.palette.divider}`,
+ },
+ fieldContainer: { display: "flex", marginBottom: "10px" },
+ fieldContainerUnderInfo: { display: "flex", marginBottom: "10px", marginTop: "10px" },
+ fieldLabel: { margin: "auto 0px", marginRight: "10px", width: "25%", fontWeight: "bold" },
+ fieldInput: { "& .MuiOutlinedInput-input": { padding: "10px 14px" } },
+ textInfo: { color: "rgba(var(--f52,142,142,142),1)", marginBottom: "10px" },
+}));
+
+export default function VerticalTabs() {
+ const classes = useStyles();
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event, newValue) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+
+
+
+
+ Implementation Coming Soon
+
+
+ Implementation Coming Soon
+
+
+ Implementation Coming Soon
+
+
+ Implementation Coming Soon
+
+
+ Implementation Coming Soon
+
+
+ Implementation Coming Soon
+
+
+ );
+}
diff --git a/Instagram-Clone/client/src/config/constants.js b/Instagram-Clone/client/src/config/constants.js
new file mode 100644
index 000000000..02bdaaeed
--- /dev/null
+++ b/Instagram-Clone/client/src/config/constants.js
@@ -0,0 +1,50 @@
+/**
+ *
+ * @author Anass Ferrak aka " TheLordA "
+ setCaption(e.target.value)}
+ />
+
+ );
+ case 1:
+ return "This functionality isn't available for the moment";
+ case 2:
+ return;
+ default:
+ return "Unknown step";
+ }
+ };
+
+ const handleNext = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ };
+
+ const handleBack = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep - 1);
+ };
+
+ const handleClickQuery = () => {
+ clearTimeout(timerRef.current);
+ if (query !== "idle") {
+ setQuery("idle");
+ return;
+ }
+ setQuery("progress");
+ timerRef.current = setTimeout(() => {
+ history.push("/");
+ }, 4000);
+ };
+
+ const handleSubmit = () => {
+ handleNext();
+ handleClickQuery();
+ handlePostData();
+ };
+
+ return (
+ <>
+
+
+ {steps.map((label, index) => (
+
+ {label}
+
+ {getStepContent(index)}
+
+
+ ))}
+ {activeStep === steps.length && (
+
+
+ )}
+
+
+
+ );
+};
+
+export default CreatePoste;
diff --git a/Instagram-Clone/client/src/screens/Home.js b/Instagram-Clone/client/src/screens/Home.js
new file mode 100644
index 000000000..37281d77c
--- /dev/null
+++ b/Instagram-Clone/client/src/screens/Home.js
@@ -0,0 +1,400 @@
+/**
+ *
+ * @author Anass Ferrak aka " TheLordA "
+
+
+
+
+
+
+ {query === "success" ? (
+
+ Your post has been successfully submitted — check it out!
+
+ ) : (
+
+
+ )}
+
+
+
+
+ 
+
+ }
+ title={
+
+ {item.PostedBy.Name}
+
+ }
+ subheader="September 14, 2016"
+ />
+
+
+ {item.Likes.includes(state._id) ? (
+ {
+ unlikePost(item._id);
+ }}
+ >
+
+ ) : (
+ {
+ likePost(item._id);
+ }}
+ >
+
+ )}
+
+
+ {state.Bookmarks.includes(item._id) ? (
+ {
+ removeBookmark(item._id);
+ }}
+ >
+
+ ) : (
+ {
+ bookmark(item._id);
+ }}
+ >
+
+ )}
+
+
+
+
+ {item.Likes.length} Likes
+
+
+ {item.Body}
+
+
+
+
+
+ 
+
+ {
+ event.preventDefault();
+ setComment(event.target.value);
+ setShowSend(true);
+ if (event.target.value === "") setShowSend(false);
+ }}
+ />
+ makeComment(comment, item._id)}
+ >
+
+
+
+
+ ))}
+
+ );
+};
+
+export default Home;
diff --git a/Instagram-Clone/client/src/screens/Login.js b/Instagram-Clone/client/src/screens/Login.js
new file mode 100644
index 000000000..acb3c08b1
--- /dev/null
+++ b/Instagram-Clone/client/src/screens/Login.js
@@ -0,0 +1,190 @@
+/**
+ *
+ * @author Anass Ferrak aka " TheLordA " -
+ {item.Comments.map((cmt) => {
+ return (
+
+
+
+ Instagram Clone
+
+ {formatValidation ? (
+
+ Invalid Email format — check it out!
+
+ ) : null}
+ {authValidation ? (
+
+ Invalid given Email/Password — check it out!
+
+ ) : null}
+
+
+
+
+ Instagram Clone
+
+ {/* Check Password */}
+ {password !== "" && confirmPassword !== "" ? (
+ password !== confirmPassword ? (
+
+ Confirm password doesn't match the password — check it out !
+
+ ) : null
+ ) : null}
+ {/* Handle Error Notification if there is any */}
+ {errorMsg ? (
+
+ Session expired ! Try Again with a new Request — check it Again !
+
+ ) : null}
+ {/* Handle Success Notification */}
+ {successMsg ? (
+
+ Password Updated successfully — check it out !
+
+ ) : null}
+
+
+
+ {value === index && {children} }
+
+ );
+};
+
+const ProfilePage = () => {
+ const classes = useStyles();
+ const { state } = useContext(AuthenticationContext);
+ const [data, setData] = useState([]);
+ const [bookmarks, setBookmarks] = useState([]);
+ const [value, setValue] = useState("Posts");
+
+ const config = axiosConfig(localStorage.getItem("jwt"));
+
+ useEffect(() => {
+ axios.get(MY_POST_URL, config).then((res) => {
+ setData(res.data.posts);
+ });
+ axios.get(MY_BOOKMARKS_URL, config).then((res) => {
+ setBookmarks(res.data.bookmark);
+ });
+ }, []);
+
+ //Toggle the EditProfile Button to show the Dialog
+ const [openEdit, setOpenEdit] = useState(false);
+
+ const handleEditClickOpen = () => {
+ setOpenEdit(true);
+ };
+ const handleEditClose = () => {
+ setOpenEdit(false);
+ };
+
+ return (
+ <>
+
+
+ settings
+
+
+
+
+ Instagram Clone
+
+ {emailCheck ? (
+
+ Invalid Email format — check it out!
+
+ ) : null}
+ {errorMsg ? (
+
+ No User exists with that email — check it Again !
+
+ ) : null}
+ {successMsg ? (
+
+ The reset password link has been sent — check out your email inbox !
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+ }
+ title={
+
+ {item.PostedBy.Name}
+
+ }
+ subheader="September 14, 2016"
+ />
+
+
+ {item.Likes.includes(state._id) ? (
+ {
+ unlikePost(item._id);
+ }}
+ >
+
+ ) : (
+ {
+ likePost(item._id);
+ }}
+ >
+
+ )}
+
+
+
+
+
+
+ {item.Likes.length} Likes
+
+
+ {item.Body}
+
+
+
+
+
+
+
+ {
+ event.preventDefault();
+ setComment(event.target.value);
+ setShowSend(true);
+ if (event.target.value === "") setShowSend(false);
+ }}
+ />
+ makeComment(comment, item._id)}
+ >
+
+
+
+
+ ))}
+
+ );
+};
+
+export default SubscribePost;
diff --git a/Instagram-Clone/client/src/screens/UserProfile.js b/Instagram-Clone/client/src/screens/UserProfile.js
new file mode 100644
index 000000000..14c56166d
--- /dev/null
+++ b/Instagram-Clone/client/src/screens/UserProfile.js
@@ -0,0 +1,251 @@
+/**
+ *
+ * @author Anass Ferrak aka " TheLordA " -
+ {item.Comments.map((cmt) => {
+ return (
+
+
+ {value === index && {children} }
+
+ );
+}
+
+const UserProfilePage = () => {
+ const classes = useStyles();
+ const [value, setValue] = useState("Posts"); // to switch between different tabs
+ const { state, dispatch } = useContext(AuthenticationContext);
+ const { userid } = useParams();
+ const [data, setData] = useState(null);
+ const [showFollow, setShowFollow] = useState(state ? !state.Following.includes(userid) : null);
+
+ const config = axiosConfig(localStorage.getItem("jwt"));
+
+ useEffect(() => {
+ axios.get(`http://localhost:5000/user/${userid}`, config).then((res) => {
+ setData(res.data);
+ });
+ }, []);
+
+ const followUser = () => {
+ axios.put(`http://localhost:5000/follow`, { followId: userid }, config).then((result) => {
+ dispatch({
+ type: UPDATE_FOLLOW_DATA,
+ payload: { Followers: result.data.Followers, Following: result.data.Following },
+ });
+ localStorage.setItem("user", JSON.stringify(result.data));
+ setData((prevState) => {
+ return {
+ ...prevState,
+ user: {
+ ...prevState.user,
+ Followers: [...prevState.user.Followers, result.data._id],
+ },
+ };
+ });
+ setShowFollow(false);
+ });
+ };
+
+ const unfollowUser = () => {
+ axios.put(`http://localhost:5000/unfollow`, { unfollowId: userid }, config).then((result) => {
+ dispatch({
+ type: UPDATE_FOLLOW_DATA,
+ payload: { Followers: result.data.Followers, Following: result.data.Following },
+ });
+ localStorage.setItem("user", JSON.stringify(result.data));
+ setData((prevState) => {
+ const newFollower = prevState.user.Followers.filter((item) => item !== result.data._id);
+ return {
+ ...prevState,
+ user: {
+ ...prevState.user,
+ Followers: newFollower,
+ },
+ };
+ });
+ setShowFollow(true);
+ });
+ };
+
+ return (
+
+
+ settings
+
+
+ Welcome to InstaClone
", + // }; + // sgMail.send(email); + res.json({ message: "Saved successfully " }); + }) + .catch((err) => { + console.log(err); + }); + }); + }) + .catch((err) => { + console.log(err); + }); +}; + +// SignIn Controller +exports.signin = (req, res) => { + const { email, password } = req.body; + // Verification for an empty field + if (!email || !password) { + return res.json({ error: "Please provide Email or Password" }); + } + // Check if email exist in our DB + User.findOne({ Email: email }) + .then((savedUser) => { + if (!savedUser) { + return res.json({ error: "Invalid Email or Password" }); + } + bcrypt.compare(password, savedUser.Password).then((doMatch) => { + if (doMatch) { + // we will generate the token based on the ID of user + const token = jwt.sign({ _id: savedUser._id }, process.env.JWT_SECRET); + // retrieve the user info details and send it to the front + const { _id, Name, Email, Followers, Following, Bookmarks } = savedUser; + res.json({ token, user: { _id, Name, Email, Followers, Following, Bookmarks } }); + } else { + return res.json({ + error: "Invalid Email or Password", + }); + } + }); + }) + .catch((err) => { + console.log(err); + }); +}; + +// Reset Password Controller +exports.resetPwd = (req, res) => { + crypto.randomBytes(32, (err, buffer) => { + if (err) { + console.log(err); + } + const token = buffer.toString("hex"); + User.findOne({ Email: req.body.email }).then((user) => { + if (!user) { + console.log("simple check of the error source"); + return res.json({ error: "No User exists with that email" }); + } + + user.ResetToken = token; + user.ExpirationToken = Date.now() + 600000; // 10min in ms + user.save().then((result) => { + // this section will be fully functional after adding the SendGrid API Key + // in order to use this feature + // the following is an example of Email template + + // const email = { + // from: "no-reply@insta-clone.com", + // to: user.Email, + // subject: "Password Reset", + // html: ` + //A request has been made to change the password of your account
+ //click on this link to reset your password
+ //Or copy and paste the following link :
+ //