Figma prototype:ParrotSocial
Parrot Social is social media platform working in tandem server-client. As the server there is springboot REST API that connects to the mongoDB Atlas instance in cloud (from the repo ParrotSocial). The client is developed using React JS and uses all the best ideas of the facebook, pinterest, instagram and other platforms.
- Login page - is the default page that the user sees after trying to access client when don't have specified JWT token. After user authenticates with the matching credentials the app will forward to home page, otherwise the page does not change.
- Initial registration page - prompts user to input required data for basic registration. This part is not skippable and requires torough validation. After completing form and submission if all the data is correct the user will be forwarded to the "register detail page".
- Register detail page - have the most complicated form, but all the fields are optional (it serves as the update information page, because all user data is by default empty). The name, surname and profile descriptio are standard text fields (nothing fancy). The "profile image" and "cover image" are image upload buttons for respected images on users profile. Inhabitancy and provenance are input fields with select values from database, so the user can select from existing options or write his own (if the new value is submitted the option is added to database). The education and work are user-exclusive (meaning those values do not persist between users) - so it works like normal input field and after submission the value is stored in user specific context (not accessible globally for all users).
.png)
- Home page - contains three vertical sections (leftbar, main section, rightbar), whom all of theese are vertically scrollable if the content is too long. The leftbar contains user card that displays the name of currently logged in user and its profile photo, under that there is navigation panel that contains rows and columns of buttons (all of them navigate the user to specific parts of the client pages except "logout" button that revokes the JWT token thus logging out the user from their account), under that there is list of befriended users with their profile photos. Main section contains share component (that allows for creation of new posts in currently logged in user profile), next is current feed section that displays the list of posts that friends created (the list is not vertical but spans all the width of the site, so the user can interact more with content). The rightbar section consists of currently logged in users (all of the logged in friends are also befriended users), under that there is also the messenger component that allows for text communication with other users (it is collapsable).
- Profile page - have two sections (leftbar that is reused from the home page) and profile feed section. The profile feed section consists of user images section (profile and cover) and user basic info pane (on the right). The profile feed also has "create post" component and profile feed that contains all the posts created by the user whom profile is displayed.
- Event page - this page sonsists of the leftbar (reused from the home page) and the events list (on the right). List of the events are displayed in the panels on the right (whom every displays its name, description, image, interested users count and the button to show interest by the currently logged in user), the last element of the list is submission panel that lets users to create new event.
- Group page - consist of the leftbar (the same as the leftbar on the home page) and the group main panel and the group rightbar. The group rightbar displays the user that created the group as well as button to join/leave group, list of current members of the group. The main panel displays the group header (contains the group profile photo, group name, group description), under whom the list of the group posts is displayed.
For being a collaborator ask for access in private message (best on github) then after short text conversation I will add you as the collaborator and you will have option for submitting changes using requests and approvals. Any of the help will be appreciated, but the work have to be done well to implement the solution as close to the prototype as possible.
The packages used by the project are not included in this repo - to install them run "npm install" (if you have node runtime installed) this will fetch packages into your node_modules project file. After that you can run the client using "npm install" then the website will launch (if not check your console or manually navigate to localhost:3000).
React client supports all the Node commands and ReactJS commands.