A react-redux clone of flickr. A community to share images with others.
Live Project: https://imagrr.herokuapp.com/ Wiki: https://github.com/PeterMace/imagrr/wiki
Imagrr allows users to upload their own images with an image URL. User can then organize their images into albums. Users are able to comment on and favorite photos.
Frontend - CSS, HTML, Redux, React Backend - Express, Sequelize, Express-Validators
npm install This will install the nested node dependencies for both the front and backend.
npm start Runs the app in the development mode. Open http://localhost:3000 to view the frontend in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
The following is a snippet of code from the CommentDetail component. This component is meant to display the contents of each comment while also restricting edit and delete functionality to the comment's owner. Optional chaining had to be implemented to prevent errors with permission checks.
const ownerPermission = userId === comment?.userId;
const handleDelete = async (e) => {
e.preventDefault();
const dispatchPhoto = await dispatch(deleteComment(comment));
}
if (!comment) {
return null;
}
let content = null;
if (showEditForm){
content = (
<EditCommentForm comment={comment} hideForm={() => setShowEditForm(false)} />
)
}
if(!comment){
return null;
}
return (
<main>
<div id="comment">
{!showEditForm &&
<p key={comment.id}>
{comment.content}
</p>}
{(ownerPermission && !showEditForm) ? <button onClick={() => setShowEditForm(!showEditForm)}>Edit Comment</button> : null}
{(ownerPermission && !showEditForm) ? <button onClick={handleDelete}>Delete Comment</button> : null}
{content}
<br />
</ div>
</main>
);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent