{"id":19671745,"url":"https://github.com/ressuman/next-full-blog-posts-project","last_synced_at":"2026-04-10T02:56:14.799Z","repository":{"id":257269624,"uuid":"857723051","full_name":"ressuman/Next-Full-Blog-Posts-Project","owner":"ressuman","description":"A full-featured blog application built with Next.js 14, featuring dynamic routing, markdown support, and a responsive UI. Users can view and manage blog posts, navigate through a user-friendly interface, and send messages via a contact form. It demonstrates modern web development practices, including server-side rendering and reusable components.","archived":false,"fork":false,"pushed_at":"2024-09-30T15:02:05.000Z","size":14566,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-16T08:07:27.210Z","etag":null,"topics":["css-modules","fetch-api","gray-matter","html-css-javascript","markdown-to-html","mongodb","nextjs","nodejs","reactjs"],"latest_commit_sha":null,"homepage":"https://ressuman-next-full-blog-posts-app.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ressuman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-15T12:45:41.000Z","updated_at":"2024-10-14T08:40:41.000Z","dependencies_parsed_at":"2024-09-15T16:58:39.337Z","dependency_job_id":"d499269d-f031-496b-9857-83c55c42f560","html_url":"https://github.com/ressuman/Next-Full-Blog-Posts-Project","commit_stats":null,"previous_names":["ressuman/next-full-blog-posts-project"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ressuman/Next-Full-Blog-Posts-Project","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ressuman%2FNext-Full-Blog-Posts-Project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ressuman%2FNext-Full-Blog-Posts-Project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ressuman%2FNext-Full-Blog-Posts-Project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ressuman%2FNext-Full-Blog-Posts-Project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ressuman","download_url":"https://codeload.github.com/ressuman/Next-Full-Blog-Posts-Project/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ressuman%2FNext-Full-Blog-Posts-Project/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273899359,"owners_count":25187734,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-modules","fetch-api","gray-matter","html-css-javascript","markdown-to-html","mongodb","nextjs","nodejs","reactjs"],"created_at":"2024-11-11T17:09:39.103Z","updated_at":"2026-04-10T02:56:09.765Z","avatar_url":"https://github.com/ressuman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next Full Blog Posts\n\n## Overview\n\n**Next Full Blog Posts** is a full-featured blog application built with **Next.js 14**. It supports creating, displaying, and managing blog posts, including markdown support for formatting content. Users can view featured posts, navigate through all available posts, and access individual post details. The application also features a contact form integrated with a backend API for sending messages, along with other utility features like date formatting and image handling.\n\n---\n\n## Features\n\n- **Homepage** with featured blog posts and a hero section.\n- **All Posts** page displaying the list of available blog posts.\n- **Detailed Post View** for individual blog articles.\n- **Markdown Support** for formatting posts.\n- **Contact Form** for user interaction.\n- **API Integration** for handling contact form submissions.\n- **Optimized for Performance** using modern frontend practices.\n- **Reusable UI Components** for consistent design.\n\n---\n\n## Tech Stack\n\n- **Next.js**: Server-side rendering, API routes, and dynamic routing.\n- **React**: UI components and hooks.\n- **Markdown**: Blog content in markdown format.\n- **CSS Modules**: Scoped styling for components.\n- **SQLite**: For persisting data (dummy posts in this case).\n- **Cloudinary**: (optional) Image handling for post thumbnails.\n\n---\n\n## Folder Structure\n\nHere’s a breakdown of the project structure:\n\n```\n📦 components\n ┣ 📂contact\n ┃ ┗ 📂contact-form\n ┃ ┃ ┣ 📜contact-form.js      # Contact form component\n ┃ ┃ ┗ 📜contact-form.module.css # Styles for the contact form\n ┣ 📂ui\n ┃ ┗ 📜notification.js        # Notification for form submission\n ┃ ┗ 📜notification.module.css # Styles for the notification\n ┣ 📂home-page\n ┃ ┣ 📂featured-posts\n ┃ ┃ ┗ 📜featured-posts.js     # Display featured posts\n ┃ ┃ ┗ 📜featured-posts.module.css # Styles for featured posts\n ┃ ┗ 📂hero\n ┃ ┃ ┗ 📜hero.js              # Hero section of the homepage\n ┃ ┃ ┗ 📜hero.module.css      # Styles for the hero section\n ┣ 📂layout\n ┃ ┗ 📂main-navigation\n ┃ ┃ ┣ 📜main-navigation.js   # Main navigation bar\n ┃ ┃ ┗ 📜main-navigation.module.css # Styles for navigation\n ┗ 📂posts\n   ┣ 📂all-posts\n   ┃ ┣ 📜all-posts.js         # Display all blog posts\n   ┃ ┗ 📜all-posts.module.css # Styles for all posts page\n   ┣ 📂post-detail\n   ┃ ┣ 📂post-content\n   ┃ ┃ ┣ 📜post-content.js    # Detailed post content\n   ┃ ┃ ┗ 📜post-content.module.css # Styles for post content\n   ┃ ┣ 📂post-header\n   ┃ ┃ ┣ 📜post-header.js     # Post header (title and image)\n   ┃ ┃ ┗ 📜post-header.module.css # Styles for post header\n   ┗ 📂posts-grid\n     ┣ 📜posts-grid.js        # Grid layout for displaying posts\n     ┗ 📜posts-grid.module.css # Styles for the grid layout\n```\n\n### Other Key Directories:\n\n- **data**: Contains dummy blog data.\n- **helpers**: Utility functions to handle database connections, contact form validation, etc.\n- **lib**: Markdown blog posts stored here, along with content for each post.\n- **pages**: Next.js pages for blog listing, blog detail, contact form, and API route for form submission.\n- **public**: Static assets like images for posts.\n- **styles**: Global styles used throughout the project.\n- **utils**: Utility functions for date formatting, image handling, and markdown rendering.\n\n---\n\n## Installation\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/your-username/next-full-blog-posts.git\n   ```\n\n2. Install the dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Set up the environment variables:\n\n   Create an `.env.local` file in the root of your project and add the following:\n\n   ```bash\n   DATABASE_URL=your-database-url\n   NEXT_PUBLIC_API_URL=your-api-url\n   ```\n\n4. Run the development server:\n\n   ```bash\n   npm run dev\n   ```\n\n5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.\n\n---\n\n## Features in Detail\n\n### 1. Homepage\n\n- Displays a hero section with a welcome message.\n- Shows featured posts from the blog.\n\n### 2. Blog Posts\n\n- Displays all posts with their titles, dates, and thumbnails.\n- Supports markdown for content formatting.\n\n### 3. Individual Post View\n\n- Each post can be opened to see full content, images, and post details.\n- Includes the post header and main content rendered with proper styling.\n\n### 4. Contact Form\n\n- Users can send messages via a contact form, with real-time validation.\n- Submitted messages are handled by the API route and stored in a database.\n\n---\n\n## API Routes\n\n- **`/api/contact`**: Handles form submissions, validates the data, and sends a notification to the site owner.\n\n---\n\n## Scripts\n\n- `npm run dev`: Run the app in development mode.\n- `npm run build`: Create a production build of the app.\n- `npm start`: Start the production server.\n- `npm run lint`: Run ESLint to check for code issues.\n\n---\n\n## License\n\nThis project is licensed under the MIT License.\n\n---\n\n## Gif\n\nHere is an expected gif of the preview of the App(Blog Posts App)\n\n## ![Blog Posts App gif](./public/next-blog-posts.gif)\n\n---\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fressuman%2Fnext-full-blog-posts-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fressuman%2Fnext-full-blog-posts-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fressuman%2Fnext-full-blog-posts-project/lists"}