Made to be simple and beautiful. A random image is populated on the left on each reload of the page.
On the right is a button that leads to Auth0's secure google login.
Next was going to be the home page where the user will spend most of their time and have an easy way to move around to the rest of the pages. This includes a short summary of their profile on the left with their google image, name and course graduated with the GMIT logo in the background. Below that is their followed interests. Every interest is clickable and redirects them to the respective interest page.
In the middle we have the feed which allows the user to make posts by writing some text in the textfield and hitting enter. This makes a post which is saved to the users profile in the database. The user can see other people’s posts if they are friends. On the right are three hardcoded links to news from GMIT.
At the top we have a header which serves as our navbar throughout the application. This leads us to various places on the website, currently we are at Home and the button to log out is on the very right.
This is where the user is going to input their details for their profile. Full name and bio are text fields. Country, Course, and interests are all select lists that the user can pick. The year graduated shows a calendar of all years and has the user pick one. The user cannot register their account unless all details are filled.
My profile page is where the user can see their profile. Their profile page has an edit button where they will be able to change details about themselves.
This page showcases all the interests that are available on the application. These are clickable cards that leads the user to that interests respective page.
This page shows the interest’s name, it’s bio and the amount of people interested in it. The user can click on the join / leave button to join and leave the interest page. People’s profiles are in cards that are clickable and leads the user to their profile page where they can see their info and send a friend request.
Here are profile pages that are shown across the whole website.
This course page changes based on the user’s graduated course. This is so the page is secure and other people can’t check other courses they haven’t graduated. Just like with the interests page, this shows everyone that graduated and what year.
- Open Command Prompt
- run "git clone https://github.com/Pasha-Akito/Arla-Frontend.git"
- cd into Arla-Frontend
- cd into app
- run "npm install"
- run "npm start"
- Open Command Prompt somewhere else
- run "git clone https://github.com/Pasha-Akito/Arla-BackEnd.git"
- cd into Arla-Backend
- cd into api
- run "npm install"
- Make an .env file with your Neo4j Aura Login credentials
- run "npm start"
- Enjoy the Website!