epw80 / facebook-clone Goto Github PK

Add resolvers and type folders to project

Create model folder inside of server root. Add files:

• post.js

• user.js

Add google API for user's login credentials.

As of now we have our image upload components running inside of the our profile.js file. It would make much more sense to have that code in a seperate "FileUpload.js" component and we import that component into our app.js file.

Users will be able to update passwords.

in order to update images in real time, we need a web api that will handle all the images in a cloud storage, where our application will then grab that image data and display it on the site

Create a separate folder for graphQL components:

• fragments.js
• mutations.js
• queries.js
• subscriptions.js

We need to have this application deployed successfully to heroku; just because it works on our local machine doesnt mean it works everywhere else.

Add forms folder to:

• client/src/components

With files:

• AuthForm.js
• UserProfile.js

A user friendly interface isn't really user friendly without a proper navigation bar and search button right? Lets import Nav using react in our App.js from our component Nav.js; and lets build this navigation tab to include the current user, login and register tabs, as well as a search bar and button, we can worry about styling that puppy later

In this step we see the heroku build fails because our files exceed the limit size on heroku; were going to compress the client side in a way where heroku can still understand it; and deploy it on the cloud application platform.

Set up a new user, their password, and database with collections for Mongo

The Pagination library can be used directly for paging functionality for any list of items. The required props here are an array of items of the list to be rendered and a callback function onChange which informs the parent component about the page change.

Lets implement a working search bar component into our application, with a
"const search = () =>
{ const [query, setQuery] = useState('')"
and return the target value in a form, we want to be able to useHistory so it can push the history into the search query