Final project submition #13

Hombre2014 · 2022-01-08T11:22:54Z

This is the final project pull request where all the requirements for the project have been implemented as follow:

Description

The JavaScript capstone project is about building your own web application based on an external API. You will select an API that provides data about a topic that you like and then build the webapp around it.

Video presentation

Video link

Live Demo

Live demo link

Requirements

APIs

First, you need to find an API so you can base the development of the webapp around it. The API should allow you to:
- Get a list of items with a unique item id (or generate the unique id).
- For a given item, get detailed information about it.
You will use our Involvement API to record the different user interactions (likes, comments and reservations).

Interfaces

You should build these interfaces:
- The home page.
- The comments popup.
You should follow the layout of the wireframes provided. You should personalize the rest of the design including colors, typographies, spacings, etc.
Home page
- When the page loads, the webapp retrieves data from:
  - The selected API and shows the list of items on screen.
  - The Involvement API to show the item likes.
- Remember that your page should make only 2 requests:
  - One to the base API.
  - And one to the Involvement API.
- When the user clicks on the Like button of an item, the interaction is recorded in the Involvement API and the screen is updated.
- When the user clicks on the "Comments" button, the Comments popup appears.
- Home page header and navigation similar to the given mockup.
- Home page footer similar to the given mockup.
Comments popup
- When the popup loads, the webapp retrieves data from:
  - The selected API and shows details about the selected item.
  - The Involvement API to show the item comments.
- When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.

Counters

Counters We have counters in all the interfaces that show:

The number of items (home).
The number of comments (comments popup).

Technical set up

Set up the repository on GitHub and use Gitflow.
Set up webpack.
Set up a JavaScript testing library (Jest).

Header section feature

…t page

Display Shows

Comments

Comments display

Added Footer on the home page

Styling

Test item counter

Final

Testing movies comments counter

elisha2kyakpo1

Hi team,

Great job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!

To highlight

All the tests are passing✔✔
The project uses async and await ✔✔
The project is almost complete✔✔

Required Changes ♻️

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

You can also consider:

We should make sure the PR description highlights what was done in the project.
Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

elisha2kyakpo1 · 2022-01-08T12:25:27Z

src/comments.js

+
+export function displayComments(itemId) {
+  fetch(`https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/1nLM5MTDuqVGBJxBgtuq/comments?item_id='${itemId}'`)


Let's use ES6 syntax for functions, making use of the arrow functions

elisha2kyakpo1 · 2022-01-08T12:26:35Z

src/comments.js

+
+export function getComments(itemId) {
+  fetch(`https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/1nLM5MTDuqVGBJxBgtuq/comments?item_id='${itemId}'`)


Let's use ES6 syntax for functions, making use of the arrow functions.

elisha2kyakpo1 · 2022-01-08T12:27:00Z

src/commentsCounter.js

+export default function commentsCounter(movieComments) {
+  const commentsCounter = movieComments;


Let's use ES6 syntax for functions, making use of the arrow functions.

Hombre2014 · 2022-01-08T13:09:35Z

Thanks for the review and suggestions.
We have implemented all the changes as follow:
Changes displayComments function from normal to ES6 arrow standard.
Changes getComments function from normal to ES6 arrow standard.
Changes commentsCounter function from normal to ES6 arrow standard.

EricMbouwe

Hi @team,

Status: Approved ✔️

Excellent job on this project. Keep it up 👏
Your project is complete! There is nothing else to say other than... it's time to merge it 💪
Congratulations! 🎉

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

BonkeGcobo and others added 30 commits January 4, 2022 10:36

Set up linters

918db9b

Set up linters

49ab2a0

Add header for the book project

779cee9

Fix js linter errors

63f97f9

Add code review suggestion on the header

502d52c

Change Book to Books

11eacd9

Merge pull request #1 from Hombre2014/Header-section

4adbc15

Header section feature

Fetch book isbn from api

08824b7

Create a callbook function that will call the books presented in fron…

a965827

…t page

Display books on the front-page

21153b3

style the movie header

25c87f6

add movie id

29fa74c

Finish style the interaction section

60fb535

Fix linter errors

3b3e5d4

Add fetchAPI and comments functions

43a627e

change async to promises

bd03a90

Changing asynch function to promises

6523b9b

Fix linter errors

74a7357

Merge pull request #2 from Hombre2014/Display-books

0350252

Display Shows

modify postLike function with hard coded URL

246c0fe

Clean up getMovies function

2b57319

Modal popup finished

e6a3279

Merge pull request #4 from Hombre2014/comments

936566b

Comments

Function display comments added

4b223a2

Add comments counter function

9b46ac6

Fix displaying comments on the modal

35ac675

Implement comments counter

d871e1b

Implement comments counter after posting a new comment

aecea26

Fix some of the syntax and clean up the code

9d25317

Merge pull request #6 from Hombre2014/comments-display

ade3dc7

Comments display

BonkeGcobo and others added 24 commits January 7, 2022 21:43

Add footer

cba9c7f

Fix css lint errors

af8b62b

update footer

f1efbce

Add some styling and movies counter

8c9a06f

Adding link to footer

cc3c472

fix css linters

aaa4e8f

Final touch ups

080d08c

Merge pull request #8 from Hombre2014/Footer

898ec1d

Added Footer on the home page

Merge pull request #9 from Hombre2014/styling

32b805f

Styling

Test item counter

20df1fd

CSS for mobile added and README file updated

118bc46

fix linter errors

d87335c

Edit the README file

c58a6dc

Add mocks to item counter test

5f2d768

Fix lint errors

8cd5f35

fix lint errors

902e029

fix linter errors

7ae0af2

Merge pull request #10 from Hombre2014/itemCounter-test

4a258a1

Test item counter

Fix linter errors

d163ddd

Merge pull request #11 from Hombre2014/final

8531b20

Final

Testing movies comments counter

2d2af46

Merge pull request #12 from Hombre2014/test-comments

236f7ab

Testing movies comments counter

Deploying live demo setup

4243119

Add a video presentation link

8ed3989

elisha2kyakpo1 suggested changes Jan 8, 2022

View reviewed changes

Convert normal functions to arrow functions

8daf54f

github-pages bot temporarily deployed to github-pages January 8, 2022 13:06 Inactive

EricMbouwe approved these changes Jan 8, 2022

View reviewed changes

BonkeGcobo merged commit 6bb4cff into main Jan 8, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Final project submition #13

Final project submition #13

Hombre2014 commented Jan 8, 2022

elisha2kyakpo1 left a comment

elisha2kyakpo1 Jan 8, 2022

elisha2kyakpo1 Jan 8, 2022

elisha2kyakpo1 Jan 8, 2022

Hombre2014 commented Jan 8, 2022

EricMbouwe left a comment


		export function displayComments(itemId) {
		fetch(`https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/1nLM5MTDuqVGBJxBgtuq/comments?item_id='${itemId}'`)


		export function getComments(itemId) {
		fetch(`https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/1nLM5MTDuqVGBJxBgtuq/comments?item_id='${itemId}'`)

		export default function commentsCounter(movieComments) {
		const commentsCounter = movieComments;

Final project submition #13

Final project submition #13

Conversation

Hombre2014 commented Jan 8, 2022

Description

Video presentation

Live Demo

Requirements

APIs

Interfaces

Counters

Technical set up

elisha2kyakpo1 left a comment

Choose a reason for hiding this comment

To highlight

Required Changes ♻️

Optional suggestions

elisha2kyakpo1 Jan 8, 2022

Choose a reason for hiding this comment

elisha2kyakpo1 Jan 8, 2022

Choose a reason for hiding this comment

elisha2kyakpo1 Jan 8, 2022

Choose a reason for hiding this comment

Hombre2014 commented Jan 8, 2022

EricMbouwe left a comment

Choose a reason for hiding this comment

Hi @team,

Status: Approved ✔️