CSCI5709-Tutorial 4: Front-End Frameworks2 Solved

Learning Outcomes:                                                                                                                                                             

-            Continue to work with the Front-End framework/library of your choice (i.e., the one you have decided to use for your project).

-            Understand how routing and calls are made in the Front-End framework/library you have chosen (i.e., Angular or React).

-            Work individually, and within your group, to create a simple interactive site.

Instructions: 

-            Create a login page with just two fields: Email and password

-            Hit this API on login submit with the provided credentials

POST - https://tutorial4-api.herokuapp.com/api/users/login body data:

{ 

    "email" : "jonsnow@westeros.com", 

    "password" : "G@me0fthr0ne5" } 

Email and password should be accepted from frontend form and sent as a POST request body data.

-            On successful login, user should be redirected to profile listing page and should display a list of users fetched from this API:

GET - https://tutorial4-api.herokuapp.com/api/users/ 

Users should either be displayed as a list or grid items. Display the images from the API as well. 

-            Clicking on any user (item/card) should open a profile detail page. The API for this is:

GET - https://tutorial4-api.herokuapp.com/api/users/:id 

parameter expected is the user id passed as id 

-            Display the user profile details from the API on the profile detail page. 

-            Along with this; implement an input search box on the profile listing page which would filter out users based on Firstname or Lastname. 

To submit your work to Brightspace: 

•          Create a README.txt or README.md file, follow the guidelines specified in the README template provided through Brightspace

•          Rename your README file to match naming conventions specified in the Course Syllabus

(FName_LName_README.txt or FName_LName_README.md).

•          Include the link to your repository and the deployed application.

Note: Your README file should include your name, GIT repository link, deployment link, and any code references. Failure to submit a README file and/or not include a link to your deployed application will result in a grade of 0. 

•          Ensure you submit your work by the due date specified on Brightspace.

To submit your work to GitHub or FCS GitLab: 

•          Push your code to a new git repository and deploy the application to Heroku or any other deployment platform of your choice.

Note: Make sure that the deployment link you include in your README file matches the deployment link for this tutorial. Your GIT repository must be individual and private and be accessible to the Instructor and Teaching Assistants. 

•          Name your repository using the following naming convention: FName-LName-t4-csci#### (All lowercase).

•          Create a README.txt or README.md file, follow the guidelines specified in the README template provided through Brightspace, and naming conventions specified in the Course Syllabus