priscilamonteiro / web-sprint-challenge-advanced-web-applications

Advanced Web Applications Sprint Challenge

Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.

This challenge allows you to practice the concepts and techniques learned over the past sprint and apply them in a concrete project.

This is an individual assessment. All work must be your own. All projects will be submitted to codegrade for automated review. You will also be given feedback by code reviewers the Monday (Wednesday for PT) after challenge submissions. For more information on the review process click here.

You are not allowed to collaborate during the sprint challenge.

Introduction

In this challenge you will create a login page and request a token from the server that you'll use to send all other requests to the server. You will then be able to fetch the article data array, update data, and delete data.

Project Setup

[✅ ] Run npm install to install your dependencies. [✅ ] Run npm start to run your frontend and backend code automatically. [✅ ] Note your backend code will run automatically when your run npm start. There is no need to separately run a server.js file and no means to test the server through postman or the browser. Feel free to ignore any messages related to MSW or mock service workers.

Project Instructions

In this project, you will demonstrate your mastery of these skills by creating a login page and basic CRUD application. You will implement basic security using token authentication and build private routes within the application.

Project Requirements

See reference materials at the bottom of the this document for API Reference Details.

Basic Routing

Build the needed utilities to restrict access to private routes.

• [✅ ] Build a Route component that renders rendering Login.js to the path /.
• [✅ ] Build a Route component that renders rendering Login.js to the path /login.
• [✅ ] Build a Route component that renders rendering View.js to the path /view.
• [✅ ] Build a Route component that renders rendering Logout.js to the path /logout.

Login Authentication

Build a login form to authenticate your users along with all the components and utilities needed to support authentication.

• [✅ ] In Login.js, build all UI and state functionality needed to capture a username and password. On a successful login, redirect user to the View.js component. ___Notes to myself****__******** -(got an undefined token because I did res.token.payload instead of res.token.data and unfortunately I figure it out at 6:40 pm and I fell like I ruined my project because that. At least I learned a lesson.) Just pay more attention to details Priscila! -be extra careful about baseURL, somehow it was getting 3000 instead of 5000. It took me a while to get that. Big mess. I need to understand this better. -I need to dive in react hooks, study more and be more confident.

  • I should practice other examples of CRUD to get at a point that I could do it without even thinking. Understand what back end wants! I should spend more time at Postman to get more practice.

  ---

• [✅ ] Make sure that the input for your username and password includes the id="username" and id="password" attributes. Codegrade autotests will fail without them.

• [✅ ] Make sure that the submit button to your login form includes the id="submit" attribute. Codegrade autotests will fail without them.

• [✅ ] In Login.js, add a p tag that will display an error if one occurs. Add in all state functionality needed to support error display.

• [✅ ] Make sure your error p tag has an id="error" attribute attached. Codegrade autotests will fail without them.

• [✅ ] Construct an http request that retrieves an auth token from the server when the username Lambda and the password School is passed into the request. Complete successful login auth flow and redirect to View.js.

• [✅ ] Display an appropriate error message when login is not successful.

Route Authentication

• [✅ ] Build a PrivateRoute component within the components folder.
• [✅ ] Use the PrivateRoute component to build a route rendering View.js to the path /view.
• [✅ ] Use the PrivateRoute component to build a route rendering Logout.js to the path /logout.

Request Authentication

Complete the requests needed to execute all CRUD functions.

• [✅ ] Build a axiosWithAuth module within the utils folder to create an instance of axios with the authentication header.

• [✅ ] Complete the services/articleService.js module. It should use make an authenticated call to retrieve and return all articles from the server.

• [✅ ] In View.js, when the component mounts, use articleService to make an http request and add all articles to state. Something is wrong and I can't figure it out. And for the others I need that to be working, I will try on Dark but...

• [✅ ] In View.js, complete handleDelete so that a http request is made that deletes the article with the included id. After successfully deleting the article on the api, update local state to reflect these changes.

• [✅ ] editId is passed into the EditForm component. In EditForm.js, make a http request on mount to get the article with the id editId. Save the result in state.

• [✅ ] In View.js, complete handleEdit so that a http request is made that updates the passed in article. Set the editing state to false when the request is complete. After successfully deleting the article on the api, update local state to reflect these changes.

Logout Authentication

Add in the http requests needed to logout of the application.

• [✅ ] In Logout.js, execute a http request to logout on mount. When the request is complete, the user's security token should be removed and the browser should redirect to the login page.

Advanced Testing

Add the following tests within Article.test.js.

• [✅ ] Build a test that shows the Article component, given the correct props, can render without errors.
• [✅ ] Build a test that shows that when a correctly formatted article is passed into the Article component, the correct headline, author, summary and body are displayed.
• [✅ ] The Article component should display "Associated Press" when an author attribute is not avalible. Build a test that verifies that that is true.
• [ ✅] Build a test that show that when the deleteButton is pressed on an Article, the handleDelete functional property is executed.

Add the following tests within View.test.js.

• Build a test that shows the View component can render zero articles without errors. Make sure the mock service called made when View mounts.
• Build a test that shows the View component can render three articles without errors. Make sure the mock service called made when View mounts.

Important Notes:

• You are welcome to create additional files but do not move or rename existing files or folders.
• Do not change your package.json file except to install additional libraries.
• In your solution, it is essential that you follow best practices and produce clean and professional results.
• Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work.
• It is better to submit a challenge that meets MVP than one that attempts too much and does not.

API Documentation

• [POST] * to http://localhost:5000/api/login: returns a the current authenication information of the user. Pass in the following credentials as the body of the request: { username: 'Lambda', password: 'School' } for a successful login.

• [POST] * to http://localhost:5000/api/logout: returns the expired authentication information of the user.

• [GET] to http://localhost:5000/api/articles: returns the all articles currently available. This endpoint can only be accessed by an authenticated user.

• [GET] to http://localhost:5000/api/articles/:id: returns a single article with the id. This endpoint can only be accessed by an authenticated user.

• [POST] to http://localhost:5000/api/articles: creates a article object. Returns all available articles. Pass the article as the body of the request. This endpoint can only be accessed by an authenticated user.

• [PUT] to http://localhost:5000/api/articles/:id: updates the article using the id passed as part of the URL. Returns all available articles. Send the updated article object as the body of the request. This endpoint can only be accessed by an authenticated user.

• [DELETE] to http://localhost:5000/api/articles/:id: removes the article with the id referenced. Returns all available articles. This endpoint can only be accessed by an authenticated user.

Article Data Structure

{
    id: 'aMqwd', //unique article id
    headline: "headline", //title of article
    createdOn: '2021-08-09T18:02:38-04:00
', //timestamp of when article was added
    summary: "summary", //short summary statement of article
      body: ""  //paragraph of article text
}

Submission format

• Submit via Codegrade by commiting and pushing any new changes to your main branch.
• Check Codegrade before the deadline to compare its results against your local tests.
• Check Codegrade on the days following the Sprint Challenge for reviewer feedback. For more information on how to access and read your feedback, check here
• New commits will be evaluated by Codegrade if pushed before the sprint challenge deadline.

Interview Questions

Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. Add your answers to the questions within interview_answers.md file. These will not be counted as a part of your sprint score but will be helpful for preparing you for your endorsement interview, and enhancing overall understanding.

1. Explain what a token is used for.

Jason Web Tokens (JWT)s are strings of cryptic text that has a header and a payload encode and signed wit a secret, which can be stored on the client-side using local storage or session storage. They are useful for example in a case of Authorization, once the user logged in, every request will have the JWT, allowing the user to access routes, services and resources only permitted with that token. It is useful when data needs to be transmitted between parties because JWT can be signed and you can verify that the senders are who they say they are.

2. What steps can you take in your web apps to keep your data secure?

You should handle a proper login flow (send a Post Request & API will send us a JWT); handle authentication with tokens; implementing Authorization flow (define roles); create Protect routes using an authentication token and redirect; call protected endpoints from an API and manage logout.

3. Describe how web servers work.

To explain how web serves work you should understand first what is a "web server" and it can mean:

1. a computer that stores the code for a website:
   Web server hardware is connected to the internet and allows data to be exchanged with other connected devices

2. a program that runs on such a computer. Web server software controls how a user accesses hosted files.

Second you should understand why it is useful:

Web servers are used in web hosting, or the hosting of data for websites and web-based applications -- or web applications.

And finally how it works and you also need to know that there is no magic involved, the text above I got from Alexander S. Gillis, he explained it very well: Web server software is accessed through the domain names of websites and ensures the delivery of the site's content to the requesting user. The software side is also comprised of several components, with at least an HTTP server. The HTTP server is able to understand HTTP and URLs. As hardware, a web server is a computer that stores web server software and other files related to a website, such as HTML documents, images and JavaScript files. When a web browser, like Google Chrome or Firefox, needs a file that's hosted on a web server, the browser will request the file by HTTP. When the request is received by the web server, the HTTP server will accept the request, find the content and send it back to the browser through HTTP. More specifically, when a browser requests a page from a web server, the process will follow a series of steps. First, a person will specify a URL in a web browser's address bar. The web browser will then obtain the IP address of the domain name -- either translating the URL through DNS (Domain Name System) or by searching in its cache. This will bring the browser to a web server. The browser will then request the specific file from the web server by an HTTP request. The web server will respond, sending the browser the requested page, again, through HTTP. If the requested page does not exist or if something goes wrong, the web server will respond with an error message. The browser will then be able to display the webpage.

                   ---//-----//----//-----
                        (HTTP Request)
                        GET/ example.html
                        POST/ todo
      client side           ----->              server
                        (Response)
                        200 ok 404 not found ...
      client side           <-----             server
                        <html><body>

                    ---//-----//----//-----

4. Which HTTP methods can be mapped to the CRUD acronym that we use when interfacing with APIs/Servers.

                 -HTTP Methods-
   

   C -> create ----> POST: Creates a new resource. R -> Read ----> GET: Retrieves a resource. U -> Update ----> PUT: Updates an existing resource. D -> Delete ----> DELETE: Deletes a resource.