Back to all posts

Technologies Used in My Next.js Portfolio Project

2024-03-15

Web Development
In this blog post, I'll provide an overview of the key technologies and libraries used to build my Next.js portfolio website, including the MongoDB-powered comment section.

Core Technologies

  • Next.js (v15.0.1): The React framework for building server-side rendered and statically generated web applications.
  • React (v18.3.1): The foundation of our front-end, used for building the user interface.
  • TypeScript: Adds static typing to JavaScript, enhancing code quality and developer experience.
  • MongoDB (v6.10.0): The NoSQL database used to store and retrieve comments for the blog.

UI and Styling

  • shadcn/ui components: Utilizes Radix UI primitives for accessible and customizable UI components.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • Framer Motion: Used for creating smooth animations in React applications.
  • Lucide React: Provides a set of customizable icons for the UI.

3D Graphics and Animations

  • Three.js: A powerful 3D graphics library for creating and displaying 3D content in the browser.
  • @react-three/fiber and @react-three/drei: React components for Three.js scenes, making it easier to integrate 3D graphics into our React application.

Additional Libraries and Tools

  • next-themes: Enables easy implementation of dark mode and theme switching.
  • date-fns: A modern JavaScript date utility library, used for formatting dates in the blog and comments.
  • Prism.js: A syntax highlighting library, used for code snippets in blog posts.
  • dotenv: Loads environment variables from a .env file, useful for managing configuration and secrets.
  • ESLint and related configs: Linting tools to identify and fix problems in the JavaScript/TypeScript code.
  • PostCSS: A tool for transforming CSS with JavaScript, used in conjunction with Tailwind CSS.

Conclusion

By leveraging these technologies, I've created a modern, performant web application with server-side rendering, static generation capabilities, and a robust front-end. The integration of MongoDB for the comment section allows for dynamic user interactions, while libraries like Three.js and Framer Motion enable advanced graphics and animations.
This tech stack provides a solid foundation for building and scaling web applications, offering a great balance between performance, developer experience, and user interactivity.