{"id":16213839,"url":"https://github.com/solygambas/next-projects","last_synced_at":"2025-04-07T19:12:32.342Z","repository":{"id":46067801,"uuid":"345399190","full_name":"solygambas/next-projects","owner":"solygambas","description":"7 projects to understand Next.js core concepts, using MongoDB, Firebase and NextAuth.js.","archived":false,"fork":false,"pushed_at":"2025-03-24T07:19:50.000Z","size":18718,"stargazers_count":161,"open_issues_count":0,"forks_count":42,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T18:21:13.111Z","etag":null,"topics":["firebase","javascript","mongodb","next","nextauth","nextjs","react","reactjs","shadcn-ui","strapi","strapi-cms","tailwind","tailwindcss","typescript","xstate"],"latest_commit_sha":null,"homepage":"https://next-dagny.vercel.app/","language":"TypeScript","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/solygambas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"solygambas"}},"created_at":"2021-03-07T16:43:29.000Z","updated_at":"2025-03-31T01:23:24.000Z","dependencies_parsed_at":"2024-12-03T19:01:57.431Z","dependency_job_id":"d04ce984-befe-4af3-814e-59fcfb8414ef","html_url":"https://github.com/solygambas/next-projects","commit_stats":{"total_commits":229,"total_committers":2,"mean_commits":114.5,"dds":"0.017467248908296984","last_synced_commit":"4fd2cf0355408f0207513d07b4547cfa0b25d3cc"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Fnext-projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Fnext-projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Fnext-projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solygambas%2Fnext-projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solygambas","download_url":"https://codeload.github.com/solygambas/next-projects/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"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","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":["firebase","javascript","mongodb","next","nextauth","nextjs","react","reactjs","shadcn-ui","strapi","strapi-cms","tailwind","tailwindcss","typescript","xstate"],"created_at":"2024-10-10T11:08:45.315Z","updated_at":"2025-04-07T19:12:32.092Z","avatar_url":"https://github.com/solygambas.png","language":"TypeScript","funding_links":["https://github.com/sponsors/solygambas"],"categories":["Inspirations \u0026 Examples"],"sub_categories":[],"readme":"# Next.js Projects\n\n7 projects to understand Next.js core concepts, using MongoDB, Firebase and NextAuth.js.\n\n| #   | Project                              | Description                                                                                       |\n| --- | ------------------------------------ | ------------------------------------------------------------------------------------------------- |\n| 01  | [**NextEvents**](#nextevents)        | A social networking site using Next.js, MongoDB and Firebase.                                     |\n| 02  | [**Blog**](#blog)                    | A complete app example with a blog using Next.js, MongoDB, Markdown and React Syntax Highlighter. |\n| 03  | [**Dashboard**](#dashboard)          | A very simple dashboard to understand authentication with NextAuth.js.                            |\n| 04  | [**React Meetups**](#reactmeetups)   | Another social networking site to summarize Next.js core concepts.                                |\n| 05  | [**DJ Events**](#djevents)           | A music event website using Strapi CMS as backend.                                                |\n| 06  | [**DevSpace**](#devspace)            | Another blog using Tailwind CSS and Markdown.                                                     |\n| 07  | [**Property Pulse**](#propertypulse) | A property rental website using Tailwind CSS, MongoDB, and TypeScript.                            |\n\n## Get Inspired\n\nCheck out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.\n\n## \u003ca name=\"nextevents\"\u003e\u003c/a\u003e 1) NextEvents\n\nA social networking site using Next.js, MongoDB and Firebase.\n\n[See Demo deployed on Vercel](https://nextevents.vercel.app/)\n\n[See 01-nextevents folder](01-nextevents)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"01-nextevents\"\u003e\n        \u003cimg src=\"01-nextevents/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- working with file-based routing and handling dynamic routes.\n- creating a general layout, adding React components and styling them with CSS modules.\n- displaying events and filtering them by date.\n- adding Static Site Generation (SSG) on the home page.\n- fetching events from Firebase and enabling page pre-rendering for dynamic pages.\n- using Server-Side Rendering (SSR) and client-side data fetching with SWR.\n- adding metadata with Head.\n- customizing the \\_app.js and \\_document.js files.\n- optimizing images with Image.\n- handling comments and signups for the newsletter with API routes.\n- setting up a MongoDB database and getting comments for a specific event.\n- handling errors and displaying user-friendly notifications.\n- deploying on Vercel.\n\n## \u003ca name=\"blog\"\u003e\u003c/a\u003e 2) Blog\n\nA complete app example with a blog using Next.js, MongoDB, Markdown and React Syntax Highlighter.\n\n[See Demo deployed on Vercel](https://next-dagny.vercel.app/)\n\n[See 02-blog folder](02-blog)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"02-blog\"\u003e\n        \u003cimg src=\"02-blog/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- building the home page, creating a general layout and a reusable grid to display the latest posts.\n- reading markdown files and rendering posts as JSX with gray-matter and react-markdown.\n- displaying dynamic post pages and generating paths.\n- optimizing images from markdown with Image.\n- rendering code snippets from markdown and optimizing React Syntax Highlighter bundle size.\n- handling messages sent by users via an API route.\n- storing messages in a database with MongoDB.\n- adding metadata in Head and customizing \\_document.js file.\n- using React portals to show user-friendly notifications.\n- deploying on Vercel.\n\n## \u003ca name=\"dashboard\"\u003e\u003c/a\u003e 3) Dashboard\n\nA very simple dashboard to understand authentication with NextAuth.js.\n\n[See 03-dashboard folder](03-dashboard)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"03-dashboard\"\u003e\n        \u003cimg src=\"03-dashboard/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- adding a user signup API route and sending signup requests from the frontend.\n- hashing passwords with Bcryptjs.\n- working with a custom auth provider in NextAuth.js to log in users.\n- managing active sessions and handling logouts.\n- protecting routes with client-side and server-side page guards.\n- protecting API routes.\n- enabling users to change their passwords.\n\n## \u003ca name=\"reactmeetups\"\u003e\u003c/a\u003e 4) React Meetups\n\nAnother social networking site to summarize Next.js core concepts.\n\n[See 04-reactmeetups folder](04-reactmeetups)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"04-reactmeetups\"\u003e\n        \u003cimg src=\"04-reactmeetups/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- converting a React project into a Next.js app.\n- handling server-side rendering of pages with getStaticProps and getStaticPaths.\n- connecting and querying a MongoDB Database via an API route.\n- getting data from the database for page pre-rendering.\n- working with fallback pages and revalidation to display new meetups without having to rebuild.\n\n## \u003ca name=\"djevents\"\u003e\u003c/a\u003e 5) DJ Events\n\nA music event website using Strapi CMS as backend.\n\n[See Demo deployed on Vercel](https://next-djevents-strapi.vercel.app/)\n\n[See Strapi API deployed on Railway](https://next-projects-production.up.railway.app/events)\n\n[See 05-djevents folder](05-djevents)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"05-djevents\"\u003e\n        \u003cimg src=\"05-djevents/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- creating a Next.js app with a custom layout.\n- handling module aliases with jsconfig.\n- fetching data with API routes, displaying events and event details.\n- setting up Strapi CMS and defining event content type.\n- hosting uploaded images on Cloudinary.\n- connecting to the Strapi API, filtering events, enabling search and pagination.\n- adding, editing and deleting event.\n- creating a slug and displaying user-friendly messages with React Toastify.\n- handling image upload with a modal using React Portal.\n- authenticating users, storing JWT token in server HttpOnly cookie.\n- registering users and creating an auth context.\n- protecting Strapi API routes and customizing user events endpoint.\n- creating a user dashboard and associating events with users.\n- guarding routes to add, edit, delete event and upload image.\n- displaying maps with MapQuest Geocoding API, Mapbox and ReactMapGL.\n- deploying Strapi backend on Railway.\n- deploying frontend on Vercel.\n\n## \u003ca name=\"devspace\"\u003e\u003c/a\u003e 6) DevSpace\n\nAnother blog using Tailwind CSS and Markdown.\n\n[See 06-devspace folder](06-devspace)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"06-devspace\"\u003e\n        \u003cimg src=\"06-devspace/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- setting up [Tailwind CSS](https://tailwindcss.com/docs/guides/nextjs) with Next.js.\n- getting markdown files and parsing frontmatter with gray-matter.\n- displaying single blog posts with Marked.\n- handling pagination and creating category pages.\n- displaying a category sidebar.\n- handling searches with an API route.\n- [caching posts](https://medium.com/@matswainson/building-a-search-component-for-your-next-js-markdown-blog-9e75e0e7d210) on each commit with Husky.\n\n## \u003ca name=\"propertypulse\"\u003e\u003c/a\u003e 7) Property Pulse\n\nA property rental website using Tailwind CSS, MongoDB, and TypeScript.\n\n[See Demo deployed on Vercel](https://property-pulse-gamma.vercel.app/)\n\n[See 07-property-pulse folder](07-property-pulse)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"07-property-pulse\"\u003e\n        \u003cimg src=\"07-property-pulse/screenshot.png\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Features\n\n- setting up the project with Tailwind CSS and TypeScript.\n- implementing a responsive navbar with React Icons.\n- integrating homepage components.\n- crafting a property card component to showcase available properties.\n- designing a custom 404 page and incorporating loading spinners from React Spinners.\n- establishing a MongoDB Atlas database.\n- creating an API route.\n- constructing Property and User models using Mongoose and TypeScript.\n- fetching data in a server component.\n- setting up NextAuth.js with Google OAuth.\n- handling user sessions, with the ability to sign in and out.\n- ensuring that certain routes are accessible only to authenticated users.\n- handling the property submission form.\n- implementing Cloudinary for image storage and optimization.\n- presenting user profile information and listings.\n- offering capabilities for editing and deleting listings.\n- integrating React Toastify for displaying user-friendly notifications.\n- integrating Mapbox to handle geocoding and maps.\n- implementing a bookmarking system that enables users to save their favorite properties.\n- adding social share buttons using react-share.\n- handling searches by location and property type.\n- implementing a messaging system that allows users to send, view, and manage messages, featuring message notifications.\n- managing pagination.\n- displaying images in a lightbox with react-photoswipe-gallery.\n- displaying featured properties.\n\n## Acknowledgments\n\nThis repository is based on 3 courses:\n\n- [Next.js \u0026 React - The Complete Guide](https://www.udemy.com/course/nextjs-react-the-complete-guide/) by Maximilian Schwarzmüller (2021)\n- [Next.js Dev to Deployment](https://www.udemy.com/course/nextjs-dev-to-deployment/) by Brad Traversy (2021)\n- [Next.js From Scratch](https://www.udemy.com/course/nextjs-from-scratch/) by Brad Traversy (2024)\n\n## Show Your Support\n\nIf you find these projects helpful or interesting, please consider starring the repository. It's a simple gesture that helps to boost the visibility of the project and show appreciation for the effort put into creating it. Additionally, if you'd like to support my work further, you can [**become a sponsor**](https://github.com/sponsors/solygambas). Your support is greatly appreciated. Thank you!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolygambas%2Fnext-projects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolygambas%2Fnext-projects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolygambas%2Fnext-projects/lists"}