zero-to-mastery / mappypals Goto Github PK

The icons need to be smaller
The first icon smaller than the other icons
The "Logout" button needs to take the right margin

• In the third card " connect " the text override it
• The " sign up " button needs to be smaller to fit the " logout " button

• " I forgot my password " this line needs to move to the bottom
• The line after the button needs some padding-top

All components could have just been loaded in App.js rather than Main.js with react-router.

On the desktop, The home page header appears difficult to read due to the sunlight of the background image

Currently, we use form.js for 7 files.

1. AddFriendForm.js
2. InvitationSent.js
3. InviteFriends.js
4. ForgotPassword.js
5. Login.js
6. ResetPassword.js
7. Signup.js

The good thing is that by reusing css we have an easier time changing the design, and making sure that design match.
The problem: Without using !important tag you can't overwrite form.js. As a result, css has a lot of !important tags example

So the expected solution should be:

1. css should be reusable. Writing identical css for every single file would make it hard to maintain.
2. Do not use !important tags.

So what would be your solution?

• Connect firebase to our signup form

• Social Logins Integration

  • Integrate Google login (no need external api key)
  • Integrate Facebook login (need apk key)
  • Integrate Twitter login (need api key)

There are several unused variables in the project that are causing the new Travis integration to fail.
If some one would like to remove them, that would be awesome:

The problem is in Home.css where we used id #root to assign the background image.

#root{
    background-image: url('../../pics/adult-backlit-beach.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

This gives every page in the app the same background image which shouldn't be. Some pages might need a different background-image and some don't need it at all.

The settings items need to look separate from the home page

So SeniorMan on discord had an idea of launching a master version of the project, through GitHub pages or Heroku.

What's the purpose of it?

1. To allow the contributor to show a working version of the project, to the future employer, friends, etc.
2. Easier to detect bugs, when anyone can visit your site and look through instead of going to the master branch and writing npm start.

Options:

1. Launching live version front-end only on GitHub pages. The GitHub pages don't handle well with routing, so it would require some changes, using these tutorials:
   tutorial 1
   tutorial 2

2. Launching a full live version on Heroku. I know that Heroku supports node.js, but it could provide trouble to make it work front-end and back-end.

So what do you think?

1. Should we try to launch the live version of the master branch?
2. How do we launch it, using GitHub pages, Heroku or something else entirely?

This part needs to be responsive to the small screen
The padding-left needs to be same the right.. and reduce the height to fit the screen

• Add friend to map by email
• Send invitation link to friend if email not in DB
• Update friend detail based on their profile (location, image, name, ...)
• Update location based on device location
• Bulk invitation (invite many people at once)
• See all registered users on map

• Create Firebase Account
• Activate
  • Database
  • Functions
  • Storage
  • Hosting
• Activate Firebase Auth
  • Email/Password
  • Google
  • Facebook
  • Twitter
• Add Firebase to Mappypals project
• Deploy

• Click on anywhere on the map to add/invite a friend
• Hover on a pin/user to see a snippet details of user
• Click on a pin/user to view user profile
• See all registered users on map (keep this in mind while building)

Based on the current design of the app, one thing has remained constant and that is the layout of the app. The sticky navbar on the right and pages on the left. The current layout of the app does not favor the new design whereby the navbar overlaps the pages as illustrated below:

Therefore, to maintain layout consistency throughout the app, we need to refactor our codebase to embrace the new design.

Suggestions:
Have a layout component that passes children as props. This component would act as a wrapper for the entire application. In it we'd have the <navbar /> and <pages /> components. Something like this:

<Layout className= 'layout'>
   <Navbar/>
   <Main />
</Layout>

The layout could be styled in this form:

.layout {
   display: grid;
   grid-template-columns: auto 300px;
}

These are just suggestions, there are definitely better ways to solve this problem so use the best possible solution.

It is important to note that: The <navbar /> should be sticky and <pages /> should be scrollable.

you can check out react-sticky, it could be of use to us.

• Users can update details such as Name, lastName, profile picture

• Users can add Interests

  • User can’t add same interest more than once
  • Interest is predefined
  • User chooses interest from a drop-down list

• Search for users based on Location
• Search for user based on Interests
• On clicking Enter, the map should move according to search results