Background image
logologo symbol

6 - Growing complexity

CMS system (6-8h)

Description

Understanding CMS Systems

When a web developer delivers a project to a normal person, it is not a good idea to ask them to "just change the code and commit to GitHub when you need to add some content to your page, watch out for conflicts because they are bad, good luck!".

Why We Need CMS Systems

We need some sort of a system for our customers. Those systems are often called CMS systems (Content Management System). Now that you know how to add data to databases and implement authentication, you can even make your own CMS system, and sometimes that is a good way to go to simplify things for the customer. But there are many existing CMS systems out there that take care of these things for you, and that is what we are going to explore in this module.

The Evolution of CMS Systems

There are many such systems. For a long time, WordPress used to rule the world of CMS systems, but now there are many rivals coming up with more modern technology. One of them is Prismic, and that one is widely used in the web industry in Iceland today others that are also used are Dato, Payload and Sanity . This guide is about exploring the power of CMS systems and realize their potential for our web applications.

Topics

General Content Management System topics:
  • Content management application (CMA) .
  • Content delivery application (CDA)
  • Headless CMS
Specific Prismic topics :
  • Slice Machine
  • Custom types
  • Slices

Goals

Knowledge

Know what role a CMS system has in the development of web applications
Understand how headless CMS systems work

Skills

Be able to connect the front-end to a headless CMS system

Idea for return

Project Brief: "EcoBytes" - A Mini Blog on Sustainable Tech

Overview:
EcoBytes is a mini blog platform dedicated to exploring the intersection of technology and sustainability. Its mission is to educate and inspire tech enthusiasts and environmental advocates by highlighting innovative tech solutions that contribute to a sustainable future. The platform will feature articles on sustainable tech trends, green computing, and eco-friendly gadgets.
Objective:
Build a simplistic yet impactful blog using Next.js for the frontend and any of the above mentioned as the headless CMS. This project aims to provide students with practical experience in developing a content-driven website, focusing on content management, website performance, and user engagement.
Key Features:
  1. Homepage: A clean and engaging landing page that displays featured articles, with an emphasis on high-quality images and concise summaries.
  2. Articles Page: A list of all articles sorted by publication date. Each article entry should include a thumbnail, title, summary, and a "Read More" link.
  3. Article Details: Individual pages for each article, showcasing the full content, including text, images, and embedded videos or social media posts.
  4. About Page: A brief page about EcoBytes, its mission, and the importance of sustainable technology.
Technical Requirements:
  • Use Next.js to create a responsive and SEO-friendly blog site.
  • Implement Prismic for content management, designing custom types for articles that include fields for titles, summaries, body content, and images.
  • Ensure the site is accessible and performs well on both desktop and mobile devices.
  • Utilize Next.js's static generation features for fast loading times and improved SEO.
Learning Objectives:
  • Practice integrating a headless CMS (Prismic) with a React-based framework (Next.js) for dynamic web development.
  • Develop skills in creating SEO-friendly web pages with Next.js.
  • Learn to manage and structure content effectively using Prismic.
  • Enhance understanding of responsive design and web performance optimization.
Deliverables:
  • A deployable mini blog site with at least 3 sample articles showcasing different sustainable technologies. (you can use chatGPT to generate text fro the articles)
  • Documentation (in the README.md file) outlining the project structure, development process, and instructions for adding new articles via Prismic.
Timeline:
The project is structured to be completed within three days:
  • Day 1: Setup and initial development. Create the Next.js project, design the website layout, and integrate Prismic.
  • Day 2: Content creation and styling. Define the custom types in Prismic, add sample content, and apply styles to the website.
  • Day 3: Testing, optimization, and presentation preparation. Ensure the site is responsive, performant, and ready for deployment.