MDX-powered blog system featuring dynamic pages routing and comments storage.
Tick off requirements as you build to track real-time completion.
Follow this chronological guide to build the project from scratch.
Define Post content schema and configure Contentlayer build pipeline.
import { defineDocumentType, makeSource } from 'contentlayer/source-files';
export const Post = defineDocumentType(() => ({
name: 'Post',
filePathPattern: `**/*.mdx`,
contentType: 'mdx',
fields: {
title: { type: 'string', required: true },
date: { type: 'date', required: true },
summary: { type: 'string', required: true },
},
computedFields: {
slug: { type: 'string', resolve: (post) => post._raw.flattenedPath },
},
}));
export default makeSource({ contentDirPath: 'content', documentTypes: [Post] });Real issues students hit during development and how to troubleshoot them fast.
Continue building your skills with similar projects.
Sleek weather dashboard using OpenWeather API with geolocation, 5-day forecast, and dynamic weather themes.
Personal budget tracker with transaction log, category breakdown, and Chart.js pie charts.
Movie discovery app with TMDB API, trending lists, search, and detail modals.