Back to projects
Eccommerce website

Eccommerce website

Gerardo Nastri / July 4, 2024

This website is a personal blog focused on web development, design and related technologies. It features recent articles on topics such as Supabase, Astro, Kubernetes, React Server Components and minimalism in design.

Features

  • Advanced Search Functionality: The blog offers a dynamic search bar, enabling users to quickly find articles based on keywords or topics of interest, enhancing the navigation experience.
  • Modern and Responsive Design: The site features a sleek, minimalist, and fully responsive design that adapts seamlessly to different devices, ensuring a consistent user experience across desktops, tablets, and mobile devices.
  • Engaging Animations: Subtle animations and transitions provide a polished and interactive feel, improving user engagement while browsing through content.
  • Categorized Content Organization: Articles are grouped into categories such as Front-end, Back-end, DevOps, and UX/UI, allowing users to explore content tailored to their specific interests.
  • MDX Articles with Contentful Integration: Articles leverage MDX (Markdown with React components) for rich interactivity, combined with content fetched dynamically from Contentful, ensuring that articles are enriched with structured, reusable, and contextual data.

Technologies

  • NextJs: A React framework for building static and dynamic websites.
  • Vercel: A cloud platform for static sites and serverless functions.
  • Tailwind CSS: A utility-first CSS framework packed with classes
  • Framer Motion: A tool for animations
  • Contentful: A headless content management system (CMS)
  • Shadcn/UI: A component distribution system

Getting Started

To get started with this project, you can clone the repository and install the dependencies:

git clone https://github.com/gerardonastri/next-15-blog.git
cd next-15-blog
npm install

Once the dependencies are installed, you can run the development server:

npm run start

The development server will start at http://localhost:3000.

Deployment

To deploy this project, you can use Vercel. You can link your GitHub repository to Vercel and deploy the project with a single click.

Conclusion

This ecommerce is a great example of how you can build a full-stack application with NextJs and Contenful.