A modern, high-performance blog built with Next.js, leveraging MDX for content, PWA capabilities, and a rich ecosystem of libraries including Framer Motion, KaTeX, and more. This project is designed for scalability, maintainability, and an excellent developer experience.
- Overview
- Live Application
- Features
- Project Structure
- Prerequisites
- Getting Started
- Available Scripts
- Dependencies
- Dev Dependencies
- Docker & Dev Container Configuration
- Contributing
- License
- Further Reading
This repository hosts a Next.js-based blog that uses MDX to write rich, interactive content. The app combines server-side rendering, static site generation, and client-side rendering to deliver fast and SEO-friendly pages. It also includes modern features such as PWA support, image optimization, and seamless animations using Framer Motion.
The blog covers a wide range of topics in computer science and software engineering, providing educational content, tutorials, and insights for developers of all levels. The content is written in MDX, allowing for a mix of Markdown and React components to create engaging posts. Additionally, this architecture also allows for easy addition or modification of content without compromising performance or modifying any code.
To add more content, we can simply create new MDX files in the content directory, following the existing structure. The blog is designed to be scalable, maintainable, and extensible, making it a great platform for sharing knowledge and insights within the tech community.
Feel free to contribute your own articles, improve the existing content, or customize the blog to suit your needs. Let's build a vibrant community around computer science and software engineering! Refer to the Contributing section for guidelines on how to contribute to this project.
The blog is deployed on Vercel and can be accessed at https://devverse-swe.vercel.app/.
The backup deployment is available on Netlify at https://devverse-swe.netlify.app.
Feel free to explore the content and features of the blog! 🚀
- Next.js Framework: Built with Next.js for robust SSR, SSG, and CSR.
- MDX Integration: Write content in MDX, mixing Markdown with React components.
- Progressive Web App (PWA): Enhanced offline capabilities with next-pwa.
- Animation: Smooth animations with Framer Motion.
- Mathematics Rendering: Render mathematical equations using KaTeX, rehype-katex, and remark-math.
- Code Splitting & Performance: Automatic code splitting and image optimization for improved performance.
- Containerized Development: Docker and Docker Compose configurations for an isolated development environment.
- Dev Containers: VS Code Dev Container configuration for a seamless setup.
devverse-cs-swe-blog/
├── app/
│ ├── globals.css # Global CSS styles
│ ├── page.tsx # Main page component
│ ├── layout.tsx # Layout component
│ └── topics/[slug]
│ └── page.tsx # Dynamic topic pages
├── components/ # Reusable React components
│ ├── ArticleList.tsx # Component for displaying a list of articles
│ ├── Footer.tsx # Footer component
│ ├── HomePageContent.tsx # Home page content component
│ ├── Navbar.tsx # Navbar component
│ ├── InteractiveCard.tsx # Interactive card component
│ ├── Loading.tsx # Loading spinner component
│ ├── MdxLayout.tsx # Layout component for MDX content
│ └── RouteProgress.tsx # Route progress bar component
├── public/ # Static files (images, fonts, etc.)
├── content/ # MDX content for blog posts
├── .devcontainer/ # VS Code Dev Container configuration
│ └── devcontainer.json
├── images/ # Images for README
├── Dockerfile # Docker image configuration for the app
├── docker-compose.yml # Docker Compose file for containerized development
├── package.json # Project manifest with scripts and dependencies
├── tsconfig.json # TypeScript configuration
├── next.config.js # Next.js configuration
├── mdx-components.tsx # Custom MDX components
├── tailwind.config.js # Tailwind CSS configuration
└── README.md # This documentation file
- Node.js (v14 or higher recommended)
- npm
- Docker & Docker Compose (for containerized development)
- Visual Studio Code (optional, for using Dev Containers)
-
Clone the Repository:
git clone https://github.com/hoangsonww/DevVerse-SWE-Blog.git cd DevVerse-CS-SWE-Blog -
Install Dependencies:
npm install
-
Run the Development Server:
npm run dev
Open http://localhost:3000 in your browser to view the app.
A docker-compose.yml file is provided to facilitate containerized development.
-
Build and Start the Container:
docker-compose up
-
Access the App:
The application will be available at http://localhost:3000.
If you use Visual Studio Code, you can open the project in a Dev Container:
- Install the Remote - Containers extension.
- Open the Command Palette (
Ctrl+Shift+PorCmd+Shift+Pon macOS) and select "Remote-Containers: Reopen in Container". - VS Code will build and attach to the container using the configuration in
.devcontainer/devcontainer.json.
-
npm run dev
Runs the Next.js development server. -
npm run build
Builds the application for production. -
npm run start
Starts the production server.
- Next.js: The core framework powering the application.
- React & React-Dom: Essential libraries for building user interfaces.
- @mdx-js/loader & @mdx-js/react: Tools for integrating MDX content with React.
- next-pwa: Adds progressive web app capabilities.
- Framer Motion: Provides smooth animations.
- KaTeX, rehype-katex, remark-math: Enable mathematical rendering within MDX content.
- nprogress: A progress bar for route transitions.
- remark-gfm: Adds support for GitHub Flavored Markdown.
- TypeScript & @types/node: Enable static typing for robust development.
- @types/nprogress: Provides type definitions for nprogress.
FROM node:18-bullseye-slim
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]version: '3.8'
services:
app:
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
volumes:
- .:/app:cached
command: npm run dev
environment:
- NODE_ENV=development{
"name": "devverse-cs-swe-blog",
"build": {
"dockerfile": "Dockerfile",
"context": ".."
},
"settings": {
"terminal.integrated.shell.linux": "/bin/bash",
"editor.formatOnSave": true
},
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"ms-vscode.vscode-typescript-next",
"eamodio.gitlens"
],
"postCreateCommand": "npm install",
"remoteUser": "node",
"forwardPorts": [3000]
}Contributions are welcome! Please follow these guidelines when contributing:
- Fork the repository and create your feature branch (
git checkout -b feature/your-feature). - Commit your changes (
git commit -m 'Add some feature'). - Push your branch (
git push origin feature/your-feature). - Open a pull request with a detailed description of your changes.
Ensure that your code adheres to our coding standards and includes tests where applicable.
To add more MDX content, create a new .mdx file in the content directory. You can use the existing files as a template.
We welcome contributions that expand the content and cover a wide range of topics in computer science and software engineering! I hope this project can serve as a platform for sharing knowledge and insights within the tech community.
This project is licensed under the MIT License.
- Next.js Documentation: https://nextjs.org/docs
- MDX Documentation: https://mdxjs.com/
- Next.js Blog: Explore real-world examples and case studies on the official Next.js blog.
- Docker Documentation: https://docs.docker.com/
- VS Code Dev Containers: https://code.visualstudio.com/docs/remote/containers
Reach out to me at @hoangsonww for any questions or feedback. I'd love to hear from you!
This project is powered by Next.js and serves as a testament to the framework's capabilities in building modern, scalable, and high-performance web applications. Happy coding! 🚀