Frontend Overview
We have decided to use mobile first design for this project, so we will start with a design that is optimized for mobile phones. Link to Figma: https://www.figma.com/file/nzmwMJRLfTZ84UFRXk0GuQ/Untitled?node-id=0%3A1
You need to clone the repository, then you should install dependencies by running npm i inside BOTH the root ("/") directory, and the frontend directory ("/frontend").
Then, you can run npm run start to launch the front end. It should automatically open a browser, if it doesn't then you need to check the console to see the address it is running on and go to that.
IMPORTANT: The initial design phase is for MOBILE DESIGN, so viewing it in full size is not optimal. You need to open the console with F12 and find a button that looks like this (chrome, firefox pictured). You can also press CTRL + SHIFT + M
- Dashboard
- Landing Page / registration / login
- View post + comments
- Notifications
- Follows / Followers
- Profile
- Profile Settings
- (Header + Bottom Nav)
The landing page is the page any visitor will see if they are not logged in. It is up to the designer if they want to include any sign up/in form on the landing page instead of a subpage.
It will contain:
- Some hero text to say what the app is
- A sign in button
- A sign up button
The sign up and sign in pages are considered as subpages for this section and will just contain some form.
When a user clicks on a post, they will be sent to the post view, where they can see the comments of posts. Each reply to a post is also a post that can be clicked on which will open its own post view
Posts on the dashboard, user profile, post view, and posts replies can all share the same component:
A post contains:
- Simple User Details: The users nickname, username and profile picture. This component will be reused a lot in other pages. Clicking on the users name or profile pic will take you to their profile
- Text content (images/videos planned)
- Interaction counters/icons (likes, replies, shares). Clicking on the interaction icon will start some new interaction
- If a post is NOT a selected post, the component should be more condensed. This will be true for posts: on the dashboard, on a users profile, that are replies to some main post
Header Holds the app logo, and the current logged in user
- User Icon: Pressing should take you to your user page (unless the designer wants to have it open some side menu with more options)
- App Logo: Pressing should take user home
Footer Contains the navigation buttons for the app.
It should at least have the following links/icons:
- Home
- Search
- Notifications
Show the list of users a person follows, and a list of users who follow that person, is navigated to from a user profile
Contains:
- A simple header with a back button and label
- Some buttons at the top to swap between followers and follows
- A list of users. Each user should be a simple user details. Optionally, a follow button could be added on each user so you can easily follow them (or if already followed, show that detail)
A users feed
Contains:
- A list of posts from the users followers (posts will be shown in condensed form, see posts component for more details)
- A button to start making a post (this can either be present everywhere or as some dedicated button on the dashboard, designers choice)
The post composer is grouped with this component. It should contain:
- The users profile picture
- A text input
- If images/video support is added, a button to add an attachment
- A button to send the post
Shows all recent interactions for your posts
Types of interactions:
- Likes on your post. (If there are multiple likes in a row on the same post, they should be combined into one notification with the total number of likes)
- Replies to your post. Should show the reply as a condensed post
- Someone follows you. Should show their profile picture and name
- Shares. Should show your post (and clicking on it should take you there), and have it work similarly to the consecutive likes above
Each of these can be a separate component, up to the designer
A users profile details and posts
Contains:
- Profile picture
- Profile banner
- A header with a back button and search icon
- Username + Nickname
- User biography
- Date Joined
- Following/Followers Count
- List of posts (includes posts they shared)
- If the user is browsing their own profile, there should be a button to edit it
- If the user is browsing another profile, there should be a button to follow
Where a user can change their own profile's details
It should show:
- A header or footer with a cancel and save button
- The profile banner and photo (clicking them should prompt a photo selector)
- A list of profile details as a form (nickname, username, bio) and there should be form validation