Skeleton frontend

In order to fully implement the skeleton application features discussed in the Feature breakdown section of Chapter 3, Building a Backend with MongoDB, Express, and Node, we will add the following user interface components to our base application:

• Home page: A view that renders at the root URL to welcome users to the web application
• User list page: A view that fetches and shows a list of all the users in the database, and also links to inpidual user profiles
• Sign-up page: A view with a form for user sign-up, allowing new users to create a user account and redirecting them to a sign in page when successfully created
• Sign-in page: A view with a sign-in form that allows existing users to sign in so they have access to protected views and actions
• Profile page: A component that fetches and displays an inpidual user's information, is only accessible by signed-in users, and also contains edit and delete options, which are visible only if the signed-in user is looking at their own profile
• Edit profile page: A form that fetches the user's information in the form, allows them to edit the information, and is accessible only if the logged-in user is trying to edit their own profile
• Delete user component: An option that allows the signed-in user to delete only their own profile after confirming their intent
• Menu navigation bar: A component that lists all the available and relevant views to the user, and also helps to indicate the user's current location in the application

The following React component tree diagram shows all the React components we will develop to build out the views for this base application:

MainRouter will be the root React component that contains all the other custom React views in the application. Home, Signup, Signin, Users, Profile, and EditProfile will render at inpidual routes declared with React Router, whereas the Menu component will render across all these views, and DeleteUser will be a part of the Profile view.

The code discussed in this chapter, and for the complete skeleton, is available on GitHub in the repository at github.com/shamahoque/mern-skeleton. You can clone this code and run the application as you go through the code explanations in the rest of this chapter.