This blog web app (click here to view) provides the basics one would expect to find in a blog, such as a page to view all posts and a way for credentialed users to make new posts. The below image shows the blog home page.
The app has complete CRUD functionality. React Router is used for routing to the Create, Read, and Update pages from the home page. (There is no Delete page since this is handled as an action instead.) The below image shows the view for creating or updating a post.
User authentication and data storage is handled via integration with Firebase. Data relating to a post is not retrieved from state local to the client; rather, it is continuously retrieved from the Firebase Realtime Database. For a view of Firebase's NoSQL database, see the below image.
One current limitation is that new users cannot be created directly from the web app. Instead, they must be created through Firebase's website. Once created, a user is able to login to the blog app and create new posts or edit/delete any existing posts.
Throughout this project, hooks are utilized, which allow functions that update state to be passed as props from parent to child components. The strict usage of React functions containing hooks over React classes is consistent with the modern paradigm of the React developer community. The hooks used include useState, useContext, and useRef.
The UI/UX is simple yet clean. The header, organization of blog posts, and selection of aesthetic fonts allow for streamlined usage of the app. A notification message appears for a little more than a second every time a new blog post is created or updated. When a user selects the delete button on a post, a confirmation message appears that the user must acknowledge before the post is actually deleted.
Netlify is utilized for hosting the app's production version, including a Live URL for viewing in a web browser.
To view screenshots of what a credentialed user is able to see and perform in the app, see the Screenshots folder. If you would like temporary user access to experience full functionality, please contact the author via LinkedIn or submit an inquiry from their Portfolio.