React Hoot Front-End
About
In this module, students will build the user interface for Hoot, a modern full-stack blogging application using the MERN stack (MongoDB, Express.js, React.js, and Node.js). They will learn how to display and manage posts, create forms for posts and comments, and develop functionality for updating and deleting content.
Students will also learn to apply CSS Modules for styling and building reusable components such as icons and metadata displays. By the end of this module, students will have crafted a visually appealing and interactive front-end for Hoot, completing the second part of the full-stack application development.
Content
| Lesson | Skills |
|---|---|
| Setup | Setting up the development environment. |
| Setting the Stage | Reviewing this application’s required features and high-level architecture. |
Build the HootList component |
Displaying a list of hoots. |
Build the HootDetails component |
Displaying hoot details. |
| Create a Hoot | Building a component to create hoots. |
| Create a Comment | Building a component to create comments. |
| Delete a Hoot | Building the functionality to delete a hoot. |
| Update a Hoot | Building the functionality to update a hoot. |
Level Up content
| Lesson | Skills |
|---|---|
| Update and Delete Comments | Building the functionality to update and delete comments. |
| Add CSS Modules | Applying CSS Modules to style an application. |
Style the HootList Component |
Applying CSS Modules to a list component. |
Style the HootDetails Component |
Applying CSS Modules to a details component. |
| Style the Form Components | Applying CSS Modules to a form component. |
| Style the Sign-Up and Sign-In Pages | Applying styles to the sign-up and sign-in pages. |
| Build a Loading Screen | Building a reusable loading component. |
| Build a Landing Page | Building a landing page component. |
Build a Reusable Icon Component |
Building a reusable icon component. |
Build a Reusable Metadata Component |
Building a reusable metadata component. |
References
Starter code
This module requires an existing Express API with JWT Authentication set up.
This module also uses an existing template equip with forms for JWT authentication in a React application.