3. Add Header and Landing page

Mobile First Approch !

• Add a header (navigation bar with Routes)
• Add landing page

• The home page headline wrapper should be updated to be displayed properly (netfly preview)

• The routes: When the user try to access manually t a routes, it should display properly (in netfly preview)

• Use a small mobile version for the small screen
  When we reduce the screen of the windows the webapp should automatically go to mobile mode.

But the bug is it's just stop resizing before mobile size.

It's best not to wrap your input tags inside a label tag. it makes your work unsemantic

Create a design for the home page of the website, the design should include:
Minimalism is the keyword
(3 hours minimum)

• Navbar
• Landing page
  • with an African guy image, white background with pink-purple color
  • Call to action button
  • Persuasive text (should be written)

(3 hours minimum)

• Feature section with cards (Chat, Publication, Transparent Interest, Mobile App (Notification))
• Country in which it's available
• Download android app sections
• Call to action section Join US
• Footer page

Good luck soldier! (this might take 6 hours: 3 hours x2)

"If it’s not tested, it doesn’t work" -Someone I don't know

• Add test for all components in Dashboard

fix all ignored eslint errors

Friends' items should be selectable, removable, updatable

• Remove friend: users can long press on a friend to select a friend and click on a remove button to remove them from your list of discussions
• Update friend's name: users can update their friend's name (support emojis)

• Add display list of chat partners
• Add display list of message-ended feature
• Add navigation through all of these chat partners

Add filter to discover section so users can filter by:

• Age range
• Sex
• Location
• Interest
• Name/Comments: use search bars

• Add a design preview for the design page
• Add detail page

Update the dashboard code to use routes instead of conditional rendering.

The updated version should give the same result

• Solve the console logged error about the emojis
• Update the margin of the heading-text of home page

All features should work:

• Add Navigation through all contents feature
• Add Send a message to a new user feature
• Add Display discussion feature
• Add Edit profile feature

document the project, the file should contain:

• Preview section for desktop and mobile version
• Table of content sections
• Live URL demo section (here is a link to the Live demo)

NB: the more unspecified topics can/should be added

Clean the code:

• Remove unused data
• Rename bad-named data (class Name, HTML markup, variable, props)
• Make sure data naming are clean and clear

4. Finishing the home page

Mobile first approch

• Add feature section (responsiveness is the key word)

Add about page

Register and Edit profiles seem to share the exact same form, there is a place for optimization here:

Suggestion:

• Convert different forms steps into components and make all steps validate there's inputs onSubmit before sending back the data to the parent component (state lifting, store, can both make this happen).

Add Authentification Page UI:

• Login sections with "forget password"
• Register sections with "I already have an account"

Update android app data to translate them in English and make them clear.

The server side should be done with node and espress js.

Design Authentifications preview

5. Finishing Home page

• Add the Country in which it's available
• Add Download android app sections
• Add Call to action section Join US
• Add Footer page

Design the main page and choose the icons that should be used

Add contact page

Task:

• Setup linters
• Setup react project
• Write the documentation

• Add design for UI
• Add structure and Styling

On these sections, users should be able to :

• Share content (publication: Text, Image + Text, Image, Url Link)
• Like other's content
• Comment on other's content
• Follow other's users

Note: This task should be divided into multiple task

Users should be able to navigate freely through all sections, the navigation current page should remain the same as passes from the desktop version to the mobile version.

suggestion:

• use the store: to save the current sections and display the mobile version depending on stored data
• use the route: to allow users to navigate through all sections, in the mobile version we can display content depending on the current route URL

Add structure and styling for main page (mobile first)

Navigation through login and register

• Register should have multiple steps (mail and password, username, country, etc ...)
• User can navigate through these two sections with a simple opacity animation

Add emoji features so user can send emojies through messages.