PicShare - a collaborative photography platform

Overview

This platform is a collaborative site about photography.
You can get recommendations from posts regarding: professional photographers, special locations for photography, photography accessories for rent/sale, as well as photography tips from the experts.
Users who are registered to the site can post recommendations on these topics, attach a picture to the post for illustration, as well as comment on existing posts and rate them.
In the profile, user can see his/her personal details, all the posts he/she has uploaded, view them, edit or delete them.
And there are options of disconnecting from the account and deleting the account.

Features

• Registration/login to the system by full name, email address and password of the account.
• Viewing the user's profile, where his/her personal details and the posts he/she uploaded are listed. It is possible to view the posts of the profile, edit and delete them. User also can disconnect from the account or delete it permanently.
• Viewing the uploaded posts, even someone who is not registered as a user may view the posts.
• Writing a post by category, along with a picture.
• Response and rating to an existing post.
  
  

Use Of Technologies

• Server side: Java (Spring Boot).
• Client side: React (Redux).
• Design libraries: MUI (Material UI), SweetAlert2.
• Database: H2. (for data storage only)

Installation

First clone the file to your local computer by the following command in the command line of the desired folder:

git clone https://github.com/shirabiton/PicShare.git

Server-side installation:

Open the project in the IntelliJ IDEA or Eclipse workspace and run the server. Then, open the browser URL:

http://localhost:8585/h2-console

There you can see the database saved in tables.

Client-side installation:

Open the command line of the client-side folder in the project, and write:

code .

Then type enter. This is how the project will open for you in Visual Studio Code.
Now run the project by the command in terminal:

npm run dev

External Dependencies

As mentioned, the MUI (Material UI) library is installed on the client-side, it is a React UI-library. We will install it by the following command in the terminal:

npm install @mui/material @emotion/react @emotion/styled

And there is use of the SweetAlert2 library that provides well-designed and responsive alert messages. We will install it by the command:

npm install sweetalert2

Or alternatively, easily install any installation in the project by this command:

npm install

How to use

From the home page you can log in/register by clicking on: "התחבר/הירשם" in the header.
We can navigate to "קצת עלינו" to the page about the site,
and, navigate to our profile by clicking on our account avatar.
Clicking on "פוסטים" will lead us to a database of uploaded posts, in the sidebar we will navigate through the various categories for photography recommendations.
You can search for posts by quickly searching for the post title in the header of the site.
At each stage, clicking on the logo will take us to the home page, and on each page if we scroll down we can go to the top of the page by clicking on an up-arrow icon.
Clicking on a post will lead us to the full post page, at the top of the post we can see who the owner of the post is, then the image and the text of the post, further down the page the rating and comments will be displayed,
There, as users we will be allowed to rate and comment on the post.
There is a floating button with a plus icon on the posts page, through which we can upload new posts and attach a picture to them.

A Visual Guide

Homepage:



Registration:





Log In:





About Us:



Post A Recommendation:





All Posts:



Quick Search Of The Posts:



Post Details:



Comment:



The Comments To The Post:



User's Profile:



Profile's Posts: