The Idea
The main aim of this project was to try out hosting on AWS. The second thing I wanted to explore was how storing, retrieving, and displaying ordered component-based objects would work in the case of a relational database. To test both of these aspects, I decided to build a simple blog MVC application that retrieves blog posts from the database and displays them on the web.
How does it work?
An important requirement of the application was that the order of blog post body components should remain fixed and behave differently based on component type. The blog post body is separated into different components, each of which has a different type: heading1, heading2, link, paragraph, reference, and so on. This allows each component to be differentiated from others and styled or functionalized accordingly in React. Components are stored in the database as blocks. Each component, along with its type, is stored in its corresponding table. The table that stores all the posts simply has a list of all the components of the post and maintains them in a fixed order that can be easily changed if needed.
Below is a picture of how post body components can be styled differently based on their component type. Note that the article below is generated by AI! The blog post starts with its category, which is followed by the post title and an introductory paragraph. The next component is a post heading, followed by another paragraph that has two components nested inside it: a hyperlink and a reference. These components function differently than the rest, opening a link and scrolling down the page to the full reference respectively.
Check Out The Project
If you are interested in exploring the project firsthand, you can visit the hosted web application here or by checking out the GitHub page